nice-ui
Version:
React design system, components, and utilities
62 lines (61 loc) • 2.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FixedColumn = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const className = (0, nano_theme_1.rule)({
d: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'space-between',
alignItems: 'stretch',
bxz: 'border-box',
'&>*': {
flexGrow: 1,
},
});
const stackClass = (0, nano_theme_1.rule)({
flexWrap: 'wrap',
});
const FixedColumn = (props) => {
const { as = 'div', left, right, stack, children, ...rest } = props;
const childrenArray = React.Children.toArray(children);
const As = as;
if (process.env.NODE_ENV !== 'production') {
if (!Array.isArray(childrenArray) || childrenArray.length !== 2) {
throw new TypeError('Children of <FixedColumn> must be exactly two React.ReactElement.');
}
}
let [leftElement, rightElement] = childrenArray;
if (left) {
leftElement = React.cloneElement(leftElement, {
...leftElement.props,
style: stack
? { width: '100%' }
: {
...(leftElement.props.style || {}),
width: left,
flex: `0 0 ${left}px`,
},
});
}
else if (right) {
rightElement = React.cloneElement(rightElement, {
...rightElement.props,
style: stack
? { width: '100%' }
: {
...(rightElement.props.style || {}),
width: right,
flex: `0 0 ${right}px`,
},
});
}
else {
throw new TypeError('Either left or right prop of <FixedColumn> has to be specified.');
}
return (React.createElement(As, { ...rest, className: (rest.className || '') + className + (stack ? stackClass : '') },
leftElement,
rightElement));
};
exports.FixedColumn = FixedColumn;