@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.
283 lines (264 loc) • 9.94 kB
JavaScript
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import * as React from "react";
import styled from "styled-components";
import defaultTokens from "../defaultTokens";
import CarrierLogo, { StyledCarrierLogo } from "../CarrierLogo";
import Airplane from "../icons/Airplane";
import ShowMore from "../icons/ShowMore";
import ShowLess from "../icons/ShowLess";
import Bus from "../icons/Bus";
import Train from "../icons/Train";
import Text, { StyledText } from "../Text";
import { CARRIER_TYPE_OPTIONS } from "../CarrierLogo/consts";
import { getSize } from "../Icon";
import { ICON_SIZES } from "../Icon/consts";
export const StyledTripSegment = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegment",
componentId: "sc-1pmcslk-0"
})(["display:flex;width:100%;"]);
export const StyledTripSegmentMilestone = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentMilestone",
componentId: "sc-1pmcslk-1"
})(["display:flex;height:50px;width:", ";align-items:center;justify-content:space-between;flex:0 0 auto;cursor:pointer;z-index:1;> svg{z-index:1;height:", ";background:", ";transition:color ", " ease-in-out;}"], getSize(ICON_SIZES.MEDIUM), getSize(ICON_SIZES.MEDIUM), ({
theme
}) => theme.orbit.paletteWhite, ({
theme
}) => theme.orbit.durationFast);
StyledTripSegmentMilestone.defaultProps = {
theme: defaultTokens
};
const StyledTripSegmentMilestoneArrow = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentMilestoneArrow",
componentId: "sc-1pmcslk-2"
})(["position:relative;width:6px;height:12px;right:-1px;z-index:1;&:before,&:after{position:absolute;content:\" \";width:0;height:0;border-style:solid;transition:border-color ", " ease-in-out;}&:before{border-width:6px 6px 6px 0;border-color:transparent ", " transparent transparent;}&:after{border-color:transparent ", " transparent transparent;border-width:4px 4px 4px 0;border-color:transparent ", " transparent transparent;margin:2px 0 0 0;right:0;}"], ({
theme
}) => theme.orbit.durationFast, ({
theme
}) => theme.orbit.paletteCloudNormal, ({
theme
}) => theme.orbit.paletteWhite, ({
theme
}) => theme.orbit.paletteWhite);
StyledTripSegmentMilestoneArrow.defaultProps = {
theme: defaultTokens
};
const StyledTripSegmentContent = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentContent",
componentId: "sc-1pmcslk-3"
})(["display:flex;flex-direction:row;flex-wrap:wrap;width:100%;background:", ";border-radius:", ";border:", ";transition:border-color ", " ease-in-out;"], ({
theme
}) => theme.orbit.paletteWhite, ({
theme
}) => theme.orbit.borderRadiusNormal, ({
theme
}) => `${theme.orbit.borderWidthCard} ${theme.orbit.borderStyleCard} ${theme.orbit.paletteCloudNormal}`, ({
theme
}) => theme.orbit.durationFast);
StyledTripSegmentContent.defaultProps = {
theme: defaultTokens
};
const StyledChevrons = styled.div.withConfig({
displayName: "TripSegment__StyledChevrons",
componentId: "sc-1pmcslk-4"
})(["display:flex;background-color:", ";flex-direction:column;> svg{transition:color ", " ease-in-out;}"], ({
theme
}) => theme.orbit.paletteWhite, ({
theme
}) => theme.orbit.durationFast);
StyledChevrons.defaultProps = {
theme: defaultTokens
};
const Chevrons = ({
expanded
}) => React.createElement(StyledChevrons, null, expanded ? React.createElement(ShowLess, {
size: "small",
color: "secondary"
}) : React.createElement(ShowMore, {
size: "small",
color: "secondary"
}));
const StyledTripSegmentOverview = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentOverview",
componentId: "sc-1pmcslk-5"
})(["display:flex;", "{line-height:1.2;}&:hover{", "{border-color:", ";}", ",", "{svg{color:", ";}}", "{&:before{border-color:transparent ", " transparent transparent;}}}"], StyledText, StyledTripSegmentContent, ({
theme
}) => theme.orbit.paletteCloudNormalHover, StyledTripSegmentMilestone, StyledChevrons, ({
theme
}) => theme.orbit.colorIconPrimary, StyledTripSegmentMilestoneArrow, ({
theme
}) => theme.orbit.paletteCloudNormalHover);
StyledTripSegmentOverview.defaultProps = {
theme: defaultTokens
};
const StyledTripSegmentCarrier = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentCarrier",
componentId: "sc-1pmcslk-6"
})(["display:flex;align-items:center;position:relative;left:", ";"], ({
theme
}) => theme.orbit.spaceMedium);
StyledTripSegmentCarrier.defaultProps = {
theme: defaultTokens
};
const StyledTripSegmentOverviewWrapper = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentOverviewWrapper",
componentId: "sc-1pmcslk-7"
})(["display:flex;width:100%;justify-content:space-between;align-items:center;padding:", ";cursor:pointer;", "{padding:", ";}"], ({
theme
}) => theme.orbit.spaceXSmall, StyledCarrierLogo, ({
theme
}) => `0 ${theme.orbit.spaceXXSmall} 0
${theme.orbit.spaceXSmall}`);
StyledTripSegmentOverviewWrapper.defaultProps = {
theme: defaultTokens
};
const StyledTripSegmentOverviewColumn = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentOverviewColumn",
componentId: "sc-1pmcslk-8"
})(["display:flex;flex-direction:column;"]);
const StyledTripSegmentOverviewTime = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentOverviewTime",
componentId: "sc-1pmcslk-9"
})(["padding:0 ", " 0 0;"], ({
theme
}) => theme.orbit.spaceSmall);
StyledTripSegmentOverviewTime.defaultProps = {
theme: defaultTokens
};
const StyledTripSegmentChildren = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentChildren",
componentId: "sc-1pmcslk-10"
})(["width:100%;padding:", ";margin:", ";border-top:", ";max-height:", ";transition:max-height ", " linear,padding ", " linear,border-top ", " linear;overflow:hidden;"], ({
theme,
expanded
}) => expanded ? `${theme.orbit.spaceXSmall} 0` : "0", ({
theme
}) => `0 ${theme.orbit.spaceXSmall}`, ({
theme,
expanded
}) => expanded ? `1px solid ${theme.orbit.paletteCloudNormal}` : `0px solid ${theme.orbit.paletteCloudNormal}`, ({
initialExpanded,
contentHeight,
expanded
}) => initialExpanded && (expanded ? `${contentHeight}px` : `0`), ({
theme
}) => theme.orbit.durationFast, ({
theme
}) => theme.orbit.durationFast, ({
theme
}) => theme.orbit.durationFast);
StyledTripSegmentChildren.defaultProps = {
theme: defaultTokens
};
const MilestoneIcon = ({
type
}) => {
switch (type) {
case "airline":
return React.createElement(Airplane, {
size: "small",
color: "secondary"
});
case "train":
return React.createElement(Train, {
size: "small",
color: "secondary"
});
case "bus":
return React.createElement(Bus, {
size: "small",
color: "secondary"
});
default:
return React.createElement(Airplane, {
size: "small",
color: "secondary"
});
}
};
class TripSegment extends React.PureComponent {
constructor(props) {
super(props);
_defineProperty(this, "handleToggle", () => {
const {
onClick
} = this.props;
this.setState(prevState => ({
expanded: !prevState.expanded,
initialExpanded: true
}));
if (onClick) {
onClick();
}
});
_defineProperty(this, "contentHeight", void 0);
_defineProperty(this, "node", void 0);
this.contentHeight = 0;
this.node = React.createRef();
this.state = {
expanded: this.props.initialExpanded || false,
initialExpanded: !this.props.initialExpanded
};
}
componentDidMount() {
setTimeout(() => {
this.setHeight();
}, 500);
}
setHeight() {
var _this$node;
this.contentHeight = (_this$node = this.node) === null || _this$node === void 0 ? void 0 : _this$node.current.clientHeight;
}
render() {
const {
children,
departure,
departureTime,
arrival,
arrivalTime,
duration,
carrier,
dataTest
} = this.props;
const {
expanded,
initialExpanded
} = this.state;
const {
contentHeight
} = this;
return React.createElement(StyledTripSegment, {
dataTest: dataTest
}, React.createElement(StyledTripSegmentMilestone, {
onClick: this.handleToggle
}, React.createElement(MilestoneIcon, {
type: carrier.type || CARRIER_TYPE_OPTIONS.AIRLINE
}), React.createElement(StyledTripSegmentMilestoneArrow, null)), React.createElement(StyledTripSegmentContent, null, React.createElement(StyledTripSegmentOverviewWrapper, {
onClick: this.handleToggle
}, React.createElement(StyledTripSegmentOverview, null, React.createElement(StyledTripSegmentOverviewColumn, null, React.createElement(StyledTripSegmentOverviewTime, null, React.createElement(Text, {
type: "attention",
align: "right"
}, departureTime)), React.createElement(StyledTripSegmentOverviewTime, null, React.createElement(Text, {
type: "attention",
align: "right"
}, arrivalTime))), React.createElement(StyledTripSegmentOverviewColumn, null, React.createElement(Text, {
type: "primary"
}, departure), React.createElement(Text, {
type: "primary"
}, arrival))), React.createElement(StyledTripSegmentCarrier, null, React.createElement(Text, {
type: "secondary",
size: "small"
}, duration), React.createElement(CarrierLogo, {
size: "medium",
carriers: [carrier]
}), React.createElement(Chevrons, {
expanded: expanded
}))), React.createElement(StyledTripSegmentChildren, {
expanded: expanded,
contentHeight: contentHeight,
initialExpanded: initialExpanded
}, React.createElement("div", {
ref: this.node
}, children))));
}
}
export default TripSegment;