design-system-simplefi
Version:
Design System for SimpleFi Applications
49 lines • 2.99 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { prop } from 'ramda';
import { isNotUndefined, isNumber } from 'ramda-adjunct';
import { AlignItemsPropType, JustifyContentPropType, } from '../../../types/flex.types';
import { getSpace } from '../../../utils';
import { SpaceSizes } from '../../../theme/space/space.enums';
import { StretchEnum } from './Inline.enums';
var getStretchStyle = function (stretch) {
if (isNumber(stretch)) {
return "\n > :nth-child(" + stretch + ") { flex: 1 1 0%; }\n ";
}
switch (stretch) {
case 'start':
return "\n > :first-child { flex: 1 1 0%; }\n ";
case 'end':
return "\n > :last-child { flex: 1 1 0%; }\n ";
case 'all':
return "\n > * { flex: 1 1 0%; }\n ";
default:
return null;
}
};
var Inline = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: ", ";\n align-items: ", ";\n\n ", "\n\n /* FIXME: Until we remove 'margin' property from other components we need to\n increase specificity of those nesting , since it can be overriden by inner\n elements with the same specificity. This can lead to inconsistent output\n of visual test if styled-components puts CSS in different order into Head. */\n && > * {\n margin-left: 0;\n margin-right: 0;\n }\n\n && > * + * {\n margin-left: ", ";\n }\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: ", ";\n align-items: ", ";\n\n ", "\n\n /* FIXME: Until we remove 'margin' property from other components we need to\n increase specificity of those nesting , since it can be overriden by inner\n elements with the same specificity. This can lead to inconsistent output\n of visual test if styled-components puts CSS in different order into Head. */\n && > * {\n margin-left: 0;\n margin-right: 0;\n }\n\n && > * + * {\n margin-left: ", ";\n }\n"])), prop('justify'), prop('align'), function (_a) {
var stretch = _a.stretch;
return isNotUndefined(stretch) && getStretchStyle(stretch);
}, function (_a) {
var gap = _a.gap, theme = _a.theme;
return getSpace(gap, { theme: theme });
});
Inline.propTypes = {
align: AlignItemsPropType,
justify: JustifyContentPropType,
gap: PropTypes.oneOf(Object.values(SpaceSizes)),
stretch: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(Object.values(StretchEnum)),
]),
};
Inline.defaultProps = {
gap: SpaceSizes.none,
};
export default Inline;
var templateObject_1;
//# sourceMappingURL=Inline.js.map