@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
59 lines • 2.58 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const semantic_ui_react_1 = require("semantic-ui-react");
const common_1 = require("../common");
const context_1 = require("../context");
const wrapper_1 = require("../wrapper");
const helpers_1 = require("../helpers");
const menuControlProps = [
'attached',
'borderless',
'color',
'compact',
'fixed',
'floated',
'fluid',
'icon',
'inverted',
'pagination',
'pointing',
'secondary',
'size',
'stackable',
'tabular',
'text',
'vertical',
'widths'
];
const menuItemControlProps = ['content', 'icon'];
exports.MenuItem = props => {
const context = React.useContext(context_1.Context);
const clickHandler = props.formElement.props.onClick;
const onClick = React.useCallback(() => {
if (clickHandler) {
common_1.handle(props.handlers, clickHandler, props.owner, props, props.formElement, context);
}
}, [clickHandler, context, props]);
return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { controlProps: menuItemControlProps, control: semantic_ui_react_1.Menu.Item, onClick: onClick, as: "div" })));
};
exports.MenuView = props => {
const context = React.useContext(context_1.Context);
const { formElement } = props;
const value = helpers_1.getValue(props, context);
const [selection] = React.useState(value ||
(formElement.elements && formElement.elements.length && formElement.elements[0].props.name));
const MenuType = formElement.props.subMenu ? semantic_ui_react_1.Menu.Menu : semantic_ui_react_1.Menu;
return (React.createElement(React.Fragment, null,
React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { control: MenuType, controlProps: menuControlProps }),
(formElement.elements || []).map((m, i) => (React.createElement(React.Fragment, { key: i }, props.catalogue.createComponent({
...props,
className: common_1.names(props.className, {
active: !common_1.isNullOrEmpty(selection) && m.props.name === selection
})
}, m, context)))),
props.formElement.elements.length === 0 && props.EmptyCell && (React.createElement(semantic_ui_react_1.Menu.Item, { "data-no-drop": true },
React.createElement(props.EmptyCell, Object.assign({}, props)))))));
};
//# sourceMappingURL=menu_view.js.map