evoleasing-account/components/questionnaire/AddressSuggests.js

import React from "react";
import Head from 'next/head';
import Image from 'next/image';
import Link from "next/link";
import cookie from 'cookie';
import { connect } from "react-redux";
import numeral from "numeral";
import pluralize from 'pluralize-ru';
import { SpinnerCircular } from 'spinners-react';
import AsyncSelect from 'react-select/async';
import debounce from 'debounce-promise';
import { set as _set, get as _get } from 'lodash';

import { getAddress } from '../../actions';

const suggestsAddressDebounce = (text) =>
{
	return getAddress(text);
}

const suggestsAddress = debounce(suggestsAddressDebounce, 200);

export default class AddressSuggests extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
			focused: false, 
			options: [], 
			fias: [], 
		};
	}

	componentDidMount()
	{
	}

	componentDidUpdate(prevProps, prevState)
	{
	}

	_handle_onChange = (value) => 
	{
		const { fias, focused } = this.state;
		const { onChange } = this.props;

		onChange({ title: value, fias_id: "" });
		if(focused)
		{
			this._getAddress(value);
		}	
	}

	_handle_onSelect = (value) => 
	{
		const { fias, focused } = this.state;
		const { onChange } = this.props;

		this.setState({ focused: false }, () => 
		{
			onChange({ title: value, fias_id: fias[value] });
		});
	}

	_handle_onFocus = () => 
	{
		this.setState({ focused: true });
	}

	_handle_onBlur = () => 
	{
		setTimeout(() => 
		{
			this.setState({ focused: false });
		}, 100);
	}

	_getAddress = (text) => 
	{
		return new Promise((resolve, reject) => 
		{
			if(text === "")
			{
				this.setState({ options: [], fias: {}, value: "" }, () => 
				{
					resolve([]);
				});
			}
			else
			{
				suggestsAddress(text)
				.then((result) => 
				{
					const options = [];
					const fias = {};
	
					for(let i in result.suggestions)
					{
						const s = result.suggestions[i];
						options.push({ value: s.value, label: s.value });
						fias[s.value] = s.data.fias_id;
					}
	
					this.setState({ options, fias }, () => 
					{
						resolve(options);
					});
				})
				.catch(() => 
				{
	
				});
			}
		})
	}

	render()
	{
		const { focused, options } = this.state;
		const { value, disabled, required } = this.props;

		return (
				<div className="autocomlete" style={{ position: "relative" }}>
					<input type="text" 
						autoComplete="off" 
						style={{ width: "100%" }} 
						className={ `react-select__control react-select__control--is-focused ${ focused ? "react-select__control--menu-is-open" : "" }` }
						id="address" 
						name="address" 
						value={ value } 
						placeholder="Введите адрес" 
						onChange={ (event) => this._handle_onChange(event.target.value) } 
						onFocus={ this._handle_onFocus } 
						onBlur={ this._handle_onBlur } 
						required={ required } 
						disabled={ disabled } 
					/>
					{ focused && options.length > 0 && (
						<div className="react-select__menu" style={{ position: "absolute", zIndex: 1, background: "#fff", width: "100%", left: "0px", top: "40px" }}>
							<div className="react-select__menu-list">
								{ options.map((option, index) => 
								(
									<div className="react-select__option" aria-disabled="false" tab-index="-1" key={ index } onClick={ () => this._handle_onSelect(option.value) }>{ option.value }</div>
								)) }
							</div>
						</div>
					) }
				</div>
			);


		/*
		<AsyncSelect 
			//value={ value } 
			defaultInputValue={ value } 
			placeholder="Укажите адрес" 
			className="autocomlete" 
			classNamePrefix="react-select" 
			cacheOptions={ true } 
			defaultOptions={ this.state.options } 
			noOptionsMessage={ () => null } 
			loadingMessage={ () => null } 
			loadOptions={ (text) => this._getAddress(text) } 
			onChange={ this._handle_onChange } 
			//onBlur={ this._handle_onBlur } 
			onInputChange={ this._handle_onInputChange } 
			//isDisabled={ disabled ? true : false } 
		/>
		*/
	}
}