@tomino/dynamic-form-semantic-ui/dist/cjs/editor/properties/property_view.js

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const propertyHandlers = tslib_1.__importStar(require("./property_panel.handlers"));
const mobx_react_1 = require("mobx-react");
const dynamic_form_1 = require("@tomino/dynamic-form");
const toolbelt_1 = require("@tomino/toolbelt");
const common_1 = require("../../common");
const control_factory_helpers_1 = require("../../properties/control_factory_helpers");
const help_view_1 = require("../../properties/help_view");
const editor_context_1 = require("../editor_context");
const semantic_ui_react_1 = require("semantic-ui-react");
const editor_styles_1 = require("../editor_styles");
const schema_panel_1 = require("../schema/schema_panel");
const property_styles_1 = require("./property_styles");
const property_panel_1 = require("./property_panel");
const editor_common_1 = require("../editor_common");
const dataset_modals_1 = require("../dataset/dataset_modals");
const helpers_1 = require("../../helpers");
const semantic_ui_react_2 = require("semantic-ui-react");
exports.RenderProps = ({ props, activeElement, groupName, handlers, filter }) => {
    let i = 0;
    const groups = toolbelt_1.groupByArray(props, x => x.group || (x.props.display === 'group' ? i++ : ''));
    const editorState = React.useContext(editor_context_1.EditorContext);
    return (React.createElement(React.Fragment, null, groups.map((g, i) => (React.createElement(React.Fragment, { key: g.key + i }, control_factory_helpers_1.renderElements(editorState, g.key && (!g.values[0].props || g.values[0].props.display !== 'group')
        ? [
            {
                control: 'Group',
                props: {
                    text: g.key || groupName
                },
                elements: g.values
            }
        ]
        : g.values, activeElement.props, handlers, null, editorState, activeElement.uid, filter))))));
};
function buildElementBreadcrumbs(context, props, activeElement) {
    let breadcrumbs;
    if (activeElement) {
        let label = helpers_1.getValue(props, context, 'label');
        breadcrumbs = [
            React.createElement("span", { key: "last", style: { fontWeight: 'normal' } },
                activeElement.control,
                label && ` - ${label}`)
        ];
        breadcrumbs.push(React.createElement(semantic_ui_react_1.Icon, { key: "lastIcon", name: "chevron right" }));
        let parent = activeElement.parent;
        let index = 0;
        while (parent != null && parent !== context.form) {
            let current = parent;
            if (parent.control) {
                if (breadcrumbs.length > 5) {
                    breadcrumbs.push('...');
                    return breadcrumbs;
                }
                breadcrumbs.push(React.createElement("span", { key: index, className: common_1.pointer, onClick: () => context.project.state.setElement(current, context.schema) }, parent.control));
                breadcrumbs.push(React.createElement(semantic_ui_react_1.Icon, { key: 'Icon' + index++, name: "chevron right" }));
            }
            parent = parent.parent;
        }
        breadcrumbs.push(React.createElement("span", { key: "first" }, "Element"));
    }
    return breadcrumbs;
}
function buildSchemaBreadcrumbs(activeElement, state) {
    let breadcrumbs;
    if (activeElement) {
        breadcrumbs = [
            React.createElement("span", { key: "last", style: { fontWeight: 'normal' } }, activeElement.title)
        ];
        breadcrumbs.push(React.createElement(semantic_ui_react_1.Icon, { key: "lastIcon", name: "chevron right" }));
        let parent = activeElement.parent;
        let index = 0;
        while (parent != null && parent !== state.schema) {
            let current = parent;
            breadcrumbs.push(React.createElement("span", { key: index, className: common_1.pointer, onClick: () => state.project.state.setSchema(current, current.title) }, current.title));
            breadcrumbs.push(React.createElement(semantic_ui_react_1.Icon, { key: 'Icon' + index++, name: "chevron right" }));
            parent = parent.parent;
        }
        breadcrumbs.push(React.createElement("span", { key: "first" }, "Schema"));
    }
    return breadcrumbs;
}
exports.PropertyEditor = mobx_react_1.observer(() => {
    const context = React.useContext(editor_context_1.EditorContext);
    const [filter, setFilter] = React.useState('');
    const [searchProperty, setSearchProperty] = React.useState('');
    const debouncedSet = React.useMemo(() => toolbelt_1.debounce(setSearchProperty, 400), []);
    const handleSearch = React.useCallback((_, props) => {
        setFilter(props.value);
        debouncedSet(props.value);
    }, [debouncedSet]);
    const { selectedElement, selectedSchema } = context.state;
    context.state.selectedSchemaName;
    const handlers = React.useMemo(() => {
        let result = propertyHandlers;
        if (context.editorCatalogue) {
            for (let key of Object.keys(context.editorCatalogue.components)) {
                const component = context.editorCatalogue.components[key];
                if (component.handlers) {
                    result = { ...result, ...component.handlers };
                }
            }
        }
        return result;
    }, [context.editorCatalogue]);
    const activeElement = selectedElement &&
        selectedElement.control !== 'EditorCell' &&
        selectedElement.control !== '' &&
        selectedElement.control !== null
        ? selectedElement
        : null;
    let activeSchema = common_1.prop(activeElement)
        ? editor_common_1.findSchema(activeElement, context.project.schema, context)
        : selectedSchema;
    const editorElement = activeElement &&
        context.editorCatalogue &&
        context.editorCatalogue.components[activeElement.control];
    const parentEditorElement = activeElement &&
        activeElement.parent &&
        context.editorCatalogue &&
        context.editorCatalogue.components[activeElement.parent.control];
    const editorProps = React.useMemo(() => editorElement
        ? context
            .cachedProps(editorElement)
            .filter(p => p.group === 'Editor')
            .concat(context.editorProps)
        : [], [context, editorElement]);
    const componentProps = React.useMemo(() => editorElement ? context.cachedProps(editorElement).filter(p => p.group !== 'Editor') : [], [context, editorElement]);
    const childProps = parentEditorElement ? context.cachedChildProps(parentEditorElement) : [];
    if (activeElement && !editorElement) {
        throw new Error(`Control '${activeElement.control}' does not exists in the catalogue`);
    }
    let props = {
        catalogue: context.editorCatalogue,
        owner: activeElement,
        handlers,
        formElement: activeElement
    };
    let breadcrumbs = activeElement ? (buildElementBreadcrumbs(context, props, activeElement).reverse()) : activeSchema ? (buildSchemaBreadcrumbs(activeSchema, context).reverse()) : (React.createElement("span", null, "Properties"));
    return (React.createElement("div", { className: common_1.names(editor_styles_1.paneContent(context.theme), property_styles_1.styledPropertyView(context.theme)) },
        React.createElement("div", { className: "paneHeader" },
            React.createElement("div", { className: "text breadcrumbs" },
                React.createElement("div", null, breadcrumbs))),
        React.createElement("div", { className: "property-table-row" },
            React.createElement(semantic_ui_react_2.Input, { transparent: true, inverted: true, icon: "search", iconPosition: "left", size: "mini", fluid: true, placeholder: "Filter properties ...", className: "searchInput", value: filter, onChange: handleSearch })),
        React.createElement("div", { className: common_1.names(editor_styles_1.searchableSidePane) },
            activeElement && (React.createElement(React.Fragment, null,
                !editorElement.provider && (React.createElement(exports.RenderProps, { activeElement: activeElement, props: property_panel_1.propertyPanel, groupName: "General", handlers: handlers, filter: searchProperty })),
                editorElement.props && (React.createElement(exports.RenderProps, { activeElement: activeElement, props: componentProps, groupName: "Control", handlers: handlers, filter: searchProperty })),
                parentEditorElement && parentEditorElement.childProps && (React.createElement(exports.RenderProps, { activeElement: activeElement, props: childProps, groupName: "Layout", handlers: handlers, filter: searchProperty })),
                React.createElement(exports.RenderProps, { activeElement: activeElement, props: editorProps, groupName: "Editor", handlers: handlers, filter: searchProperty }))),
            activeElement && !activeSchema && common_1.prop(activeElement) && (React.createElement(semantic_ui_react_1.Message, { className: editor_styles_1.margin12, error: true, content: `Schema not found at: ${editor_common_1.createPath(activeElement, context).join(' > ')}` })),
            activeSchema &&
                control_factory_helpers_1.renderElements(context, schema_panel_1.schemaPanel, activeSchema, schema_panel_1.schemaHandlers, null, context, activeSchema.title, searchProperty),
            (activeElement || activeSchema) && React.createElement(help_view_1.Help, { owner: activeElement }),
            React.createElement("div", { className: editor_styles_1.pad12 },
                activeElement &&
                    activeElement.parent.parent &&
                    (!activeElement.props || !activeElement.props.locked) && (React.createElement(semantic_ui_react_1.Button, { onClick: context.project.state.deleteActiveElement, content: dynamic_form_1.config.i18n `Delete`, icon: "trash" })),
                selectedSchema && React.createElement(dataset_modals_1.DeleteSchema, { schema: selectedSchema })))));
});
exports.PropertyEditor.displayName = 'PropertyEditor';
//# sourceMappingURL=property_view.js.map