@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
});
Object.defineProperty(exports, "CardSection", {
  enumerable: true,
  get: function get() {
    return _CardSection.default;
  }
});
Object.defineProperty(exports, "CardHeader", {
  enumerable: true,
  get: function get() {
    return _CardHeader.default;
  }
});
Object.defineProperty(exports, "CardSectionContent", {
  enumerable: true,
  get: function get() {
    return _CardSectionContent.default;
  }
});
Object.defineProperty(exports, "CardSectionHeader", {
  enumerable: true,
  get: function get() {
    return _CardSectionHeader.default;
  }
});
exports.default = void 0;

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

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

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

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

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

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

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

var _CardSectionContent = _interopRequireWildcard(require("./CardSection/CardSectionContent"));

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

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

var _rtl = require("../utils/rtl");

var _consts = _interopRequireDefault(require("./consts"));

var _Dictionary = require("../Dictionary");

var _Translate = require("../Translate");

var _CardSectionHeader = _interopRequireDefault(require("./CardSection/CardSectionHeader"));

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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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 _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"
})(["margin:", ";transition:margin ", " ease-in-out;", ",", ",> ", "{border-top-left-radius:", ";border-top-right-radius:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";box-shadow:", ";border-left:", ";border-right:", ";border-bottom:", ";background:", ";}+ div ", ",", "{border-top:", ";}"], function (_ref3) {
  var theme = _ref3.theme,
      expanded = _ref3.expanded;
  return expanded && "".concat(theme.orbit.spaceXSmall, " 0");
}, function (_ref4) {
  var theme = _ref4.theme,
      initialExpanded = _ref4.initialExpanded;
  return !initialExpanded && theme.orbit.durationFast;
}, _CardSection.StyledCardSection, _CardHeader.StyledCardHeader, _Loading.StyledLoading, function (_ref5) {
  var roundedTopBorders = _ref5.roundedTopBorders;
  return roundedTopBorders && getBorderRadius;
}, function (_ref6) {
  var roundedTopBorders = _ref6.roundedTopBorders;
  return roundedTopBorders && getBorderRadius;
}, function (_ref7) {
  var roundedBottomBorders = _ref7.roundedBottomBorders;
  return roundedBottomBorders && getBorderRadius;
}, function (_ref8) {
  var roundedBottomBorders = _ref8.roundedBottomBorders;
  return roundedBottomBorders && getBorderRadius;
}, function (_ref9) {
  var expanded = _ref9.expanded;
  return expanded && "0 4px 12px 0 rgba(23, 27, 30, 0.1)";
}, getBorder, getBorder, getBorder, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.backgroundCard;
}, _CardSection.StyledCardSection, _CardSection.StyledCardSection, function (_ref11) {
  var expanded = _ref11.expanded;
  return expanded && getBorder;
});

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

var StyledCard = _styledComponents.default.div.withConfig({
  displayName: "Card__StyledCard",
  componentId: "ff0z2v-1"
})(["width:100%;box-sizing:border-box;position:relative;font-family:", ";margin-bottom:", ";", "{padding-", ":", ";border-bottom:", ";}", "{&:first-of-type{", ",", ",> ", "{border-top:", ";border-top-left-radius:", ";border-top-right-radius:", ";}+ ", " ", "{padding-top:", ";", ":first-of-type{padding-top:", ";}}}&:last-of-type{", ",", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}}"], function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.fontFamily;
}, _getSpacingToken.default, _CardHeader.StyledCardHeader, _rtl.right, function (_ref13) {
  var theme = _ref13.theme,
      closable = _ref13.closable;
  return closable && theme.orbit.spaceLarge;
}, function (_ref14) {
  var hasAdjustedHeader = _ref14.hasAdjustedHeader;
  return hasAdjustedHeader && 0;
}, StyledChildWrapper, _CardHeader.StyledCardHeader, _CardSection.StyledCardSection, _Loading.StyledLoading, getBorder, getBorderRadius, getBorderRadius, StyledChildWrapper, _CardSection.StyledCardSection, function (_ref15) {
  var hasAdjustedHeader = _ref15.hasAdjustedHeader;
  return hasAdjustedHeader && 0;
}, _CardSectionContent.StyledCardSectionContent, function (_ref16) {
  var hasAdjustedHeader = _ref16.hasAdjustedHeader;
  return hasAdjustedHeader && 0;
}, _CardHeader.StyledCardHeader, _CardSection.StyledCardSection, getBorderRadius, getBorderRadius);

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

