@limetech/lime-elements
Version:
79 lines (78 loc) • 3.18 kB
JavaScript
import React from "react";
import { renderDescription, renderTitle } from "./common";
import { GridLayout } from "./grid-layout";
import { RowLayout } from "./row-layout";
import { getHelpComponent } from "../help";
export const ObjectFieldTemplate = (props) => {
const id = props.idSchema.$id;
if (id === 'root' || !isCollapsible(props.schema)) {
return renderFieldWithTitle(props);
}
if (isCollapsible(props.schema)) {
return renderCollapsibleField(props);
}
return renderProperties(props.properties, props.schema);
};
function renderFieldWithTitle(props) {
return React.createElement(React.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
}
function renderSectionHeader(props) {
const help = getHelpComponent(props.schema);
if (!help) {
return renderTitle(props.title);
}
return React.createElement(React.Fragment, {}, renderTitle(props.title), help);
}
function renderCollapsibleField(props) {
const defaultOpen = !isCollapsed(props.schema);
const helpElement = getHelpComponent(props.schema, {
slot: 'header',
});
return React.createElement('limel-collapsible-section', {
header: props.title,
id: getSchemaObjectPropertyPath(props.formContext.schema, props.idSchema),
'is-open': defaultOpen,
}, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
}
function getSchemaObjectPropertyPath(schema, subSchema) {
var _a, _b;
const refPrefixLength = 2;
const matchAllForwardSlashes = /\//g;
const rootPath = (_a = schema.$ref) === null || _a === void 0 ? void 0 : _a.replace(matchAllForwardSlashes, '.').slice(refPrefixLength);
const subSchemaPath = (_b = subSchema.$id) === null || _b === void 0 ? void 0 : _b.replace('_', '.properties.');
return subSchemaPath.replace('root', rootPath);
}
function renderProperties(properties, schema) {
var _a;
const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;
return renderLayout(properties, layout);
}
function renderLayout(properties, layout) {
const type = (layout === null || layout === void 0 ? void 0 : layout.type) || 'default';
const layouts = {
default: renderDefaultLayout,
grid: renderGridLayout,
row: renderRowLayout,
};
return layouts[type](properties, layout);
}
function renderDefaultLayout(properties) {
return React.createElement('div', {
className: 'limel-form-layout--default',
}, properties.map((element) => element.content));
}
function renderGridLayout(properties, layout) {
return React.createElement(GridLayout, {
options: layout,
}, properties.map((element) => element.content));
}
function renderRowLayout(properties) {
return React.createElement(RowLayout, {}, properties.map((element) => element.content));
}
function isCollapsible(schema) {
var _a;
return !!((_a = schema.lime) === null || _a === void 0 ? void 0 : _a.collapsible);
}
function isCollapsed(schema) {
return schema.lime.collapsed !== false;
}