@indoqa/style-system
Version:
A style system for React with Typescript typed theme support and several base components.
92 lines • 2.83 kB
JavaScript
import * as React from 'react';
import { FelaComponent } from 'react-fela';
import { createBoxCSSStyle } from './Box';
import { createResponsiveStyles, mergeThemedStyles } from './utils';
export const createFlexContainerCSSStyle = (props, theme, outsideMediaQuery) => {
const { inline, direction, nowrap, center, justifyContent, alignItems } = props;
const styles = {};
if (inline) {
Object.assign(styles, { display: 'inline-flex' });
}
else {
Object.assign(styles, { display: 'flex' });
}
if (direction) {
Object.assign(styles, { flexDirection: direction });
}
if (nowrap) {
Object.assign(styles, { flexWrap: 'nowrap' });
}
else {
Object.assign(styles, { flexWrap: 'wrap' });
}
if (justifyContent) {
Object.assign(styles, { justifyContent });
}
if (alignItems) {
Object.assign(styles, { alignItems });
}
if (center) {
const centerStyles = {
justifyContent: justifyContent || 'center',
alignItems: alignItems || 'center',
textAlign: 'center',
};
Object.assign(styles, centerStyles);
}
return styles;
};
function createFlexCSSStyle(props, theme, outsideMediaQuery) {
return {
...createBoxCSSStyle(props, theme, outsideMediaQuery),
...createFlexContainerCSSStyle(props, theme, outsideMediaQuery),
};
}
function themedFlexStyles(props) {
return {
...createResponsiveStyles(props, createFlexCSSStyle),
};
}
function renderFlex(props, as) {
const { children, style, onClick, onMouseDown, onMouseOut, onMouseOver, onScroll, htmlAttrs, innerRef, testId, ...rest } = props;
const styles = mergeThemedStyles(themedFlexStyles, style);
return (React.createElement(FelaComponent, { style: styles, ...rest }, ({ className }) => React.createElement(as, {
className,
'data-testid': testId,
onClick,
onMouseDown,
onMouseOut,
onMouseOver,
onScroll,
...htmlAttrs,
ref: innerRef,
}, children)));
}
export function Flex(props) {
return renderFlex(props, 'div');
}
export function HeaderFlex(props) {
return renderFlex(props, 'header');
}
export function NavFlex(props) {
return renderFlex(props, 'nav');
}
export function SectionFlex(props) {
return renderFlex(props, 'section');
}
export function ArticleFlex(props) {
return renderFlex(props, 'article');
}
export function AsideFlex(props) {
return renderFlex(props, 'aside');
}
export function FooterFlex(props) {
return renderFlex(props, 'footer');
}
export function FigCaptionFlex(props) {
return renderFlex(props, 'figcaption');
}
export function FigureFlex(props) {
return renderFlex(props, 'figure');
}
//# sourceMappingURL=Flex.js.map