On 18/12/2024
Base hooks context
import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface iMAContext {
context: WebPartContext;
}
component
import * as React from 'react';
import styles from './MaCountries.module.scss';
import type { IMaCountriesProps } from './IMaCountriesProps';
import { iMAContext } from '../../../entities/iMAContext';
//import { escape } from '@microsoft/sp-lodash-subset';
export const MaCountriesContext = React.createContext({} as iMAContext);
export const MaCountries: React.FunctionComponent = (props: IMaCountriesProps) => {
return (
<MaCountriesContext.Provider value={{ context: props.context }}><div>dfvdfv
</div>
MaCountriesContext.Provider >
);
};
webpart
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 { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { IReadonlyTheme } from '@microsoft/sp-component-base';
import * as strings from 'MaCountriesWebPartStrings';
import { MaCountries } from './components/MaCountries';
import { IMaCountriesProps } from './components/IMaCountriesProps';
export interface IMaCountriesWebPartProps {
description: string;
}
export default class MaCountriesWebPart extends BaseClientSideWebPart {
private _isDarkTheme: boolean;
public render(): void {
const element: React.ReactElement = React.createElement(
MaCountries,
{
description: this.properties.description,
context: this.context,
isDarkTheme: this._isDarkTheme
}
);
ReactDom.render(element, this.domElement);
}
protected onInit(): Promise {
return this._getEnvironmentMessage().then(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);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
hide native CSS
@import '~@fluentui/react/dist/sass/References.scss';
div[data-automation-id="pageHeader"] {
display: none;
}
Shared css
@import '~@fluentui/react/dist/sass/References.scss';
/* remove this color TODO*/
html,
body {
background-color: #d2d9dd !important;
}
:global root-148.root-148.root-148.root-148.root-148 {
background-color: #d2d9dd !important;
}
:global CanvasSection {
background-color: #d2d9dd !important;
}
//global, hide not decored css or native hoverride
:global .fui-DatePicker__popupSurface {
background-color: #fff;
}
/* end remove this color TODO*/
$eulightBlue: #007dba;
$eulightDark: #10377A;
$euAlert: #AB0000;
$euGrey: #ECF6FA;
$euligthGrey: #D8E4EA;
$euTextColor: #4C7A8F;
$euAlertOrange: #E38100;
$euOkGreen: #00B400;
$red: #FA505C;
//bold
$fontBoldWeight: 600;
$fontBoldSize: 14px;
//bolder
$fontBolderWeight: 600;
$fontBolderSize: 16px;
//normal
$fontNormalWeight: 500;
$fontNormalSize: 12px;
//small
$fontSmallWeight: 500;
$fontSmallSize: 10px;
.shared {
.eutclear {
display: block;
clear: both;
line-height: 0;
}
.eutclearfix:before,
.eutclearfix:after {
display: table;
clear: both;
content: '';
}
.container {
// border: 1px solid black;
width: 100%;
// margin-right: auto;
// margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.containerFluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col3 {
margin: auto;
-webkit-box-flex: 0;
max-width: 100%;
flex: none;
-ms-flex: none;
}
@media (min-width: 576px) {
.col3 {
max-width: 100%;
flex: none;
-ms-flex: none;
}
}
@media (min-width: 768px) {
.col3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 32%;
flex: 0 0 32%;
max-width: 32%;
}
}
@media (min-width: 992px) {
.col3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 31%;
flex: 0 0 31%;
max-width: 31%;
}
}
@media (min-width: 1200px) {
.col3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 32%;
flex: 0 0 32%;
max-width: 32%;
}
}
}