@microsoft/mgt
Version:
The Microsoft Graph Toolkit
193 lines • 7.56 kB
JavaScript
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
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 { customElement, html, property } from 'lit-element';
import { Providers } from '../../Providers';
import { ProviderState } from '../../providers/IProvider';
import '../../styles/fabric-icon-font';
import '../mgt-person/mgt-person';
import { MgtTemplatedComponent } from '../templatedComponent';
import { PersonCardInteraction } from './../PersonCardInteraction';
import { styles } from './mgt-people-css';
/**
* web component to display a group of people or contacts by using their photos or initials.
*
* @export
* @class MgtPeople
* @extends {MgtTemplatedComponent}
*/
let MgtPeople = class MgtPeople extends MgtTemplatedComponent {
constructor() {
super(...arguments);
/**
* containing array of people used in the component.
* @type {Array<MgtPersonDetails>}
*/
this.people = null;
/**
* developer determined max people shown in component
* @type {number}
*/
this.showMax = 3;
/**
* Sets how the person-card is invoked
* Set to PersonCardInteraction.none to not show the card
*
* @type {PersonCardInteraction}
* @memberof MgtPerson
*/
this.personCardInteraction = PersonCardInteraction.hover;
this._firstUpdated = false;
}
/**
* Array of styles to apply to the element. The styles should be defined
* using the `css` tag function.
*/
static get styles() {
return styles;
}
/**
* Invoked when the element is first updated. Implement to perform one time
* work on the element after update.
*
* Setting properties inside this method will trigger the element to update
* again after this update cycle completes.
*
* * @param _changedProperties Map of changed properties with old values
*/
firstUpdated() {
this._firstUpdated = true;
Providers.onProviderUpdated(() => this.loadPeople());
this.loadPeople();
}
/**
* Invoked on each update to perform rendering tasks. This method must return
* a lit-html TemplateResult. Setting properties inside this method will *not*
* trigger the element to update.
*/
render() {
if (this.people && this.people.length) {
return (this.renderTemplate('default', { people: this.people }) ||
html `
<ul class="people-list">
${this.people.slice(0, this.showMax).map(person => html `
<li class="people-person">
${this.renderTemplate('person', { person }, person.displayName) || this.renderPerson(person)}
</li>
`)}
${this.people.length > this.showMax
? this.renderTemplate('overflow', {
extra: this.people.length - this.showMax,
max: this.showMax,
people: this.people
}) ||
html `
<li class="overflow"><span>+${this.people.length - this.showMax}<span></li>
`
: null}
</ul>
`);
}
else {
return this.renderTemplate('no-data', null) || html ``;
}
}
loadPeople() {
return __awaiter(this, void 0, void 0, function* () {
if (!this._firstUpdated) {
return;
}
if (!this.people) {
const provider = Providers.globalProvider;
if (provider && provider.state === ProviderState.SignedIn) {
const client = Providers.globalProvider.graph;
if (this.groupId) {
this.people = yield client.getPeopleFromGroup(this.groupId);
}
else if (this.userIds) {
this.people = yield Promise.all(this.userIds.map((userId) => __awaiter(this, void 0, void 0, function* () {
return yield client.getUser(userId);
})));
}
else {
this.people = yield client.getPeople();
}
}
}
});
}
renderPerson(person) {
// set image to @ to flag the mgt-person component to
// query the image from the graph
return html `
<mgt-person
.personDetails=${person}
.personImage=${'@'}
.personCardInteraction=${this.personCardInteraction}
></mgt-person>
`;
}
};
__decorate([
property({
attribute: 'people',
type: Object
})
], MgtPeople.prototype, "people", void 0);
__decorate([
property({
attribute: 'show-max',
type: Number
})
], MgtPeople.prototype, "showMax", void 0);
__decorate([
property({
attribute: 'group-id',
type: String
})
], MgtPeople.prototype, "groupId", void 0);
__decorate([
property({
attribute: 'user-ids',
converter: (value, type) => {
return value.split(',');
}
})
], MgtPeople.prototype, "userIds", void 0);
__decorate([
property({
attribute: 'person-card',
converter: (value, type) => {
value = value.toLowerCase();
if (typeof PersonCardInteraction[value] === 'undefined') {
return PersonCardInteraction.hover;
}
else {
return PersonCardInteraction[value];
}
}
})
], MgtPeople.prototype, "personCardInteraction", void 0);
MgtPeople = __decorate([
customElement('mgt-people')
], MgtPeople);
export { MgtPeople };
//# sourceMappingURL=mgt-people.js.map