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

TypeScript Material-UI Implementation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputTipField = InputTipField;
const jsx_runtime_1 = require("react/jsx-runtime");
const shared_1 = require("@etsoo/shared");
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const react_1 = __importDefault(require("react"));
const InputField_1 = require("./InputField");
const ReactApp_1 = require("./app/ReactApp");
const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
const Popover_1 = __importDefault(require("@mui/material/Popover"));
const List_1 = __importDefault(require("@mui/material/List"));
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const EmailInput_1 = require("./EmailInput");
const MobileInput_1 = require("./MobileInput");
const PhoneInput_1 = require("./PhoneInput");
const componentMap = {
    email: EmailInput_1.EmailInput,
    phone: PhoneInput_1.PhoneInput,
    mobile: MobileInput_1.MobileInput
};
/**
 * InputField with tips
 * @param props Props
 * @returns Component
 */
function InputTipField(props) {
    // Global app
    const app = (0, ReactApp_1.useAppContext)();
    // State
    const [title, setTitle] = react_1.default.useState();
    const [anchorEl, setAnchorEl] = react_1.default.useState();
    const [data, setData] = react_1.default.useState();
    // Destruct
    const { component = "input", componentProps, changeDelay, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
    const { labelProps = {
        title: app?.get("clickForDetails"),
        sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
    }, loadData, itemLabel = (item) => shared_1.DataTypes.getObjectItemLabel(item), renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id) } = componentProps;
    const { input, ...slotRests } = slotProps;
    const Component = component === "input" ? InputField_1.InputField : componentMap[component];
    const load = (value) => {
        if (value.length < 2) {
            setTitle(undefined);
            return;
        }
        loadData(value).then(([data, title]) => {
            setData(data);
            setTitle(title);
        });
    };
    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Popover_1.default, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
                    vertical: "bottom",
                    horizontal: "left"
                }, children: data && (0, jsx_runtime_1.jsx)(List_1.default, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(Component, { changeDelay: changeDelay, fullWidth: fullWidth, onChangeDelay: (event) => {
                    load(event.target.value);
                    if (onChangeDelay)
                        onChangeDelay(event);
                }, slotProps: {
                    input: {
                        endAdornment: title ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: (event) => {
                                    setAnchorEl(event.currentTarget);
                                }, ...labelProps, children: title }) })) : undefined,
                        ...input
                    },
                    ...slotRests
                }, ...rest })] }));
}