@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
97 lines • 6.2 kB
JavaScript
;
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable no-unused-expressions */
/* eslint-disable @typescript-eslint/no-floating-promises */
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserPickerControl = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var jotai_1 = require("jotai");
var react_components_1 = require("@fluentui/react-components");
var globalState_1 = require("./atoms/globalState");
var PopUpMenu_1 = require("./PopUpMenu");
var User_1 = require("./User");
var useUserPickerPositioning_1 = require("./useUserPickerPositioning");
var useUserPickerStyles_1 = require("./useUserPickerStyles");
var UserPickerControl = function (props) {
var userSelectionLimit = props.userSelectionLimit, label = props.label, required = props.required, validationMessage = props.validationMessage, messageType = props.messageType, onSelectedUsers = props.onSelectedUsers, onRemoveSelectedUser = props.onRemoveSelectedUser, defaultSelectdUsers = props.defaultSelectdUsers, placeholder = props.placeholder, secondaryTextPropertyName = props.secondaryTextPropertyName;
var buttonRef = React.useRef(null);
var positioningRef = React.useRef(null);
var _a = React.useState(false), open = _a[0], setOpen = _a[1];
var _b = (0, jotai_1.useAtom)(globalState_1.globalState), appGlobalState = _b[0], setAppGlobalState = _b[1];
var selectedUsers = appGlobalState.selectedUsers;
var _c = React.useState(''), searchUser = _c[0], setSearchUser = _c[1];
/* const forceUpdate = React.useReducer(() => ({}), {})[1] as () => void; */
var _d = (0, useUserPickerPositioning_1.useUserPickerPositioning)(props), userPickerPopupRef = _d[0], userPickerTargetRef = _d[1];
var styles = (0, useUserPickerStyles_1.useUserPickerStyles)();
React.useEffect(function () {
setAppGlobalState(tslib_1.__assign(tslib_1.__assign({}, appGlobalState), props));
}, [props]);
React.useEffect(function () {
var _a;
if (buttonRef.current) {
(_a = positioningRef.current) === null || _a === void 0 ? void 0 : _a.setTarget(buttonRef.current);
}
}, [buttonRef, positioningRef]);
React.useEffect(function () {
if (defaultSelectdUsers) {
setAppGlobalState(tslib_1.__assign(tslib_1.__assign({}, appGlobalState), { selectedUsers: defaultSelectdUsers }));
}
}, []);
var hasSelectedUsers = React.useMemo(function () {
if (selectedUsers.length > 0) {
if (onSelectedUsers)
onSelectedUsers(selectedUsers);
return true;
}
}, [selectedUsers]);
var showInput = React.useMemo(function () {
return userSelectionLimit
? selectedUsers.length < userSelectionLimit
: true;
}, [selectedUsers, userSelectionLimit]);
var onRemove = React.useCallback(function (userId) {
var newUsers = selectedUsers.filter(function (user) { return user.mail !== userId; });
var removedUser = selectedUsers.filter(function (user) { return user.mail === userId; });
setAppGlobalState(tslib_1.__assign(tslib_1.__assign({}, appGlobalState), { selectedUsers: newUsers }));
if (onRemoveSelectedUser) {
onRemoveSelectedUser(removedUser[0]);
}
}, [selectedUsers]);
var RenderSelectedUsers = React.useCallback(function () {
return (React.createElement(React.Fragment, null, selectedUsers.map(function (user) {
var _a;
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.userItem, key: user.mail },
React.createElement(User_1.User, { userId: (_a = user.mail) !== null && _a !== void 0 ? _a : '', onRemove: onRemove, secondaryTextPropertyName: secondaryTextPropertyName }))));
})));
}, [selectedUsers]);
return (React.createElement(React.Fragment, null,
React.createElement("div", { style: { width: '100%' }, ref: userPickerTargetRef },
React.createElement(react_components_1.Field, { label: label, required: required !== null && required !== void 0 ? required : false, validationMessage: validationMessage !== null && validationMessage !== void 0 ? validationMessage : undefined, validationState: messageType },
React.createElement("div", { className: styles.selectUserMainContainer },
hasSelectedUsers ? (React.createElement("div", { className: styles.selectedUserContainer },
React.createElement(RenderSelectedUsers, null))) : null,
showInput ? (React.createElement("div", { className: styles.inputContainer },
React.createElement(react_components_1.Input, { value: searchUser, appearance: "underline", style: { borderWidth: 0, width: '100%' }, type: "text", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Search User', onChange: function (event, data) {
setSearchUser(data.value);
if (data.value.length === 0) {
setSearchUser('');
setOpen(false);
}
else {
if (data.value.length >= 2) {
setOpen(true);
}
else {
setOpen(false);
}
}
} }),
open ? (React.createElement(PopUpMenu_1.PopUpMenu, { secondaryTextPropertyName: secondaryTextPropertyName, containerRef: userPickerPopupRef, searchValue: searchUser, isOpen: open, onDismiss: function (open) {
setOpen(false);
setSearchUser('');
} })) : null)) : null)))));
};
exports.UserPickerControl = UserPickerControl;
//# sourceMappingURL=UserPickerControl.js.map