mui-spfx-controls
Version:
SPFx component library built with MUI
90 lines • 6.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PeoplePicker = void 0;
var tslib_1 = require("tslib");
var icons_material_1 = require("@mui/icons-material");
var material_1 = require("@mui/material");
var logging_1 = require("@pnp/logging");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var PeopleService_1 = require("../../services/PeopleService");
var handleDuplicates_1 = require("../../utils/handleDuplicates");
exports.PeoplePicker = (0, react_1.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 = tslib_1.__rest(_a, ["context", "label", "required", "searchSuggestionLimit", "variant", "tagVariant", "color", "tagColor", "principalSource", "principalType", "LoadingComponent", "name", "fullWidth", "onChange", "renderInput"]);
var peopleService = new PeopleService_1.PeopleService(context);
var _b = (0, react_1.useState)(""), query = _b[0], setQuery = _b[1];
var _c = (0, react_1.useState)([]), selectedUsers = _c[0], setSelectedUsers = _c[1];
var _d = (0, react_1.useState)([]), searchResults = _d[0], setSearchResults = _d[1];
var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[1];
var _f = (0, react_1.useState)(false), loading = _f[0], setLoading = _f[1];
var searchUser = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var searchedUsers, error_1;
return tslib_1.__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();
logging_1.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*/];
}
});
}); };
(0, react_1.useEffect)(function () {
searchUser();
}, [query]);
return (React.createElement(material_1.Autocomplete, tslib_1.__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 (0, handleDuplicates_1.handleDuplicates)(options, selectedUsers);
}, popupIcon: null, loading: loading, loadingText: LoadingComponent || (React.createElement(material_1.Stack, { direction: "row", spacing: 1 },
React.createElement(material_1.Skeleton, { variant: "circular", width: 40, height: 40 }),
React.createElement(material_1.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(material_1.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 } }, users.map(function (user, index) { return (React.createElement(material_1.Chip, tslib_1.__assign({}, getItemProps({ index: index }), { key: user.Key, color: tagColor, variant: tagVariant, avatar: React.createElement(material_1.Avatar, { src: user.Image }), label: user.DisplayText }))); }))) : (React.createElement(material_1.Chip, { key: users.Key, color: tagColor, variant: tagVariant, avatar: React.createElement(material_1.Avatar, { src: users.Image }), label: users.DisplayText }));
}, renderOption: function (props, option) { return (React.createElement(material_1.ListItem, tslib_1.__assign({}, props),
React.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
option.Image !== "" ? (React.createElement(material_1.Avatar, { sx: { width: 40, height: 40 }, src: option.Image })) : (React.createElement(material_1.Avatar, { sx: { width: 40, height: 40 } },
React.createElement(icons_material_1.AccountCircle, null))),
React.createElement(material_1.Typography, { variant: "body2" }, option.DisplayText)))); }, renderInput: renderInput ||
(function (params) { return (React.createElement(material_1.TextField, tslib_1.__assign({}, params, { name: name, variant: variant, required: required, color: color, error: error !== null, helperText: error ? "Something went wrong" : "", label: label, slotProps: {
input: tslib_1.__assign(tslib_1.__assign({}, params.InputProps), { endAdornment: (React.createElement(React.Fragment, null,
props.loading ? (React.createElement(material_1.CircularProgress, { color: "inherit", size: 20 })) : null,
params.InputProps.endAdornment)) }),
} }))); }) })));
});
exports.default = exports.PeoplePicker;
//# sourceMappingURL=PeoplePicker.js.map