@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
38 lines • 2.1 kB
JavaScript
import * as React from 'react';
import { ToolBox as StyledToolBox } from '../editor_styles';
import { Menu, Input } from 'semantic-ui-react';
import { groupByArray } from '@tomino/toolbelt';
import { PaneContent } from '../editor_styles';
import { generateId } from '../editor_common';
import { EditorContext } from '../editor_context';
import { ToolItem } from './tool_item';
import { css } from 'emotion';
const searchInput = css `
position: absolute !important;
left: 90px;
right: 12px;
top: 6px;
bottom: 6px;
`;
export const ToolBox = ({ catalogue }) => {
const editorState = React.useContext(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 = groupByArray(filtered, 'group').sort((a, b) => (a.key < b.key ? -1 : 1));
return (React.createElement(PaneContent, null,
React.createElement("div", { className: "paneHeader" },
React.createElement("div", { className: "text" }, "Controls"),
React.createElement(Input, { icon: "search", placeholder: "Search ...", className: searchInput, fluid: true, size: "mini", onChange: e => setFilter(e.currentTarget.value) })),
React.createElement(StyledToolBox, null,
React.createElement(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(Menu.Item, { header: true }, g.key || 'Common'),
g.values.map((s, i) => (React.createElement(Menu.Item, { key: s.title + i },
React.createElement(ToolItem, Object.assign({}, s, { id: generateId(), editorState: editorState }))))))))))));
};
ToolBox.displayName = 'ToolBox';
//# sourceMappingURL=tool_box.js.map