mui-spfx-controls
Version:
SPFx component library built with MUI
87 lines • 6.2 kB
JavaScript
import { __assign, __awaiter, __generator, __rest } from "tslib";
import { AccountCircle } from "@mui/icons-material";
import { Autocomplete, Avatar, Box, Chip, CircularProgress, ListItem, Skeleton, Stack, TextField, Typography, } from "@mui/material";
import { Logger } from "@pnp/logging";
import * as React from "react";
import { forwardRef, useEffect, useState, } from "react";
import { PeopleService } from "../../services/PeopleService";
import { handleDuplicates } from "../../utils/handleDuplicates";
export var PeoplePicker = forwardRef(function (_a, ref) {
var context = _a.context, label = _a.label, required = _a.required, searchSuggestionLimit = _a.searchSuggestionLimit, variant = _a.variant, tagVariant = _a.tagVariant, color = _a.color, tagColor = _a.tagColor, principalSource = _a.principalSource, principalType = _a.principalType, LoadingComponent = _a.LoadingComponent, name = _a.name, fullWidth = _a.fullWidth, onChange = _a.onChange, renderInput = _a.renderInput, props = __rest(_a, ["context", "label", "required", "searchSuggestionLimit", "variant", "tagVariant", "color", "tagColor", "principalSource", "principalType", "LoadingComponent", "name", "fullWidth", "onChange", "renderInput"]);
var peopleService = new PeopleService(context);
var _b = useState(""), query = _b[0], setQuery = _b[1];
var _c = useState([]), selectedUsers = _c[0], setSelectedUsers = _c[1];
var _d = useState([]), searchResults = _d[0], setSearchResults = _d[1];
var _e = useState(null), error = _e[0], setError = _e[1];
var _f = useState(false), loading = _f[0], setLoading = _f[1];
var searchUser = function () { return __awaiter(void 0, void 0, void 0, function () {
var searchedUsers, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(query !== "")) return [3 /*break*/, 6];
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
setLoading(true);
return [4 /*yield*/, peopleService.searchUser(context, query, searchSuggestionLimit, principalSource, principalType)];
case 2:
searchedUsers = _a.sent();
setSearchResults(searchedUsers);
return [3 /*break*/, 5];
case 3:
error_1 = _a.sent();
Logger.error(error_1);
setError(error_1);
return [3 /*break*/, 5];
case 4:
setLoading(false);
return [7 /*endfinally*/];
case 5: return [3 /*break*/, 7];
case 6:
setSearchResults([]);
_a.label = 7;
case 7: return [2 /*return*/];
}
});
}); };
useEffect(function () {
searchUser();
}, [query]);
return (React.createElement(Autocomplete, __assign({}, props, { ref: ref, "data-testid": "mui-spfx-peoplepicker", fullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : true, options: searchResults, getOptionLabel: function (option) {
return (option === null || option === void 0 ? void 0 : option.DisplayText) || "";
}, filterOptions: function (options) {
return handleDuplicates(options, selectedUsers);
}, popupIcon: null, loading: loading, loadingText: LoadingComponent || (React.createElement(Stack, { direction: "row", spacing: 1 },
React.createElement(Skeleton, { variant: "circular", width: 40, height: 40 }),
React.createElement(Skeleton, { width: "100%", height: 40 }))), onChange: function (event, value, reason) {
if (reason === "selectOption" || reason === "removeOption") {
setSelectedUsers(value);
setQuery("");
if (onChange) {
onChange(value);
}
}
else if (reason === "clear") {
setSelectedUsers([]);
setQuery("");
if (onChange) {
onChange([]);
}
}
}, onInputChange: function (event, newValue) { return setQuery(newValue); }, renderValue: function (users, getItemProps) {
return Array.isArray(users) ?
(React.createElement(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 } }, users.map(function (user, index) { return (React.createElement(Chip, __assign({}, getItemProps({ index: index }), { key: user.Key, color: tagColor, variant: tagVariant, avatar: React.createElement(Avatar, { src: user.Image }), label: user.DisplayText }))); }))) : (React.createElement(Chip, { key: users.Key, color: tagColor, variant: tagVariant, avatar: React.createElement(Avatar, { src: users.Image }), label: users.DisplayText }));
}, renderOption: function (props, option) { return (React.createElement(ListItem, __assign({}, props),
React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
option.Image !== "" ? (React.createElement(Avatar, { sx: { width: 40, height: 40 }, src: option.Image })) : (React.createElement(Avatar, { sx: { width: 40, height: 40 } },
React.createElement(AccountCircle, null))),
React.createElement(Typography, { variant: "body2" }, option.DisplayText)))); }, renderInput: renderInput ||
(function (params) { return (React.createElement(TextField, __assign({}, params, { name: name, variant: variant, required: required, color: color, error: error !== null, helperText: error ? "Something went wrong" : "", label: label, slotProps: {
input: __assign(__assign({}, params.InputProps), { endAdornment: (React.createElement(React.Fragment, null,
props.loading ? (React.createElement(CircularProgress, { color: "inherit", size: 20 })) : null,
params.InputProps.endAdornment)) }),
} }))); }) })));
});
export default PeoplePicker;
//# sourceMappingURL=PeoplePicker.js.map