@tomino/dynamic-form-semantic-ui/dist/mjs/editor/outline/outline_view.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { observer } from 'mobx-react';
import { ToolBox, PaneContent } from '../editor_styles';
import { EditorContext } from '../editor_context';
import { OutlineFolder } from './outline_folder';
import { Input } from 'semantic-ui-react';
import { css } from '../../common';
const styledOutline = (theme) => css `
  .outlineOn {
    background-color: ${theme.dragBackground};
    border: 2px dashed ${theme.dragBorder};
  }

  .item {
    margin-top: 2px;
    margin-bottom: 2px;
  }
`;
const searchInput = css `
  position: absolute !important;
  left: 90px;
  right: 12px;
  top: 6px;
  bottom: 6px;
`;
export const OutlineView = observer(() => {
    const state = React.useContext(EditorContext);
    const [filter, setFilter] = React.useState('');
    return (React.createElement(PaneContent, null,
        React.createElement("div", { className: "paneHeader" },
            React.createElement("div", { className: "text" }, "Outline"),
            React.createElement(Input, { icon: "search", placeholder: "Search ...", className: searchInput, fluid: true, size: "mini", onChange: e => setFilter(e.currentTarget.value) })),
        React.createElement(ToolBox, { className: styledOutline(state.theme) }, state.form && (React.createElement(OutlineFolder, { item: state.project.state.selectedForm, filter: filter, expanded: true })))));
});
OutlineView.displayName = 'FormElements';
//# sourceMappingURL=outline_view.js.map