@etsoo/materialui
Version:
TypeScript Material-UI Implementation
55 lines (54 loc) • 3 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.QuickList = QuickList;
const jsx_runtime_1 = require("react/jsx-runtime");
const shared_1 = require("@etsoo/shared");
const react_1 = __importDefault(require("react"));
const InputField_1 = require("./InputField");
const FlexBox_1 = require("./FlexBox");
const ReactApp_1 = require("./app/ReactApp");
const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const List_1 = __importDefault(require("@mui/material/List"));
/**
* Quick list
* @param props Props
* @returns Component
*/
function QuickList(props) {
// Global app
const app = (0, ReactApp_1.useAppContext)();
// Destruct
const { buttonProps = {}, label, inputProps, itemLabel = shared_1.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_1.default.useState(false);
const [items, setItems] = react_1.default.useState([]);
const loadDataLocal = (keyword) => {
setLoading(true);
loadData(keyword).then((result) => {
setLoading(false);
setItems(result ?? []);
});
};
react_1.default.useEffect(() => {
loadDataLocal();
}, []);
// Layout
return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: gap, height: height, ...rest, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
// Stop bubble
event.preventDefault();
event.stopPropagation();
loadDataLocal(event.target.value);
}, fullWidth: true, ...inputProps }), loading ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { textAlign: "center", children: noMatchesLabel })) : ((0, jsx_runtime_1.jsx)(List_1.default, { children: items.map((item) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { disablePadding: true, ...itemProps, children: (0, jsx_runtime_1.jsx)(ListItemButton_1.default, { onClick: (event) => {
if (onClick)
onClick(event);
if (!event.defaultPrevented && onItemClick)
onItemClick(item);
}, ...buttonRest, children: itemRenderer(item) }) }, item.id))) }))] }));
}