@tomino/dynamic-form-semantic-ui/dist/cjs/semantic/search_view.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 semantic_ui_react_1 = require("semantic-ui-react");
const toolbelt_1 = require("@tomino/toolbelt");
const common_1 = require("../common");
const context_1 = require("../context");
const helpers_1 = require("../helpers");
const wrapper_1 = require("../wrapper");
const style = common_1.css `
  .input {
    display: block !important;
  }
  .result:first-of-type:hover,
  .result:first-of-type {
    background: #dedede !important;
    font-weight: bold;
  }
`;
exports.SearchComponent = props => {
    const ctx = React.useContext(context_1.Context);
    return React.createElement(SearchWithContext, Object.assign({}, props, { context: ctx }));
};
const controlProps = ['fluid'];
let SearchWithContext = class SearchWithContext extends React.Component {
    constructor() {
        super(...arguments);
        this.state = { isLoading: false, options: [], value: '' };
        this.resetComponent = () => this.setState({ isLoading: false, options: [], value: '' });
        this.handleResultSelect = (_event, { result }) => {
            if (result.key === '-1') {
                return false;
            }
            this.setState({ value: result.title });
            helpers_1.setValue(this.props, this.context, result.value);
        };
        this.handleSearchChange = (_event, { value }) => {
            this.setState({ isLoading: true, value });
            if (value.length < 1)
                return this.resetComponent();
            this.getResults(value);
        };
        this.resultRenderer = (option) => {
            let control = this.props.formElement.props.renderTemplate;
            let titles = option.titles || [option.title];
            if (control[0] && control[0].match(/\d/)) {
                control = control
                    .split('\n')
                    .map((s, i) => `<div style="width: ${s};display: inline-block">{${i}}</div>`)
                    .join('\n');
            }
            titles.forEach((t, i) => (control = control.replace(`{${i}}`, t)));
            return React.createElement("div", { dangerouslySetInnerHTML: { __html: control } });
        };
        this.getResults = toolbelt_1.debounce((value) => {
            if (!value) {
                return [];
            }
            if (!this.props.formElement.props.searchName) {
                throw new Error('You need to define a search name!');
            }
            let props = this.props.formElement.props;
            common_1.handle(this.props.handlers, props.search || 'lookup', this.props.owner, this.props, this.props.formElement, this.context, {
                lookup: props.searchName,
                single: props.single,
                limit: props.limit,
                value,
                context: this.props.context
            }).then((options) => {
                this.createTitles(options);
                this.setState({
                    isLoading: false,
                    options
                });
            });
        }, 500);
    }
    async componentDidMount() {
        this.resetComponent();
        let props = this.props.formElement.props;
        let value = helpers_1.getValue(this.props, this.context);
        if (!value) {
            return;
        }
        if (value != null) {
            this.setState({ isLoading: true });
            common_1.handle(this.props.handlers, props.search || 'lookup', this.props.owner, this.props, this.props.formElement, this.context, {
                lookup: props.searchName,
                single: props.single,
                limit: props.limit,
                value,
                context: this.props.context,
                searchByValue: true
            }).then((options) => {
                this.createTitles(options);
                this.setState({
                    isLoading: false,
                    value: options && options.length ? options[options.length - 1].title : ''
                });
            });
        }
    }
    createTitles(options) {
        for (let option of options) {
            if (!option.title) {
                if (option.titles) {
                    option.title = option.titles.join(' - ');
                }
                else {
                    console.error('You need to provide title!');
                }
            }
        }
    }
    render() {
        const { isLoading, value, options } = this.state;
        if (!helpers_1.valueSource(this.props.formElement)) {
            return React.createElement("span", null, "Component not bound ;(");
        }
        if (this.props.readOnly || this.props.formElement.props.single) {
            return value;
        }
        return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, this.props, { control: semantic_ui_react_1.Search, controlProps: controlProps, className: style, loading: isLoading, fluid: true, showNoResults: this.state.isLoading ? false : true, showError: true, onResultSelect: this.handleResultSelect, onSearchChange: this.handleSearchChange, resultRenderer: this.props.formElement.props.renderTemplate ? this.resultRenderer : undefined, results: options, value: value })));
    }
};
SearchWithContext.contextType = context_1.Context;
SearchWithContext = tslib_1.__decorate([
    mobx_react_1.observer
], SearchWithContext);
exports.SearchWithContext = SearchWithContext;
exports.SearchView = {
    Component: exports.SearchComponent,
    toString: () => ''
};
//# sourceMappingURL=search_view.js.map