@tomino/dynamic-form-semantic-ui/dist/cjs/properties/select.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 properties_common_1 = require("./properties_common");
const semantic_ui_react_1 = require("semantic-ui-react");
const common_1 = require("../common");
const editor_context_1 = require("../editor/editor_context");
const helpers_1 = require("../helpers");
exports.Select = mobx_react_1.observer(props => {
    const editorState = React.useContext(editor_context_1.EditorContext);
    const onChange = React.useMemo(() => properties_common_1.onChangeHandler.bind({ props, editorState }), [
        editorState,
        props
    ]);
    const { formElement } = props;
    const source = common_1.prop(formElement);
    let def = helpers_1.getValue(props, editorState, 'default');
    const opts = React.useMemo(() => {
        let options = helpers_1.getValue(props, editorState, 'options');
        if (!options) {
            options = [];
        }
        let schema = props.owner.getSchema(source, false);
        if (schema && schema.$enum) {
            options = options.concat(schema.$enum);
        }
        return options;
    }, [editorState, props, source]);
    const { value, error } = properties_common_1.parseProps(props, editorState, true);
    return (React.createElement(semantic_ui_react_1.Dropdown, { value: value || def, "data-value": value || def, id: source, selection: true, fluid: true, text: value ? undefined : formElement.props && formElement.props.text, name: "type", onChange: onChange, className: `property-search ${error ? 'invalid' : ''}`, options: opts }));
});
//# sourceMappingURL=select.js.map