@kiwicom/orbit-components/lib/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 strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.StyledSummary = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _HorizontalScroll = _interopRequireDefault(require("../../../HorizontalScroll"));

var _Truncate = _interopRequireDefault(require("../../../Truncate"));

var _BadgePrimitive = require("../../../primitives/BadgePrimitive");

var _rtl = require("../../../utils/rtl");

var _ChevronUp = _interopRequireDefault(require("../../../icons/ChevronUp"));

var _ChevronDown = _interopRequireDefault(require("../../../icons/ChevronDown"));

var _defaultTheme = _interopRequireDefault(require("../../../defaultTheme"));

var _Stack = _interopRequireDefault(require("../../../Stack"));

var _Text = _interopRequireDefault(require("../../../Text"));

var _Slide = _interopRequireDefault(require("../../../utils/Slide"));

var _useBoundingRect = _interopRequireDefault(require("../../../hooks/useBoundingRect"));

var _useRandomId = require("../../../hooks/useRandomId");

var _context = require("../context");

var _context2 = require("../../context");

var _ItineraryIcon = _interopRequireDefault(require("../ItineraryIcon"));

const StyledWrapper = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledWrapper",
  componentId: "sc-19p4vfz-0"
})(["", ""], ({
  theme,
  opened,
  isContent
}) => (0, _styledComponents.css)(["width:100%;position:relative;padding:", " 0;box-sizing:border-box;background:", ";&:hover{background:", ";", "{background:", ";}}"], theme.orbit.spaceSmall, isContent ? opened && theme.orbit.paletteCloudLight : "none", isContent ? theme.orbit.paletteCloudLight : "none", _BadgePrimitive.StyledBadge, theme.orbit.paletteWhite)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledWrapper.defaultProps = {
  theme: _defaultTheme.default
};

const StyledDetailsIcon = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledDetailsIcon",
  componentId: "sc-19p4vfz-1"
})(["background:transparent;z-index:1;"]);

const StyledInnerWrapper = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledInnerWrapper",
  componentId: "sc-19p4vfz-2"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["padding:", ";"], (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceSmall}`))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledInnerWrapper.defaultProps = {
  theme: _defaultTheme.default
};

const StyledSummary = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledSummary",
  componentId: "sc-19p4vfz-3"
})(["", ""], ({
  theme,
  opened,
  isContent
}) => (0, _styledComponents.css)(["display:flex;align-items:center;border-radius:", ";width:100%;overflow:hidden;", "{background:", ";}"], theme.orbit.borderRadiusBadge, _BadgePrimitive.StyledBadge, isContent ? opened && theme.orbit.paletteWhite : "none")); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


exports.StyledSummary = StyledSummary;
StyledSummary.defaultProps = {
  theme: _defaultTheme.default
};

const StyledDuration = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledDuration",
  componentId: "sc-19p4vfz-4"
})(["", ""], ({
  $minWidth
}) => (0, _styledComponents.css)(["display:flex;justify-content:flex-end;min-width:", ";"], $minWidth && `${$minWidth}px`));

const StyledExpandable = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledExpandable",
  componentId: "sc-19p4vfz-5"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["padding-top:", ";"], theme.orbit.spaceSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledExpandable.defaultProps = {
  theme: _defaultTheme.default
};

const StyledExpandableContent = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledExpandableContent",
  componentId: "sc-19p4vfz-6"
})(["", ""], ({
  $offset,
  theme
}) => (0, _styledComponents.css)(["padding:0 ", ";position:relative;z-index:1;margin-", ":", "px;"], theme.orbit.spaceSmall, _rtl.left, parseInt(theme.orbit.spaceXSmall, 10) + $offset));

const StyledHeadingOffset = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledHeadingOffset",
  componentId: "sc-19p4vfz-7"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["margin-", ":", ";"], _rtl.left, theme.orbit.spaceXLarge));

const StyledIcon = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentDetail__StyledIcon",
  componentId: "sc-19p4vfz-8"
})(["", ""], ({
  theme,
  isFirst,
  isLast
}) => (0, _styledComponents.css)(["display:flex;align-items:center;position:relative;padding:", ";z-index:3;&:after{content:\"\";position:absolute;width:100%;height:100%;left:0;z-index:-1;background:", ";", " ", "}"], theme.orbit.spaceXXSmall, theme.orbit.paletteWhite, isFirst && (0, _styledComponents.css)(["border-radius:", " ", " 0 0;"], theme.orbit.spaceLarge, theme.orbit.spaceLarge), isLast && (0, _styledComponents.css)(["border-radius:0 0 ", " ", ";"], theme.orbit.spaceLarge, theme.orbit.spaceLarge))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

StyledExpandableContent.defaultProps = {
  theme: _defaultTheme.default
};

const ItinerarySegmentDetail = ({
  duration,
  summary,
  content,
  icon
}) => {
  const {
    opened,
    toggleOpened
  } = (0, _context.usePart)();
  const {
    calculatedWidth
  } = (0, _context2.useWidth)();
  const [{
    height: slideHeight
  }, slideRef] = (0, _useBoundingRect.default)({
    height: opened ? null : 0
  });
  const randomId = (0, _useRandomId.useRandomIdSeed)();
  const [isOverflowed, setOverflowed] = React.useState(false);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    opened: opened,
    isContent: content
  }, /*#__PURE__*/React.createElement(StyledInnerWrapper, null, /*#__PURE__*/React.createElement(_Stack.default, {
    align: "center",
    spacing: "small"
  }, /*#__PURE__*/React.createElement(StyledDuration, {
    $minWidth: calculatedWidth || 60
  }, /*#__PURE__*/React.createElement(_Text.default, {
    size: "small",
    weight: "medium"
  }, duration)), /*#__PURE__*/React.createElement(StyledDetailsIcon, null, /*#__PURE__*/React.createElement(_ItineraryIcon.default, {
    isDetails: true
  }, icon)), /*#__PURE__*/React.createElement(StyledSummary, {
    opened: opened,
    isContent: content,
    onClick: ev => {
      if (isOverflowed && opened) ev.stopPropagation();
    }
  }, /*#__PURE__*/React.createElement(_HorizontalScroll.default, {
    overflowElevation: true,
    onOverflow: () => setOverflowed(true),
    elevationColor: "paletteCloudLight",
    scrollSnap: "mandatory"
  }, summary)), content && (opened ? /*#__PURE__*/React.createElement(_ChevronUp.default, {
    color: "secondary"
  }) : /*#__PURE__*/React.createElement(_ChevronDown.default, {
    color: "secondary"
  })))), content && /*#__PURE__*/React.createElement(_Slide.default, {
    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.default, {
        size: "small",
        weight: "medium",
        spaceAfter: "small"
      }, title)), /*#__PURE__*/React.createElement(_Stack.default, {
        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.default, {
            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.default, null, /*#__PURE__*/React.createElement(_Text.default, {
            size: "small"
          }, name)), /*#__PURE__*/React.createElement(_Truncate.default, null, /*#__PURE__*/React.createElement(_Text.default, {
            size: "small",
            weight: "medium",
            align: "right"
          }, value)))
        );
      })))
    );
  })))));
};

var _default = ItinerarySegmentDetail;
exports.default = _default;