var StyledCloseContainer = _styledComponents.default.div.withConfig({
  displayName: "Card__StyledCloseContainer",
  componentId: "ff0z2v-2"
})(["position:absolute;top:0;", ":0;z-index:1;"], _rtl.right);

var CardCloseButton = function CardCloseButton(_ref17) {
  var onClick = _ref17.onClick,
      dataTest = _ref17.dataTest;
  var dictionary = React.useContext(_Dictionary.DictionaryContext);
  return React.createElement(StyledCloseContainer, null, React.createElement(_ButtonLink.default, {
    dataTest: dataTest,
    type: "secondary",
    size: "small",
    icon: React.createElement(_Close.default, null),
    onClick: onClick,
    transparent: true,
    title: (0, _Translate.pureTranslate)(dictionary, "button_close")
  }));
};

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(_this), "state", {
      expandedSections: [],
      initialExpandedSections: []
    });

    _defineProperty(_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(_this), "getChildren", function () {
      var _children$0$type, _children$0$props;

      // Loading Card Logic
      var children = React.Children.toArray(_this.props.children);

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

      if (_Loading.default.name !== "" && ((_children$0$type = children[0].type) === null || _children$0$type === void 0 ? void 0 : _children$0$type.name) === _Loading.default.name && !((_children$0$props = children[0].props) === null || _children$0$props === void 0 ? void 0 : _children$0$props.loading)) {
        var _children$0$props2, _children$0$props3, _children$0$props3$ch;

        if (!Array.isArray((_children$0$props2 = children[0].props) === null || _children$0$props2 === void 0 ? void 0 : _children$0$props2.children) && String((_children$0$props3 = children[0].props) === null || _children$0$props3 === void 0 ? void 0 : (_children$0$props3$ch = _children$0$props3.children) === null || _children$0$props3$ch === void 0 ? void 0 : _children$0$props3$ch.type) === React.Fragment.toString()) {
          var _children$0$props4, _children$0$props4$ch, _children$0$props4$ch2;

          return (_children$0$props4 = children[0].props) === null || _children$0$props4 === void 0 ? void 0 : (_children$0$props4$ch = _children$0$props4.children) === null || _children$0$props4$ch === void 0 ? void 0 : (_children$0$props4$ch2 = _children$0$props4$ch.props) === null || _children$0$props4$ch2 === void 0 ? void 0 : _children$0$props4$ch2.children;
        }
      }

      return children;
    });

    _defineProperty(_assertThisInitialized(_this), "setInitialExpandedSection", function (index) {
      _this.setState({
        initialExpandedSections: [].concat(_toConsumableArray(_this.state.initialExpandedSections), [index])
      });
    });

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

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

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

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

    _defineProperty(_assertThisInitialized(_this), "hasAdjustedHeader", function () {
      var children = _this.getChildren();

      if (children === undefined) {
        return false;
      } // Check if first element is Header


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


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

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

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

      var isInitialExpanded = _this.isInitialExpanded(index);

      var roundedBorders = _this.getRoundedBorders(index);

      return React.createElement(StyledChildWrapper, {
        roundedTopBorders: roundedBorders.top,
        roundedBottomBorders: roundedBorders.bottom,
        expanded: isExpanded,
        initialExpanded: isInitialExpanded
      }, React.cloneElement(section, {
        expanded: isExpanded,
        handleToggleSection: function handleToggleSection() {
          return _this.handleToggleSection(index);
        },
        setInitialExpandedSection: function setInitialExpandedSection() {
          return _this.setInitialExpandedSection(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.renderSection(item, index);
      }), closable && React.createElement(CardCloseButton, {
        onClick: onClose,
        dataTest: _consts.default
      }));
    }
  }]);

  return Card;
}(React.Component);

var _default = Card;
exports.default = _default;