61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import { Row, Col, Typography } from "antd";
|
|
import "./layout-form-row.styles.scss";
|
|
|
|
export default function LayoutFormRow({
|
|
header,
|
|
children,
|
|
grow = false,
|
|
...restProps
|
|
}) {
|
|
if (!!!children.length) {
|
|
//We have only one element. It's going to get the whole thing.
|
|
return (
|
|
<div className="imex-form-row">
|
|
{header ? (
|
|
<Typography.Title level={4}>{header}</Typography.Title>
|
|
) : null}
|
|
{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),
|
|
},
|
|
};
|
|
};
|
|
|
|
return (
|
|
<div className="imex-form-row" {...restProps}>
|
|
{header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
|
|
<Row {...rowGutter}>
|
|
{children.map(
|
|
(c, idx) =>
|
|
c && (
|
|
<Col key={idx} {...colSpan(c && c.props && c.props.span)}>
|
|
{c}
|
|
</Col>
|
|
)
|
|
)}
|
|
</Row>
|
|
</div>
|
|
);
|
|
}
|