@tomino/dynamic-form-semantic-ui/dist/cjs/editor/pages/pages_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 mobx_react_1 = require("mobx-react");
const editor_styles_1 = require("../editor_styles");
const common_1 = require("../../common");
const editor_context_1 = require("../editor_context");
const semantic_ui_react_1 = require("semantic-ui-react");
const helpers_1 = require("../../helpers");
exports.PageFolder = mobx_react_1.observer(({ element }) => {
    const state = React.useContext(editor_context_1.EditorContext);
    const onSelect = React.useCallback(() => {
        localStorage.setItem('CORPIX_SELECTED_FORM', element.uid);
        state.project.state.setForm(element);
    }, [element, state.project.state]);
    const label = helpers_1.getPropValue(null, element, state, 'label');
    const editorLabel = helpers_1.getPropValue(null, element, state, 'editorLabel');
    return (React.createElement("div", { className: "item" },
        React.createElement("a", { className: common_1.names(element.isSelected ? 'selected' : '', common_1.pointer), onClick: onSelect },
            React.createElement(semantic_ui_react_1.Icon, { name: "file" }),
            label || editorLabel,
            " ",
            React.createElement("span", { className: "meta" }, "Form"))));
});
exports.PagesView = mobx_react_1.observer(() => {
    const state = React.useContext(editor_context_1.EditorContext);
    const onClick = React.useCallback(() => {
        state.form.addRow('pages', {
            control: 'Form',
            label: 'New Form'
        });
    }, [state.form]);
    const onDuplicate = React.useCallback(() => {
        const page = helpers_1.clone(state.project.state.selectedForm);
        page.props.label = page.props.label + ' Clone';
        state.form.addRow('pages', page);
    }, [state.form, state.project.state.selectedForm]);
    return (React.createElement(editor_styles_1.PaneContent, null,
        React.createElement("div", { className: "paneHeader" },
            React.createElement("div", { className: "text" }, "Pages"),
            React.createElement("span", null),
            React.createElement(semantic_ui_react_1.Button, { compact: true, size: "tiny", color: "blue", icon: "clone", title: "Duplicate", onClick: onDuplicate }),
            React.createElement(semantic_ui_react_1.Button, { compact: true, size: "tiny", color: "blue", icon: "plus", onClick: onClick })),
        React.createElement(editor_styles_1.ToolBox, null,
            state.form && React.createElement(exports.PageFolder, { element: state.form }),
            state.form &&
                state.form.pages.map((page, index) => (React.createElement(exports.PageFolder, { element: page, key: page.uid + index }))))));
});
exports.PagesView.displayName = 'FormElements';
//# sourceMappingURL=pages_view.js.map