Upgrade to 1.17.1 and linter changes
This commit is contained in:
Peter Paul Kirschner
parent
2512a1cbed
commit
221117cda9
|
|
@ -0,0 +1,5 @@
|
|||
require('@rushstack/eslint-config/patch/modern-module-resolution');
|
||||
module.exports = {
|
||||
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
|
||||
parserOptions: { tsconfigRootDir: __dirname }
|
||||
};
|
||||
|
|
@ -9,9 +9,11 @@ node_modules
|
|||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
release
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
.heft
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
!dist
|
||||
config
|
||||
|
||||
gulpfile.js
|
||||
|
||||
release
|
||||
src
|
||||
temp
|
||||
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
|
||||
*.log
|
||||
|
||||
.yo-rc.json
|
||||
.vscode
|
||||
|
|
@ -1,6 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.11.0",
|
||||
"plusBeta": false,
|
||||
"nodeVersion": "18.16.0",
|
||||
"sdksVersions": {
|
||||
"@microsoft/microsoft-graph-client": "3.0.2",
|
||||
"@microsoft/teams-js": "2.9.1"
|
||||
},
|
||||
"version": "1.17.1",
|
||||
"libraryName": "react-directory",
|
||||
"libraryId": "5b62bc16-3a71-461d-be2f-16bfcb011e8a",
|
||||
"environment": "spo",
|
||||
|
|
@ -8,6 +14,9 @@
|
|||
"framework": "react",
|
||||
"isCreatingSolution": true,
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
"componentType": "webpart",
|
||||
"solutionName": "\\",
|
||||
"solutionShortDescription": "\\ description",
|
||||
"skipFeatureDeployment": true
|
||||
}
|
||||
}
|
||||
|
|
@ -36,8 +36,8 @@ Search People from Organization Directory and show live persona card on hover.
|
|||
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
|
@ -82,6 +82,7 @@ Version|Date|Comments
|
|||
3.0.1|March 4 2021|Bugfix 'Sort People by'
|
||||
3.0.2|Oct 3 2022|Minor styling fixes and people container position
|
||||
3.0.3|Oct 4 2022|Fix for LivePersonaCard
|
||||
3.0.4|Jun 20 2023|Upgrade to SPFx 1.17.1
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-directory",
|
||||
"container": "",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -10,10 +10,32 @@
|
|||
},
|
||||
"name": "Search Directory",
|
||||
"id": "5b62bc16-3a71-461d-be2f-16bfcb011e8a",
|
||||
"version": "3.0.3.0",
|
||||
"version": "3.0.4.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false
|
||||
"isDomainIsolated": false,
|
||||
"metadata": {
|
||||
"shortDescription": {
|
||||
"default": "react-directory description"
|
||||
},
|
||||
"longDescription": {
|
||||
"default": "react-directory description"
|
||||
},
|
||||
"screenshotPaths": [],
|
||||
"videoUrl": "",
|
||||
"categories": []
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"title": "react-directory DirectoryWebPart Feature",
|
||||
"description": "The feature that activates DirectoryWebPart from the react-directory solution.",
|
||||
"id": "fae479bf-405f-4f80-a086-eea22eff3d6f",
|
||||
"version": "3.0.4.0",
|
||||
"componentIds": [
|
||||
"fae479bf-405f-4f80-a086-eea22eff3d6f"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-directory.sppkg"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
|
||||
}
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx",
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,20 @@
|
|||
'use strict';
|
||||
|
||||
// check if gulp dist was called
|
||||
if (process.argv.indexOf('dist') !== -1) {
|
||||
// add ship options to command call
|
||||
process.argv.push('--ship');
|
||||
}
|
||||
|
||||
const path = require('path');
|
||||
const gulp = require('gulp');
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
const gulpSequence = require('gulp-sequence');
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
|
||||
// Create clean distrubution package
|
||||
gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
|
||||
// Create clean development package
|
||||
gulp.task('dev', gulpSequence('clean', 'bundle', 'package-solution'));
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Custom Framework Specific gulp tasks
|
||||
*/
|
||||
|
||||
|
||||
build.initialize(gulp);
|
||||
build.initialize(require('gulp'));
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,63 +1,48 @@
|
|||
{
|
||||
"name": "react-directory",
|
||||
"version": "2.0.0",
|
||||
"version": "3.0.4",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
"node": ">=16.13.0 <17.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"preversion": "node ./tools/pre-version.js",
|
||||
"postversion": "gulp dist",
|
||||
"test": "./node_modules/.bin/jest --config ./config/jest.config.json",
|
||||
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.11.0",
|
||||
"@microsoft/sp-lodash-subset": "1.11.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.11.0",
|
||||
"@microsoft/sp-property-pane": "1.16.1",
|
||||
"@microsoft/sp-webpart-base": "1.16.1",
|
||||
"@pnp/pnpjs": "^1.3.3",
|
||||
"@pnp/spfx-controls-react": "1.13.2",
|
||||
"@pnp/spfx-property-controls": "1.15.0",
|
||||
"@types/jquery": "^3.3.30",
|
||||
"@uifabric/fluent-theme": "^0.16.9",
|
||||
"jquery": "^3.5.0",
|
||||
"lodash": "^4.17.21",
|
||||
"office-ui-fabric-react": "6.214.0",
|
||||
"react": "16.7.0",
|
||||
"react-dom": "16.7.0",
|
||||
"@microsoft/sp-core-library": "1.17.1",
|
||||
"@microsoft/sp-lodash-subset": "1.17.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.17.1",
|
||||
"@microsoft/sp-property-pane": "1.17.1",
|
||||
"@microsoft/sp-webpart-base": "1.17.1",
|
||||
"@pnp/sp": "2.5.0",
|
||||
"@pnp/spfx-controls-react": "3.14.0",
|
||||
"@pnp/spfx-property-controls": "^3.13.0",
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1",
|
||||
"react-js-pagination": "^3.0.3",
|
||||
"throttle-debounce": "^2.3.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.8.8"
|
||||
"throttle-debounce": "^5.0.0",
|
||||
"tslib": "2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||
"@microsoft/sp-build-web": "1.16.1",
|
||||
"@microsoft/sp-module-interfaces": "1.11.0",
|
||||
"@microsoft/sp-tslint-rules": "1.11.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.12.1",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/mocha": "2.2.38",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"@voitanos/jest-preset-spfx-react16": "^1.1.0",
|
||||
"ajv": "~6.12.3",
|
||||
"gulp": "~4.0.2",
|
||||
"gulp-sequence": "1.0.0",
|
||||
"jest": "^29.3.1",
|
||||
"jest-junit": "^6.3.0",
|
||||
"typescript": "~3.3.x"
|
||||
},
|
||||
"jest-junit": {
|
||||
"output": "temp/test/junit/junit.xml",
|
||||
"usePathForSuiteName": "true"
|
||||
"@microsoft/eslint-config-spfx": "1.17.1",
|
||||
"@microsoft/eslint-plugin-spfx": "1.17.1",
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
|
||||
"@microsoft/sp-build-web": "1.17.1",
|
||||
"@microsoft/sp-module-interfaces": "1.17.1",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"@types/react-js-pagination": "^3.0.4",
|
||||
"@types/throttle-debounce": "^5.0.0",
|
||||
"@types/webpack-env": "~1.15.2",
|
||||
"ajv": "^6.12.5",
|
||||
"eslint": "8.7.0",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"gulp": "4.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,8 +1,9 @@
|
|||
import { PeoplePickerEntity } from '@pnp/sp';
|
||||
import { SearchResults } from '@pnp/sp/search';
|
||||
|
||||
|
||||
export interface ISPServices {
|
||||
|
||||
searchUsers(searchString: string, searchFirstName: boolean);
|
||||
searchUsersNew(searchString: string, srchQry: string, isInitialSearch: boolean, pageNumber?: number);
|
||||
searchUsers(searchString: string, searchFirstName: boolean): Promise<SearchResults>;
|
||||
searchUsersNew(searchString: string, srchQry: string, isInitialSearch: boolean): Promise<SearchResults>;
|
||||
|
||||
}
|
||||
|
|
@ -1,210 +0,0 @@
|
|||
{
|
||||
"odata.metadata": "https://contoso.sharepoint.com/_api/$metadata#Microsoft.Office.Server.Search.REST.SearchResult",
|
||||
"ElapsedTime": 34,
|
||||
"PrimaryQueryResult": {
|
||||
"CustomResults": [],
|
||||
"QueryId": "70699796-a977-4437-b771-92a074e322e6",
|
||||
"QueryRuleId": "00000000-0000-0000-0000-000000000000",
|
||||
"RefinementResults": null,
|
||||
"RelevantResults": {
|
||||
"GroupTemplateId": null,
|
||||
"ItemTemplateId": null,
|
||||
"Properties": [],
|
||||
"ResultTitle": null,
|
||||
"ResultTitleUrl": null,
|
||||
"RowCount": 1,
|
||||
"Table": {
|
||||
"Rows": [{
|
||||
"Cells": [{
|
||||
"Key": "Rank",
|
||||
"Value": "0",
|
||||
"ValueType": "Edm.Double"
|
||||
}, {
|
||||
"Key": "DocId",
|
||||
"Value": "17646696630634",
|
||||
"ValueType": "Edm.Int64"
|
||||
}, {
|
||||
"Key": "FirstName",
|
||||
"Value": "Peter Paul",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "LastName",
|
||||
"Value": "Kirschner",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "PreferredName",
|
||||
"Value": "Peter Paul Kirschner",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "WorkEmail",
|
||||
"Value": "petkir@pkirschner.onmicrosoft.com",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "OfficeNumber",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "PictureURL",
|
||||
"Value": "",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "WorkPhone",
|
||||
"Value": "4250000000",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "MobilePhone",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "JobTitle",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "Department",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "Skills",
|
||||
"Value": "",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "PastProjects",
|
||||
"Value": "",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "BaseOfficeLocation",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "SPS-UserType",
|
||||
"Value": "0",
|
||||
"ValueType": "Edm.Int64"
|
||||
}, {
|
||||
"Key": "GroupId",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "SiteId",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "WebId",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "UniqueId",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "contentclass",
|
||||
"Value": "urn:content-class:SPSPeople",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "PartitionId",
|
||||
"Value": "92ab9c96-469b-4d78-8b8c-961c4df9356b",
|
||||
"ValueType": "Edm.Guid"
|
||||
}, {
|
||||
"Key": "UrlZone",
|
||||
"Value": "0",
|
||||
"ValueType": "Edm.Int32"
|
||||
}, {
|
||||
"Key": "Culture",
|
||||
"Value": "en-US",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "ResultTypeId",
|
||||
"Value": "0",
|
||||
"ValueType": "Edm.Int32"
|
||||
}, {
|
||||
"Key": "EditProfileUrl",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "ProfileViewsLastMonth",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "ProfileViewsLastWeek",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "ProfileQueriesFoundYou",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "RenderTemplateId",
|
||||
"Value": "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Default.js",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "GeoLocationSource",
|
||||
"Value": "EUR",
|
||||
"ValueType": "Edm.String"
|
||||
}]
|
||||
}]
|
||||
},
|
||||
"TotalRows": 1,
|
||||
"TotalRowsIncludingDuplicates": 1
|
||||
},
|
||||
"SpecialTermResults": null
|
||||
},
|
||||
"Properties": [{
|
||||
"Key": "RowLimit",
|
||||
"Value": "500",
|
||||
"ValueType": "Edm.Int32"
|
||||
}, {
|
||||
"Key": "SourceId",
|
||||
"Value": "b09a7990-05ea-4af9-81ef-edfab16c4e31",
|
||||
"ValueType": "Edm.Guid"
|
||||
}, {
|
||||
"Key": "CorrelationId",
|
||||
"Value": "e83b679f-b0c6-2000-3de3-321f0ebd7f6d",
|
||||
"ValueType": "Edm.Guid"
|
||||
}, {
|
||||
"Key": "WasGroupRestricted",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "WordBreakerLanguage",
|
||||
"Value": "default",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "IsPartialUpnDocIdMapping",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "EnableInterleaving",
|
||||
"Value": "true",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "IsMissingUnifiedGroups",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "Constellation",
|
||||
"Value": "i31EEE",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "MultiGeoSearchStatus",
|
||||
"Value": "Full",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "HasParseException",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "IsPartial",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "InternalRequestId",
|
||||
"Value": "e44dc9d5-b4dc-4f4e-84f1-eef4eb163ad4",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "SerializedQuery",
|
||||
"Value": "<Query Culture=\"en-US\" EnableStemming=\"True\" EnablePhonetic=\"False\" EnableNicknames=\"False\" IgnoreAllNoiseQuery=\"True\" SummaryLength=\"180\" MaxSnippetLength=\"180\" DesiredSnippetLength=\"90\" KeywordInclusion=\"0\" QueryText=\"LastName:kir*\" QueryTemplate=\"\" TrimDuplicates=\"True\" Site=\"3ea90dc6-5d70-4967-80a0-e07cbae5867f\" Web=\"ea51dacc-87ca-49cd-9f28-13fd2cb3b96b\" KeywordType=\"True\" HiddenConstraints=\"\" />",
|
||||
"ValueType": "Edm.String"
|
||||
}],
|
||||
"SecondaryQueryResults": [],
|
||||
"SpellingSuggestion": null,
|
||||
"TriggeredRules": []
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
import { ISPServices } from "./ISPServices";
|
||||
import * as mockdata from './MockDataSearch.json';
|
||||
import { cloneDeep } from '@microsoft/sp-lodash-subset';
|
||||
interface MinimalMockUser {
|
||||
FirstName: string;
|
||||
LastName: string;
|
||||
Department: string;
|
||||
BaseOfficeLocation: string;
|
||||
Title: string;
|
||||
PreferredName: string;
|
||||
WorkPhone: string;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
DisplayName: user.PreferredName,
|
||||
Title: user.JobTitle,
|
||||
PictureUrl: user.PictureURL,
|
||||
Email: user.WorkEmail,
|
||||
Department: user.Department,
|
||||
WorkPhone: user.WorkPhone,
|
||||
Location: user.OfficeNumber
|
||||
? user.OfficeNumber
|
||||
: user.BaseOfficeLocation
|
||||
*/
|
||||
const sampleUserFirstNameLetter: string[] = [
|
||||
"A",
|
||||
"C",
|
||||
"D",
|
||||
"F",
|
||||
"H",
|
||||
"J",
|
||||
"L",
|
||||
"N",
|
||||
"P",
|
||||
"R",
|
||||
"T",
|
||||
"V",
|
||||
"X",
|
||||
"Z",
|
||||
];
|
||||
const sampleUserLastNameLetter: string[] = [
|
||||
"B",
|
||||
"E",
|
||||
"G",
|
||||
"I",
|
||||
"K",
|
||||
"M",
|
||||
"O",
|
||||
"Q",
|
||||
"S",
|
||||
"U",
|
||||
"W",
|
||||
"Y",
|
||||
];
|
||||
|
||||
|
||||
export class spMockServices implements ISPServices {
|
||||
private sampleData: MinimalMockUser[] = [];
|
||||
constructor() {
|
||||
|
||||
sampleUserLastNameLetter.forEach(lastNameL => {
|
||||
sampleUserFirstNameLetter.forEach(firstNameL => {
|
||||
const usercount = Math.floor(Math.random() * (5)) + 1;
|
||||
for (let i = 0; i < usercount; i++) {
|
||||
this.sampleData.push({
|
||||
FirstName: `${firstNameL}FirstName${i}`,
|
||||
LastName: `${lastNameL}LastName${i}`,
|
||||
PreferredName: `${firstNameL}FirstName${i} ${lastNameL}LastName${i}`,
|
||||
Department: i % 2 === 0 ? `${lastNameL}Department` : `${firstNameL}Department`,
|
||||
BaseOfficeLocation: i % 3 === 0 ? `${lastNameL}Location` : `${firstNameL}Location`,
|
||||
Title: i % 2 === 0 ? `${lastNameL}JobTitle` : `${firstNameL}JobTitle`,
|
||||
WorkPhone: '' + Math.floor(Math.random() * 1234) + 54678900
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public async searchUsers(searchString: string, searchFirstName: boolean) {
|
||||
let filtervalue = searchString.trim().toLowerCase();
|
||||
if (searchString.length > 0 && filtervalue.lastIndexOf("*") == searchString.length - 1) {
|
||||
// remove last '*'
|
||||
filtervalue = filtervalue.substring(0, searchString.length - 1);
|
||||
}
|
||||
if (!filtervalue || filtervalue.length === 0) {
|
||||
throw new Error("No valid Input.");
|
||||
}
|
||||
|
||||
|
||||
const searchresult = !!searchFirstName ?
|
||||
this.sampleData.filter(p => p.FirstName.toLowerCase().indexOf(filtervalue) === 0) :
|
||||
this.sampleData.filter(p => p.LastName.toLowerCase().indexOf(filtervalue) === 0);
|
||||
|
||||
const timeout = Math.floor(Math.random() * (1000)) + 1;
|
||||
const resultdata = {
|
||||
ElapsedTime: timeout,
|
||||
RowCount: searchresult.length,
|
||||
TotalRows: searchresult.length,
|
||||
PrimarySearchResults: searchresult
|
||||
};
|
||||
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(resultdata);
|
||||
}, timeout);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
public async searchUsersNew(searchString: string, srchQry: string, isInitialSearch: boolean, pageNumber?: number) {
|
||||
let filtervalue = searchString.trim().toLowerCase();
|
||||
if (searchString.length > 0 && filtervalue.lastIndexOf("*") == searchString.length - 1) {
|
||||
// remove last '*'
|
||||
filtervalue = filtervalue.substring(0, searchString.length - 1);
|
||||
}
|
||||
if (!filtervalue || filtervalue.length === 0) {
|
||||
throw new Error("No valid Input.");
|
||||
}
|
||||
|
||||
|
||||
const searchresult = !!isInitialSearch ?
|
||||
this.sampleData.filter(p => p.FirstName.toLowerCase().indexOf(filtervalue) === 0) :
|
||||
this.sampleData.filter(p => p.LastName.toLowerCase().indexOf(filtervalue) === 0);
|
||||
|
||||
const timeout = Math.floor(Math.random() * (1000)) + 1;
|
||||
const resultdata = {
|
||||
ElapsedTime: timeout,
|
||||
RowCount: searchresult.length,
|
||||
TotalRows: searchresult.length,
|
||||
PrimarySearchResults: searchresult
|
||||
};
|
||||
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(resultdata);
|
||||
}, timeout);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,15 +1,20 @@
|
|||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
import { graph } from "@pnp/graph";
|
||||
import { sp, PeoplePickerEntity, ClientPeoplePickerQueryParameters, SearchQuery, SearchResults, SearchProperty, SortDirection } from '@pnp/sp';
|
||||
import { PrincipalType } from "@pnp/sp/src/sitegroups";
|
||||
import { isRelativeUrl } from "office-ui-fabric-react";
|
||||
|
||||
import { sp } from '@pnp/sp';
|
||||
import { SearchResults, ISearchQuery, SortDirection } from '@pnp/sp/search';
|
||||
import { ISPServices } from "./ISPServices";
|
||||
|
||||
|
||||
export class spservices implements ISPServices {
|
||||
constructor(private context: WebPartContext) {
|
||||
sp.setup({
|
||||
spfxContext: this.context
|
||||
spfxContext: {
|
||||
pageContext: {
|
||||
web: {
|
||||
absoluteUrl: this.context.pageContext.web.absoluteUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +23,7 @@ export class spservices implements ISPServices {
|
|||
const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "OfficeNumber", "PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects", "BaseOfficeLocation", "SPS-UserType", "GroupId"];
|
||||
try {
|
||||
if (!searchString) return undefined;
|
||||
let users = await sp.searchWithCaching(<SearchQuery>{
|
||||
const users = await sp.searchWithCaching(<ISearchQuery>{
|
||||
Querytext: _search,
|
||||
RowLimit: 500,
|
||||
EnableInterleaving: true,
|
||||
|
|
@ -32,11 +37,11 @@ export class spservices implements ISPServices {
|
|||
}
|
||||
}
|
||||
|
||||
public async _getImageBase64 (pictureUrl: string): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
let image = new Image();
|
||||
public async _getImageBase64(pictureUrl: string): Promise<string> {
|
||||
return new Promise((resolve) => {
|
||||
const image = new Image();
|
||||
image.addEventListener("load", () => {
|
||||
let tempCanvas = document.createElement("canvas");
|
||||
const tempCanvas = document.createElement("canvas");
|
||||
tempCanvas.width = image.width,
|
||||
tempCanvas.height = image.height,
|
||||
tempCanvas.getContext("2d").drawImage(image, 0, 0);
|
||||
|
|
@ -52,8 +57,8 @@ export class spservices implements ISPServices {
|
|||
});
|
||||
}
|
||||
|
||||
public async searchUsersNew(searchString: string, srchQry: string, isInitialSearch: boolean, pageNumber?: number): Promise<SearchResults> {
|
||||
let qrytext: string = '';
|
||||
public async searchUsersNew(searchString: string, srchQry: string, isInitialSearch: boolean): Promise<SearchResults> {
|
||||
let qrytext = '';
|
||||
if (isInitialSearch) qrytext = `FirstName:${searchString}* OR LastName:${searchString}*`;
|
||||
else {
|
||||
if (srchQry) qrytext = srchQry;
|
||||
|
|
@ -64,7 +69,7 @@ export class spservices implements ISPServices {
|
|||
}
|
||||
const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "OfficeNumber", "PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects", "BaseOfficeLocation", "SPS-UserType", "GroupId"];
|
||||
try {
|
||||
let users = await sp.search(<SearchQuery>{
|
||||
const users = await sp.search(<ISearchQuery>{
|
||||
Querytext: qrytext,
|
||||
RowLimit: 500,
|
||||
EnableInterleaving: true,
|
||||
|
|
@ -74,7 +79,8 @@ export class spservices implements ISPServices {
|
|||
});
|
||||
if (users && users.PrimarySearchResults.length > 0) {
|
||||
for (let index = 0; index < users.PrimarySearchResults.length; index++) {
|
||||
let user: any = users.PrimarySearchResults[index];
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let user:any = users.PrimarySearchResults[index];
|
||||
if (user.PictureURL) {
|
||||
user = { ...user, PictureURL: `/_layouts/15/userphoto.aspx?size=M&accountname=${user.WorkEmail}` };
|
||||
users.PrimarySearchResults[index] = user;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.directory {
|
||||
.dropDownSortBy {
|
||||
|
|
|
|||
|
|
@ -10,25 +10,19 @@ import {
|
|||
Pivot, PivotItem, PivotLinkFormat, PivotLinkSize, Dropdown, IDropdownOption
|
||||
} from "office-ui-fabric-react";
|
||||
import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
|
||||
import { debounce } from "throttle-debounce";
|
||||
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
|
||||
//import { debounce } from "throttle-debounce";
|
||||
import { WebPartTitle } from "@pnp/spfx-controls-react";
|
||||
import { ISPServices } from "../../../SPServices/ISPServices";
|
||||
import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
|
||||
import { spMockServices } from "../../../SPServices/spMockServices";
|
||||
|
||||
|
||||
import { IDirectoryProps } from './IDirectoryProps';
|
||||
import Paging from './Pagination/Paging';
|
||||
|
||||
const slice: any = require('lodash/slice');
|
||||
const filter: any = require('lodash/filter');
|
||||
|
||||
const wrapStackTokens: IStackTokens = { childrenGap: 30 };
|
||||
|
||||
const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
|
||||
let _services: ISPServices = null;
|
||||
if (Environment.type === EnvironmentType.Local) {
|
||||
_services = new spMockServices();
|
||||
} else {
|
||||
_services = new spservices(props.context);
|
||||
}
|
||||
const _services: ISPServices = new spservices(props.context);
|
||||
const [az, setaz] = useState<string[]>([]);
|
||||
const [alphaKey, setalphaKey] = useState<string>('A');
|
||||
const [state, setstate] = useState<IDirectoryState>({
|
||||
|
|
@ -49,25 +43,28 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
|
|||
];
|
||||
const color = props.context.microsoftTeams ? "white" : "";
|
||||
// Paging
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const [pagedItems, setPagedItems] = useState<any[]>([]);
|
||||
const [pageSize, setPageSize] = useState<number>(props.pageSize ? props.pageSize : 10);
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
|
||||
const _onPageUpdate = async (pageno?: number) => {
|
||||
var currentPge = (pageno) ? pageno : currentPage;
|
||||
var startItem = ((currentPge - 1) * pageSize);
|
||||
var endItem = currentPge * pageSize;
|
||||
let filItems = slice(state.users, startItem, endItem);
|
||||
const currentPge = (pageno) ? pageno : currentPage;
|
||||
const startItem = ((currentPge - 1) * pageSize);
|
||||
const endItem = currentPge * pageSize;
|
||||
const filItems = state.users.slice(startItem, endItem);
|
||||
setCurrentPage(currentPge);
|
||||
setPagedItems(filItems);
|
||||
};
|
||||
|
||||
const diretoryGrid =
|
||||
pagedItems && pagedItems.length > 0
|
||||
? pagedItems.map((user: any) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
? pagedItems.map((user: any, i) => {
|
||||
return (
|
||||
<PersonaCard
|
||||
context={props.context}
|
||||
key={"PersonaCard" + i}
|
||||
profileProperties={{
|
||||
DisplayName: user.PreferredName,
|
||||
Title: user.JobTitle,
|
||||
|
|
@ -84,7 +81,7 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
|
|||
})
|
||||
: [];
|
||||
const _loadAlphabets = () => {
|
||||
let alphabets: string[] = [];
|
||||
const alphabets: string[] = [];
|
||||
for (let i = 65; i < 91; i++) {
|
||||
alphabets.push(
|
||||
String.fromCharCode(i)
|
||||
|
|
@ -93,7 +90,7 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
|
|||
setaz(alphabets);
|
||||
};
|
||||
|
||||
const _alphabetChange = async (item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) => {
|
||||
const _alphabetChange = async (item?: PivotItem) => {
|
||||
setstate({ ...state, searchText: "", indexSelectedKey: item.props.itemKey, isLoading: true });
|
||||
setalphaKey(item.props.itemKey);
|
||||
setCurrentPage(1);
|
||||
|
|
@ -124,25 +121,26 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
|
|||
});
|
||||
};
|
||||
|
||||
let _searchUsers = async (searchText: string) => {
|
||||
const _searchUsers = async (searchText: string) => {
|
||||
try {
|
||||
setstate({ ...state, searchText: searchText, isLoading: true });
|
||||
if (searchText.length > 0) {
|
||||
let searchProps: string[] = props.searchProps && props.searchProps.length > 0 ?
|
||||
const searchProps: string[] = props.searchProps && props.searchProps.length > 0 ?
|
||||
props.searchProps.split(',') : ['FirstName', 'LastName', 'WorkEmail', 'Department'];
|
||||
let qryText: string = '';
|
||||
let finalSearchText: string = searchText ? searchText.replace(/ /g, '+') : searchText;
|
||||
let qryText = '';
|
||||
const finalSearchText: string = searchText ? searchText.replace(/ /g, '+') : searchText;
|
||||
if (props.clearTextSearchProps) {
|
||||
let tmpCTProps: string[] = props.clearTextSearchProps.indexOf(',') >= 0 ? props.clearTextSearchProps.split(',') : [props.clearTextSearchProps];
|
||||
const tmpCTProps: string[] = props.clearTextSearchProps.indexOf(',') >= 0 ? props.clearTextSearchProps.split(',') : [props.clearTextSearchProps];
|
||||
if (tmpCTProps.length > 0) {
|
||||
searchProps.map((srchprop, index) => {
|
||||
let ctPresent: any[] = filter(tmpCTProps, (o) => { return o.toLowerCase() == srchprop.toLowerCase(); });
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const ctPresent: any[] = tmpCTProps.filter( (o) => { return o.toLowerCase() == srchprop.toLowerCase(); });
|
||||
if (ctPresent.length > 0) {
|
||||
if(index == searchProps.length - 1) {
|
||||
if (index == searchProps.length - 1) {
|
||||
qryText += `${srchprop}:${searchText}*`;
|
||||
} else qryText += `${srchprop}:${searchText}* OR `;
|
||||
} else {
|
||||
if(index == searchProps.length - 1) {
|
||||
if (index == searchProps.length - 1) {
|
||||
qryText += `${srchprop}:${finalSearchText}*`;
|
||||
} else qryText += `${srchprop}:${finalSearchText}* OR `;
|
||||
}
|
||||
|
|
@ -189,83 +187,38 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
|
|||
setCurrentPage(1);
|
||||
_searchUsers(newvalue);
|
||||
};
|
||||
_searchUsers = debounce(500, _searchUsers);
|
||||
//_searchUsers = debounce(500, _searchUsers);
|
||||
|
||||
const _sortPeople = async (sortField: string) => {
|
||||
let _users = [...state.users];
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
_users = _users.sort((a: any, b: any) => {
|
||||
|
||||
|
||||
switch (sortField) {
|
||||
// Sorte by FirstName
|
||||
case "FirstName":
|
||||
const aFirstName = a.FirstName ? a.FirstName : "";
|
||||
const bFirstName = b.FirstName ? b.FirstName : "";
|
||||
if (aFirstName.toUpperCase() < bFirstName.toUpperCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (aFirstName.toUpperCase() > bFirstName.toUpperCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
break;
|
||||
// Sort by LastName
|
||||
case "LastName":
|
||||
const aLastName = a.LastName ? a.LastName : "";
|
||||
const bLastName = b.LastName ? b.LastName : "";
|
||||
if (aLastName.toUpperCase() < bLastName.toUpperCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (aLastName.toUpperCase() > bLastName.toUpperCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
break;
|
||||
|
||||
// Sort by Location
|
||||
case "Location":
|
||||
const aBaseOfficeLocation = a.BaseOfficeLocation
|
||||
? a.BaseOfficeLocation
|
||||
: "";
|
||||
const bBaseOfficeLocation = b.BaseOfficeLocation
|
||||
? b.BaseOfficeLocation
|
||||
: "";
|
||||
if (
|
||||
aBaseOfficeLocation.toUpperCase() <
|
||||
bBaseOfficeLocation.toUpperCase()
|
||||
) {
|
||||
if ((a.BaseOfficeLocation||"").toUpperCase() < (b.BaseOfficeLocation||"").toUpperCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (
|
||||
aBaseOfficeLocation.toUpperCase() >
|
||||
bBaseOfficeLocation.toUpperCase()
|
||||
) {
|
||||
if ((a.BaseOfficeLocation||"").toUpperCase() > (b.BaseOfficeLocation||"").toUpperCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
break;
|
||||
// Sort by JobTitle
|
||||
case "JobTitle":
|
||||
const aJobTitle = a.JobTitle ? a.JobTitle : "";
|
||||
const bJobTitle = b.JobTitle ? b.JobTitle : "";
|
||||
if (aJobTitle.toUpperCase() < bJobTitle.toUpperCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (aJobTitle.toUpperCase() > bJobTitle.toUpperCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
break;
|
||||
// Sort by Department
|
||||
case "Department":
|
||||
const aDepartment = a.Department ? a.Department : "";
|
||||
const bDepartment = b.Department ? b.Department : "";
|
||||
if (aDepartment.toUpperCase() < bDepartment.toUpperCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (aDepartment.toUpperCase() > bDepartment.toUpperCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
break;
|
||||
|
||||
default:
|
||||
if ((a[sortField]||"").toUpperCase() < (a[sortField]||"").toUpperCase()) {
|
||||
return -1;
|
||||
}
|
||||
if ((a[sortField]||"").toUpperCase() > (a[sortField]||"").toUpperCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
|
@ -294,7 +247,7 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
|
|||
<SearchBox placeholder={strings.SearchPlaceHolder} className={styles.searchTextBox}
|
||||
onSearch={_searchUsers}
|
||||
value={state.searchText}
|
||||
onChange={_searchBoxChanged} />
|
||||
onChange={(ev,newVal) =>_searchBoxChanged(newVal)} />
|
||||
<div>
|
||||
<Pivot className={styles.alphabets} linkFormat={PivotLinkFormat.tabs}
|
||||
selectedKey={state.indexSelectedKey} onLinkClick={_alphabetChange}
|
||||
|
|
@ -349,14 +302,14 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
|
|||
label={strings.DropDownPlaceLabelMessage}
|
||||
options={orderOptions}
|
||||
selectedKey={state.searchString}
|
||||
onChange={(ev: any, value: IDropdownOption) => {
|
||||
onChange={(ev, value) => {
|
||||
_sortPeople(value.key.toString());
|
||||
}}
|
||||
styles={{ dropdown: { width: 200 } }}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
<Stack horizontal horizontalAlign={props.useSpaceBetween?"space-between":"center"} wrap tokens={wrapStackTokens}>
|
||||
<Stack horizontal horizontalAlign={props.useSpaceBetween ? "space-between" : "center"} wrap tokens={wrapStackTokens}>
|
||||
{diretoryGrid}
|
||||
</Stack>
|
||||
<div style={{ width: '100%', display: 'inline-block' }}>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
|
||||
export interface IDirectoryState {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
users: any;
|
||||
isLoading: boolean;
|
||||
errorMessage: string;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.paginationContainer {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@ const Paging: React.FC<IPagingProps> = (props) => {
|
|||
<div className={styles.searchWp__paginationContainer__pagination}>
|
||||
<Pagination
|
||||
activePage={currentPage}
|
||||
firstPageText={<i className='ms-Icon ms-Icon--DoubleChevronLeft' aria-hidden='true'></i>}
|
||||
lastPageText={<i className='ms-Icon ms-Icon--DoubleChevronRight' aria-hidden='true'></i>}
|
||||
prevPageText={<i className='ms-Icon ms-Icon--ChevronLeft' aria-hidden='true'></i>}
|
||||
nextPageText={<i className='ms-Icon ms-Icon--ChevronRight' aria-hidden='true'></i>}
|
||||
firstPageText={<i className='ms-Icon ms-Icon--DoubleChevronLeft' aria-hidden='true' />}
|
||||
lastPageText={<i className='ms-Icon ms-Icon--DoubleChevronRight' aria-hidden='true' />}
|
||||
prevPageText={<i className='ms-Icon ms-Icon--ChevronLeft' aria-hidden='true' />}
|
||||
nextPageText={<i className='ms-Icon ms-Icon--ChevronRight' aria-hidden='true' />}
|
||||
activeLinkClass={styles.active}
|
||||
itemsCountPerPage={props.itemsCountPerPage}
|
||||
totalItemsCount={props.totalItems}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export interface IPersonaCardState {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
livePersonaCard: any;
|
||||
pictureUrl: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export interface IUserProperties {
|
||||
Department: string;
|
||||
MobilePhone?: String;
|
||||
MobilePhone?: string;
|
||||
PictureUrl: string;
|
||||
Title: string;
|
||||
DisplayName: string;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.personaContainer {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@ import * as React from 'react';
|
|||
import styles from './PersonaCard.module.scss';
|
||||
import { IPersonaCardProps } from './IPersonaCardProps';
|
||||
import { IPersonaCardState } from './IPersonaCardState';
|
||||
import {
|
||||
Log, Environment, EnvironmentType,
|
||||
} from '@microsoft/sp-core-library';
|
||||
import { Log } from '@microsoft/sp-core-library';
|
||||
import { SPComponentLoader } from '@microsoft/sp-loader';
|
||||
|
||||
import {
|
||||
|
|
@ -15,14 +13,13 @@ import {
|
|||
Icon,
|
||||
} from 'office-ui-fabric-react';
|
||||
|
||||
const EXP_SOURCE: string = 'SPFxDirectory';
|
||||
const LIVE_PERSONA_COMPONENT_ID: string =
|
||||
'914330ee-2df2-4f6e-a858-30c23a812408';
|
||||
const EXP_SOURCE = 'SPFxDirectory';
|
||||
const LIVE_PERSONA_COMPONENT_ID = '914330ee-2df2-4f6e-a858-30c23a812408';
|
||||
|
||||
export class PersonaCard extends React.Component<
|
||||
IPersonaCardProps,
|
||||
IPersonaCardState
|
||||
> {
|
||||
> {
|
||||
constructor(props: IPersonaCardProps) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -34,26 +31,15 @@ export class PersonaCard extends React.Component<
|
|||
* @memberof PersonaCard
|
||||
*/
|
||||
public async componentDidMount() {
|
||||
if (Environment.type !== EnvironmentType.Local) {
|
||||
const sharedLibrary = await this._loadSPComponentById(
|
||||
LIVE_PERSONA_COMPONENT_ID
|
||||
);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const livePersonaCard: any = sharedLibrary.LivePersonaCard;
|
||||
this.setState({ livePersonaCard: livePersonaCard });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param {IPersonaCardProps} prevProps
|
||||
* @param {IPersonaCardState} prevState
|
||||
* @memberof PersonaCard
|
||||
*/
|
||||
public componentDidUpdate(
|
||||
prevProps: IPersonaCardProps,
|
||||
prevState: IPersonaCardState
|
||||
): void { }
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
|
|
@ -133,8 +119,10 @@ export class PersonaCard extends React.Component<
|
|||
* Load SPFx component by id, SPComponentLoader is used to load the SPFx components
|
||||
* @param componentId - componentId, guid of the component library
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
private async _loadSPComponentById(componentId: string): Promise<any> {
|
||||
try {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const component: any = await SPComponentLoader.loadComponentById(
|
||||
componentId
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule" : true,
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
|
|
@ -14,27 +13,27 @@
|
|||
"outDir": "lib",
|
||||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noImplicitAny": true,
|
||||
"noUnusedLocals": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"resolveJsonModule": true,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
"es2015.collection",
|
||||
"es2015.promise"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
]
|
||||
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
{
|
||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue