79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
import { Col, Divider, Row } from "antd";
|
|
import React from "react";
|
|
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>
|
|
);
|
|
}
|