honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-02-09 22:44:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unused code

Browse Source
This commit is contained in:
AriGunawan 2022-11-05 18:38:28 +07:00
parent a237eaab4a
commit 6b61af0473
4 changed files with 114 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/BirthdaysPerMonthWebPart.ts
View File

@ -1,61 +1,50 @@
import * as React from 'react'; import * as React from "react";
import * as ReactDom from 'react-dom'; import * as ReactDom from "react-dom";
import { Version } from '@microsoft/sp-core-library'; import { Version } from "@microsoft/sp-core-library";
import { import {
IPropertyPaneConfiguration, IPropertyPaneConfiguration,
PropertyPaneTextField PropertyPaneTextField,
} from '@microsoft/sp-property-pane'; } from "@microsoft/sp-property-pane";
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import * as strings from 'BirthdaysPerMonthWebPartStrings'; import * as strings from "BirthdaysPerMonthWebPartStrings";
import BirthdaysPerMonth from './components/BirthdaysPerMonth'; import "../../../assets/dist/tailwind.css";
import { IBirthdaysPerMonthProps } from './components/IBirthdaysPerMonthProps'; import {
import '../../../assets/dist/tailwind.css'; BirthdaysPerMonth,
IBirthdaysPerMonthProps,
} from "./components/BirthdaysPerMonth";
export interface IBirthdaysPerMonthWebPartProps { export interface IBirthdaysPerMonthWebPartProps {
description: string; description: string;
} }
export default class BirthdaysPerMonthWebPart extends BaseClientSideWebPart<IBirthdaysPerMonthWebPartProps> { export default class BirthdaysPerMonthWebPart extends BaseClientSideWebPart<IBirthdaysPerMonthWebPartProps> {
private _isDarkTheme: boolean = false; private _isDarkTheme: boolean = false;
private _environmentMessage: string = ''; private _environmentMessage: string = "";
public render(): void { public render(): void {
const element: React.ReactElement<IBirthdaysPerMonthProps> = React.createElement( const element: React.ReactElement<IBirthdaysPerMonthProps> =
BirthdaysPerMonth, React.createElement(BirthdaysPerMonth, {
{
description: this.properties.description, description: this.properties.description,
isDarkTheme: this._isDarkTheme, isDarkTheme: this._isDarkTheme,
environmentMessage: this._environmentMessage, environmentMessage: this._environmentMessage,
hasTeamsContext: !!this.context.sdks.microsoftTeams, hasTeamsContext: !!this.context.sdks.microsoftTeams,
userDisplayName: this.context.pageContext.user.displayName userDisplayName: this.context.pageContext.user.displayName,
} });
);
ReactDom.render(element, this.domElement); ReactDom.render(element, this.domElement);
} }
protected onInit(): Promise<void> { protected onInit(): Promise<void> {
this._environmentMessage = this._getEnvironmentMessage();
return super.onInit(); return super.onInit();
} }
private _getEnvironmentMessage(): string {
if (!!this.context.sdks.microsoftTeams) { // running in Teams
return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
}
return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
}
protected onDispose(): void { protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement); ReactDom.unmountComponentAtNode(this.domElement);
} }
protected get dataVersion(): Version { protected get dataVersion(): Version {
return Version.parse('1.0'); return Version.parse("1.0");
} }
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
@ -63,20 +52,20 @@ export default class BirthdaysPerMonthWebPart extends BaseClientSideWebPart<IBir
pages: [ pages: [
{ {
header: { header: {
description: strings.PropertyPaneDescription description: strings.PropertyPaneDescription,
}, },
groups: [ groups: [
{ {
groupName: strings.BasicGroupName, groupName: strings.BasicGroupName,
groupFields: [ groupFields: [
PropertyPaneTextField('description', { PropertyPaneTextField("description", {
label: strings.DescriptionFieldLabel label: strings.DescriptionFieldLabel,
}) }),
] ],
} },
] ],
} },
] ],
}; };
} }
} }

34
samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.module.scss
View File

@ -1,34 +0,0 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
.birthdaysPerMonth {
overflow: hidden;
padding: 1em;
color: "[theme:bodyText, default: #323130]";
color: var(--bodyText);
&.teams {
font-family: $ms-font-family-fallbacks;
}
}
.welcome {
text-align: center;
}
.welcomeImage {
width: 100%;
max-width: 420px;
}
.links {
a {
text-decoration: none;
color: "[theme:link, default:#03787c]";
color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
&:hover {
text-decoration: underline;
color: "[theme:linkHovered, default: #014446]";
color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
}
}
}

