@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.
317 lines (296 loc) • 11.4 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, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
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";
import { right, rtlSpacing } from "../utils/rtl";
import KEY_CODE_MAP from "../common/keyMaps";
import Slide from "../utils/Slide";
import Truncate from "../Truncate";
import randomID from "../utils/randomID";
export const StyledTripSegmentMilestone = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentMilestone",
componentId: "sc-1pmcslk-0"
})(["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: defaultTheme
};
const StyledTripSegmentMilestoneArrow = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentMilestoneArrow",
componentId: "sc-1pmcslk-1"
})(["position:relative;width:6px;height:12px;", ":-1px;z-index:1;transform:", ";&: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:", ";right:0;}"], right, ({
theme
}) => theme.rtl && `rotate(180deg)`, ({
theme
}) => theme.orbit.durationFast, ({
theme
}) => theme.orbit.paletteCloudNormal, ({
theme
}) => theme.orbit.paletteWhite, ({
theme
}) => theme.orbit.paletteWhite, rtlSpacing(`2px 0 0 0`));
StyledTripSegmentMilestoneArrow.defaultProps = {
theme: defaultTheme
};
const StyledTripSegmentContent = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentContent",
componentId: "sc-1pmcslk-2"
})(["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: defaultTheme
};
const StyledChevrons = styled.div.withConfig({
displayName: "TripSegment__StyledChevrons",
componentId: "sc-1pmcslk-3"
})(["display:flex;background-color:", ";flex-direction:column;> svg{transition:color ", " ease-in-out;}"], ({
theme
}) => theme.orbit.paletteWhite, ({
theme
}) => theme.orbit.durationFast);
StyledChevrons.defaultProps = {
theme: defaultTheme
};
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-4"
})(["display:flex;flex:0 1 auto;width:calc(100% - 96px);min-width:0;", "{line-height:1.2;}"], StyledText);
StyledTripSegmentOverview.defaultProps = {
theme: defaultTheme
};
const StyledTripSegmentCarrier = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentCarrier",
componentId: "sc-1pmcslk-5"
})(["display:flex;align-items:center;position:absolute;", ":", ";top:0;height:100%;"], right, ({
theme
}) => `-${theme.orbit.spaceXSmall}`);
StyledTripSegmentCarrier.defaultProps = {
theme: defaultTheme
};
const StyledTripSegmentOverviewWrapper = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentOverviewWrapper",
componentId: "sc-1pmcslk-6"
})(["display:flex;width:100%;justify-content:space-between;align-items:center;padding:", ";cursor:pointer;position:relative;", "{margin:", ";}"], ({
theme
}) => theme.orbit.spaceXSmall, StyledCarrierLogo, ({
theme
}) => rtlSpacing(`0 ${theme.orbit.spaceXXSmall} 0
${theme.orbit.spaceXSmall}`));
StyledTripSegmentOverviewWrapper.defaultProps = {
theme: defaultTheme
};
const StyledTripSegmentOverviewColumn = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentOverviewColumn",
componentId: "sc-1pmcslk-7"
})(["display:flex;flex-direction:column;", ";"], ({
grow
}) => grow && css(["min-width:0;flex:1;"]));
const StyledTripSegmentOverviewTime = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentOverviewTime",
componentId: "sc-1pmcslk-8"
})(["padding:", ";"], ({
theme
}) => rtlSpacing(`0 ${theme.orbit.spaceSmall} 0 0`));
StyledTripSegmentOverviewTime.defaultProps = {
theme: defaultTheme
};
const StyledTripSegmentChildren = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegmentChildren",
componentId: "sc-1pmcslk-9"
})(["padding:", ";margin:", ";border-top:", ";transition:padding ", " linear,border-top ", " linear;"], ({
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}`, ({
theme
}) => theme.orbit.durationFast, ({
theme
}) => theme.orbit.durationFast);
StyledTripSegmentChildren.defaultProps = {
theme: defaultTheme
};
export const StyledTripSegment = styled.div.withConfig({
displayName: "TripSegment__StyledTripSegment",
componentId: "sc-1pmcslk-10"
})(["display:flex;width:100%;&:focus{outline:0;", "{border-color:", ";}", ",", "{svg{color:", ";}}", "{&:before{border-color:transparent ", " transparent transparent;}}}&:hover{", "{border-color:", ";}", ",", "{svg{color:", ";}}", "{&:before{border-color:transparent ", " transparent transparent;}}}"], StyledTripSegmentContent, ({
theme
}) => theme.orbit.borderColorInputFocus, StyledTripSegmentMilestone, StyledChevrons, ({
theme
}) => theme.orbit.colorIconPrimary, StyledTripSegmentMilestoneArrow, ({
theme
}) => theme.orbit.borderColorInputFocus, StyledTripSegmentContent, ({
theme
}) => theme.orbit.paletteCloudNormalHover, StyledTripSegmentMilestone, StyledChevrons, ({
theme
}) => theme.orbit.colorIconPrimary, StyledTripSegmentMilestoneArrow, ({
theme
}) => theme.orbit.paletteCloudNormalHover);
StyledTripSegment.defaultProps = {
theme: defaultTheme
};
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, "node", React.createRef());
_defineProperty(this, "tripSegmentID", randomID("tripSegmentID"));
_defineProperty(this, "setHeight", () => {
var _this$node$current;
this.setState({
contentHeight: (_this$node$current = this.node.current) === null || _this$node$current === void 0 ? void 0 : _this$node$current.clientHeight
});
});
_defineProperty(this, "handleToggle", () => {
const {
onClick
} = this.props;
this.setState(prevState => ({
expanded: !prevState.expanded
}));
if (onClick) {
onClick();
}
});
_defineProperty(this, "handleOnKeyDown", ev => {
if (ev.keyCode === KEY_CODE_MAP.ENTER) {
this.handleToggle();
} else if (ev.keyCode === KEY_CODE_MAP.SPACE) {
ev.preventDefault();
this.handleToggle();
}
});
this.state = {
contentHeight: this.props.initialExpanded ? null : 0,
expanded: this.props.initialExpanded || false
};
}
componentDidMount() {
this.setHeight();
}
componentDidUpdate(prevProps) {
if (this.props.children !== prevProps.children) {
this.setHeight();
}
}
render() {
const {
children,
departure,
departureTime,
arrival,
arrivalTime,
duration,
carrier,
dataTest,
tabIndex = "0"
} = this.props;
const {
expanded,
contentHeight
} = this.state;
return React.createElement(StyledTripSegment, {
dataTest: dataTest,
tabIndex: tabIndex,
role: "button",
"aria-expanded": expanded,
onKeyDown: this.handleOnKeyDown
}, 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,
"aria-controls": this.tripSegmentID
}, React.createElement(StyledTripSegmentOverview, null, React.createElement(StyledTripSegmentOverviewColumn, null, React.createElement(StyledTripSegmentOverviewTime, null, React.createElement(Text, {
element: "div",
align: "right"
}, departureTime)), React.createElement(StyledTripSegmentOverviewTime, null, React.createElement(Text, {
element: "div",
align: "right"
}, arrivalTime))), React.createElement(StyledTripSegmentOverviewColumn, {
grow: true
}, React.createElement(Text, {
element: "div",
type: "primary"
}, React.createElement(Truncate, null, departure)), React.createElement(Text, {
element: "div",
type: "primary"
}, React.createElement(Truncate, null, arrival)))), React.createElement(StyledTripSegmentCarrier, null, React.createElement(Text, {
element: "div",
type: "secondary",
size: "small"
}, duration), React.createElement(CarrierLogo, {
size: "medium",
carriers: [carrier]
}), React.createElement(Chevrons, {
expanded: expanded
}))), React.createElement(Slide, {
maxHeight: contentHeight,
expanded: expanded,
id: this.tripSegmentID
}, React.createElement(StyledTripSegmentChildren, {
expanded: expanded
}, React.createElement("div", {
ref: this.node
}, children)))));
}
}
export default TripSegment;