@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
104 lines • 4.92 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const common_1 = require("../common");
const cell_highlighter_1 = require("./form/cell_highlighter");
const mobx_react_1 = require("mobx-react");
const editor_context_1 = require("./editor_context");
const editor_cell_1 = require("./form/editor_cell");
const layouts_styles_1 = require("./layouts_styles");
const create_control_1 = require("./create_control");
const helpers_1 = require("../helpers");
const cell = { control: 'EditorCell', props: { row: 1, column: 1 } };
exports.cellElement = { props: { width: 1 } };
function createComponent(props, formElement, _context, className, allowInsert) {
return (React.createElement(exports.EditorControl, { props: props, formElement: formElement, className: className, allowInsert: allowInsert }));
}
exports.createComponent = createComponent;
exports.EditorControl = mobx_react_1.observer(({ formElement, props, EmptyCell, className = '' }) => {
let editorState = React.useContext(editor_context_1.EditorContext);
let controlProps = create_control_1.editorProps(formElement, props);
if (!formElement) {
return React.createElement(EmptyCell, Object.assign({}, props));
}
return common_1.createComponent1(props, formElement, editorState, common_1.names(className, { [layouts_styles_1.selected]: formElement.isSelected }), { ...controlProps });
});
exports.EditorControl.displayName = 'EditorControl';
exports.EditorDropCell = props => (React.createElement("div", { onClick: props.onClick, onMouseOver: props.onMouseOver, onMouseOut: props.onMouseOut },
React.createElement(SingleDropCell, Object.assign({ id: "0" }, props))));
class SingleDropCell extends React.Component {
constructor() {
super(...arguments);
this.highlighter = new cell_highlighter_1.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(editor_cell_1.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 = editor_context_1.EditorContext;
exports.SingleDropCell = SingleDropCell;
function generateEmptyCells(context, props, element, emptyCell) {
const grid = [];
const rows = helpers_1.getPropValue(props, element, context, 'rows', 1);
const columns = helpers_1.getPropValue(props, element, context, 'columns', 1);
const elements = element.elements;
for (let e of elements) {
const width = helpers_1.getPropValue(props, e, context, 'width', 1);
const height = helpers_1.getPropValue(props, e, context, 'height', 1);
const row = helpers_1.getPropValue(props, e, context, 'row');
const column = helpers_1.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;
}
exports.generateEmptyCells = generateEmptyCells;
exports.CreateComponents = (props) => common_1.createComponents(props);
//# sourceMappingURL=layouts_common_editor.js.map