@kiwicom/orbit-components/lib/Card/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));

var _Close = _interopRequireDefault(require("../icons/Close"));

var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));

var _CardSection = _interopRequireWildcard(require("./CardSection"));

var _CardHeader = _interopRequireWildcard(require("./CardHeader"));

var _Loading = _interopRequireWildcard(require("../Loading"));

var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var getBorder = function getBorder(_ref) {
  var theme = _ref.theme;
  return "".concat(theme.orbit.borderWidthCard, " ").concat(theme.orbit.borderStyleCard, " ").concat(theme.orbit.borderColorCard);
};

var getBorderRadius = function getBorderRadius(_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.borderRadiusNormal;
}; // Logic of borders radius


var StyledChildWrapper = _styledComponents.default.div.withConfig({
  displayName: "Card__StyledChildWrapper",
  componentId: "ff0z2v-0"
})(["", ",", ",", "{border-top-left-radius:", ";border-top-right-radius:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";border-left:", ";border-right:", ";border-bottom:", ";background:", ";}+ div ", "{border-top:", ";}"], _CardSection.StyledCardSection, _CardHeader.StyledCardHeader, _Loading.StyledLoading, function (_ref3) {
  var roundedTopBorders = _ref3.roundedTopBorders;
  return roundedTopBorders && getBorderRadius;
}, function (_ref4) {
  var roundedTopBorders = _ref4.roundedTopBorders;
  return roundedTopBorders && getBorderRadius;
}, function (_ref5) {
  var roundedBottomBorders = _ref5.roundedBottomBorders;
  return roundedBottomBorders && getBorderRadius;
}, function (_ref6) {
  var roundedBottomBorders = _ref6.roundedBottomBorders;
  return roundedBottomBorders && getBorderRadius;
}, getBorder, getBorder, getBorder, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.backgroundCard;
}, _CardSection.StyledCardSection, function (_ref8) {
  var expanded = _ref8.expanded;
  return expanded && getBorder;
});

StyledChildWrapper.defaultProps = {
  theme: _defaultTokens.default
};

var StyledCard = _styledComponents.default.div.withConfig({
  displayName: "Card__StyledCard",
  componentId: "ff0z2v-1"
})(["width:100%;height:100%;box-sizing:border-box;position:relative;margin-bottom:", ";", "{padding-right:", ";border-bottom:", ";}", "{&:first-of-type{", ",", ",", "{border-top:", ";border-top-left-radius:", ";border-top-right-radius:", ";}+ ", " ", "{padding-top:", ";}}&:last-of-type{", ",", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}}"], _getSpacingToken.default, _CardHeader.StyledCardHeader, function (_ref9) {
  var theme = _ref9.theme,
      closable = _ref9.closable;
  return closable && theme.orbit.spaceLarge;
}, function (_ref10) {
  var hasAdjustedHeader = _ref10.hasAdjustedHeader;
  return hasAdjustedHeader && 0;
}, StyledChildWrapper, _CardHeader.StyledCardHeader, _CardSection.StyledCardSection, _Loading.StyledLoading, getBorder, getBorderRadius, getBorderRadius, StyledChildWrapper, _CardSection.StyledCardSection, function (_ref11) {
  var hasAdjustedHeader = _ref11.hasAdjustedHeader;
  return hasAdjustedHeader && 0;
}, _CardHeader.StyledCardHeader, _CardSection.StyledCardSection, getBorderRadius, getBorderRadius);

StyledCard.defaultProps = {
  theme: _defaultTokens.default
};

var CloseContainer = _styledComponents.default.div.withConfig({
  displayName: "Card__CloseContainer",
  componentId: "ff0z2v-2"
})(["position:absolute;top:0;right:0;z-index:1;"]); // Logic of spacing and animation in expandable Card


