@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
252 lines • 9.71 kB
JavaScript
import * as React from 'react';
import { observer } from 'mobx-react';
import { GridView } from './grid_view';
import { DropCell } from '../editor/form/editor_cell';
import { adjustPosition } from '../editor/editor_helpers';
import { propGroup, boundProp } from '../editor/editor_common';
import { generateEmptyCells } from '../editor/layouts_common_editor';
import { EditorContext } from '../editor/editor_context';
import { DynamicComponent } from '../wrapper';
import { showHandles, timeHideHandles } from '../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 = 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(DropCell, Object.assign({}, props, { drop: drop, mouseOver: showHandles, mouseOut: timeHideHandles })));
};
export const GridEditorComponent = props => {
const context = React.useContext(EditorContext);
const controls = generateEmptyCells(context, props, props.formElement, 'EditorCell');
return (React.createElement(DynamicComponent, Object.assign({}, props),
React.createElement(GridView.Component, Object.assign({}, props, { EditorCell: EditorCell, controls: controls }))));
};
export const GridEditor = {
Component: observer(GridEditorComponent),
control: 'Grid',
icon: 'grid layout',
title: 'Grid',
group: 'Layout',
defaultProps: {
rows: 1,
columns: 1,
gap: '6px'
},
childProps: propGroup('Layout', {
row: boundProp({
documentation: 'Row of the grid (1 ..)',
props: { inputLabel: 'row' },
tuple: 'Position',
type: 'number'
}, 'ValueSourceHandler', 'number'),
column: boundProp({
documentation: 'Column of the grid (1 ..)',
props: { inputLabel: 'col' },
tuple: 'Position',
type: 'number'
}, 'ValueSourceHandler', 'number'),
width: boundProp({
documentation: 'Width of the control in number of grid cells.',
tuple: 'Dimension',
props: { inputLabel: 'w' },
type: 'number'
}, 'ValueSourceHandler', 'number'),
height: boundProp({
documentation: 'Height of the control in number of grid cells.',
tuple: 'Dimension',
props: { inputLabel: 'h' },
type: 'number'
}, 'ValueSourceHandler', 'number')
}),
props: {
...propGroup('Grid', {
alignItems: 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: 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: 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: boundProp({
documentation: 'Number of grid rows',
group: 'Dimensions',
props: {
inputLabel: 'rows'
},
tuple: 'Size',
type: 'number'
}, 'ValueSourceHandler', 'number'),
columns: boundProp({
documentation: 'Number of grid columns',
group: 'Dimensions',
props: {
inputLabel: 'cols'
},
tuple: 'Size',
type: 'number'
}, 'ValueSourceHandler', 'number'),
rowSize: boundProp({
documentation: 'Default height of extra rows (e.g. 100px)',
group: 'Dimensions',
props: {
inputLabel: 'rows'
},
tuple: 'Width',
type: 'number'
}),
columnSize: boundProp({
documentation: 'Default width of extra columns (e.g. 100px)',
group: 'Dimensions',
props: {
inputLabel: 'cols'
},
tuple: 'Width',
type: 'number'
}),
templateRows: 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: 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: boundProp({
documentation: 'Number of grid rows in read only mode',
group: 'Read-Only',
props: {
inputLabel: 'rows'
},
tuple: 'Size',
type: 'number'
}, 'ValueSourceHandler', 'number'),
columnsReadOnly: boundProp({
documentation: 'Number of grid columns in read only mode',
group: 'Read-Only',
props: {
inputLabel: 'cols'
},
tuple: 'Size',
type: 'number'
}, 'ValueSourceHandler', 'number'),
templateRowsReadOnly: boundProp({
documentation: 'Row template for read only mode (e.g. 10px auto 1fr)',
group: 'Read-Only',
props: { label: 'Row Template' },
type: 'number'
}),
templateColumnsReadOnly: 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