diff --git a/samples/react-environment-settings/src/webparts/helloWorld/HelloWorldWebPart.manifest.json b/samples/react-environment-settings/src/webparts/helloWorld/HelloWorldWebPart.manifest.json index 8b7b4f510..8d256a350 100644 --- a/samples/react-environment-settings/src/webparts/helloWorld/HelloWorldWebPart.manifest.json +++ b/samples/react-environment-settings/src/webparts/helloWorld/HelloWorldWebPart.manifest.json @@ -4,25 +4,19 @@ "alias": "HelloWorldWebPart", "componentType": "WebPart", - // The "*" signifies that the version should be taken from the package.json "version": "*", "manifestVersion": 2, - // If true, the component can only be installed on sites where Custom Script is allowed. - // Components that allow authors to embed arbitrary script code should set this to true. - // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f "requiresCustomScript": false, "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"], "supportsThemeVariants": true, "preconfiguredEntries": [{ - "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced + "groupId": "5c03119e-3074-46fd-976b-c60198311f70", "group": { "default": "Advanced" }, "title": { "default": "HelloWorld" }, "description": { "default": "HelloWorld description" }, "officeFabricIconFontName": "Page", - "properties": { - "description": "HelloWorld" - } + "properties": {} }] } diff --git a/samples/react-environment-settings/src/webparts/helloWorld/HelloWorldWebPart.ts b/samples/react-environment-settings/src/webparts/helloWorld/HelloWorldWebPart.ts index e0c367c85..72331e24b 100644 --- a/samples/react-environment-settings/src/webparts/helloWorld/HelloWorldWebPart.ts +++ b/samples/react-environment-settings/src/webparts/helloWorld/HelloWorldWebPart.ts @@ -1,94 +1,23 @@ import * as React from 'react'; import * as ReactDom from 'react-dom'; import { Version } from '@microsoft/sp-core-library'; -import { - type IPropertyPaneConfiguration, - PropertyPaneTextField -} from '@microsoft/sp-property-pane'; +import { type IPropertyPaneConfiguration } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; -import { IReadonlyTheme } from '@microsoft/sp-component-base'; - -import * as strings from 'HelloWorldWebPartStrings'; -import HelloWorld from './components/HelloWorld'; -import { IHelloWorldProps } from './components/IHelloWorldProps'; +import { HelloWorld, IHelloWorldProps } from './components/HelloWorld'; export interface IHelloWorldWebPartProps { - description: string; } export default class HelloWorldWebPart extends BaseClientSideWebPart { - private _isDarkTheme: boolean = false; - private _environmentMessage: string = ''; - public render(): void { const element: React.ReactElement = React.createElement( - HelloWorld, - { - description: this.properties.description, - isDarkTheme: this._isDarkTheme, - environmentMessage: this._environmentMessage, - hasTeamsContext: !!this.context.sdks.microsoftTeams, - userDisplayName: this.context.pageContext.user.displayName - } + HelloWorld, {} ); ReactDom.render(element, this.domElement); } - protected onInit(): Promise { - return this._getEnvironmentMessage().then(message => { - this._environmentMessage = message; - }); - } - - - - private _getEnvironmentMessage(): Promise { - if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook - return this.context.sdks.microsoftTeams.teamsJs.app.getContext() - .then(context => { - let environmentMessage: string = ''; - switch (context.app.host.name) { - case 'Office': // running in Office - environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment; - break; - case 'Outlook': // running in Outlook - environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment; - break; - case 'Teams': // running in Teams - case 'TeamsModern': - environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment; - break; - default: - environmentMessage = strings.UnknownEnvironment; - } - - return environmentMessage; - }); - } - - return Promise.resolve(this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment); - } - - protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void { - if (!currentTheme) { - return; - } - - this._isDarkTheme = !!currentTheme.isInverted; - const { - semanticColors - } = currentTheme; - - if (semanticColors) { - this.domElement.style.setProperty('--bodyText', semanticColors.bodyText || null); - this.domElement.style.setProperty('--link', semanticColors.link || null); - this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered || null); - } - - } - protected onDispose(): void { ReactDom.unmountComponentAtNode(this.domElement); } @@ -99,23 +28,7 @@ export default class HelloWorldWebPart extends BaseClientSideWebPart { - public render(): React.ReactElement { - const { - description, - isDarkTheme, - environmentMessage, - hasTeamsContext, - userDisplayName - } = this.props; +export interface IHelloWorldProps { } - return ( -
-
- -

Well done, {escape(userDisplayName)}!

-
{environmentMessage}
-
Web part property value: {escape(description)}
-
-
-

Welcome to SharePoint Framework!

-

- The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling. -

-

Learn more about SPFx development:

- -
-
- ); - } -} +export const HelloWorld: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + <> + Hello world + + ); +}; \ No newline at end of file diff --git a/samples/react-environment-settings/src/webparts/helloWorld/components/IHelloWorldProps.ts b/samples/react-environment-settings/src/webparts/helloWorld/components/IHelloWorldProps.ts deleted file mode 100644 index f7fdb822c..000000000 --- a/samples/react-environment-settings/src/webparts/helloWorld/components/IHelloWorldProps.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface IHelloWorldProps { - description: string; - isDarkTheme: boolean; - environmentMessage: string; - hasTeamsContext: boolean; - userDisplayName: string; -} diff --git a/samples/react-environment-settings/teams/d8404a75-dd4d-4796-b4ce-86e3fba1d8a2_color.png b/samples/react-environment-settings/teams/d8404a75-dd4d-4796-b4ce-86e3fba1d8a2_color.png deleted file mode 100644 index 0e1f764fa..000000000 Binary files a/samples/react-environment-settings/teams/d8404a75-dd4d-4796-b4ce-86e3fba1d8a2_color.png and /dev/null differ diff --git a/samples/react-environment-settings/teams/d8404a75-dd4d-4796-b4ce-86e3fba1d8a2_outline.png b/samples/react-environment-settings/teams/d8404a75-dd4d-4796-b4ce-86e3fba1d8a2_outline.png deleted file mode 100644 index e8cb4b6ba..000000000 Binary files a/samples/react-environment-settings/teams/d8404a75-dd4d-4796-b4ce-86e3fba1d8a2_outline.png and /dev/null differ