@indoqa/style-system
Version:
A style system for React with Typescript typed theme support and several base components.
48 lines • 1.86 kB
JavaScript
import * as React from 'react';
import { FelaComponent } from 'react-fela';
import { createPaddingCSSProps, createStylingCSSProps } from '../base';
import { createResponsiveStyles, mergeThemedStyles } from '../utils';
import { GridContext } from './GridContext';
import { testGridContext } from './testGridContext';
function createBaseStyles(props, theme) {
return {
...createPaddingCSSProps(props, theme),
...createStylingCSSProps(props, theme),
};
}
class RowContainer extends React.Component {
render() {
const rowStyle = ({ style, minHeight, spacing, height, ...otherProps }) => ({
...createResponsiveStyles(otherProps, createBaseStyles),
boxSizing: 'border-box',
display: 'flex',
flexWrap: 'wrap',
alignItems: 'stretch',
width: '100%',
minHeight,
':first-child': {
marginTop: `-${spacing}`,
},
tablet: {
flexWrap: 'nowrap',
height,
},
});
const { children, style, innerRef, testId, ...otherProps } = this.props;
const styles = mergeThemedStyles(rowStyle, style);
return (React.createElement(FelaComponent, { style: styles, ...otherProps }, ({ className }) => (React.createElement("div", { className: className, ref: innerRef, "data-testid": testId }, children))));
}
}
export class Row extends React.Component {
render() {
return (React.createElement(GridContext.Consumer, null, ({ spacing }) => {
const child = (React.createElement(RowContainer, { spacing: spacing, ...this.props }, this.props.children));
return testGridContext(spacing, child);
}));
}
}
Row.defaultProps = {
height: 'auto',
minHeight: 'auto',
};
//# sourceMappingURL=Row.js.map