@kiwicom/orbit-components/lib/deprecated/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";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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 = exports.StyledCard = void 0;

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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 _useTranslate = _interopRequireDefault(require("../../hooks/useTranslate"));

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

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

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: "vbuzw-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,
      theme = _ref9.theme;
  return expanded && theme.orbit.boxShadowActionActive;
}, 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;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

var StyledCard = _styledComponents.default.div.withConfig({
  displayName: "Card__StyledCard",
  componentId: "vbuzw-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); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

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

var CardCloseButton = function CardCloseButton(_ref17) {
  var onClick = _ref17.onClick,
      dataTest = _ref17.dataTest;
  var translate = (0, _useTranslate.default)();
  return /*#__PURE__*/React.createElement(StyledCloseContainer, null, /*#__PURE__*/React.createElement(_ButtonLink.default, {
    dataTest: dataTest,
    type: "secondary",
    size: "small",
    iconLeft: /*#__PURE__*/React.createElement(_Close.default, null),
    onClick: onClick,
    title: translate("button_close")
  }));
};

var Card = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(Card, _React$Component);

  var _super = _createSuper(Card);

  function Card() {
    var _this;

    (0, _classCallCheck2.default)(this, Card);

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

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      expandedSections: [],
      initialExpandedSections: []
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
      };
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 ( // $FlowFixMe
      _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 && _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;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setInitialExpandedSection", function (index) {
      _this.setState({
        initialExpandedSections: [].concat((0, _toConsumableArray2.default)(_this.state.initialExpandedSections), [index])
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isExpanded", function (index) {
      return _this.state.expandedSections.indexOf(index) !== -1;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isInitialExpanded", function (index) {
      return _this.state.initialExpandedSections.indexOf(index) !== -1;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isExpandableCardSection", function (item) {
      return item.type.name === _CardSection.default.name && item.props.expandable;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleToggleSection", function (index) {
      _this.setState({
        expandedSections: _this.state.expandedSections.indexOf(index) === -1 ? [].concat((0, _toConsumableArray2.default)(_this.state.expandedSections), [index]) : _this.state.expandedSections.filter(function (value) {
          return value !== index;
        }),
        initialExpandedSections: (0, _toConsumableArray2.default)(_this.state.initialExpandedSections.filter(function (sectionIndex) {
          return sectionIndex !== index;
        }))
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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]);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSection", function (section, index) {
      var isExpanded = _this.isExpanded(index);

      var isInitialExpanded = _this.isInitialExpanded(index);

      var roundedBorders = _this.getRoundedBorders(index);

      return /*#__PURE__*/React.createElement(StyledChildWrapper, {
        roundedTopBorders: roundedBorders.top,
        roundedBottomBorders: roundedBorders.bottom,
        expanded: isExpanded,
        initialExpanded: isInitialExpanded
      }, /*#__PURE__*/React.cloneElement(section, {
        expanded: isExpanded,
        handleToggleSection: function handleToggleSection() {
          return _this.handleToggleSection(index);
        },
        setInitialExpandedSection: function setInitialExpandedSection() {
          return _this.setInitialExpandedSection(index);
        }
      }));
    });
    return _this;
  }

  (0, _createClass2.default)(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 /*#__PURE__*/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 && /*#__PURE__*/React.createElement(CardCloseButton, {
        onClick: onClose,
        dataTest: _consts.default
      }));
    }
  }]);
  return Card;
}(React.Component);

var _default = Card;
exports.default = _default;