@kiwicom/orbit-components/es/Card/CardSection/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, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import ChevronDown from "../../icons/ChevronDown";
import { getSize } from "../../Icon";
import { ICON_SIZES } from "../../Icon/consts";
import media from "../../utils/mediaQuery";
const StyledCardSectionIconRight = styled(ChevronDown).withConfig({
  displayName: "CardSection__StyledCardSectionIconRight",
  componentId: "o8zdxr-0"
})(["align-self:center;transition:", ";"], ({
  theme
}) => theme.orbit.durationFast);
StyledCardSectionIconRight.defaultProps = {
  theme: defaultTheme
};
const StyledCardSectionContent = styled.div.withConfig({
  displayName: "CardSection__StyledCardSectionContent",
  componentId: "o8zdxr-1"
})(["font-family:", ";font-size:", ";line-height:", ";color:", ";border-top:", ";padding-top:", ";overflow:hidden;"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.lineHeightText, ({
  theme
}) => theme.orbit.colorTextPrimary, ({
  theme,
  expanded
}) => expanded ? `1px solid ${theme.orbit.paletteCloudNormal}` : `0px solid ${theme.orbit.paletteCloudNormal}`, ({
  theme,
  expanded
}) => expanded && `${theme.orbit.spaceMedium}`);
StyledCardSectionContent.defaultProps = {
  theme: defaultTheme
};
export const StyledCardSection = styled.div.withConfig({
  displayName: "CardSection__StyledCardSection",
  componentId: "o8zdxr-2"
})(["width:100%;padding:", ";box-sizing:border-box;position:relative;background:", ";", ""], ({
  theme
}) => theme.orbit.spaceMedium, ({
  theme
}) => theme.orbit.backgroundCard, media.desktop(css(["padding:", ";"], ({
  theme
}) => theme.orbit.spaceLarge)));
StyledCardSection.defaultProps = {
  theme: defaultTheme
};
const StyledCardSectionHeader = styled.div.withConfig({
  displayName: "CardSection__StyledCardSectionHeader",
  componentId: "o8zdxr-3"
})(["margin-bottom:", ";display:flex;flex-direction:row;cursor:pointer;position:relative;min-height:", ";"], ({
  theme,
  expanded
}) => expanded && theme.orbit.spaceMedium, ({
  expandable
}) => expandable && getSize(ICON_SIZES.MEDIUM));
StyledCardSectionHeader.defaultProps = {
  theme: defaultTheme
};
export const CardSectionContext = React.createContext({
  expandable: false,
  expanded: false,
  handleToggleSection: () => {},
  onKeyDownHandler: () => {}
});

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

    _defineProperty(this, "injectCallbackAndToggleSection", () => {
      const {
        handleToggleSection,
        onClose,
        onExpand,
        expanded
      } = this.props;
      handleToggleSection(); // First do toggle

      if (expanded && onClose) {
        // If is expanded -> action is closing
        onClose();
      }

      if (!expanded && onExpand) {
        // if is closed > action is expanding
        onExpand();
      }
    });

    _defineProperty(this, "handleKeyDown", ev => {
      if (ev.keyCode === 13 || ev.keyCode === 32) {
        ev.preventDefault();
        this.injectCallbackAndToggleSection();
      }
    });
  }

  componentDidMount() {
    const {
      handleToggleSection,
      initialExpanded,
      setInitialExpandedSection
    } = this.props;

    if (initialExpanded) {
      handleToggleSection();
      setInitialExpandedSection();
    }
  }

  render() {
    const {
      children,
      dataTest,
      expandable,
      expanded
    } = this.props;
    return React.createElement(StyledCardSection, {
      "data-test": dataTest,
      expandable: expandable,
      expanded: expanded
    }, React.createElement(CardSectionContext.Provider, {
      value: {
        expandable,
        expanded,
        handleToggleSection: this.injectCallbackAndToggleSection,
        onKeyDownHandler: this.handleKeyDown
      }
    }, children));
  }

}

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