<drayman-text-field />

Text field powered by Angular Material and ngx-mask libraries.

export const component: DraymanComponent = async ({ forceUpdate }) => {
    let name = '';
    let typing = false;

    return () => {
        // User started typing
        const onValueChangeStart = async () => {
            typing = true;
            await forceUpdate();
        }

        // User stopped typing with some `value`
        const onValueChange = async ({ value }) => {
            typing = false;
            name = value;
            await forceUpdate();
        }

        return <div>
            <drayman-text-field
                label="Name"
                value={name}
                onValueChangeStart={onValueChangeStart}
                onValueChange={onValueChange}
            />
            <div>
                {name && <p>Hello, {name}!</p>}
                <p>{typing ? `You are typing!` : `You aren't typing!`}</p>
            </div>
        </div>
    };
}

import axios from 'axios';
import _ from 'lodash';

const getCountriesFromCache = _.memoize(async (value) => {
    const result = await axios.get(`https://api.first.org/data/v1/countries?q=${value}&limit=10`);
    return Object.values(result.data.data).map((x: any) => ({ value: x.country, label: x.country }));
});

export const component: DraymanComponent = async ({ forceUpdate }) => {

    let countries: { value: string; label: string; }[] = [];
    let searchValue = '';

    const getCountries = async () => {
        countries = await getCountriesFromCache(searchValue);
        await forceUpdate();
    }

    return () => {
        return (
            <drayman-text-field
                label="Country"
                value={searchValue}
                suggestions={countries}
                onFocus={
                    async () => {
                        if (!countries.length) {
                            await getCountries();
                        }
                    }
                }
                onValueChange={
                    async ({ value }) => {
                        searchValue = value;
                        await getCountries();
                    }
                }
            />
        );
    }
}