@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
39 lines (38 loc) • 1.74 kB
JavaScript
;
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 editor_context_1 = require("../editor_context");
const outline_folder_1 = require("./outline_folder");
const semantic_ui_react_1 = require("semantic-ui-react");
const common_1 = require("../../common");
const styledOutline = (theme) => common_1.css `
.outlineOn {
background-color: ${theme.dragBackground};
border: 2px dashed ${theme.dragBorder};
}
.item {
margin-top: 2px;
margin-bottom: 2px;
}
`;
const searchInput = common_1.css `
position: absolute !important;
left: 90px;
right: 12px;
top: 6px;
bottom: 6px;
`;
exports.OutlineView = mobx_react_1.observer(() => {
const state = React.useContext(editor_context_1.EditorContext);
const [filter, setFilter] = React.useState('');
return (React.createElement(editor_styles_1.PaneContent, null,
React.createElement("div", { className: "paneHeader" },
React.createElement("div", { className: "text" }, "Outline"),
React.createElement(semantic_ui_react_1.Input, { icon: "search", placeholder: "Search ...", className: searchInput, fluid: true, size: "mini", onChange: e => setFilter(e.currentTarget.value) })),
React.createElement(editor_styles_1.ToolBox, { className: styledOutline(state.theme) }, state.form && (React.createElement(outline_folder_1.OutlineFolder, { item: state.project.state.selectedForm, filter: filter, expanded: true })))));
});
exports.OutlineView.displayName = 'FormElements';
//# sourceMappingURL=outline_view.js.map