@kiwicom/orbit-components/es/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.js

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

import * as React from "react";
import styled, { css } from "styled-components";
import HorizontalScroll from "../../../HorizontalScroll";
import Truncate from "../../../Truncate";
import { left, rtlSpacing } from "../../../utils/rtl";
import ChevronUp from "../../../icons/ChevronUp";
import ChevronDown from "../../../icons/ChevronDown";
import themeDefault from "../../../defaultTheme";
import Stack from "../../../Stack";
import Text from "../../../Text";
import Slide from "../../../utils/Slide";
import useBoundingRect from "../../../hooks/useBoundingRect";
import { useRandomIdSeed } from "../../../hooks/useRandomId";
import { usePart } from "../context";
import { useWidth } from "../../context";
import ItineraryIcon from "../ItineraryIcon";
const StyledWrapper = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledWrapper",
  componentId: "sc-19p4vfz-0"
})(["width:100%;position:relative;padding:10px 0;box-sizing:border-box;"]);
const StyledDetailsIcon = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledDetailsIcon",
  componentId: "sc-19p4vfz-1"
})(["background:transparent;z-index:1;"]);
const StyledInnerWrapper = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledInnerWrapper",
  componentId: "sc-19p4vfz-2"
})(["", ""], ({
  theme
}) => css(["padding:", ";"], rtlSpacing(`0 ${theme.orbit.spaceSmall}`))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledInnerWrapper.defaultProps = {
  theme: themeDefault
};
export const StyledSummary = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledSummary",
  componentId: "sc-19p4vfz-3"
})(["display:flex;align-items:center;width:100%;overflow:hidden;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledSummary.defaultProps = {
  theme: themeDefault
};
const StyledDuration = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledDuration",
  componentId: "sc-19p4vfz-4"
})(["", ""], ({
  $minWidth
}) => css(["display:flex;justify-content:flex-end;min-width:", ";"], $minWidth && `${$minWidth}px`));
const StyledExpandable = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledExpandable",
  componentId: "sc-19p4vfz-5"
})(["", ""], ({
  theme
}) => css(["padding-top:", ";"], theme.orbit.spaceSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledExpandable.defaultProps = {
  theme: themeDefault
};
const StyledExpandableContent = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledExpandableContent",
  componentId: "sc-19p4vfz-6"
})(["", ""], ({
  $offset,
  theme
}) => css(["padding:0 ", ";position:relative;z-index:1;margin-", ":", "px;"], theme.orbit.spaceSmall, left, parseInt(theme.orbit.spaceXSmall, 10) + $offset));
const StyledHeadingOffset = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledHeadingOffset",
  componentId: "sc-19p4vfz-7"
})(["", ""], ({
  theme
}) => css(["margin-", ":", ";"], left, theme.orbit.spaceXLarge));
const StyledIcon = styled.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledIcon",
  componentId: "sc-19p4vfz-8"
})(["", ""], ({
  theme,
  isFirst,
  isLast
}) => css(["display:flex;align-items:center;position:relative;box-sizing:border-box;padding:", ";z-index:3;svg{padding-top:", ";padding-bottom:", ";}&:after{content:\"\";box-sizing:border-box;position:absolute;width:100%;height:100%;left:0;border-left:1px solid ", ";border-right:1px solid ", ";z-index:-1;background:", ";", " ", "}"], theme.orbit.spaceXXSmall, isFirst && theme.orbit.spaceXXSmall, isLast && theme.orbit.spaceXXSmall, theme.orbit.paletteCloudNormalActive, theme.orbit.paletteCloudNormalActive, theme.orbit.paletteWhite, isFirst && css(["border:1px solid ", ";border-bottom:transparent;border-radius:", " ", " 0 0;"], theme.orbit.paletteCloudNormalActive, theme.orbit.spaceLarge, theme.orbit.spaceLarge), isLast && css(["border:1px solid ", ";border-top:transparent;border-radius:0 0 ", " ", ";"], theme.orbit.paletteCloudNormalActive, theme.orbit.spaceLarge, theme.orbit.spaceLarge))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledIcon.defaultProps = {
  theme: themeDefault
}; // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledExpandableContent.defaultProps = {
  theme: themeDefault
};

