communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
60 lines • 4.39 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { Persona } from '@fluentui/react';
import React, { useEffect, useState } from 'react';
import { mergeStyles } from '@fluentui/react';
/**
* An Avatar component made using the `Persona` component.
* It allows you to specify a `userId` and a `dataProvider` to retrieve the `AvatarPersonaData`.
* Read more about `Persona` component at https://developer.microsoft.com/fluentui#/controls/web/persona
*
* @private
*/
export const AvatarPersona = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
const [data, setData] = useState();
useEffect(() => {
(() => __awaiter(void 0, void 0, void 0, function* () {
if (dataProvider && userId) {
const newData = yield dataProvider(userId);
if (avatarDeepDifferenceCheck(data, newData)) {
setData(newData);
}
}
}))();
}, [data, dataProvider, userId]);
let activePersona = '';
if (props.allowActiveBorder) {
// Display a border for raised handed participants in participant list
activePersona = mergeStyles({
border: 'solid 2px',
borderColor: 'transparent',
borderRadius: '50%',
padding: '2px',
boxSizing: 'content-box',
margin: '-4px'
});
mergeStyles(activePersona, props.styles);
}
return (React.createElement(Persona, Object.assign({}, props, { className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white',
// default disable tooltip unless specified
showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false, showUnknownPersonaCoin: (_h = (_g = data === null || data === void 0 ? void 0 : data.showUnknownPersonaCoin) !== null && _g !== void 0 ? _g : props.showUnknownPersonaCoin) !== null && _h !== void 0 ? _h : false })));
};
const avatarDeepDifferenceCheck = (currentData, newData) => {
return ((currentData === null || currentData === void 0 ? void 0 : currentData.text) !== (newData === null || newData === void 0 ? void 0 : newData.text) ||
(currentData === null || currentData === void 0 ? void 0 : currentData.imageUrl) !== (newData === null || newData === void 0 ? void 0 : newData.imageUrl) ||
(currentData === null || currentData === void 0 ? void 0 : currentData.initialsColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsColor) ||
(currentData === null || currentData === void 0 ? void 0 : currentData.imageInitials) !== (newData === null || newData === void 0 ? void 0 : newData.imageInitials) ||
(currentData === null || currentData === void 0 ? void 0 : currentData.initialsTextColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsTextColor));
};
//# sourceMappingURL=AvatarPersona.js.map