Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

317 строки
9.9 KiB

  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 _ClickAwayListener = require('../internal/ClickAwayListener');
  28. var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
  29. var _SnackbarBody = require('./SnackbarBody');
  30. var _SnackbarBody2 = _interopRequireDefault(_SnackbarBody);
  31. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  32. function getStyles(props, context, state) {
  33. var _context$muiTheme = context.muiTheme,
  34. desktopSubheaderHeight = _context$muiTheme.baseTheme.spacing.desktopSubheaderHeight,
  35. zIndex = _context$muiTheme.zIndex;
  36. var open = state.open;
  37. var styles = {
  38. root: {
  39. position: 'fixed',
  40. left: '50%',
  41. display: 'flex',
  42. bottom: 0,
  43. zIndex: zIndex.snackbar,
  44. visibility: open ? 'visible' : 'hidden',
  45. transform: open ? 'translate(-50%, 0)' : 'translate(-50%, ' + desktopSubheaderHeight + 'px)',
  46. transition: _transitions2.default.easeOut('400ms', 'transform') + ', ' + _transitions2.default.easeOut('400ms', 'visibility')
  47. }
  48. };
  49. return styles;
  50. }
  51. var Snackbar = function (_Component) {
  52. (0, _inherits3.default)(Snackbar, _Component);
  53. function Snackbar() {
  54. var _ref;
  55. var _temp, _this, _ret;
  56. (0, _classCallCheck3.default)(this, Snackbar);
  57. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  58. args[_key] = arguments[_key];
  59. }
  60. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Snackbar.__proto__ || (0, _getPrototypeOf2.default)(Snackbar)).call.apply(_ref, [this].concat(args))), _this), _this.componentClickAway = function () {
  61. if (_this.timerTransitionId) {
  62. // If transitioning, don't close the snackbar.
  63. return;
  64. }
  65. if (_this.props.open !== null && _this.props.onRequestClose) {
  66. _this.props.onRequestClose(Snackbar.reasons.CLICKAWAY);
  67. } else {
  68. _this.setState({ open: false });
  69. }
  70. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  71. }
  72. (0, _createClass3.default)(Snackbar, [{
  73. key: 'componentWillMount',
  74. value: function componentWillMount() {
  75. this.setState({
  76. open: this.props.open,
  77. message: this.props.message,
  78. action: this.props.action
  79. });
  80. }
  81. }, {
  82. key: 'componentDidMount',
  83. value: function componentDidMount() {
  84. if (this.state.open) {
  85. this.setAutoHideTimer();
  86. this.setTransitionTimer();
  87. }
  88. }
  89. }, {
  90. key: 'componentWillReceiveProps',
  91. value: function componentWillReceiveProps(nextProps) {
  92. var _this2 = this;
  93. if (this.props.open && nextProps.open && (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) {
  94. this.setState({
  95. open: false
  96. });
  97. clearTimeout(this.timerOneAtTheTimeId);
  98. this.timerOneAtTheTimeId = setTimeout(function () {
  99. _this2.setState({
  100. message: nextProps.message,
  101. action: nextProps.action,
  102. open: true
  103. });
  104. }, 400);
  105. } else {
  106. var open = nextProps.open;
  107. this.setState({
  108. open: open !== null ? open : this.state.open,
  109. message: nextProps.message,
  110. action: nextProps.action
  111. });
  112. }
  113. }
  114. }, {
  115. key: 'componentDidUpdate',
  116. value: function componentDidUpdate(prevProps, prevState) {
  117. if (prevState.open !== this.state.open) {
  118. if (this.state.open) {
  119. this.setAutoHideTimer();
  120. this.setTransitionTimer();
  121. } else {
  122. clearTimeout(this.timerAutoHideId);
  123. }
  124. }
  125. }
  126. }, {
  127. key: 'componentWillUnmount',
  128. value: function componentWillUnmount() {
  129. clearTimeout(this.timerAutoHideId);
  130. clearTimeout(this.timerTransitionId);
  131. clearTimeout(this.timerOneAtTheTimeId);
  132. }
  133. }, {
  134. key: 'setAutoHideTimer',
  135. // Timer that controls delay before snackbar auto hides
  136. value: function setAutoHideTimer() {
  137. var _this3 = this;
  138. var autoHideDuration = this.props.autoHideDuration;
  139. if (autoHideDuration > 0) {
  140. clearTimeout(this.timerAutoHideId);
  141. this.timerAutoHideId = setTimeout(function () {
  142. if (_this3.props.open !== null && _this3.props.onRequestClose) {
  143. _this3.props.onRequestClose(Snackbar.reasons.TIMEOUT);
  144. } else {
  145. _this3.setState({ open: false });
  146. }
  147. }, autoHideDuration);
  148. }
  149. }
  150. // Timer that controls delay before click-away events are captured (based on when animation completes)
  151. }, {
  152. key: 'setTransitionTimer',
  153. value: function setTransitionTimer() {
  154. var _this4 = this;
  155. this.timerTransitionId = setTimeout(function () {
  156. _this4.timerTransitionId = undefined;
  157. }, 400);
  158. }
  159. }, {
  160. key: 'render',
  161. value: function render() {
  162. var _props = this.props,
  163. autoHideDuration = _props.autoHideDuration,
  164. contentStyle = _props.contentStyle,
  165. bodyStyle = _props.bodyStyle,
  166. messageProp = _props.message,
  167. onRequestClose = _props.onRequestClose,
  168. onActionClick = _props.onActionClick,
  169. style = _props.style,
  170. other = (0, _objectWithoutProperties3.default)(_props, ['autoHideDuration', 'contentStyle', 'bodyStyle', 'message', 'onRequestClose', 'onActionClick', 'style']);
  171. var _state = this.state,
  172. action = _state.action,
  173. message = _state.message,
  174. open = _state.open;
  175. var prepareStyles = this.context.muiTheme.prepareStyles;
  176. var styles = getStyles(this.props, this.context, this.state);
  177. return _react2.default.createElement(
  178. _ClickAwayListener2.default,
  179. { onClickAway: open ? this.componentClickAway : null },
  180. _react2.default.createElement(
  181. 'div',
  182. (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }),
  183. _react2.default.createElement(_SnackbarBody2.default, {
  184. action: action,
  185. contentStyle: contentStyle,
  186. message: message,
  187. open: open,
  188. onActionClick: onActionClick,
  189. style: bodyStyle
  190. })
  191. )
  192. );
  193. }
  194. }]);
  195. return Snackbar;
  196. }(_react.Component);
  197. Snackbar.contextTypes = {
  198. muiTheme: _propTypes2.default.object.isRequired
  199. };
  200. Snackbar.reasons = {
  201. CLICKAWAY: 'clickaway',
  202. TIMEOUT: 'timeout'
  203. };
  204. Snackbar.propTypes = process.env.NODE_ENV !== "production" ? {
  205. /**
  206. * The label for the action on the snackbar.
  207. */
  208. action: _propTypes2.default.node,
  209. /**
  210. * The number of milliseconds to wait before automatically dismissing.
  211. * If no value is specified the snackbar will dismiss normally.
  212. * If a value is provided the snackbar can still be dismissed normally.
  213. * If a snackbar is dismissed before the timer expires, the timer will be cleared.
  214. */
  215. autoHideDuration: _propTypes2.default.number,
  216. /**
  217. * Override the inline-styles of the body element.
  218. */
  219. bodyStyle: _propTypes2.default.object,
  220. /**
  221. * The css class name of the root element.
  222. */
  223. className: _propTypes2.default.string,
  224. /**
  225. * Override the inline-styles of the content element.
  226. */
  227. contentStyle: _propTypes2.default.object,
  228. /**
  229. * The message to be displayed.
  230. *
  231. * (Note: If the message is an element or array, and the `Snackbar` may re-render while it is still open,
  232. * ensure that the same object remains as the `message` property if you want to avoid the `Snackbar` hiding and
  233. * showing again)
  234. */
  235. message: _propTypes2.default.node.isRequired,
  236. /**
  237. * Fired when the action button is clicked.
  238. *
  239. * @param {object} event Action button event.
  240. */
  241. onActionClick: _propTypes2.default.func,
  242. /**
  243. * Fired when the `Snackbar` is requested to be closed by a click outside the `Snackbar`, or after the
  244. * `autoHideDuration` timer expires.
  245. *
  246. * Typically `onRequestClose` is used to set state in the parent component, which is used to control the `Snackbar`
  247. * `open` prop.
  248. *
  249. * The `reason` parameter can optionally be used to control the response to `onRequestClose`,
  250. * for example ignoring `clickaway`.
  251. *
  252. * @param {string} reason Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"`
  253. */
  254. onRequestClose: _propTypes2.default.func,
  255. /**
  256. * Controls whether the `Snackbar` is opened or not.
  257. */
  258. open: _propTypes2.default.bool.isRequired,
  259. /**
  260. * Override the inline-styles of the root element.
  261. */
  262. style: _propTypes2.default.object
  263. } : {};
  264. exports.default = Snackbar;