You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Overlay.js 4.4 KiB

3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  8. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  9. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  10. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  11. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  12. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  13. var _createClass2 = require('babel-runtime/helpers/createClass');
  14. var _createClass3 = _interopRequireDefault(_createClass2);
  15. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  16. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  17. var _inherits2 = require('babel-runtime/helpers/inherits');
  18. var _inherits3 = _interopRequireDefault(_inherits2);
  19. var _simpleAssign = require('simple-assign');
  20. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  21. var _react = require('react');
  22. var _react2 = _interopRequireDefault(_react);
  23. var _propTypes = require('prop-types');
  24. var _propTypes2 = _interopRequireDefault(_propTypes);
  25. var _transitions = require('../styles/transitions');
  26. var _transitions2 = _interopRequireDefault(_transitions);
  27. var _AutoLockScrolling = require('./AutoLockScrolling');
  28. var _AutoLockScrolling2 = _interopRequireDefault(_AutoLockScrolling);
  29. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  30. function getStyles(props, context) {
  31. var overlay = context.muiTheme.overlay;
  32. var style = {
  33. root: {
  34. position: 'fixed',
  35. height: '100%',
  36. width: '100%',
  37. top: 0,
  38. left: '-100%',
  39. opacity: 0,
  40. backgroundColor: overlay.backgroundColor,
  41. WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', // Remove mobile color flashing (deprecated)
  42. // Two ways to promote overlay to its own render layer
  43. willChange: 'opacity',
  44. transform: 'translateZ(0)',
  45. transition: props.transitionEnabled && _transitions2.default.easeOut('0ms', 'left', '400ms') + ', ' + _transitions2.default.easeOut('400ms', 'opacity')
  46. }
  47. };
  48. if (props.show) {
  49. (0, _simpleAssign2.default)(style.root, {
  50. left: 0,
  51. opacity: 1,
  52. transition: _transitions2.default.easeOut('0ms', 'left') + ', ' + _transitions2.default.easeOut('400ms', 'opacity')
  53. });
  54. }
  55. return style;
  56. }
  57. var Overlay = function (_Component) {
  58. (0, _inherits3.default)(Overlay, _Component);
  59. function Overlay() {
  60. (0, _classCallCheck3.default)(this, Overlay);
  61. return (0, _possibleConstructorReturn3.default)(this, (Overlay.__proto__ || (0, _getPrototypeOf2.default)(Overlay)).apply(this, arguments));
  62. }
  63. (0, _createClass3.default)(Overlay, [{
  64. key: 'setOpacity',
  65. value: function setOpacity(opacity) {
  66. this.refs.overlay.style.opacity = opacity;
  67. }
  68. }, {
  69. key: 'render',
  70. value: function render() {
  71. var _props = this.props,
  72. autoLockScrolling = _props.autoLockScrolling,
  73. show = _props.show,
  74. style = _props.style,
  75. transitionEnabled = _props.transitionEnabled,
  76. other = (0, _objectWithoutProperties3.default)(_props, ['autoLockScrolling', 'show', 'style', 'transitionEnabled']);
  77. var prepareStyles = this.context.muiTheme.prepareStyles;
  78. var styles = getStyles(this.props, this.context);
  79. return _react2.default.createElement(
  80. 'div',
  81. (0, _extends3.default)({}, other, { ref: 'overlay', style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }),
  82. autoLockScrolling && _react2.default.createElement(_AutoLockScrolling2.default, { lock: show })
  83. );
  84. }
  85. }]);
  86. return Overlay;
  87. }(_react.Component);
  88. Overlay.defaultProps = {
  89. autoLockScrolling: true,
  90. style: {},
  91. transitionEnabled: true
  92. };
  93. Overlay.contextTypes = {
  94. muiTheme: _propTypes2.default.object.isRequired
  95. };
  96. Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
  97. autoLockScrolling: _propTypes2.default.bool,
  98. show: _propTypes2.default.bool.isRequired,
  99. /**
  100. * Override the inline-styles of the root element.
  101. */
  102. style: _propTypes2.default.object,
  103. transitionEnabled: _propTypes2.default.bool
  104. } : {};
  105. exports.default = Overlay;