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.

PopoverAnimationVertical.js 4.3 KiB

3 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  6. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  7. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  8. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  9. var _createClass2 = require('babel-runtime/helpers/createClass');
  10. var _createClass3 = _interopRequireDefault(_createClass2);
  11. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  12. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  13. var _inherits2 = require('babel-runtime/helpers/inherits');
  14. var _inherits3 = _interopRequireDefault(_inherits2);
  15. var _simpleAssign = require('simple-assign');
  16. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  17. var _react = require('react');
  18. var _react2 = _interopRequireDefault(_react);
  19. var _propTypes = require('prop-types');
  20. var _propTypes2 = _interopRequireDefault(_propTypes);
  21. var _Paper = require('../Paper');
  22. var _Paper2 = _interopRequireDefault(_Paper);
  23. var _transitions = require('../styles/transitions');
  24. var _transitions2 = _interopRequireDefault(_transitions);
  25. var _propTypes3 = require('../utils/propTypes');
  26. var _propTypes4 = _interopRequireDefault(_propTypes3);
  27. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  28. function getStyles(props, context, state) {
  29. var targetOrigin = props.targetOrigin;
  30. var open = state.open;
  31. var muiTheme = context.muiTheme;
  32. var horizontal = targetOrigin.horizontal.replace('middle', 'center');
  33. return {
  34. root: {
  35. position: 'fixed',
  36. zIndex: muiTheme.zIndex.popover,
  37. opacity: open ? 1 : 0,
  38. transform: open ? 'scaleY(1)' : 'scaleY(0)',
  39. transformOrigin: horizontal + ' ' + targetOrigin.vertical,
  40. transition: _transitions2.default.easeOut('450ms', ['transform', 'opacity']),
  41. maxHeight: '100%'
  42. }
  43. };
  44. }
  45. var PopoverAnimationVertical = function (_Component) {
  46. (0, _inherits3.default)(PopoverAnimationVertical, _Component);
  47. function PopoverAnimationVertical() {
  48. var _ref;
  49. var _temp, _this, _ret;
  50. (0, _classCallCheck3.default)(this, PopoverAnimationVertical);
  51. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  52. args[_key] = arguments[_key];
  53. }
  54. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = PopoverAnimationVertical.__proto__ || (0, _getPrototypeOf2.default)(PopoverAnimationVertical)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  55. open: false
  56. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  57. }
  58. (0, _createClass3.default)(PopoverAnimationVertical, [{
  59. key: 'componentDidMount',
  60. value: function componentDidMount() {
  61. this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state
  62. }
  63. }, {
  64. key: 'componentWillReceiveProps',
  65. value: function componentWillReceiveProps(nextProps) {
  66. this.setState({
  67. open: nextProps.open
  68. });
  69. }
  70. }, {
  71. key: 'render',
  72. value: function render() {
  73. var _props = this.props,
  74. className = _props.className,
  75. style = _props.style,
  76. zDepth = _props.zDepth;
  77. var styles = getStyles(this.props, this.context, this.state);
  78. return _react2.default.createElement(
  79. _Paper2.default,
  80. {
  81. style: (0, _simpleAssign2.default)(styles.root, style),
  82. zDepth: zDepth,
  83. className: className
  84. },
  85. this.props.children
  86. );
  87. }
  88. }]);
  89. return PopoverAnimationVertical;
  90. }(_react.Component);
  91. PopoverAnimationVertical.defaultProps = {
  92. style: {},
  93. zDepth: 1
  94. };
  95. PopoverAnimationVertical.contextTypes = {
  96. muiTheme: _propTypes2.default.object.isRequired
  97. };
  98. PopoverAnimationVertical.propTypes = process.env.NODE_ENV !== "production" ? {
  99. children: _propTypes2.default.node,
  100. className: _propTypes2.default.string,
  101. open: _propTypes2.default.bool.isRequired,
  102. /**
  103. * Override the inline-styles of the root element.
  104. */
  105. style: _propTypes2.default.object,
  106. targetOrigin: _propTypes4.default.origin.isRequired,
  107. zDepth: _propTypes4.default.zDepth
  108. } : {};
  109. exports.default = PopoverAnimationVertical;