var StyledExpandableSectionWrapper = _styledComponents.default.div.withConfig({
  displayName: "Card__StyledExpandableSectionWrapper",
  componentId: "ff0z2v-3"
})(["margin:", ";transition:margin ", " ease-in-out;box-shadow:", ";", "{border-top:", ";}"], function (_ref12) {
  var theme = _ref12.theme,
      expanded = _ref12.expanded;
  return expanded && "".concat(theme.orbit.spaceXSmall, " 0");
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.durationFast;
}, function (_ref14) {
  var expanded = _ref14.expanded;
  return expanded && "0 4px 12px 0 rgba(23, 27, 30, 0.1)";
}, _CardSection.StyledCardSection, function (_ref15) {
  var expanded = _ref15.expanded;
  return expanded && getBorder;
});

StyledExpandableSectionWrapper.defaultProps = {
  theme: _defaultTokens.default
};

var Card =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Card, _React$Component);

  function Card() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Card);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Card)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      expandedSections: []
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getRoundedBorders", function (index) {
      var expandedSections = _this.state.expandedSections;
      var topBorder = expandedSections.indexOf(index - 1) !== -1 || expandedSections.indexOf(index) !== -1;
      var bottomBorder = expandedSections.indexOf(index + 1) !== -1 || expandedSections.indexOf(index) !== -1;
      return {
        top: topBorder,
        bottom: bottomBorder
      };
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getChildren", function () {
      // Loading Card Logic
      var children = React.Children.toArray(_this.props.children);

      if (children[0] === undefined) {
        // Jest test
        return [];
      }

      if (children[0].type.name === _Loading.default.name && !children[0].props.loading) {
        if (!Array.isArray(children[0].props.children) && children[0].props.children.type.toString() === React.Fragment.toString()) {
          return children[0].props.children.props.children;
        }

        return children[0].props.children;
      }

      return children;
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isExpandableCardSection", function (item) {
      return item.type.name === _CardSection.default.name && item.props.expandable;
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isExpanded", function (index) {
      return _this.state.expandedSections.indexOf(index) !== -1;
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleToggleSection", function (index) {
      _this.setState({
        expandedSections: _this.state.expandedSections.indexOf(index) === -1 ? _toConsumableArray(_this.state.expandedSections).concat([index]) : _this.state.expandedSections.filter(function (value) {
          return value !== index;
        })
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "hasAdjustedHeader", function () {
      var children = _this.getChildren(); // Check if first element is Header


      if (children[0] !== undefined && children[0].type.name !== _CardHeader.default.name) {
        return false;
      } // Check if first section exists


      if (children[1] === undefined) {
        return false;
      }

      return !_this.isExpandableCardSection(children[1]);
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderSection", function (section, index) {
      var roundedBorders = _this.getRoundedBorders(index);

      return React.createElement(StyledChildWrapper, {
        roundedTopBorders: roundedBorders.top,
        roundedBottomBorders: roundedBorders.bottom
      }, section);
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderExpandableSection", function (section, index) {
      var isExpanded = _this.isExpanded(index);

      var roundedBorders = _this.getRoundedBorders(index);

      return React.createElement(StyledChildWrapper, {
        roundedTopBorders: roundedBorders.top,
        roundedBottomBorders: roundedBorders.bottom,
        expanded: isExpanded
      }, React.createElement(StyledExpandableSectionWrapper, {
        expanded: isExpanded
      }, React.cloneElement(section, {
        expanded: _this.isExpanded(index),
        onClick: function onClick() {
          return _this.handleToggleSection(index);
        }
      })));
    });

    return _this;
  }

  _createClass(Card, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          closable = _this$props.closable,
          dataTest = _this$props.dataTest,
          spaceAfter = _this$props.spaceAfter,
          onClose = _this$props.onClose;
      var children = this.getChildren();
      return React.createElement(StyledCard, {
        closable: closable,
        "data-test": dataTest,
        spaceAfter: spaceAfter,
        hasAdjustedHeader: this.hasAdjustedHeader()
      }, children && React.Children.map(children, function (item, index) {
        return _this2.isExpandableCardSection(item) ? _this2.renderExpandableSection(item, index) : _this2.renderSection(item, index);
      }), closable && React.createElement(CloseContainer, null, React.createElement(_ButtonLink.default, {
        type: "secondary",
        size: "small",
        icon: React.createElement(_Close.default, null),
        onClick: onClose,
        transparent: true
      })));
    }
  }]);

  return Card;
}(React.Component);

var _default = Card;
exports.default = _default;