@indoqa/style-system
Version:
A style system for React with Typescript typed theme support and several base components.
62 lines • 2.42 kB
JavaScript
import * as React from 'react';
import { FelaComponent } from 'react-fela';
import { createFontCSSProps, createPaddingCSSProps, createStylingCSSProps } from '../base';
import { addUnitIfNeeded, createResponsiveStyles, mergeThemedStyles } from '../utils';
import { GridContext } from './GridContext';
import { testGridContext } from './testGridContext';
const DEFAULT_WIDTH = '0%';
const isDefaultWidth = (width) => {
return !width || width === DEFAULT_WIDTH || width === 0 || width === '0';
};
const calcBasis = (spacing, size, width) => {
if (width && !isDefaultWidth(width)) {
return addUnitIfNeeded(width);
}
if (!size) {
return 'auto';
}
return `calc(${addUnitIfNeeded(spacing)} * ${size - 1})`;
};
function createBaseStyles(props, theme) {
return {
...createPaddingCSSProps(props, theme),
...createFontCSSProps(props, theme),
...createStylingCSSProps(props, theme),
};
}
class PanelContainer extends React.Component {
render() {
const panelStyle = ({ width, size, spacing, ...otherProps }) => ({
...createResponsiveStyles(otherProps, createBaseStyles),
flexGrow: 1,
flexShrink: 0,
width: '100%',
height: 'auto',
overflow: 'hidden',
marginTop: spacing,
'@media (min-width: 768px)': {
width: '0',
flex: `${isDefaultWidth(width) ? size : 0} 0 ${calcBasis(spacing, size, width)}`,
':not(:last-child)': {
marginRight: spacing,
},
},
});
const { style, children, innerRef, testId, ...otherProps } = this.props;
const styles = mergeThemedStyles(panelStyle, style);
return (React.createElement(FelaComponent, { style: styles, ...otherProps }, ({ className }) => (React.createElement("div", { className: className, ref: innerRef, "data-testid": testId }, children))));
}
}
export class Panel extends React.Component {
render() {
return (React.createElement(GridContext.Consumer, null, ({ spacing }) => {
const child = (React.createElement(PanelContainer, { spacing: spacing, ...this.props }, this.props.children));
return testGridContext(spacing, child);
}));
}
}
Panel.defaultProps = {
size: 1,
width: DEFAULT_WIDTH,
};
//# sourceMappingURL=Panel.js.map