@adaptabletools/adaptable-cjs/src/components/FormLayout/index.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormRow = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const react_1 = require("react");
const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const FormLayoutContext = (0, react_1.createContext)(null);
const defaultColumns = {
    label: {
        className: 'ab-FormLayout_column--label',
        style: {
            textAlign: 'end',
        },
    },
};
const PLACEHOLDER = React.createElement("div", null);
const FormLayout = (props) => {
    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = rebass_1.Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true, ...boxProps } = props;
    columns = columns.map((c) => {
        if (typeof c === 'string' || typeof c === 'number') {
            c = {
                name: `${c}`,
            };
        }
        if (defaultColumns[c.name]) {
            c = (0, merge_1.default)({}, defaultColumns[c.name], c);
        }
        c.component = c.component === undefined ? defaultComponent : c.component;
        return c;
    });
    const formStyle = {
        gridTemplateColumns: columns
            .map((column, i) => {
            if (column.size) {
                return `${column.size}`;
            }
            if (sizes[i] !== undefined) {
                return `${sizes[i]}`;
            }
            return 'auto';
        })
            .join(' '),
        gridRowGap,
        gridColumnGap,
        rowGap: gridRowGap,
        columnGap: gridColumnGap,
    };
    return (React.createElement(FormLayoutContext.Provider, { value: {
            columns,
            currentRow: 0,
            childrenToColumns,
        } },
        React.createElement(rebass_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-FormLayout'), style: { ...style, ...formStyle } })));
};
const FormRow = (props) => {
    const ctx = (0, react_1.useContext)(FormLayoutContext);
    const { columns, placeholder, childrenToColumns } = ctx;
    const rowIndex = ctx.currentRow;
    ctx.currentRow++;
    const children = React.Children.toArray(props.children);
    const columnValues = columns.map((column, columnIndex) => {
        const columnName = column.name;
        let item = props[columnName];
        if (item === undefined && childrenToColumns) {
            item = children.shift();
        }
        let value = item;
        if (item == null) {
            value = placeholder;
        }
        if (props.as != null || column.component != null) {
            const Cmp = column.component;
            value = (React.createElement(Cmp, { "data-name": props.dataName, style: {
                    ...column.style,
                    gridColumn: columnIndex + 1,
                    gridRow: rowIndex + 1,
                }, className: column.className }, value));
        }
        return typeof value === 'string' ? value : React.cloneElement(value, { key: columnName });
    });
    return React.createElement(React.Fragment, null, columnValues);
};
exports.FormRow = FormRow;
exports.default = FormLayout;