92 lines
2.3 KiB
JavaScript
92 lines
2.3 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 }) {
|
|
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) => {
|
|
return {
|
|
xs: {
|
|
span: 24,
|
|
},
|
|
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">
|
|
{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>
|
|
);
|
|
}
|
|
|
|
// export default function LayoutFormRow({ header, children }) {
|
|
// if (!!!children.length) {
|
|
// //We have only one element. It's going to get the whole thing.
|
|
// return children;
|
|
// }
|
|
// const rowGutter = { gutter: [16, 16] };
|
|
|
|
// const colSpan = (maxspan) => {
|
|
// return {
|
|
// xs: {
|
|
// span: 24,
|
|
// },
|
|
// md: {
|
|
// span: !!maxspan ? Math.min(12, maxspan) : 12,
|
|
// },
|
|
// lg: {
|
|
// span: !!maxspan
|
|
// ? Math.min(Math.max(24 / children.length, 6), maxspan)
|
|
// : Math.max(24 / children.length, 6),
|
|
// },
|
|
// };
|
|
// };
|
|
|
|
// return (
|
|
// <div className='imex-form-row'>
|
|
// {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
|
|
// <Row {...rowGutter}>
|
|
// {children.map((c, idx) => (
|
|
// <Col key={idx} {...colSpan(c.props && c.props.maxspan)}>
|
|
// {c}
|
|
// </Col>
|
|
// ))}
|
|
// </Row>
|
|
// </div>
|
|
// );
|
|
// }
|