@kiwicom/orbit-components/es/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.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

import * as React from "react";
import styled from "styled-components";
import defaultTheme from "../../defaultTheme";
import Close from "../../icons/Close";
import ButtonLink from "../../ButtonLink";
import CardSection, { StyledCardSection } from "./CardSection";
import CardHeader, { StyledCardHeader } from "./CardHeader";
import { StyledCardSectionContent } from "./CardSection/CardSectionContent";
import Loading, { StyledLoading } from "../../Loading";
import getSpacingToken from "../../common/getSpacingToken";
import { right } from "../../utils/rtl";
import CLOSE_BUTTON_DATA_TEST from "./consts";
import useTranslate from "../../hooks/useTranslate";

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 = styled.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;
}, StyledCardSection, StyledCardHeader, 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;
}, StyledCardSection, StyledCardSection, function (_ref11) {
  var expanded = _ref11.expanded;
  return expanded && getBorder;
});
StyledChildWrapper.defaultProps = {
  theme: defaultTheme
};
export var StyledCard = styled.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, StyledCardHeader, 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, StyledCardHeader, StyledCardSection, StyledLoading, getBorder, getBorderRadius, getBorderRadius, StyledChildWrapper, StyledCardSection, function (_ref15) {
  var hasAdjustedHeader = _ref15.hasAdjustedHeader;
  return hasAdjustedHeader && 0;
}, StyledCardSectionContent, function (_ref16) {
  var hasAdjustedHeader = _ref16.hasAdjustedHeader;
  return hasAdjustedHeader && 0;
}, StyledCardHeader, StyledCardSection, getBorderRadius, getBorderRadius);
StyledCard.defaultProps = {
  theme: defaultTheme
};
var StyledCloseContainer = styled.div.withConfig({
  displayName: "Card__StyledCloseContainer",
  componentId: "vbuzw-2"
})(["position:absolute;top:0;", ":0;z-index:1;"], right);

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

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

  var _super = _createSuper(Card);

  function Card() {
    var _this;

    _classCallCheck(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));

    _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.name !== "" && ((_children$0$type = children[0].type) === null || _children$0$type === void 0 ? void 0 : _children$0$type.name) === Loading.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.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.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 /*#__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;
  }

  _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 /*#__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: CLOSE_BUTTON_DATA_TEST
      }));
    }
  }]);

  return Card;
}(React.Component);

export default Card;
export { default as CardHeader } from "./CardHeader";
export { default as CardSection } from "./CardSection";
export { default as CardSectionHeader } from "./CardSection/CardSectionHeader";
export { default as CardSectionContent } from "./CardSection/CardSectionContent";