@pnp/spfx-controls-react/lib-commonjs/controls/userPicker/PopUpMenu.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopUpMenu = void 0;
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-floating-promises */
var React = tslib_1.__importStar(require("react"));
var jotai_1 = require("jotai");
var lodash_1 = require("lodash");
var react_components_1 = require("@fluentui/react-components");
var globalState_1 = require("./atoms/globalState");
var EMessageTypes_1 = require("./constants/EMessageTypes");
var useGraphUserAPI_1 = require("./hooks/useGraphUserAPI");
var useOnClickOutside_1 = require("./hooks/useOnClickOutside");
var ShowMessage_1 = require("./showMessage/ShowMessage");
var NoUser_1 = require("./userCard/NoUser");
var UserCard_1 = require("./userCard/UserCard");
var useUserPickerStyles_1 = require("./useUserPickerStyles");
var PopUpMenu = function (props) {
    var searchValue = props.searchValue, isOpen = props.isOpen, onDismiss = props.onDismiss, containerRef = props.containerRef, secondaryTextPropertyName = props.secondaryTextPropertyName;
    var _a = (0, jotai_1.useAtom)(globalState_1.globalState), appGlobalState = _a[0], setAppGlobalState = _a[1];
    var context = appGlobalState.context, selectedUsers = appGlobalState.selectedUsers;
    var _b = React.useState([]), renderUsers = _b[0], setRenderUsers = _b[1];
    var getUserByName = (0, useGraphUserAPI_1.useGraphUserAPI)(context).getUserByName;
    var styles = (0, useUserPickerStyles_1.useUserPickerStyles)();
    var _c = React.useState(true), isLoading = _c[0], setIsLoading = _c[1];
    var _d = React.useState(undefined), error = _d[0], setError = _d[1];
    var _e = React.useState(false), isSearching = _e[0], setIsSearching = _e[1];
    (0, useOnClickOutside_1.useOnClickOutside)(true, containerRef, function () { return onDismiss(false); });
    var onSelected = React.useCallback(function (user) {
        setAppGlobalState(tslib_1.__assign(tslib_1.__assign({}, appGlobalState), { selectedUsers: tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedUsers, true), [user], false) }));
        onDismiss(false);
    }, []);
    var RenderUsers = React.useCallback(function () {
        if (error)
            return React.createElement(ShowMessage_1.ShowMessage, { messageType: EMessageTypes_1.EMessageType.ERROR, message: error.message });
        if (!isLoading && !error)
            return React.createElement("div", { className: styles.usersContainer }, renderUsers);
        return React.createElement(React.Fragment, null);
    }, [isLoading, error, renderUsers, styles.usersContainer]);
    React.useEffect(function () {
        if (searchValue.length < 2)
            return;
        if (isSearching)
            return;
        setIsSearching(true);
        setTimeout(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
            var users, usersToRender, removeSelectedUsers, _i, removeSelectedUsers_1, user, error_1;
            var _a, _b;
            return tslib_1.__generator(this, function (_c) {
                switch (_c.label) {
                    case 0:
                        _c.trys.push([0, 2, 3, 4]);
                        setIsLoading(true);
                        return [4 /*yield*/, getUserByName(searchValue)];
                    case 1:
                        users = (_a = (_c.sent())) !== null && _a !== void 0 ? _a : [];
                        usersToRender = [];
                        removeSelectedUsers = (0, lodash_1.pullAllBy)(users, selectedUsers, "mail");
                        for (_i = 0, removeSelectedUsers_1 = removeSelectedUsers; _i < removeSelectedUsers_1.length; _i++) {
                            user = removeSelectedUsers_1[_i];
                            usersToRender.push(React.createElement(React.Fragment, null,
                                React.createElement(UserCard_1.UserCard, { userId: (_b = user.mail) !== null && _b !== void 0 ? _b : "", showOverCard: false, onSelected: onSelected, className: styles.userCardStyles, secondaryTextPropertyName: secondaryTextPropertyName })));
                        }
                        if (usersToRender.length === 0) {
                            usersToRender.push(React.createElement(React.Fragment, null,
                                React.createElement(NoUser_1.NoUser, null)));
                        }
                        setRenderUsers(usersToRender);
                        setIsSearching(false);
                        return [3 /*break*/, 4];
                    case 2:
                        error_1 = _c.sent();
                        setError(error_1);
                        console.log(error_1);
                        return [3 /*break*/, 4];
                    case 3:
                        setIsLoading(false);
                        return [7 /*endfinally*/];
                    case 4: return [2 /*return*/];
                }
            });
        }); }, 500);
    }, [searchValue, selectedUsers, getUserByName, onSelected, secondaryTextPropertyName]);
    if (!isOpen)
        return React.createElement(React.Fragment, null);
    return (React.createElement(React.Fragment, null,
        React.createElement(react_components_1.Card, { ref: containerRef, className: styles.popupContainer }, isLoading && !error ? React.createElement(react_components_1.Spinner, { size: "small" }) : React.createElement(RenderUsers, null))));
};
exports.PopUpMenu = PopUpMenu;
//# sourceMappingURL=PopUpMenu.js.map