rui-react/dist/components/AutoComplete/optionList.js

React UI library

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, useEffect } from "react";
import Icon from "../Icon/icon";
import classNames from "classnames";
import { scopedClass } from "../../helpers/utils";
import { Transition } from "../Transtition/transition";
import { useForwardRef } from "../../hooks/useForwardRef";
export var OptionList = forwardRef(function (props, ref) {
    var suggestions = props.suggestions, visible = props.visible, clearSuggestions = props.clearSuggestions, candidateIndex = props.candidateIndex, handleSelect = props.handleSelect, isLoading = props.isLoading, className = props.className, style = props.style, restProps = __rest(props, ["suggestions", "visible", "clearSuggestions", "candidateIndex", "handleSelect", "isLoading", "className", "style"]);
    var refObject = useForwardRef(ref);
    var sc = scopedClass("autoComplete");
    var isVisible = (visible && !!suggestions.length) || isLoading;
    var setTransitionHeight = function (element) {
        var height = window.getComputedStyle(element).height;
        var transition = element.style.transition;
        element.style.transition = "";
        element.style.height = "auto";
        var targetHeight = window.getComputedStyle(element).height;
        element.style.height = height;
        element.style.transition = transition;
        requestAnimationFrame(function () {
            element.style.height = targetHeight;
        });
    };
    useEffect(function () {
        if (refObject.current === null)
            return;
        setTransitionHeight(refObject.current);
    }, [isLoading, refObject]);
    var ulContent = function () {
        var loadingIcon = (React.createElement("div", { className: sc("loadingIcon") },
            React.createElement(Icon, { icon: "spinner", size: "2x", spin: true })));
        var suggestionItems = suggestions.map(function (value, index) {
            var _a;
            var classes_item = classNames(sc("item"), (_a = {},
                _a[sc("item-candidate")] = candidateIndex === index,
                _a));
            return (React.createElement("li", { key: value, className: classes_item, onClick: function () { return handleSelect(value); }, role: "option", "aria-selected": candidateIndex === index ? true : false }, value));
        });
        return (React.createElement("ul", __assign({ className: className, ref: refObject, role: "listbox" }, restProps), isLoading ? loadingIcon : suggestionItems));
    };
    return (React.createElement(Transition, { in: isVisible, onExited: clearSuggestions, timeout: 300, animation: "zoom-in-top", requireWrapper: true }, ulContent()));
});