Add pnpjs

This commit is contained in:
AriGunawan 2022-10-01 19:47:54 +10:00
parent 035f862996
commit 4df690d03c
3 changed files with 713 additions and 228 deletions

View File

@ -10,30 +10,31 @@
"serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
},
"dependencies": {
"tslib": "2.3.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"office-ui-fabric-react": "7.185.7",
"@microsoft/sp-core-library": "1.15.2",
"@microsoft/sp-lodash-subset": "1.15.2",
"@microsoft/sp-office-ui-fabric-core": "1.15.2",
"@microsoft/sp-property-pane": "1.15.2",
"@microsoft/sp-webpart-base": "1.15.2",
"@microsoft/sp-lodash-subset": "1.15.2",
"@microsoft/sp-office-ui-fabric-core": "1.15.2"
"@pnp/sp": "^3.7.0",
"office-ui-fabric-react": "7.185.7",
"react": "16.13.1",
"react-dom": "16.13.1",
"tslib": "2.3.1"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@rushstack/eslint-config": "2.5.1",
"@microsoft/eslint-plugin-spfx": "1.15.2",
"@microsoft/eslint-config-spfx": "1.15.2",
"@microsoft/eslint-plugin-spfx": "1.15.2",
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@microsoft/sp-build-web": "1.15.2",
"@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5",
"gulp": "4.0.2",
"typescript": "4.5.5",
"@microsoft/sp-module-interfaces": "1.15.2",
"@rushstack/eslint-config": "2.5.1",
"@types/react": "16.9.51",
"@types/react-dom": "16.9.8",
"@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5",
"eslint-plugin-react-hooks": "4.3.0",
"@microsoft/sp-module-interfaces": "1.15.2",
"spfx-fast-serve-helpers": "~1.15.0"
"gulp": "4.0.2",
"spfx-fast-serve-helpers": "~1.15.0",
"typescript": "4.5.5"
}
}

File diff suppressed because it is too large Load Diff

View File

@ -1,24 +1,26 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import * as React from "react";
import * as ReactDom from "react-dom";
import * as strings from "ReactZodWebPartStrings";
import { Version } from "@microsoft/sp-core-library";
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
PropertyPaneTextField,
} from "@microsoft/sp-property-pane";
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { SPFI, spfi, SPFx } from "@pnp/sp";
import * as strings from 'ReactZodWebPartStrings';
import ReactZod from './components/ReactZod';
import { IReactZodProps } from './components/IReactZodProps';
import { IReactZodProps } from "./components/IReactZodProps";
import ReactZod from "./components/ReactZod";
export interface IReactZodWebPartProps {
description: string;
}
export default class ReactZodWebPart extends BaseClientSideWebPart<IReactZodWebPartProps> {
private _isDarkTheme: boolean = false;
private _environmentMessage: string = '';
private _environmentMessage: string = "";
private _spfi: SPFI;
public render(): void {
const element: React.ReactElement<IReactZodProps> = React.createElement(
@ -28,25 +30,31 @@ export default class ReactZodWebPart extends BaseClientSideWebPart<IReactZodWebP
isDarkTheme: this._isDarkTheme,
environmentMessage: this._environmentMessage,
hasTeamsContext: !!this.context.sdks.microsoftTeams,
userDisplayName: this.context.pageContext.user.displayName
userDisplayName: this.context.pageContext.user.displayName,
}
);
ReactDom.render(element, this.domElement);
}
protected onInit(): Promise<void> {
protected async onInit(): Promise<void> {
this._environmentMessage = this._getEnvironmentMessage();
return super.onInit();
await super.onInit();
this._spfi = spfi().using(SPFx(this.context));
}
private _getEnvironmentMessage(): string {
if (!!this.context.sdks.microsoftTeams) { // running in Teams
return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
if (!!this.context.sdks.microsoftTeams) {
// running in Teams
return this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentTeams
: strings.AppTeamsTabEnvironment;
}
return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
return this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentSharePoint
: strings.AppSharePointEnvironment;
}
protected onDispose(): void {
@ -54,7 +62,7 @@ export default class ReactZodWebPart extends BaseClientSideWebPart<IReactZodWebP
}
protected get dataVersion(): Version {
return Version.parse('1.0');
return Version.parse("1.0");
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
@ -62,20 +70,20 @@ export default class ReactZodWebPart extends BaseClientSideWebPart<IReactZodWebP
pages: [
{
header: {
description: strings.PropertyPaneDescription
description: strings.PropertyPaneDescription,
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
PropertyPaneTextField("description", {
label: strings.DescriptionFieldLabel,
}),
],
},
],
},
],
};
}
}