@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
41 lines • 2.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const editor_styles_1 = require("../editor_styles");
const semantic_ui_react_1 = require("semantic-ui-react");
const toolbelt_1 = require("@tomino/toolbelt");
const editor_styles_2 = require("../editor_styles");
const editor_common_1 = require("../editor_common");
const editor_context_1 = require("../editor_context");
const tool_item_1 = require("./tool_item");
const emotion_1 = require("emotion");
const searchInput = emotion_1.css `
position: absolute !important;
left: 90px;
right: 12px;
top: 6px;
bottom: 6px;
`;
exports.ToolBox = ({ catalogue }) => {
const editorState = React.useContext(editor_context_1.EditorContext);
const [filter, setFilter] = React.useState('');
const items = Object.getOwnPropertyNames(catalogue.components)
.map(key => catalogue.components[key])
.sort((a, b) => (a.title < b.title ? -1 : 1));
let filtered = filter
? items.filter(s => s.title.toLowerCase().indexOf(filter.toLowerCase()) >= 0)
: items;
let grouped = toolbelt_1.groupByArray(filtered, 'group').sort((a, b) => (a.key < b.key ? -1 : 1));
return (React.createElement(editor_styles_2.PaneContent, null,
React.createElement("div", { className: "paneHeader" },
React.createElement("div", { className: "text" }, "Controls"),
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, null,
React.createElement(semantic_ui_react_1.Menu, { text: true, inverted: editorState.theme.inverted, vertical: true, compact: true, fluid: true }, grouped.map(g => (React.createElement(React.Fragment, { key: g.key || 'General' },
React.createElement(semantic_ui_react_1.Menu.Item, { header: true }, g.key || 'Common'),
g.values.map((s, i) => (React.createElement(semantic_ui_react_1.Menu.Item, { key: s.title + i },
React.createElement(tool_item_1.ToolItem, Object.assign({}, s, { id: editor_common_1.generateId(), editorState: editorState }))))))))))));
};
exports.ToolBox.displayName = 'ToolBox';
//# sourceMappingURL=tool_box.js.map