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

170 строки
5.0 KiB

  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.SnackbarBody = undefined;
  6. var _extends2 = require('babel-runtime/helpers/extends');
  7. var _extends3 = _interopRequireDefault(_extends2);
  8. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  9. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  10. var _simpleAssign = require('simple-assign');
  11. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  12. var _react = require('react');
  13. var _react2 = _interopRequireDefault(_react);
  14. var _propTypes = require('prop-types');
  15. var _propTypes2 = _interopRequireDefault(_propTypes);
  16. var _transitions = require('../styles/transitions');
  17. var _transitions2 = _interopRequireDefault(_transitions);
  18. var _withWidth = require('../utils/withWidth');
  19. var _withWidth2 = _interopRequireDefault(_withWidth);
  20. var _FlatButton = require('../FlatButton');
  21. var _FlatButton2 = _interopRequireDefault(_FlatButton);
  22. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  23. function getStyles(props, context) {
  24. var open = props.open,
  25. width = props.width;
  26. var _context$muiTheme = context.muiTheme,
  27. _context$muiTheme$bas = _context$muiTheme.baseTheme,
  28. _context$muiTheme$bas2 = _context$muiTheme$bas.spacing,
  29. desktopGutter = _context$muiTheme$bas2.desktopGutter,
  30. desktopSubheaderHeight = _context$muiTheme$bas2.desktopSubheaderHeight,
  31. fontFamily = _context$muiTheme$bas.fontFamily,
  32. _context$muiTheme$sna = _context$muiTheme.snackbar,
  33. backgroundColor = _context$muiTheme$sna.backgroundColor,
  34. textColor = _context$muiTheme$sna.textColor,
  35. actionColor = _context$muiTheme$sna.actionColor,
  36. borderRadius = _context$muiTheme.borderRadius;
  37. var isSmall = width === _withWidth.SMALL;
  38. var styles = {
  39. root: {
  40. fontFamily: fontFamily,
  41. backgroundColor: backgroundColor,
  42. padding: '0 ' + desktopGutter + 'px',
  43. height: desktopSubheaderHeight,
  44. lineHeight: desktopSubheaderHeight + 'px',
  45. borderRadius: isSmall ? 0 : borderRadius,
  46. maxWidth: isSmall ? 'inherit' : 568,
  47. minWidth: isSmall ? 'inherit' : 288,
  48. width: isSmall ? 'calc(100vw - ' + desktopGutter * 2 + 'px)' : 'auto',
  49. flexGrow: isSmall ? 1 : 0
  50. },
  51. content: {
  52. fontSize: 14,
  53. color: textColor,
  54. opacity: open ? 1 : 0,
  55. transition: open ? _transitions2.default.easeOut('500ms', 'opacity', '100ms') : _transitions2.default.easeOut('400ms', 'opacity')
  56. },
  57. action: {
  58. color: actionColor,
  59. float: 'right',
  60. marginTop: 6,
  61. marginRight: -16,
  62. marginLeft: desktopGutter,
  63. backgroundColor: 'transparent'
  64. }
  65. };
  66. return styles;
  67. }
  68. var SnackbarBody = function SnackbarBody(props, context) {
  69. var action = props.action,
  70. contentStyle = props.contentStyle,
  71. message = props.message,
  72. open = props.open,
  73. onActionClick = props.onActionClick,
  74. style = props.style,
  75. other = (0, _objectWithoutProperties3.default)(props, ['action', 'contentStyle', 'message', 'open', 'onActionClick', 'style']);
  76. var prepareStyles = context.muiTheme.prepareStyles;
  77. var styles = getStyles(props, context);
  78. var actionButton = action && _react2.default.createElement(_FlatButton2.default, {
  79. style: styles.action,
  80. label: action,
  81. onClick: onActionClick
  82. });
  83. return _react2.default.createElement(
  84. 'div',
  85. (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }),
  86. _react2.default.createElement(
  87. 'div',
  88. { style: prepareStyles((0, _simpleAssign2.default)(styles.content, contentStyle)) },
  89. _react2.default.createElement(
  90. 'span',
  91. null,
  92. message
  93. ),
  94. actionButton
  95. )
  96. );
  97. };
  98. exports.SnackbarBody = SnackbarBody;
  99. SnackbarBody.propTypes = process.env.NODE_ENV !== "production" ? {
  100. /**
  101. * The label for the action on the snackbar.
  102. */
  103. action: _propTypes2.default.node,
  104. /**
  105. * Override the inline-styles of the content element.
  106. */
  107. contentStyle: _propTypes2.default.object,
  108. /**
  109. * The message to be displayed.
  110. *
  111. * (Note: If the message is an element or array, and the `Snackbar` may re-render while it is still open,
  112. * ensure that the same object remains as the `message` property if you want to avoid the `Snackbar` hiding and
  113. * showing again)
  114. */
  115. message: _propTypes2.default.node.isRequired,
  116. /**
  117. * Fired when the action button is clicked.
  118. *
  119. * @param {object} event Action button event.
  120. */
  121. onActionClick: _propTypes2.default.func,
  122. /**
  123. * @ignore
  124. * Controls whether the `Snackbar` is opened or not.
  125. */
  126. open: _propTypes2.default.bool.isRequired,
  127. /**
  128. * Override the inline-styles of the root element.
  129. */
  130. style: _propTypes2.default.object,
  131. /**
  132. * @ignore
  133. * Width of the screen.
  134. */
  135. width: _propTypes2.default.number.isRequired
  136. } : {};
  137. SnackbarBody.contextTypes = {
  138. muiTheme: _propTypes2.default.object.isRequired
  139. };
  140. exports.default = (0, _withWidth2.default)()(SnackbarBody);