@tomino/dynamic-form-semantic-ui/dist/mjs/editor/layouts_common_editor.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { createComponents, createComponent1, names } from '../common';
import { CellHighlighter } from './form/cell_highlighter';
import { observer } from 'mobx-react';
import { EditorContext } from './editor_context';
import { DropCell } from './form/editor_cell';
import { selected } from './layouts_styles';
import { editorProps } from './create_control';
import { getPropValue } from '../helpers';
const cell = { control: 'EditorCell', props: { row: 1, column: 1 } };
export const cellElement = { props: { width: 1 } };
export function createComponent(props, formElement, _context, className, allowInsert) {
    return (React.createElement(EditorControl, { props: props, formElement: formElement, className: className, allowInsert: allowInsert }));
}
export const EditorControl = observer(({ formElement, props, EmptyCell, className = '' }) => {
    let editorState = React.useContext(EditorContext);
    let controlProps = editorProps(formElement, props);
    if (!formElement) {
        return React.createElement(EmptyCell, Object.assign({}, props));
    }
    return createComponent1(props, formElement, editorState, names(className, { [selected]: formElement.isSelected }), { ...controlProps });
});
EditorControl.displayName = 'EditorControl';
export const EditorDropCell = props => (React.createElement("div", { onClick: props.onClick, onMouseOver: props.onMouseOver, onMouseOut: props.onMouseOut },
    React.createElement(SingleDropCell, Object.assign({ id: "0" }, props))));
export class SingleDropCell extends React.Component {
    constructor() {
        super(...arguments);
        this.highlighter = new CellHighlighter(1, 1);
        this.drop = () => {
            const item = this.context.dragItem;
            const element = this.props.formElement;
            if (this.props.elementIndex == null) {
                element.addRow('elements', {
                    label: item.label || '',
                    control: item.name,
                    source: item.source,
                    props: { ...item.props, control: item.name },
                    width: 1,
                    elements: item.defaultChildren
                });
            }
            else {
                element.replaceRow('elements', this.props.elementIndex, {
                    label: item.label || '',
                    control: item.name,
                    source: item.source,
                    props: { ...item.props, control: item.name },
                    width: 1,
                    elements: item.defaultChildren
                });
            }
            this.forceUpdate();
            return false;
        };
    }
    render() {
        return (React.createElement(DropCell, { className: this.props.className, editorState: this.context, owner: this.props.owner, catalogue: this.props.catalogue, formElement: cell, parentFormElement: this.props.formElement, id: this.props.id || '0', highlighter: this.highlighter, drop: this.drop }));
    }
}
SingleDropCell.contextType = EditorContext;
export function generateEmptyCells(context, props, element, emptyCell) {
    const grid = [];
    const rows = getPropValue(props, element, context, 'rows', 1);
    const columns = getPropValue(props, element, context, 'columns', 1);
    const elements = element.elements;
    for (let e of elements) {
        const width = getPropValue(props, e, context, 'width', 1);
        const height = getPropValue(props, e, context, 'height', 1);
        const row = getPropValue(props, e, context, 'row');
        const column = getPropValue(props, e, context, 'column');
        for (let i = 1; i <= width; i++) {
            for (let j = 1; j <= height; j++) {
                if (!grid[row + j - 1]) {
                    grid[row + j - 1] = [];
                }
                grid[row + j - 1][column + i - 1] = true;
            }
        }
    }
    let newElements = [...elements];
    for (let row = 1; row <= rows; row++) {
        for (let column = 1; column <= columns; column++) {
            if (!grid[row] || !grid[row][column]) {
                newElements.push({
                    control: emptyCell,
                    props: {
                        row,
                        column
                    }
                });
            }
        }
    }
    return newElements;
}
export const CreateComponents = (props) => createComponents(props);
//# sourceMappingURL=layouts_common_editor.js.map