@etsoo/materialui/lib/mjs/InputTipField.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Typography from "@mui/material/Typography";
import React from "react";
import { InputField } from "./InputField";
import { useAppContext } from "./app/ReactApp";
import ListItem from "@mui/material/ListItem";
import Popover from "@mui/material/Popover";
import List from "@mui/material/List";
import InputAdornment from "@mui/material/InputAdornment";
/**
 * InputField with tips
 * @param props Props
 * @returns Component
 */
export function InputTipField(props) {
    // Global app
    const app = useAppContext();
    // State
    const [title, setTitle] = React.useState();
    const [anchorEl, setAnchorEl] = React.useState();
    const [data, setData] = React.useState();
    // Destruct
    const { labelProps = {
        title: app?.get("clickForDetails"),
        sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id), slotProps = {}, ...rest } = props;
    const { input, ...slotRests } = slotProps;
    const load = (value) => {
        if (value.length < 2) {
            setTitle(undefined);
            return;
        }
        loadData(value).then(([data, title]) => {
            setData(data);
            setTitle(title);
        });
    };
    return (_jsxs(React.Fragment, { children: [_jsx(Popover, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
                    vertical: "bottom",
                    horizontal: "left"
                }, children: data && _jsx(List, { children: data.map((item) => renderItem(item)) }) }), _jsx(InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
                    load(event.target.value);
                    if (onChangeDelay)
                        onChangeDelay(event);
                }, slotProps: {
                    input: {
                        endAdornment: title ? (_jsx(InputAdornment, { position: "end", children: _jsx(Typography, { onClick: (event) => {
                                    setAnchorEl(event.currentTarget);
                                }, ...labelProps, children: title }) })) : undefined,
                        ...input
                    },
                    ...slotRests
                }, ...rest })] }));
}