@wix/design-system/dist/esm/AddressInput/AddressInput.js

@wix/design-system

import React, { useRef, useState, forwardRef, useImperativeHandle, useMemo, useCallback, } from 'react';
import InputWithOptions from '../InputWithOptions';
import { Search as SearchIcon } from '@wix/wix-ui-icons-common';
import Input from '../Input';
import Box from '../Box';
import Loader from '../Loader';
import Text from '../Text';
import { dataHooks } from './AddressInput.constants';
const AddressInput = forwardRef(({ dataHook, className, size, clearButton = true, clearButtonAriaLabel, placeholder, disabled, onFocus, onBlur, autoSelect, statusMessage, border = 'round', onManuallyInput, popoverProps, initialValue = '', onChange, onSelect, onClear, value: controlledValue, status, options, noResultsText, }, ref) => {
    const [inputValue, setInputValue] = useState(initialValue);
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const innerRef = useRef(null);
    useImperativeHandle(ref, () => ({
        focus: (options) => {
            innerRef.current?.focus(options);
        },
    }));
    const handleChange = (event) => {
        setInputValue(event.target.value);
        onChange?.(event);
    };
    const handleSelect = (option) => {
        setInputValue(option.label);
        onSelect?.(option);
    };
    const handleClear = () => {
        setInputValue('');
        onClear?.();
    };
    const getValue = useCallback(() => {
        return controlledValue !== undefined ? controlledValue : inputValue;
    }, [controlledValue, inputValue]);
    const isLoading = status === 'loading';
    const getStatus = () => {
        if (isLoading && isDropdownOpen) {
            return undefined;
        }
        return status;
    };
    const loadingOption = useMemo(() => ({
        id: '',
        disabled: true,
        value: () => (React.createElement(Box, { flex: 1, align: "center", padding: "3px" },
            React.createElement(Loader, { size: "tiny", dataHook: dataHooks.loader }))),
    }), []);
    const noResultsOption = useMemo(() => {
        const isString = typeof noResultsText === 'string';
        const value = isString ? (React.createElement(Text, { light: true, secondary: true, dataHook: dataHooks.noResultsText }, noResultsText)) : (noResultsText);
        return {
            id: 'no-results',
            disabled: true,
            overrideOptionStyle: !isString,
            value,
        };
    }, [noResultsText]);
    const renderedOptions = useMemo(() => {
        const value = getValue();
        const noResultsFound = !options || options.length === 0;
        if (isLoading) {
            return [loadingOption];
        }
        if (value && noResultsFound && noResultsText) {
            return [noResultsOption];
        }
        return options || [];
    }, [
        isLoading,
        options,
        noResultsOption,
        loadingOption,
        noResultsText,
        getValue,
    ]);
    return (React.createElement(InputWithOptions, { dataHook: dataHook, className: className, clearButton: clearButton, clearButtonAriaLabel: clearButtonAriaLabel, onChange: handleChange, size: size, options: renderedOptions, onSelect: handleSelect, onManuallyInput: onManuallyInput, popoverProps: popoverProps, value: getValue(), disabled: disabled, border: border, onClear: clearButton ? handleClear : undefined, onFocus: onFocus, onBlur: onBlur, autoSelect: autoSelect, status: getStatus(), statusMessage: statusMessage, menuArrow: false, highlight: true, prefix: React.createElement(Input.IconAffix, null,
            React.createElement(SearchIcon, null)), placeholder: placeholder, onOptionsShow: () => setIsDropdownOpen(true), onOptionsHide: () => setIsDropdownOpen(false), autocomplete: "off", ref: innerRef }));
});
export default AddressInput;
//# sourceMappingURL=AddressInput.js.map