@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.
55 lines • 1.51 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import { DEVICES as DEVICES_CONSTS } from "../utils/mediaQuery/consts";
import media from "../utils/mediaQuery";
import { normalize } from "./helpers";
const StyledInlineInner = styled.div.withConfig({
displayName: "Inline__StyledInlineInner",
componentId: "sc-r09xil-0"
})(["display:flex;flex-direction:row;flex-wrap:wrap;", ""], ({
viewportSizes
}) => {
return Object.keys(viewportSizes).map(query => {
const value = viewportSizes[query];
if (query !== Object.values(DEVICES_CONSTS)[0] && typeof value !== "undefined") {
return media[query](css(["", ""], normalize(value)));
}
return normalize(value);
});
});
StyledInlineInner.defaultProps = {
theme: defaultTheme
};
const Inline = ({
as: Component = "div",
mediumMobile,
largeMobile,
className,
tablet,
desktop,
largeDesktop,
children,
dataTest,
...smallMobile
}) => {
const viewportSizes = {
smallMobile,
mediumMobile,
largeMobile,
tablet,
desktop,
largeDesktop
};
return (
/*#__PURE__*/
// @ts-expect-error ts-migrate(3554) FIXME: Property 'children' does not exist on type 'IntrinsicAttributes'.ts(2322)
React.createElement(Component, {
className: className,
"data-test": dataTest
}, /*#__PURE__*/React.createElement(StyledInlineInner, {
viewportSizes: viewportSizes
}, children))
);
};
export default Inline;