|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219 |
- 'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
-
- var _extends2 = require('babel-runtime/helpers/extends');
-
- var _extends3 = _interopRequireDefault(_extends2);
-
- var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
- var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
- var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
- var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
- var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
- var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
- var _createClass2 = require('babel-runtime/helpers/createClass');
-
- var _createClass3 = _interopRequireDefault(_createClass2);
-
- var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
- var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
- var _inherits2 = require('babel-runtime/helpers/inherits');
-
- var _inherits3 = _interopRequireDefault(_inherits2);
-
- var _simpleAssign = require('simple-assign');
-
- var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
-
- var _react = require('react');
-
- var _react2 = _interopRequireDefault(_react);
-
- var _propTypes = require('prop-types');
-
- var _propTypes2 = _interopRequireDefault(_propTypes);
-
- var _Paper = require('../Paper');
-
- var _Paper2 = _interopRequireDefault(_Paper);
-
- var _CardExpandable = require('./CardExpandable');
-
- var _CardExpandable2 = _interopRequireDefault(_CardExpandable);
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
- var Card = function (_Component) {
- (0, _inherits3.default)(Card, _Component);
-
- function Card() {
- var _ref;
-
- var _temp, _this, _ret;
-
- (0, _classCallCheck3.default)(this, Card);
-
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Card.__proto__ || (0, _getPrototypeOf2.default)(Card)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
- expanded: null
- }, _this.handleExpanding = function (event) {
- event.preventDefault();
- var newExpandedState = !_this.state.expanded;
- // no automatic state update when the component is controlled
- if (_this.props.expanded === null) {
- _this.setState({ expanded: newExpandedState });
- }
- if (_this.props.onExpandChange) {
- _this.props.onExpandChange(newExpandedState);
- }
- }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
- }
-
- (0, _createClass3.default)(Card, [{
- key: 'componentWillMount',
- value: function componentWillMount() {
- this.setState({
- expanded: this.props.expanded === null ? this.props.initiallyExpanded === true : this.props.expanded
- });
- }
- }, {
- key: 'componentWillReceiveProps',
- value: function componentWillReceiveProps(nextProps) {
- // update the state when the component is controlled.
- if (nextProps.expanded !== null) this.setState({ expanded: nextProps.expanded });
- }
- }, {
- key: 'render',
- value: function render() {
- var _this2 = this;
-
- var _props = this.props,
- style = _props.style,
- containerStyle = _props.containerStyle,
- children = _props.children,
- expandable = _props.expandable,
- expandedProp = _props.expanded,
- initiallyExpanded = _props.initiallyExpanded,
- onExpandChange = _props.onExpandChange,
- other = (0, _objectWithoutProperties3.default)(_props, ['style', 'containerStyle', 'children', 'expandable', 'expanded', 'initiallyExpanded', 'onExpandChange']);
-
-
- var lastElement = void 0;
- var expanded = this.state.expanded;
- var newChildren = _react2.default.Children.map(children, function (currentChild) {
- var doClone = false;
- var newChild = undefined;
- var newProps = {};
- var element = currentChild;
- if (!currentChild || !currentChild.props) {
- return null;
- }
- if (expanded === false && currentChild.props.expandable === true) return;
- if (currentChild.props.actAsExpander === true) {
- doClone = true;
- newProps.onClick = _this2.handleExpanding;
- newProps.style = (0, _simpleAssign2.default)({ cursor: 'pointer' }, currentChild.props.style);
- }
- if (currentChild.props.showExpandableButton === true) {
- doClone = true;
- newChild = _react2.default.createElement(_CardExpandable2.default, {
- closeIcon: currentChild.props.closeIcon,
- expanded: expanded,
- onExpanding: _this2.handleExpanding,
- openIcon: currentChild.props.openIcon,
- iconStyle: currentChild.props.iconStyle
- });
- }
- if (doClone) {
- element = _react2.default.cloneElement(currentChild, newProps, currentChild.props.children, newChild);
- }
- lastElement = element;
- return element;
- }, this);
-
- // If the last element is text or a title we should add
- // 8px padding to the bottom of the card
- var addBottomPadding = lastElement && (lastElement.type.muiName === 'CardText' || lastElement.type.muiName === 'CardTitle');
-
- var mergedStyles = (0, _simpleAssign2.default)({
- zIndex: 1
- }, style);
- var containerMergedStyles = (0, _simpleAssign2.default)({
- paddingBottom: addBottomPadding ? 8 : 0
- }, containerStyle);
-
- return _react2.default.createElement(
- _Paper2.default,
- (0, _extends3.default)({}, other, { style: mergedStyles }),
- _react2.default.createElement(
- 'div',
- { style: containerMergedStyles },
- newChildren
- )
- );
- }
- }]);
- return Card;
- }(_react.Component);
-
- Card.defaultProps = {
- expandable: false,
- expanded: null,
- initiallyExpanded: false
- };
- Card.propTypes = process.env.NODE_ENV !== "production" ? {
- /**
- * Can be used to render elements inside the Card.
- */
- children: _propTypes2.default.node,
- /**
- * Override the inline-styles of the container element.
- */
- containerStyle: _propTypes2.default.object,
- /**
- * If true, this card component is expandable. Can be set on any child of the `Card` component.
- */
- expandable: _propTypes2.default.bool,
- /**
- * Whether this card is expanded.
- * If `true` or `false` the component is controlled.
- * if `null` the component is uncontrolled.
- */
- expanded: _propTypes2.default.bool,
- /**
- * Whether this card is initially expanded.
- */
- initiallyExpanded: _propTypes2.default.bool,
- /**
- * Callback function fired when the `expandable` state of the card has changed.
- *
- * @param {boolean} newExpandedState Represents the new `expanded` state of the card.
- */
- onExpandChange: _propTypes2.default.func,
- /**
- * If true, this card component will include a button to expand the card. `CardTitle`,
- * `CardHeader` and `CardActions` implement `showExpandableButton`. Any child component
- * of `Card` can implements `showExpandableButton` or forwards the property to a child
- * component supporting it.
- */
- showExpandableButton: _propTypes2.default.bool,
- /**
- * Override the inline-styles of the root element.
- */
- style: _propTypes2.default.object
- } : {};
- exports.default = Card;
|