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

"use client";

import * as React from "react";
import cx from "clsx";
import HorizontalScroll from "../../../HorizontalScroll";
import ChevronUp from "../../../icons/ChevronUp";
import ChevronDown from "../../../icons/ChevronDown";
import Stack from "../../../Stack";
import ItineraryText from "../../ItineraryText";
import Text from "../../../Text";
import Slide from "../../../utils/Slide";
import useBoundingRect from "../../../hooks/useBoundingRect";
import { useRandomIdSeed } from "../../../hooks/useRandomId";
import { usePart } from "../context";
import { useItinerarySegmentMinimalColumnWidth } from "../../context";
import AirplaneDown from "../../../icons/AirplaneDown";
import ItineraryIcon from "../ItineraryIcon";
import useTheme from "../../../hooks/useTheme";
import { spaceAfterClasses } from "../../../common/tailwind";
const ItinerarySegmentDetail = ({
  duration,
  summary,
  content,
  icon = /*#__PURE__*/React.createElement(AirplaneDown, {
    size: "small",
    ariaHidden: true
  })
}) => {
  const {
    opened
  } = usePart();
  const {
    itinerarySegmentMinimalColumnWidth
  } = useItinerarySegmentMinimalColumnWidth();
  const theme = useTheme();
  const [{
    height: slideHeight
  }, slideRef] = useBoundingRect({
    height: opened ? null : 0
  });
  const randomId = useRandomIdSeed();
  return /*#__PURE__*/React.createElement("div", {
    className: "orbit-itinerary-segment-detail relative box-border w-full px-0 py-[10px]"
  }, /*#__PURE__*/React.createElement("div", {
    className: "px-300 py-0"
  }, /*#__PURE__*/React.createElement(Stack, {
    align: "center",
    spacing: "300"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex justify-end",
    style: {
      minWidth: `${itinerarySegmentMinimalColumnWidth || 60}px`
    }
  }, /*#__PURE__*/React.createElement(ItineraryText, {
    as: "div",
    size: "small",
    weight: "medium"
  }, duration)), /*#__PURE__*/React.createElement("div", {
    className: "z-default bg-transparent"
  }, /*#__PURE__*/React.createElement(ItineraryIcon, null, icon)), /*#__PURE__*/React.createElement("div", {
    className: "flex w-full items-center overflow-hidden"
  }, /*#__PURE__*/React.createElement(HorizontalScroll, {
    overflowElevation: true,
    elevationColor: "paletteWhite",
    scrollSnap: "mandatory"
  }, summary)), content && (opened ? /*#__PURE__*/React.createElement(ChevronUp, {
    color: "secondary",
    ariaHidden: true
  }) : /*#__PURE__*/React.createElement(ChevronDown, {
    color: "secondary",
    ariaHidden: true
  })))), content && /*#__PURE__*/React.createElement(Slide, {
    maxHeight: slideHeight || 0,
    expanded: opened,
    id: randomId("slide"),
    ariaLabelledBy: randomId("slide"),
    stopClickPropagation: false
  }, /*#__PURE__*/React.createElement("div", {
    className: "pt-300 cursor-pointer overflow-hidden",
    ref: slideRef
  }, /*#__PURE__*/React.createElement("div", {
    className: "px-300 z-default relative py-0",
    style: {
      insetInlineStart: `${parseInt(theme.orbit.space200, 10) + itinerarySegmentMinimalColumnWidth}px`
    }
  }, content.map(({
    title,
    items
  }, idx) => {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: typeof title === "string" ? title : idx
    }, /*#__PURE__*/React.createElement("div", {
      className: "ms-800"
    }, /*#__PURE__*/React.createElement(ItineraryText, {
      as: "div",
      size: "small",
      weight: "medium",
      spaceAfter: "small"
    }, title)), /*#__PURE__*/React.createElement("div", {
      className: cx("flex flex-col items-center", idx === content.length - 1 ? spaceAfterClasses.none : spaceAfterClasses.medium),
      style: {
        width: `calc(100% - ${parseInt(theme.orbit.space200, 10) + itinerarySegmentMinimalColumnWidth}px)`
      }
    }, items.map(({
      icon: itemIcon,
      name,
      value
    }, id) => {
      const isFirst = id === 0;
      const isLast = id === items.length - 1;
      const key = typeof name === "string" && typeof value === "string" ? `${name}-${value}` : id;
      return /*#__PURE__*/React.createElement(Stack, {
        flex: true,
        grow: false,
        align: "center",
        key: key
      }, /*#__PURE__*/React.createElement("div", {
        className: cx("px-100 relative z-[3] box-border flex items-center self-stretch", "after:-z-default after:bg-white-normal after:border-x-cloud-normal-active after:absolute after:left-0 after:box-border after:size-full after:border-x after:border-solid", isFirst || isLast ? "py-0" : "py-100", isFirst && "[&_svg]:mt-200 [&_svg]:mb-100 after:border-t-cloud-normal-active after:rounded-b-none after:rounded-t-full after:border after:border-b-0", isLast && "[&_svg]:mt-100 [&_svg]:mb-200 after:border-b-cloud-normal-active after:rounded-b-full after:rounded-t-none after:border after:border-t-0")
      }, itemIcon), /*#__PURE__*/React.createElement("div", {
        className: "flex-1 text-wrap break-words"
      }, /*#__PURE__*/React.createElement(Text, {
        size: "small"
      }, name)), /*#__PURE__*/React.createElement("div", {
        className: "grow-0 text-wrap break-all"
      }, /*#__PURE__*/React.createElement(ItineraryText, {
        as: "div",
        size: "small",
        weight: "medium",
        align: "end"
      }, value)));
    })));
  })))));
};
export default ItinerarySegmentDetail;