@kiwicom/orbit-components/es/PricingTable/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import React, { useState } from "react";
import styled from "styled-components";
import Stack from "../Stack";
import Text from "../Text";
import useMediaQuery from "../hooks/useMediaQuery";
const StyledPricingTable = styled.div.withConfig({
  displayName: "PricingTable__StyledPricingTable",
  componentId: "sc-1aibxyh-0"
})([""]);

const PricingTable = ({
  children,
  defaultActiveElement = 0,
  dataTest
}) => {
  const {
    isDesktop
  } = useMediaQuery();
  const [activeElement, setActiveElement] = useState(defaultActiveElement);

  const handleOnClick = i => {
    return () => {
      if (!isDesktop) {
        setActiveElement(i);
      }
    };
  };

  const resolveBasis = item => {
    if (item.length) {
      return `${Math.floor(100 / item.length)}%`;
    }

    return `100%`;
  };

  return React.createElement(React.Fragment, null, isDesktop !== null && React.createElement(StyledPricingTable, {
    dataTest: dataTest
  }, React.createElement(Stack, {
    flex: true,
    grow: true,
    spaceAfter: "medium",
    spacing: "condensed",
    align: "stretch",
    desktop: {
      spacing: "natural",
      spaceAfter: "none"
    },
    justify: "center"
  }, isDesktop ? children : React.Children.map(children, (child, i) => React.cloneElement(child, {
    active: activeElement === i,
    compact: true,
    basis: resolveBasis(child),
    onClick: handleOnClick(i)
  }))), !isDesktop && children && React.createElement(Stack, {
    spacing: "condensed"
  }, React.Children.map(children, (child, i) => {
    if (i === activeElement) {
      return React.createElement(React.Fragment, null, child.props.mobileDescription && React.createElement(Text, {
        weight: "bold",
        size: "normal"
      }, child.props.mobileDescription), child.props.children && React.cloneElement(child.props.children), child.props.action && React.cloneElement(child.props.action));
    }

    return null;
  }))));
};

export default PricingTable;
export { default as PricingTableItem } from "./PricingTableItem";