@etsoo/materialui
Version:
TypeScript Material-UI Implementation
62 lines (61 loc) • 2.96 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListMultipler = ListMultipler;
const jsx_runtime_1 = require("react/jsx-runtime");
const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
const List_1 = __importDefault(require("@mui/material/List"));
const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
const react_1 = __importDefault(require("react"));
function GetListItemLabel(data, label) {
if (label == null)
return undefined;
if (typeof label === "function") {
return label(data);
}
else {
return data[label];
}
}
/**
* List multipler component
* @param props Props
* @returns Component
*/
function ListMultipler(props) {
// Destruct
const { data, idField, primaryLabel, secondaryLabel, listItemProps, listItemTextProps, name, onCheckItems, ...rest } = props;
// Refs
const initialized = react_1.default.useRef(false);
react_1.default.useEffect(() => {
initialized.current = true;
}, []);
// State
const [checked, setChecked] = react_1.default.useState([]);
const ids = react_1.default.useMemo(() => {
const ids = checked.map((u) => u[idField]);
if (onCheckItems && initialized.current) {
onCheckItems(checked, ids);
}
return ids;
}, [checked]);
function handleToggle(id) {
if (ids.includes(id)) {
setChecked((prev) => prev.filter((u) => u[idField] !== id));
}
else {
const item = data.find((u) => u[idField] === id);
if (item) {
setChecked((prev) => [...prev, item]);
}
}
}
const inputType = typeof ids[0] === "string" ? "text" : "number";
// Layout
return ((0, jsx_runtime_1.jsxs)(List_1.default, { ...rest, children: [name && ((0, jsx_runtime_1.jsx)("input", { type: inputType, style: { display: "none" }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { ...listItemProps, children: (0, jsx_runtime_1.jsxs)(ListItemButton_1.default, { dense: true, onClick: () => handleToggle(u[idField]), children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
}