@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.
40 lines (39 loc) • 1.44 kB
JavaScript
import { css } from "styled-components";
import getSpacing from "./getSpacing";
import getProperty from "./getProperty";
import { rtlSpacing } from "../../utils/rtl";
import { DIRECTIONS } from "../../utils/layout/consts";
const getDirectionSpacingTemplate = direction => {
switch (direction) {
case DIRECTIONS.ROW:
return "0 __spacing__ 0 0";
case DIRECTIONS.COLUMNREVERSE:
return "__spacing__ 0 0 0";
case DIRECTIONS.ROWREVERSE:
return "0 0 0 __spacing__";
default:
return "0 0 __spacing__ 0";
}
};
const getGap = ({
index,
devices
}) => props => {
const spacing = getProperty("spacing", {
index,
devices
}, props);
const direction = getProperty("direction", {
index,
devices
}, props);
const gap = spacing && direction && getSpacing(props.theme)[spacing];
const margin = spacing && direction && String(getDirectionSpacingTemplate(direction)).replace("__spacing__", getSpacing(props.theme)[spacing]);
// workaround to make it work on Safari iOS < 14.1
// TODO: remove that after dropping support for iOS < 14.1
if (props.flex) {
return css(["gap:", ";@supports (-webkit-touch-callout:none) and (not (translate:none)){& > *:not(:last-child){margin:", " !important;}}"], gap, margin && rtlSpacing(margin));
}
return css(["& > *{margin:", "!important;&:last-child{margin:0 !important;}}"], margin && rtlSpacing(margin));
};
export default getGap;