@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
227 lines • 13.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldUserRenderer = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var clone_1 = tslib_1.__importDefault(require("lodash/clone"));
var Callout_1 = require("@fluentui/react/lib/Callout");
var Persona_1 = require("@fluentui/react/lib/Persona");
var Button_1 = require("@fluentui/react/lib/Button");
var Spinner_1 = require("@fluentui/react/lib/Spinner");
var Link_1 = require("@fluentui/react/lib/Link");
var Icon_1 = require("@fluentui/react/lib/Icon");
var FieldUserRenderer_module_scss_1 = tslib_1.__importDefault(require("./FieldUserRenderer.module.scss"));
var GeneralHelper_1 = require("../../../common/utilities/GeneralHelper");
var FieldUserHoverCard_1 = tslib_1.__importDefault(require("./FieldUserHoverCard"));
var telemetry = tslib_1.__importStar(require("../../../common/telemetry"));
var strings = tslib_1.__importStar(require("ControlStrings"));
var utilities_1 = require("../../../common/utilities");
/**
* Field User Renderer.
* Used for:
* - People and Groups
*/
var FieldUserRenderer = /** @class */ (function (_super) {
tslib_1.__extends(FieldUserRenderer, _super);
function FieldUserRenderer(props, state) {
var _this = _super.call(this, props, state) || this;
// cached user profiles
_this._loadedUserProfiles = {};
telemetry.track('FieldUserRenderer', {});
_this._userImageUrl = "".concat(GeneralHelper_1.GeneralHelper.trimSlash(props.context.pageContext.web.absoluteUrl), "/_layouts/15/userphoto.aspx?size=L&accountname={0}");
var users = props.users ? props.users.map(function (user) {
return _this._getUserFromPrincipalAndProps(user, {});
}) : [];
_this.state = {
users: users
};
return _this;
}
FieldUserRenderer.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
var _this = this;
var currentPrincipals = this.props.users ? this.props.users.map(function (u) { return u.id; }) : [];
var newPrincipals = nextProps.users ? nextProps.users.map(function (u) { return u.id; }) : [];
if (currentPrincipals.length !== newPrincipals.length
|| currentPrincipals.filter(function (cp) { return newPrincipals.indexOf(cp) === -1; }).length
|| newPrincipals.filter(function (np) { return currentPrincipals.indexOf(np) === -1; }).length) {
this.setState({
users: nextProps.users.map(function (user) {
return _this._getUserFromPrincipalAndProps(user, {});
})
});
}
};
FieldUserRenderer.prototype.render = function () {
var _this = this;
var userEls = this.state.users.map(function (user, index) {
var expandingCardProps = {
onRenderCompactCard: (user.email ? _this._onRenderCompactCard.bind(_this, index) : null),
onRenderExpandedCard: (user.email ? _this._onRenderExpandedCard.bind(_this) : null),
renderData: user,
directionalHint: Callout_1.DirectionalHint.bottomLeftEdge,
gapSpace: 1,
expandedCardHeight: 150
};
var hoverCardProps = {
expandingCardProps: expandingCardProps,
displayName: user.displayName,
cssProps: _this.props.cssProps
};
return React.createElement(FieldUserHoverCard_1.default, tslib_1.__assign({ key: user.id }, hoverCardProps));
});
return React.createElement("div", { style: this.props.cssProps, className: (0, Utilities_1.css)(this.props.className) }, userEls);
};
/**
* Renders compact part of user Hover Card
* @param index user index in the list of users/groups in the People and Group field value
* @param user IUser
*/
FieldUserRenderer.prototype._onRenderCompactCard = function (index, user) {
this._requestUserProfile(user, index).then(function () { }).catch(function () { });
var sip = user.sip || user.email;
var actionsEl;
if (user.currentUser) {
actionsEl = React.createElement("div", { className: FieldUserRenderer_module_scss_1.default.actions },
React.createElement(Button_1.Button, { buttonType: Button_1.ButtonType.command, iconProps: { iconName: 'Edit' }, href: user.userUrl, target: '_blank' }, strings.UpdateProfile));
}
else {
actionsEl = React.createElement("div", { className: FieldUserRenderer_module_scss_1.default.actions },
React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Mail' }, title: strings.SendEmailTo.replace('{0}', user.email), href: "mailto:".concat(user.email) }),
React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Chat' }, title: strings.StartChatWith.replace('{0}', sip), href: "sip:".concat(sip), className: FieldUserRenderer_module_scss_1.default.chat }));
}
return React.createElement("div", { className: FieldUserRenderer_module_scss_1.default.main },
React.createElement(Persona_1.Persona, { imageUrl: user.imageUrl, primaryText: user.displayName, secondaryText: user.department, tertiaryText: user.jobTitle, size: Persona_1.PersonaSize.large }),
actionsEl);
};
/**
* Renders expanded part of user Hover Card
* @param user IUser
*/
FieldUserRenderer.prototype._onRenderExpandedCard = function (user) {
if (this._loadedUserProfiles[user.id]) {
return React.createElement("ul", { className: FieldUserRenderer_module_scss_1.default.sections },
React.createElement("li", { className: FieldUserRenderer_module_scss_1.default.section },
React.createElement("div", { className: FieldUserRenderer_module_scss_1.default.header },
strings.Contact,
" ",
React.createElement(Icon_1.Icon, { iconName: "ChevronRight", className: FieldUserRenderer_module_scss_1.default.chevron })),
React.createElement("div", { className: FieldUserRenderer_module_scss_1.default.contactItem },
React.createElement(Icon_1.Icon, { iconName: 'Mail' }),
React.createElement(Link_1.Link, { className: FieldUserRenderer_module_scss_1.default.content, title: user.email, href: "mailto:".concat(user.email), target: '_self' }, user.email)),
user.workPhone &&
React.createElement("div", { className: FieldUserRenderer_module_scss_1.default.contactItem },
React.createElement(Icon_1.Icon, { iconName: 'Phone' }),
React.createElement(Link_1.Link, { className: FieldUserRenderer_module_scss_1.default.content, title: user.workPhone, href: "tel:".concat(user.workPhone), target: '_self' }, user.workPhone)),
user.cellPhone &&
React.createElement("div", { className: FieldUserRenderer_module_scss_1.default.contactItem },
React.createElement(Icon_1.Icon, { iconName: 'Phone' }),
React.createElement(Link_1.Link, { className: FieldUserRenderer_module_scss_1.default.content, title: user.cellPhone, href: "tel:".concat(user.cellPhone), target: '_self' }, user.cellPhone))));
}
else {
return React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.large });
}
};
/**
* Merges data from IPrincipal object and IUserProfileProperties object to IUser object
* @param principal IPrincipal
* @param userProfileProperties IUserProfileProperties
*/
FieldUserRenderer.prototype._getUserFromPrincipalAndProps = function (principal, userProfileProperties) {
var imageUrl = userProfileProperties.pictureUrl || principal.picture;
var mthumbStr = 'MThumb.jpg';
if (imageUrl && imageUrl.indexOf(mthumbStr) === imageUrl.length - mthumbStr.length) {
imageUrl = '';
}
return {
displayName: userProfileProperties.displayName || principal.title,
jobTitle: userProfileProperties.jobTitle || principal.jobTitle,
department: userProfileProperties.department || principal.department,
id: principal.id,
imageUrl: imageUrl ? this._userImageUrl.replace('{0}', principal.email) : imageUrl,
email: userProfileProperties.email || principal.email,
sip: userProfileProperties.sip || principal.sip,
workPhone: userProfileProperties.workPhone,
cellPhone: userProfileProperties.cellPhone,
userUrl: this._getUserUrlTemplate().replace('{0}', principal.email), //userProfileProperties.userUrl
currentUser: principal.id === this.props.context.pageContext.legacyPageContext.userId
};
};
/**
* Get the template of url for editing user profile in Delve
*/
FieldUserRenderer.prototype._getUserUrlTemplate = function () {
if (!this._userUrlTemplate) {
this._userUrlTemplate = "".concat(location.protocol, "//").concat(location.hostname.split('.sharepoint.com')[0], "-my.sharepoint.com/person.aspx?user={0}&v=editprofile");
}
return this._userUrlTemplate;
};
/**
* Requests User Profile Properties
*/
FieldUserRenderer.prototype._requestUserProfile = function (user, index) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var context, siteUser, value, mthumbStr, userProfileProps, props, foundPropsCount, i, len, prop;
var _this = this;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
if (this._loadedUserProfiles[user.id]) {
return [2 /*return*/]; // we've already have the profile info
}
context = this.props.context;
return [4 /*yield*/, utilities_1.SPHelper.getUserById(parseInt(user.id), context)];
case 1:
siteUser = _a.sent();
return [4 /*yield*/, utilities_1.SPHelper.getUserProperties(siteUser.LoginName, context)];
case 2:
value = _a.sent();
mthumbStr = 'MThumb.jpg';
userProfileProps = {
displayName: value.DisplayName,
email: value.Email,
jobTitle: value.Title,
userUrl: value.UserUrl,
pictureUrl: value.PictureUrl && value.PictureUrl.toString().indexOf(mthumbStr) === value.PictureUrl.toString().length - mthumbStr.length ? '' : value.PictureUrl //this._userImageUrl.replace('{0}', user.email)
};
props = value.UserProfileProperties;
foundPropsCount = 0;
for (i = 0, len = props.length; i < len; i++) {
prop = props[i];
switch (prop.Key) {
case 'WorkPhone':
userProfileProps.workPhone = prop.Value;
foundPropsCount++;
break;
case 'Department':
userProfileProps.department = prop.Value;
foundPropsCount++;
break;
case 'SPS-SipAddress':
userProfileProps.sip = prop.Value;
foundPropsCount++;
break;
case 'CellPhone':
userProfileProps.cellPhone = prop.Value;
foundPropsCount++;
break;
}
if (foundPropsCount === 4) {
break;
}
}
this._loadedUserProfiles[user.id] = userProfileProps;
this.setState(function (prevState, componentProps) {
var newUsers = (0, clone_1.default)(prevState.users);
newUsers[index] = _this._getUserFromPrincipalAndProps(_this.props.users[index], userProfileProps);
return { users: newUsers };
});
return [2 /*return*/];
}
});
});
};
return FieldUserRenderer;
}(React.Component));
exports.FieldUserRenderer = FieldUserRenderer;
//# sourceMappingURL=FieldUserRenderer.js.map