@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.

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; }

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";

const getBorder = ({
  theme
}) => `${theme.orbit.borderWidthCard} ${theme.orbit.borderStyleCard} ${theme.orbit.borderColorCard}`;

const getBorderRadius = ({
  theme
}) => theme.orbit.borderRadiusNormal; // Logic of borders radius


const 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:", ";}"], ({
  theme,
  expanded
}) => expanded && `${theme.orbit.spaceXSmall} 0`, ({
  theme,
  initialExpanded
}) => !initialExpanded && theme.orbit.durationFast, StyledCardSection, StyledCardHeader, StyledLoading, ({
  roundedTopBorders
}) => roundedTopBorders && getBorderRadius, ({
  roundedTopBorders
}) => roundedTopBorders && getBorderRadius, ({
  roundedBottomBorders
}) => roundedBottomBorders && getBorderRadius, ({
  roundedBottomBorders
}) => roundedBottomBorders && getBorderRadius, ({
  expanded,
  theme
}) => expanded && theme.orbit.boxShadowActionActive, getBorder, getBorder, getBorder, ({
  theme
}) => theme.orbit.backgroundCard, StyledCardSection, StyledCardSection, ({
  expanded
}) => expanded && getBorder);
StyledChildWrapper.defaultProps = {
  theme: defaultTheme
};
const 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:", ";}}}"], ({
  theme
}) => theme.orbit.fontFamily, getSpacingToken, StyledCardHeader, right, ({
  theme,
  closable
}) => closable && theme.orbit.spaceLarge, ({
  hasAdjustedHeader
}) => hasAdjustedHeader && 0, StyledChildWrapper, StyledCardHeader, StyledCardSection, StyledLoading, getBorder, getBorderRadius, getBorderRadius, StyledChildWrapper, StyledCardSection, ({
  hasAdjustedHeader
}) => hasAdjustedHeader && 0, StyledCardSectionContent, ({
  hasAdjustedHeader
}) => hasAdjustedHeader && 0, StyledCardHeader, StyledCardSection, getBorderRadius, getBorderRadius);
StyledCard.defaultProps = {
  theme: defaultTheme
};
const StyledCloseContainer = styled.div.withConfig({
  displayName: "Card__StyledCloseContainer",
  componentId: "vbuzw-2"
})(["position:absolute;top:0;", ":0;z-index:1;"], right);

const CardCloseButton = ({
  onClick,
  dataTest
}) => {
  const translate = useTranslate();
  return React.createElement(StyledCloseContainer, null, React.createElement(ButtonLink, {
    dataTest: dataTest,
    type: "secondary",
    size: "small",
    icon: React.createElement(Close, null),
    onClick: onClick,
    transparent: true,
    title: translate("button_close")
  }));
};

class Card extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      expandedSections: [],
      initialExpandedSections: []
    });

    _defineProperty(this, "getRoundedBorders", index => {
      const {
        expandedSections
      } = this.state;
      const topBorder = expandedSections.indexOf(index - 1) !== -1 || expandedSections.indexOf(index) !== -1;
      const bottomBorder = expandedSections.indexOf(index + 1) !== -1 || expandedSections.indexOf(index) !== -1;
      return {
        top: topBorder,
        bottom: bottomBorder
      };
    });

    _defineProperty(this, "getChildren", () => {
      var _children$0$type, _children$0$props;

      // Loading Card Logic
      const 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(this, "setInitialExpandedSection", index => {
      this.setState({
        initialExpandedSections: [...this.state.initialExpandedSections, index]
      });
    });

    _defineProperty(this, "isExpanded", index => this.state.expandedSections.indexOf(index) !== -1);

    _defineProperty(this, "isInitialExpanded", index => this.state.initialExpandedSections.indexOf(index) !== -1);

    _defineProperty(this, "isExpandableCardSection", item => item.type.name === CardSection.name && item.props.expandable);

    _defineProperty(this, "handleToggleSection", index => {
      this.setState({
        expandedSections: this.state.expandedSections.indexOf(index) === -1 ? [...this.state.expandedSections, index] : this.state.expandedSections.filter(value => value !== index),
        initialExpandedSections: [...this.state.initialExpandedSections.filter(sectionIndex => sectionIndex !== index)]
      });
    });

    _defineProperty(this, "hasAdjustedHeader", () => {
      const 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(this, "renderSection", (section, index) => {
      const isExpanded = this.isExpanded(index);
      const isInitialExpanded = this.isInitialExpanded(index);
      const roundedBorders = this.getRoundedBorders(index);
      return React.createElement(StyledChildWrapper, {
        roundedTopBorders: roundedBorders.top,
        roundedBottomBorders: roundedBorders.bottom,
        expanded: isExpanded,
        initialExpanded: isInitialExpanded
      }, React.cloneElement(section, {
        expanded: isExpanded,
        handleToggleSection: () => this.handleToggleSection(index),
        setInitialExpandedSection: () => this.setInitialExpandedSection(index)
      }));
    });
  }

  render() {
    const {
      closable,
      dataTest,
      spaceAfter,
      onClose
    } = this.props;
    const children = this.getChildren();
    return React.createElement(StyledCard, {
      closable: closable,
      "data-test": dataTest,
      spaceAfter: spaceAfter,
      hasAdjustedHeader: this.hasAdjustedHeader()
    }, children && React.Children.map(children, (item, index) => this.renderSection(item, index)), closable && React.createElement(CardCloseButton, {
      onClick: onClose,
      dataTest: CLOSE_BUTTON_DATA_TEST
    }));
  }

}

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";