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.
 
 
 
 

230 lines
7.0 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 _Avatar = require('../Avatar');
  26. var _Avatar2 = _interopRequireDefault(_Avatar);
  27. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  28. function getStyles(props, context) {
  29. var card = context.muiTheme.card;
  30. return {
  31. root: {
  32. padding: 16,
  33. fontWeight: card.fontWeight,
  34. boxSizing: 'border-box',
  35. position: 'relative',
  36. whiteSpace: 'nowrap'
  37. },
  38. text: {
  39. display: 'inline-block',
  40. verticalAlign: 'top',
  41. whiteSpace: 'normal',
  42. paddingRight: '90px'
  43. },
  44. avatar: {
  45. marginRight: 16
  46. },
  47. title: {
  48. color: props.titleColor || card.titleColor,
  49. display: 'block',
  50. fontSize: 15
  51. },
  52. subtitle: {
  53. color: props.subtitleColor || card.subtitleColor,
  54. display: 'block',
  55. fontSize: 14
  56. }
  57. };
  58. }
  59. var CardHeader = function (_Component) {
  60. (0, _inherits3.default)(CardHeader, _Component);
  61. function CardHeader() {
  62. (0, _classCallCheck3.default)(this, CardHeader);
  63. return (0, _possibleConstructorReturn3.default)(this, (CardHeader.__proto__ || (0, _getPrototypeOf2.default)(CardHeader)).apply(this, arguments));
  64. }
  65. (0, _createClass3.default)(CardHeader, [{
  66. key: 'render',
  67. value: function render() {
  68. var _props = this.props,
  69. actAsExpander = _props.actAsExpander,
  70. avatarProp = _props.avatar,
  71. children = _props.children,
  72. closeIcon = _props.closeIcon,
  73. expandable = _props.expandable,
  74. openIcon = _props.openIcon,
  75. showExpandableButton = _props.showExpandableButton,
  76. style = _props.style,
  77. subtitle = _props.subtitle,
  78. subtitleColor = _props.subtitleColor,
  79. subtitleStyle = _props.subtitleStyle,
  80. textStyle = _props.textStyle,
  81. title = _props.title,
  82. titleColor = _props.titleColor,
  83. titleStyle = _props.titleStyle,
  84. iconStyle = _props.iconStyle,
  85. other = (0, _objectWithoutProperties3.default)(_props, ['actAsExpander', 'avatar', 'children', 'closeIcon', 'expandable', 'openIcon', 'showExpandableButton', 'style', 'subtitle', 'subtitleColor', 'subtitleStyle', 'textStyle', 'title', 'titleColor', 'titleStyle', 'iconStyle']);
  86. var prepareStyles = this.context.muiTheme.prepareStyles;
  87. var styles = getStyles(this.props, this.context);
  88. var avatar = avatarProp;
  89. if ((0, _react.isValidElement)(avatarProp)) {
  90. avatar = _react2.default.cloneElement(avatar, {
  91. style: (0, _simpleAssign2.default)(styles.avatar, avatar.props.style)
  92. });
  93. } else if (avatar !== null) {
  94. avatar = _react2.default.createElement(_Avatar2.default, { src: avatarProp, style: styles.avatar });
  95. }
  96. return _react2.default.createElement(
  97. 'div',
  98. (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }),
  99. avatar,
  100. _react2.default.createElement(
  101. 'div',
  102. { style: prepareStyles((0, _simpleAssign2.default)(styles.text, textStyle)) },
  103. _react2.default.createElement(
  104. 'span',
  105. { style: prepareStyles((0, _simpleAssign2.default)(styles.title, titleStyle)) },
  106. title
  107. ),
  108. _react2.default.createElement(
  109. 'span',
  110. { style: prepareStyles((0, _simpleAssign2.default)(styles.subtitle, subtitleStyle)) },
  111. subtitle
  112. )
  113. ),
  114. children
  115. );
  116. }
  117. }]);
  118. return CardHeader;
  119. }(_react.Component);
  120. CardHeader.muiName = 'CardHeader';
  121. CardHeader.defaultProps = {
  122. avatar: null
  123. };
  124. CardHeader.contextTypes = {
  125. muiTheme: _propTypes2.default.object.isRequired
  126. };
  127. CardHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  128. /**
  129. * If true, a click on this card component expands the card.
  130. */
  131. actAsExpander: _propTypes2.default.bool,
  132. /**
  133. * This is the [Avatar](/#/components/avatar) element to be displayed on the Card Header.
  134. * If `avatar` is an `Avatar` or other element, it will be rendered.
  135. * If `avatar` is a string, it will be used as the image `src` for an `Avatar`.
  136. */
  137. avatar: _propTypes2.default.node,
  138. /**
  139. * Can be used to render elements inside the Card Header.
  140. */
  141. children: _propTypes2.default.node,
  142. /**
  143. * Can be used to pass a closeIcon if you don't like the default expandable close Icon.
  144. */
  145. closeIcon: _propTypes2.default.node,
  146. /**
  147. * If true, this card component is expandable.
  148. */
  149. expandable: _propTypes2.default.bool,
  150. /**
  151. * Override the iconStyle of the Icon Button.
  152. */
  153. iconStyle: _propTypes2.default.object,
  154. /**
  155. * Can be used to pass a openIcon if you don't like the default expandable open Icon.
  156. */
  157. openIcon: _propTypes2.default.node,
  158. /**
  159. * If true, this card component will include a button to expand the card.
  160. */
  161. showExpandableButton: _propTypes2.default.bool,
  162. /**
  163. * Override the inline-styles of the root element.
  164. */
  165. style: _propTypes2.default.object,
  166. /**
  167. * Can be used to render a subtitle in Card Header.
  168. */
  169. subtitle: _propTypes2.default.node,
  170. /**
  171. * Override the subtitle color.
  172. */
  173. subtitleColor: _propTypes2.default.string,
  174. /**
  175. * Override the inline-styles of the subtitle.
  176. */
  177. subtitleStyle: _propTypes2.default.object,
  178. /**
  179. * Override the inline-styles of the text.
  180. */
  181. textStyle: _propTypes2.default.object,
  182. /**
  183. * Can be used to render a title in Card Header.
  184. */
  185. title: _propTypes2.default.node,
  186. /**
  187. * Override the title color.
  188. */
  189. titleColor: _propTypes2.default.string,
  190. /**
  191. * Override the inline-styles of the title.
  192. */
  193. titleStyle: _propTypes2.default.object
  194. } : {};
  195. exports.default = CardHeader;