@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
255 lines • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const grid_view_1 = require("./grid_view");
const editor_cell_1 = require("../editor/form/editor_cell");
const editor_helpers_1 = require("../editor/editor_helpers");
const editor_common_1 = require("../editor/editor_common");
const layouts_common_editor_1 = require("../editor/layouts_common_editor");
const editor_context_1 = require("../editor/editor_context");
const wrapper_1 = require("../wrapper");
const drag_drop_boundary_1 = require("../editor/drag_drop_boundary");
function drop(_e, props, context) {
const item = context.dragItem;
context.dragItem = null;
let sourceElement = item.element;
let targetElement = props.formElement;
if (targetElement && targetElement.control !== 'EditorCell') {
return false;
}
else if (sourceElement) {
const column = editor_helpers_1.adjustPosition(props, context, item.position, sourceElement, props.formElement, props.parentFormElement);
if (column === -1) {
return false;
}
sourceElement.props.setValue('row', props.formElement.props.row);
sourceElement.props.setValue('column', column);
}
else {
let width = sourceElement ? sourceElement.width : 1;
props.parentFormElement.addRow('elements', {
label: item.label || '',
props: {
...item.controlProps,
control: item.name,
row: props.formElement.props.row,
column: props.formElement.props.column,
width
},
control: item.name,
source: item.source,
elements: item.defaultChildren
});
sourceElement = props.parentFormElement.elements[props.parentFormElement.elements.length - 1];
}
return false;
}
const EditorCell = (props) => {
return (React.createElement(editor_cell_1.DropCell, Object.assign({}, props, { drop: drop, mouseOver: drag_drop_boundary_1.showHandles, mouseOut: drag_drop_boundary_1.timeHideHandles })));
};
exports.GridEditorComponent = props => {
const context = React.useContext(editor_context_1.EditorContext);
const controls = layouts_common_editor_1.generateEmptyCells(context, props, props.formElement, 'EditorCell');
return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props),
React.createElement(grid_view_1.GridView.Component, Object.assign({}, props, { EditorCell: EditorCell, controls: controls }))));
};
exports.GridEditor = {
Component: mobx_react_1.observer(exports.GridEditorComponent),
control: 'Grid',
icon: 'grid layout',
title: 'Grid',
group: 'Layout',
defaultProps: {
rows: 1,
columns: 1,
gap: '6px'
},
childProps: editor_common_1.propGroup('Layout', {
row: editor_common_1.boundProp({
documentation: 'Row of the grid (1 ..)',
props: { inputLabel: 'row' },
tuple: 'Position',
type: 'number'
}, 'ValueSourceHandler', 'number'),
column: editor_common_1.boundProp({
documentation: 'Column of the grid (1 ..)',
props: { inputLabel: 'col' },
tuple: 'Position',
type: 'number'
}, 'ValueSourceHandler', 'number'),
width: editor_common_1.boundProp({
documentation: 'Width of the control in number of grid cells.',
tuple: 'Dimension',
props: { inputLabel: 'w' },
type: 'number'
}, 'ValueSourceHandler', 'number'),
height: editor_common_1.boundProp({
documentation: 'Height of the control in number of grid cells.',
tuple: 'Dimension',
props: { inputLabel: 'h' },
type: 'number'
}, 'ValueSourceHandler', 'number')
}),
props: {
...editor_common_1.propGroup('Grid', {
alignItems: editor_common_1.boundProp({
control: 'Select',
documentation: `Aligns grid items vertically.<br>
<ul>
<li><i>Start (default)</i>: items are packed toward the top</li>
<li><i>End:</i> items are packed toward the bottom</li>
<li><i>Center</i>: items are centered</li>
<li><i>Stretch</i>: items fill the whole height of the cell/li>
</ul>
Information taken from <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank">this guide</a> for more details`,
group: 'Basic',
type: 'string',
$enum: [
{ text: 'Start', value: 'flex-start' },
{ text: 'End', value: 'flex-end' },
{ text: 'Center', value: 'center' },
{ text: 'Stretch', value: 'stretch' }
]
}),
gap: editor_common_1.boundProp({
control: 'Select',
documentation: 'Spacing between cells',
group: 'Basic',
$enum: [
{
text: 'None',
value: '0px'
},
{
text: 'Tiny',
value: '3px'
},
{
text: 'Small',
value: '6px'
},
{
text: 'Normal',
value: '12px'
},
{
text: 'Big',
value: '18px'
},
{
text: 'Huge',
value: '24px'
}
],
type: 'string'
}),
justifyItems: editor_common_1.boundProp({
control: 'Select',
documentation: `Aligns grid items horizontally.<br>
<ul>
<li><i>Start (default)</i>: items are packed toward the start line</li>
<li><i>End:</i> items are packed toward the end line</li>
<li><i>Center</i>: items are centered along the line</li>
<li><i>Stretch</i>: items fill the whole width of the cell/li>
</ul>
Information taken from <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank">this guide</a> for more details`,
group: 'Basic',
type: 'string',
$enum: [
{ text: 'Start', value: 'flex-start' },
{ text: 'End', value: 'flex-end' },
{ text: 'Center', value: 'center' },
{ text: 'Stretch', value: 'stretch' }
],
props: { label: 'Justify Content' }
})
}),
rows: editor_common_1.boundProp({
documentation: 'Number of grid rows',
group: 'Dimensions',
props: {
inputLabel: 'rows'
},
tuple: 'Size',
type: 'number'
}, 'ValueSourceHandler', 'number'),
columns: editor_common_1.boundProp({
documentation: 'Number of grid columns',
group: 'Dimensions',
props: {
inputLabel: 'cols'
},
tuple: 'Size',
type: 'number'
}, 'ValueSourceHandler', 'number'),
rowSize: editor_common_1.boundProp({
documentation: 'Default height of extra rows (e.g. 100px)',
group: 'Dimensions',
props: {
inputLabel: 'rows'
},
tuple: 'Width',
type: 'number'
}),
columnSize: editor_common_1.boundProp({
documentation: 'Default width of extra columns (e.g. 100px)',
group: 'Dimensions',
props: {
inputLabel: 'cols'
},
tuple: 'Width',
type: 'number'
}),
templateRows: editor_common_1.boundProp({
documentation: `Row Template. For example:
<pre>10px auto 1fr</pre> will define a grid with three rows.
First row will be 10px high. Second row will automatically adjust its height.
And third column will fill the visible height.`,
group: 'Templates',
props: { label: 'Rows' },
type: 'number'
}),
templateColumns: editor_common_1.boundProp({
documentation: `Column template. For example:
<pre>10px auto 1fr</pre> will define a grid with three columns.
First columns will be 10px wide. Second column will automatically adjust its size.
And third column will fill the visible width.`,
group: 'Templates',
props: { label: 'Column' },
type: 'number'
}),
rowsReadOnly: editor_common_1.boundProp({
documentation: 'Number of grid rows in read only mode',
group: 'Read-Only',
props: {
inputLabel: 'rows'
},
tuple: 'Size',
type: 'number'
}, 'ValueSourceHandler', 'number'),
columnsReadOnly: editor_common_1.boundProp({
documentation: 'Number of grid columns in read only mode',
group: 'Read-Only',
props: {
inputLabel: 'cols'
},
tuple: 'Size',
type: 'number'
}, 'ValueSourceHandler', 'number'),
templateRowsReadOnly: editor_common_1.boundProp({
documentation: 'Row template for read only mode (e.g. 10px auto 1fr)',
group: 'Read-Only',
props: { label: 'Row Template' },
type: 'number'
}),
templateColumnsReadOnly: editor_common_1.boundProp({
documentation: 'Column template for read only mode (e.g. 10px auto 1fr)',
group: 'Read-Only',
props: { label: 'Column Template' },
type: 'number'
})
}
};
//# sourceMappingURL=grid_editor.js.map