@nativescript-community/svelte-native-nativescript-ui/autocomplete/index.js

Svelte Native support for Nativescript UI

import { NativeViewElementNode, NativeElementPropType, logger, createElement, registerElement, NativeElementNode } from 'svelte-native/dom';
import { RadAutoCompleteTextView, AutoCompleteViewType, SuggestionView } from 'nativescript-ui-autocomplete';

class SuggestionViewElement extends NativeElementNode {
    constructor() {
        super('suggestionView', SuggestionView, "suggestionView", { "suggestionItemTemplate": NativeElementPropType.Value, "suggestionViewHeight": NativeElementPropType.Value });
        this._templateComponent = null;
    }
    get itemTemplateComponent() {
        if (!this._templateComponent) {
            let templateEl = this.childNodes.find(n => n.tagName == "template");
            if (!templateEl)
                return null;
            this._templateComponent = templateEl;
        }
        return this._templateComponent.component;
    }
}
class RadAutoCompleteTextViewElement extends NativeViewElementNode {
    constructor() {
        super('radAutoCompleteTextView', RadAutoCompleteTextView, null, {
            "closeButtonImageSrc": NativeElementPropType.Value,
            "completionMode": NativeElementPropType.Value,
            "displayMode": NativeElementPropType.Value,
            "filteredItems": NativeElementPropType.Value,
            "itemViewLoader": NativeElementPropType.Value,
            "layoutMode": NativeElementPropType.Value,
            "loadSuggestionsAsync": NativeElementPropType.Value,
            "minimumCharactersToSearch": NativeElementPropType.Value,
            "noResultsText": NativeElementPropType.Value,
            "readOnly": NativeElementPropType.Value,
            "selectedTokens": NativeElementPropType.Value,
            "showCloseButton": NativeElementPropType.Value,
            "suggestMode": NativeElementPropType.Value,
            "suggestionView": NativeElementPropType.Value,
            "text": NativeElementPropType.Value,
            "items": NativeElementPropType.Value,
            "hint": NativeElementPropType.Value
        });
        this.nativeElement.itemViewLoader = (viewType) => this.loadView(viewType);
        this.nativeView.on(RadAutoCompleteTextView.itemLoadingEvent, (args) => { this.updateListItem(args); });
    }
    loadView(viewType) {
        if (viewType != AutoCompleteViewType.ItemView)
            return null;
        let suggestionView = this.nativeView.suggestionView;
        if (!suggestionView || !suggestionView.__SvelteNativeElement__)
            return;
        let componentClass = suggestionView.__SvelteNativeElement__.itemTemplateComponent;
        if (!componentClass)
            return null;
        logger.debug(() => "creating view for " + viewType);
        let wrapper = createElement('StackLayout');
        wrapper.setStyle("padding", 0);
        wrapper.setStyle("margin", 0);
        let nativeEl = wrapper.nativeView;
        let builder = (props) => {
            let componentInstance = new componentClass({
                target: wrapper,
                props: props
            });
            nativeEl.__SvelteComponent__ = componentInstance;
        };
        nativeEl.__SvelteComponentBuilder__ = builder;
        return nativeEl;
    }
    updateListItem(args) {
        let componentInstance;
        let view = args.view;
        //if we are a svelte component, update our props
        if (!view)
            return;
        if (!view.__SvelteComponent__) {
            if (view.__SvelteComponentBuilder__) {
                logger.debug(() => "mounting to view " + view + " with props " + Object.keys(args.data).join(","));
                view.__SvelteComponentBuilder__({ item: args.data });
                view.__SvelteComponentBuilder__ = null;
                return;
            }
        }
        if (view.__SvelteComponent__) {
            componentInstance = view.__SvelteComponent__;
        }
        if (componentInstance) {
            logger.debug(() => "updating view " + view + " with props " + Object.keys(args.data).join(","));
            componentInstance.$set({ item: args.data });
        }
    }
    addToken(token) {
        return this.nativeView.addToken(token);
    }
    insertTokenAtIndex(token, index) {
        return this.nativeView.insertTokenAtIndex(token, index);
    }
    removeAllTokens() {
        return this.nativeView.removeAllTokens();
    }
    removeToken(token) {
        return this.nativeView.removeToken(token);
    }
    removeTokenAtIndex(index) {
        return this.nativeView.removeTokenAtIndex(index);
    }
    resetAutoComplete() {
        return this.nativeView.resetAutoComplete();
    }
    tokenAtIndex(index) {
        return this.nativeView.tokenAtIndex(index);
    }
    tokens() {
        return this.nativeView.tokens();
    }
    static register() {
        registerElement('radAutoCompleteTextView', () => new RadAutoCompleteTextViewElement());
        registerElement('suggestionView', () => new SuggestionViewElement);
    }
}

export { RadAutoCompleteTextViewElement as default };