@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.
279 lines (261 loc) • 10.1 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; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import * as React from "react";
import styled, { css } from "styled-components";
import Heading from "../Heading";
import Stack from "../Stack";
import ArrowUpIcon from "../icons/ArrowUp";
import defaultTheme from "../defaultTheme";
import FlightDirectIcon from "../icons/FlightDirect";
import { BASE_URL, SMALLEST_HEIGHT } from "./consts";
import LazyImage from "../LazyImage";
import Text from "../Text";
import randomID from "../utils/randomID";
import KEY_CODE_MAP from "../common/keyMaps";
const overlayCss = css(["position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;border-radius:", ";transition:opacity ", " ease-in-out;"], ({
theme
}) => theme.orbit.borderRadiusNormal, ({
theme
}) => theme.orbit.durationNormal);
const StyledOverlay = styled.div.withConfig({
displayName: "DestinationCard__StyledOverlay",
componentId: "x4idx5-0"
})(["", ";opacity:1;background:linear-gradient( to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.13) 65%,rgba(0,0,0,0.3) 75%,rgba(0,0,0,0.8) 100% );"], overlayCss);
StyledOverlay.defaultProps = {
theme: defaultTheme
};
const StyledOverlayHover = styled.div.withConfig({
displayName: "DestinationCard__StyledOverlayHover",
componentId: "x4idx5-1"
})(["", ";opacity:0;background:rgba(0,0,0,0.8);"], overlayCss);
StyledOverlayHover.defaultProps = {
theme: defaultTheme
};
const StyledDestinationCardContent = styled.div.withConfig({
displayName: "DestinationCard__StyledDestinationCardContent",
componentId: "x4idx5-2"
})(["position:relative;z-index:2;display:flex;flex-direction:column;padding:", ";width:100%;transition:bottom ", " ease-in-out;bottom:", ";"], ({
theme
}) => theme.orbit.spaceSmall, ({
theme
}) => theme.orbit.durationFast, ({
hiddenContentHeight,
theme
}) => `-${hiddenContentHeight + parseInt(theme.orbit.spaceSmall, 10)}px`);
StyledDestinationCardContent.defaultProps = {
theme: defaultTheme
};
const StyledDestinationCardHeader = styled.div.withConfig({
displayName: "DestinationCard__StyledDestinationCardHeader",
componentId: "x4idx5-3"
})(["margin-bottom:", ";"], ({
theme
}) => theme.orbit.spaceXSmall);
StyledDestinationCardHeader.defaultProps = {
theme: defaultTheme
};
const Shown = styled.div.withConfig({
displayName: "DestinationCard__Shown",
componentId: "x4idx5-4"
})(["transition:all ", " ease-in-out;opacity:0;position:relative;top:\"-50%\";margin-bottom:", ";"], ({
theme
}) => theme.orbit.durationFast, ({
theme
}) => theme.orbit.spaceXXSmall);
Shown.defaultProps = {
theme: defaultTheme
};
const ArrowUp = styled(ArrowUpIcon).withConfig({
displayName: "DestinationCard__ArrowUp",
componentId: "x4idx5-5"
})(["transform:rotate(90deg);margin-left:", ";"], ({
theme
}) => theme.orbit.spaceXXSmall);
ArrowUp.defaultProps = {
theme: defaultTheme
};
const StyledDestinationCardHiddenContent = styled.div.withConfig({
displayName: "DestinationCard__StyledDestinationCardHiddenContent",
componentId: "x4idx5-6"
})(["padding:", " 0 0;border-top:1px solid rgba(255,255,255,0.3);"], ({
theme
}) => theme.orbit.spaceSmall);
StyledDestinationCardHiddenContent.defaultProps = {
theme: defaultTheme
};
const FlightDirect = styled(FlightDirectIcon).withConfig({
displayName: "DestinationCard__FlightDirect",
componentId: "x4idx5-7"
})(["transform:", ";"], ({
isReturn
}) => isReturn && "rotate(180deg)");
const StyledDestination = styled.div.withConfig({
displayName: "DestinationCard__StyledDestination",
componentId: "x4idx5-8"
})(["position:relative;transition:top ", " ease-in-out;top:16px;"], ({
theme
}) => theme.orbit.durationFast);
StyledDestination.defaultProps = {
theme: defaultTheme
};
const StyledDestinationCard = styled((_ref) => {
let {
height,
imageURL,
theme
} = _ref,
props = _objectWithoutProperties(_ref, ["height", "imageURL", "theme"]);
return React.createElement("div", props);
}).withConfig({
displayName: "DestinationCard__StyledDestinationCard",
componentId: "x4idx5-9"
})(["width:100%;height:", ";display:flex;align-items:flex-end;position:relative;box-sizing:border-box;border-radius:", ";overflow:hidden;cursor:pointer;&:hover{", "{opacity:0;}", "{top:0;}", "{opacity:1;}", "{bottom:0;}", "{opacity:1;top:0;}}&:focus{outline:none;box-shadow:0 0 1px 1px ", ",0 0 1px 3px rgba(1,118,210,0.6);}"], ({
height
}) => height ? `${height}px` : "100%", ({
theme
}) => theme.orbit.borderRadiusNormal, StyledOverlay, StyledDestination, StyledOverlayHover, StyledDestinationCardContent, Shown, ({
theme
}) => theme.orbit.colorTextButtonWhiteBordered);
StyledDestinationCard.defaultProps = {
theme: defaultTheme
};
const SmallHeading = ({
children
}) => React.createElement(Text, {
type: "white",
element: "div",
size: "small",
weight: "bold"
}, children);
class DestinationCard extends React.PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "state", {
hiddenContentHeight: 0
});
_defineProperty(this, "hiddenContent", React.createRef());
_defineProperty(this, "cardID", randomID("destinationCardID"));
_defineProperty(this, "setHeight", () => {
const {
hiddenContent
} = this;
if (hiddenContent.current) {
this.setState({
hiddenContentHeight: hiddenContent.current.clientHeight
});
}
});
_defineProperty(this, "handleKeyDown", ev => {
const {
onClick
} = this.props;
if (onClick) {
if (ev.keyCode === KEY_CODE_MAP.ENTER) {
onClick();
} else if (ev.keyCode === KEY_CODE_MAP.SPACE) {
ev.preventDefault();
onClick();
}
}
});
}
componentDidMount() {
this.setHeight();
}
componentDidUpdate(prevProps) {
if (prevProps !== this.props) {
this.setHeight();
}
}
render() {
const {
dataTest,
departureCity,
destinationCity,
destinationCountry,
price,
timeOfStay,
outbound,
inbound,
height = 300,
onClick,
tabIndex = "0"
} = this.props;
const {
hiddenContentHeight
} = this.state;
const image = this.props.image.toLowerCase();
return React.createElement(StyledDestinationCard, {
"data-test": dataTest,
onClick: onClick,
onKeyDown: this.handleKeyDown,
height: height >= SMALLEST_HEIGHT ? height : SMALLEST_HEIGHT,
tabIndex: tabIndex,
role: "link",
"aria-labelledby": this.cardID
}, React.createElement(LazyImage, {
original: {
webp: ` ${BASE_URL}/photos/385x320/${image}.webp`,
jpg: `${BASE_URL}/photos/385x320/${image}.jpg`
},
placeholder: {
webp: ` ${BASE_URL}/photos/30x30/${image}.webp`,
jpg: `${BASE_URL}/photos/30x30/${image}.jpg`
} // Add that to images kiwi
,
name: destinationCity
}), React.createElement(StyledOverlay, null), React.createElement(StyledOverlayHover, null), React.createElement(StyledDestinationCardContent, {
hiddenContentHeight: hiddenContentHeight
}, React.createElement(StyledDestinationCardHeader, {
id: this.cardID
}, React.createElement(Shown, null, React.createElement(Stack, {
flex: true,
align: "center",
justify: "start",
spacing: "extraTight"
}, React.createElement(Heading, {
type: "title3",
element: "div",
inverted: true
}, departureCity), React.createElement(ArrowUp, {
customColor: "#fff",
size: "small"
}))), React.createElement(StyledDestination, null, React.createElement(Heading, {
type: "title1",
element: "div",
inverted: true
}, destinationCity)), React.createElement(Shown, null, React.createElement(Heading, {
type: "title4",
element: "div",
inverted: true
}, destinationCountry))), React.createElement(Stack, {
flex: true,
justify: "between",
spaceAfter: "small",
align: "end"
}, React.createElement(Heading, {
type: "title3",
element: "div",
inverted: true
}, price), timeOfStay && React.createElement(Heading, {
type: "title4",
element: "div",
inverted: true
}, timeOfStay)), React.createElement(StyledDestinationCardHiddenContent, {
ref: this.hiddenContent
}, React.createElement(Stack, {
direction: "row",
justify: "between"
}, React.createElement(SmallHeading, null, outbound.text ? outbound.text : React.createElement(React.Fragment, null, React.createElement(FlightDirect, {
size: "small"
}), outbound.date)), React.createElement(SmallHeading, null, outbound.type, "\xA0\u2022\xA0", outbound.duration)), inbound && React.createElement(Stack, {
direction: "row",
justify: "between"
}, React.createElement(SmallHeading, null, React.createElement(FlightDirect, {
size: "small",
isReturn: true
}), inbound.date), React.createElement(SmallHeading, null, inbound.type, "\xA0\u2022\xA0", inbound.duration)))));
}
}
export default DestinationCard;