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

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DataTypes } from "@etsoo/shared";
import React from "react";
import { InputField } from "./InputField";
import { VBox } from "./FlexBox";
import { useAppContext } from "./app/ReactApp";
import ListItemButton from "@mui/material/ListItemButton";
import ListItem from "@mui/material/ListItem";
import LinearProgress from "@mui/material/LinearProgress";
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
/**
 * Quick list
 * @param props Props
 * @returns Component
 */
export function QuickList(props) {
    // Global app
    const app = useAppContext();
    // Destruct
    const { buttonProps = {}, label, inputProps, itemLabel = DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = app?.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
    const { onClick, ...buttonRest } = buttonProps;
    // States
    const [loading, setLoading] = React.useState(false);
    const [items, setItems] = React.useState([]);
    const loadDataLocal = (keyword) => {
        setLoading(true);
        loadData(keyword).then((result) => {
            setLoading(false);
            setItems(result ?? []);
        });
    };
    React.useEffect(() => {
        loadDataLocal();
    }, []);
    // Layout
    return (_jsxs(VBox, { gap: gap, height: height, ...rest, children: [_jsx(InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
                    // Stop bubble
                    event.preventDefault();
                    event.stopPropagation();
                    loadDataLocal(event.target.value);
                }, fullWidth: true, ...inputProps }), loading ? (_jsx(LinearProgress, {})) : items.length === 0 ? (_jsx(Typography, { textAlign: "center", children: noMatchesLabel })) : (_jsx(List, { children: items.map((item) => (_jsx(ListItem, { disablePadding: true, ...itemProps, children: _jsx(ListItemButton, { onClick: (event) => {
                            if (onClick)
                                onClick(event);
                            if (!event.defaultPrevented && onItemClick)
                                onItemClick(item);
                        }, ...buttonRest, children: itemRenderer(item) }) }, item.id))) }))] }));
}