@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
59 lines • 3.72 kB
JavaScript
import * as React from 'react';
import { BuildLayerItem } from './dataset_item';
import { observer } from 'mobx-react';
import { BuildLayerFolder } from './dataset_folder';
import { List } from 'semantic-ui-react';
import { config } from '@tomino/dynamic-form';
import { EditorContext } from '../editor_context';
import { pointer } from '../../common';
export const Condition = observer(({ condition: c, index: i, sourcePath }) => {
const editorState = React.useContext(EditorContext);
return (React.createElement(List.Item, null,
React.createElement(List.Icon, { name: c.properties ? 'folder' : 'folder outline', color: "yellow" }),
React.createElement(List.Content, null,
React.createElement(List.Description, { as: "a", className: pointer + ' ' + (c === editorState.project.state.selectedSchema ? 'selected' : ''), onClick: () => editorState.project.state.setSchema(c, '') }, c.title || config.i18n `condition ${i + 1}`),
c.type === 'object' && (React.createElement(List.List, null,
React.createElement(BuildLayer, { schema: c, items: c.properties, sourcePath: sourcePath, BuildLayerFolder: BuildLayerFolder, owner: null }))))));
});
const BuildCondition = observer(({ name, conditions, sourcePath }) => {
let [opened, toggleOpen] = React.useState(false);
if (!conditions || conditions.length == 0) {
return null;
}
return (React.createElement(List.Item, null,
React.createElement(List.Icon, { name: "code branch", className: pointer, onClick: () => toggleOpen(!opened) }),
React.createElement(List.Content, null,
React.createElement(List.Header, { className: pointer, onClick: () => toggleOpen(!opened) }, name),
opened && (React.createElement(List.List, null, conditions.map((c, i) => (React.createElement(Condition, { key: i, index: i, condition: c, sourcePath: sourcePath }))))))));
});
export const BuildLayer = observer(({ schema, items, sourcePath, BuildLayerFolder, ignoreConditions, owner }) => {
let controls = [];
let keys = [];
for (let key of Array.from(items.keys())) {
keys.push(key);
}
keys = keys.sort((a, b) => {
let vA = items.get(a);
let vB = items.get(b);
return (vA.type === 'object' || vA.type === 'array') &&
(vB.type !== 'array' && vB.type !== 'object')
? -1
: (vB.type === 'object' || vB.type === 'array') &&
(vA.type !== 'array' && vA.type !== 'object')
? 1
: a.localeCompare(b, 'en-US', { numeric: true });
});
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
let value = items.get(key);
controls.push(value.type === 'object' || (value.items && value.items.type === 'object') ? (React.createElement(BuildLayerFolder, { BuildLayer: BuildLayer, key: key, schema: value, name: key, sourcePath: sourcePath + key, owner: owner, index: i })) : (React.createElement(BuildLayerItem, { key: key, schema: value, name: key, sourcePath: sourcePath + key, parentSchema: schema, owner: owner, index: i })));
}
return (React.createElement("div", null,
controls,
!ignoreConditions && (React.createElement(React.Fragment, null,
React.createElement(BuildCondition, { name: 'oneOf', conditions: schema.oneOf, sourcePath: sourcePath }),
React.createElement(BuildCondition, { name: 'allOf', conditions: schema.allOf, sourcePath: sourcePath }),
React.createElement(BuildCondition, { name: 'anyOf', conditions: schema.anyOf, sourcePath: sourcePath })))));
});
BuildLayer.displayName = 'DatasetLayer';
//# sourceMappingURL=dataset_layer.js.map