@tomino/dynamic-form-semantic-ui/dist/cjs/properties/tuple.js

Semantic UI form renderer based on dynamic form generation

"use strict";
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 classnames_1 = tslib_1.__importDefault(require("classnames"));
const properties_common_1 = require("./properties_common");
const semantic_ui_react_1 = require("semantic-ui-react");
const editor_context_1 = require("../editor/editor_context");
exports.Tuple = mobx_react_1.observer((componentProps) => {
    const context = React.useContext(editor_context_1.EditorContext);
    const onChange = React.useMemo(() => properties_common_1.onChangeHandler.bind({ props: componentProps, editorState: context }), [componentProps, context]);
    const { formElement, readOnly } = componentProps;
    const { value, error, props } = properties_common_1.parseProps(componentProps, context);
    return (React.createElement("div", null, props.items.map((item, i) => (React.createElement(semantic_ui_react_1.Input, { key: i, type: item.type || 'text', label: item.label, labelPosition: "right", name: formElement.uid, className: classnames_1.default(properties_common_1.controlMargin, { invalid: error }), onChange: onChange, "data-value": value, value: value || '', readOnly: readOnly })))));
});
exports.Tuple.displayName = 'Tuple';
//# sourceMappingURL=tuple.js.map