60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
import { Col, Divider, Row } from "antd";
|
|
import "./layout-form-row.styles.scss";
|
|
|
|
export default function LayoutFormRow({ header, children, grow = false, noDivider = false, ...restProps }) {
|
|
const DividerHeader = () =>
|
|
!noDivider && (
|
|
<Divider orientation="left" type="horizontal" style={{ marginTop: ".8rem" }}>
|
|
{header}
|
|
</Divider>
|
|
);
|
|
|
|
if (!children.length) {
|
|
//We have only one element. It's going to get the whole thing.
|
|
return (
|
|
<div className="imex-form-row" {...restProps} style={{ marginBottom: ".8rem", ...restProps.style }}>
|
|
<DividerHeader />
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
const rowGutter = { gutter: [16, 16] };
|
|
|
|
const colSpan = (spanOverride) => {
|
|
if (spanOverride) return { span: spanOverride };
|
|
return {
|
|
xs: {
|
|
span: !grow ? 24 : Math.max(12, 24 / children.length)
|
|
},
|
|
sm: {
|
|
span: !grow ? 12 : Math.max(12, 24 / children.length)
|
|
},
|
|
md: {
|
|
span: !grow ? 8 : Math.max(8, 24 / children.length)
|
|
},
|
|
lg: {
|
|
span: !grow ? 6 : Math.max(6, 24 / children.length)
|
|
},
|
|
xl: {
|
|
span: !grow ? 4 : Math.max(4, 24 / children.length)
|
|
}
|
|
};
|
|
};
|
|
//{header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
|
|
return (
|
|
<div className="imex-form-row" {...restProps} style={{ marginBottom: ".8rem", ...restProps.style }}>
|
|
<DividerHeader />
|
|
<Row {...rowGutter}>
|
|
{children.map(
|
|
(c, idx) =>
|
|
c && (
|
|
<Col key={idx} {...colSpan(c && c.props && c.props.span)}>
|
|
{c}
|
|
</Col>
|
|
)
|
|
)}
|
|
</Row>
|
|
</div>
|
|
);
|
|
}
|