128
samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.tsx
View File

@ -1,43 +1,89 @@
import * as React from 'react'; import * as React from "react";
import styles from './BirthdaysPerMonth.module.scss'; import styles from "./BirthdaysPerMonth.module.scss";
import { IBirthdaysPerMonthProps } from './IBirthdaysPerMonthProps'; import { escape } from "@microsoft/sp-lodash-subset";
import { escape } from '@microsoft/sp-lodash-subset';
export default class BirthdaysPerMonth extends React.Component<IBirthdaysPerMonthProps, {}> { interface IBirthdaysPerMonthProps {}
public render(): React.ReactElement<IBirthdaysPerMonthProps> {
const {
description,
isDarkTheme,
environmentMessage,
hasTeamsContext,
userDisplayName
} = this.props;
return ( const BirthdaysPerMonth = () => {
<section className={`tw-text-red-700`}> return (
<div className={styles.welcome}> <section className={`tw-text-red-700`}>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} /> <div className={styles.welcome}>
<h2>Well done, {escape(userDisplayName)}!</h2> <img
<div>{environmentMessage}</div> alt=""
<div>Web part property value: <strong>{escape(description)}</strong></div> src={require("../assets/welcome-light.png")}
</div> className={styles.welcomeImage}
<div> />
<h3>Welcome to SharePoint Framework!</h3> <h2>Well done, Ari!</h2>
<p> </div>
The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling. <div>
</p> <h3>Welcome to SharePoint Framework!</h3>
<h4>Learn more about SPFx development:</h4> <p>
<ul className={styles.links}> The SharePoint Framework (SPFx) is a extensibility model for Microsoft
<li><a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">SharePoint Framework Overview</a></li> Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to
<li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank" rel="noreferrer">Use Microsoft Graph in your solution</a></li> extend Microsoft 365 with automatic Single Sign On, automatic hosting
<li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank" rel="noreferrer">Build for Microsoft Teams using SharePoint Framework</a></li> and industry standard tooling.
<li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank" rel="noreferrer">Build for Microsoft Viva Connections using SharePoint Framework</a></li> </p>
<li><a href="https://aka.ms/spfx-yeoman-store" target="_blank" rel="noreferrer">Publish SharePoint Framework applications to the marketplace</a></li> <h4>Learn more about SPFx development:</h4>
<li><a href="https://aka.ms/spfx-yeoman-api" target="_blank" rel="noreferrer">SharePoint Framework API reference</a></li> <ul className={styles.links}>
<li><a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">Microsoft 365 Developer Community</a></li> <li>
</ul> <a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">
</div> SharePoint Framework Overview
</section> </a>
); </li>
} <li>
} <a
href="https://aka.ms/spfx-yeoman-graph"
target="_blank"
rel="noreferrer"
>
Use Microsoft Graph in your solution
</a>
</li>
<li>
<a
href="https://aka.ms/spfx-yeoman-teams"
target="_blank"
rel="noreferrer"
>
Build for Microsoft Teams using SharePoint Framework
</a>
</li>
<li>
<a
href="https://aka.ms/spfx-yeoman-viva"
target="_blank"
rel="noreferrer"
>
Build for Microsoft Viva Connections using SharePoint Framework
</a>
</li>
<li>
<a
href="https://aka.ms/spfx-yeoman-store"
target="_blank"
rel="noreferrer"
>
Publish SharePoint Framework applications to the marketplace
</a>
</li>
<li>
<a
href="https://aka.ms/spfx-yeoman-api"
target="_blank"
rel="noreferrer"
>
SharePoint Framework API reference
</a>
</li>
<li>
<a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">
Microsoft 365 Developer Community
</a>
</li>
</ul>
</div>
</section>
);
};
export { IBirthdaysPerMonthProps, BirthdaysPerMonth };

7
samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/IBirthdaysPerMonthProps.ts
View File

@ -1,7 +0,0 @@
export interface IBirthdaysPerMonthProps {
description: string;
isDarkTheme: boolean;
environmentMessage: string;
hasTeamsContext: boolean;
userDisplayName: string;
}