@etsoo/materialui
Version:
TypeScript Material-UI Implementation
61 lines (60 loc) • 3.07 kB
JavaScript
;
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 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"));
/**
* 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 { labelProps = {
title: app?.get("clickForDetails"),
sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
}, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { 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 ((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)(InputField_1.InputField, { changeDelay: changeDelay, 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 })] }));
}