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.
 
 
 
 

219 lines
7.3 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 _Paper = require('../Paper');
  26. var _Paper2 = _interopRequireDefault(_Paper);
  27. var _CardExpandable = require('./CardExpandable');
  28. var _CardExpandable2 = _interopRequireDefault(_CardExpandable);
  29. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  30. var Card = function (_Component) {
  31. (0, _inherits3.default)(Card, _Component);
  32. function Card() {
  33. var _ref;
  34. var _temp, _this, _ret;
  35. (0, _classCallCheck3.default)(this, Card);
  36. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  37. args[_key] = arguments[_key];
  38. }
  39. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Card.__proto__ || (0, _getPrototypeOf2.default)(Card)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  40. expanded: null
  41. }, _this.handleExpanding = function (event) {
  42. event.preventDefault();
  43. var newExpandedState = !_this.state.expanded;
  44. // no automatic state update when the component is controlled
  45. if (_this.props.expanded === null) {
  46. _this.setState({ expanded: newExpandedState });
  47. }
  48. if (_this.props.onExpandChange) {
  49. _this.props.onExpandChange(newExpandedState);
  50. }
  51. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  52. }
  53. (0, _createClass3.default)(Card, [{
  54. key: 'componentWillMount',
  55. value: function componentWillMount() {
  56. this.setState({
  57. expanded: this.props.expanded === null ? this.props.initiallyExpanded === true : this.props.expanded
  58. });
  59. }
  60. }, {
  61. key: 'componentWillReceiveProps',
  62. value: function componentWillReceiveProps(nextProps) {
  63. // update the state when the component is controlled.
  64. if (nextProps.expanded !== null) this.setState({ expanded: nextProps.expanded });
  65. }
  66. }, {
  67. key: 'render',
  68. value: function render() {
  69. var _this2 = this;
  70. var _props = this.props,
  71. style = _props.style,
  72. containerStyle = _props.containerStyle,
  73. children = _props.children,
  74. expandable = _props.expandable,
  75. expandedProp = _props.expanded,
  76. initiallyExpanded = _props.initiallyExpanded,
  77. onExpandChange = _props.onExpandChange,
  78. other = (0, _objectWithoutProperties3.default)(_props, ['style', 'containerStyle', 'children', 'expandable', 'expanded', 'initiallyExpanded', 'onExpandChange']);
  79. var lastElement = void 0;
  80. var expanded = this.state.expanded;
  81. var newChildren = _react2.default.Children.map(children, function (currentChild) {
  82. var doClone = false;
  83. var newChild = undefined;
  84. var newProps = {};
  85. var element = currentChild;
  86. if (!currentChild || !currentChild.props) {
  87. return null;
  88. }
  89. if (expanded === false && currentChild.props.expandable === true) return;
  90. if (currentChild.props.actAsExpander === true) {
  91. doClone = true;
  92. newProps.onClick = _this2.handleExpanding;
  93. newProps.style = (0, _simpleAssign2.default)({ cursor: 'pointer' }, currentChild.props.style);
  94. }
  95. if (currentChild.props.showExpandableButton === true) {
  96. doClone = true;
  97. newChild = _react2.default.createElement(_CardExpandable2.default, {
  98. closeIcon: currentChild.props.closeIcon,
  99. expanded: expanded,
  100. onExpanding: _this2.handleExpanding,
  101. openIcon: currentChild.props.openIcon,
  102. iconStyle: currentChild.props.iconStyle
  103. });
  104. }
  105. if (doClone) {
  106. element = _react2.default.cloneElement(currentChild, newProps, currentChild.props.children, newChild);
  107. }
  108. lastElement = element;
  109. return element;
  110. }, this);
  111. // If the last element is text or a title we should add
  112. // 8px padding to the bottom of the card
  113. var addBottomPadding = lastElement && (lastElement.type.muiName === 'CardText' || lastElement.type.muiName === 'CardTitle');
  114. var mergedStyles = (0, _simpleAssign2.default)({
  115. zIndex: 1
  116. }, style);
  117. var containerMergedStyles = (0, _simpleAssign2.default)({
  118. paddingBottom: addBottomPadding ? 8 : 0
  119. }, containerStyle);
  120. return _react2.default.createElement(
  121. _Paper2.default,
  122. (0, _extends3.default)({}, other, { style: mergedStyles }),
  123. _react2.default.createElement(
  124. 'div',
  125. { style: containerMergedStyles },
  126. newChildren
  127. )
  128. );
  129. }
  130. }]);
  131. return Card;
  132. }(_react.Component);
  133. Card.defaultProps = {
  134. expandable: false,
  135. expanded: null,
  136. initiallyExpanded: false
  137. };
  138. Card.propTypes = process.env.NODE_ENV !== "production" ? {
  139. /**
  140. * Can be used to render elements inside the Card.
  141. */
  142. children: _propTypes2.default.node,
  143. /**
  144. * Override the inline-styles of the container element.
  145. */
  146. containerStyle: _propTypes2.default.object,
  147. /**
  148. * If true, this card component is expandable. Can be set on any child of the `Card` component.
  149. */
  150. expandable: _propTypes2.default.bool,
  151. /**
  152. * Whether this card is expanded.
  153. * If `true` or `false` the component is controlled.
  154. * if `null` the component is uncontrolled.
  155. */
  156. expanded: _propTypes2.default.bool,
  157. /**
  158. * Whether this card is initially expanded.
  159. */
  160. initiallyExpanded: _propTypes2.default.bool,
  161. /**
  162. * Callback function fired when the `expandable` state of the card has changed.
  163. *
  164. * @param {boolean} newExpandedState Represents the new `expanded` state of the card.
  165. */
  166. onExpandChange: _propTypes2.default.func,
  167. /**
  168. * If true, this card component will include a button to expand the card. `CardTitle`,
  169. * `CardHeader` and `CardActions` implement `showExpandableButton`. Any child component
  170. * of `Card` can implements `showExpandableButton` or forwards the property to a child
  171. * component supporting it.
  172. */
  173. showExpandableButton: _propTypes2.default.bool,
  174. /**
  175. * Override the inline-styles of the root element.
  176. */
  177. style: _propTypes2.default.object
  178. } : {};
  179. exports.default = Card;