const ItinerarySegmentDetail = ({
  duration,
  summary,
  content,
  icon
}) => {
  const {
    opened,
    toggleOpened
  } = usePart();
  const {
    calculatedWidth
  } = useWidth();
  const [{
    height: slideHeight
  }, slideRef] = useBoundingRect({
    height: opened ? null : 0
  });
  const randomId = useRandomIdSeed();
  const [isOverflowed, setOverflowed] = React.useState(false);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    opened: opened
  }, /*#__PURE__*/React.createElement(StyledInnerWrapper, null, /*#__PURE__*/React.createElement(Stack, {
    align: "center",
    spacing: "small"
  }, /*#__PURE__*/React.createElement(StyledDuration, {
    $minWidth: calculatedWidth || 60
  }, /*#__PURE__*/React.createElement(Text, {
    as: "div",
    size: "small",
    weight: "medium"
  }, duration)), /*#__PURE__*/React.createElement(StyledDetailsIcon, null, /*#__PURE__*/React.createElement(ItineraryIcon, {
    isDetails: true
  }, icon)), /*#__PURE__*/React.createElement(StyledSummary, {
    onClick: ev => {
      if (isOverflowed && opened) ev.stopPropagation();
    }
  }, /*#__PURE__*/React.createElement(HorizontalScroll, {
    overflowElevation: true,
    onOverflow: () => setOverflowed(true),
    elevationColor: "paletteWhite",
    scrollSnap: "mandatory"
  }, summary)), content && (opened ? /*#__PURE__*/React.createElement(ChevronUp, {
    color: "secondary"
  }) : /*#__PURE__*/React.createElement(ChevronDown, {
    color: "secondary"
  })))), content && /*#__PURE__*/React.createElement(Slide, {
    maxHeight: slideHeight,
    expanded: opened,
    id: randomId("slide"),
    ariaLabelledBy: randomId("slide")
  }, /*#__PURE__*/React.createElement(StyledExpandable, {
    ref: slideRef,
    onClick: toggleOpened
  }, /*#__PURE__*/React.createElement(StyledExpandableContent, {
    $offset: calculatedWidth
  }, content.map(({
    title,
    items
  }, idx) => {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line react/no-array-index-key
      React.createElement(React.Fragment, {
        key: idx
      }, /*#__PURE__*/React.createElement(StyledHeadingOffset, null, /*#__PURE__*/React.createElement(Text, {
        as: "div",
        size: "small",
        weight: "medium",
        spaceAfter: "small"
      }, title)), /*#__PURE__*/React.createElement(Stack, {
        direction: "column",
        spacing: "none",
        spaceAfter: idx === content.length - 1 ? "none" : "medium"
      }, items.map(({
        icon: itemIcon,
        name,
        value
      }, id) => {
        return (
          /*#__PURE__*/
          // eslint-disable-next-line react/no-array-index-key
          React.createElement(Stack, {
            flex: true,
            grow: false,
            align: "center",
            key: id
          }, /*#__PURE__*/React.createElement(StyledIcon, {
            isFirst: id === 0,
            isLast: id === items.length - 1
          }, itemIcon), /*#__PURE__*/React.createElement(Truncate, null, /*#__PURE__*/React.createElement(Text, {
            size: "small"
          }, name)), /*#__PURE__*/React.createElement(Truncate, null, /*#__PURE__*/React.createElement(Text, {
            as: "div",
            size: "small",
            weight: "medium",
            align: "right"
          }, value)))
        );
      })))
    );
  })))));
};

export default ItinerarySegmentDetail;