@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
206 lines (198 loc) • 8.13 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import HorizontalScroll from "../../../HorizontalScroll";
import Truncate from "../../../Truncate";
import { StyledBadge } from "../../../primitives/BadgePrimitive";
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"
})(["", ""], ({
theme,
opened,
isContent
}) => 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", StyledBadge, theme.orbit.paletteWhite)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledWrapper.defaultProps = {
theme: themeDefault
};
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"
})(["", ""], ({
theme,
opened,
isContent
}) => css(["display:flex;align-items:center;border-radius:", ";width:100%;overflow:hidden;", "{background:", ";}"], theme.orbit.borderRadiusBadge, StyledBadge, isContent ? opened && theme.orbit.paletteWhite : "none")); // $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;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 && css(["border-radius:", " ", " 0 0;"], theme.orbit.spaceLarge, theme.orbit.spaceLarge), isLast && 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: 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,
isContent: content
}, /*#__PURE__*/React.createElement(StyledInnerWrapper, null, /*#__PURE__*/React.createElement(Stack, {
align: "center",
spacing: "small"
}, /*#__PURE__*/React.createElement(StyledDuration, {
$minWidth: calculatedWidth || 60
}, /*#__PURE__*/React.createElement(Text, {
size: "small",
weight: "medium"
}, duration)), /*#__PURE__*/React.createElement(StyledDetailsIcon, null, /*#__PURE__*/React.createElement(ItineraryIcon, {
isDetails: true
}, icon)), /*#__PURE__*/React.createElement(StyledSummary, {
opened: opened,
isContent: content,
onClick: ev => {
if (isOverflowed && opened) ev.stopPropagation();
}
}, /*#__PURE__*/React.createElement(HorizontalScroll, {
overflowElevation: true,
onOverflow: () => setOverflowed(true),
elevationColor: "paletteCloudLight",
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, {
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, {
size: "small",
weight: "medium",
align: "right"
}, value)))
);
})))
);
})))));
};
export default ItinerarySegmentDetail;