Added the react-graph-personalemail sample (#634)

This commit is contained in:
Waldek Mastykarz 2018-10-03 14:10:21 +02:00 committed by Vesa Juvonen
parent 61977114e1
commit ce52f7a12a
26 changed files with 18138 additions and 0 deletions

View File

@ -0,0 +1,25 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# change these settings to your own preference
indent_style = space
indent_size = 2
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2

View File

@ -0,0 +1,32 @@
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
node_modules
# Build generated files
dist
lib
solution
temp
*.sppkg
# Coverage directory used by tools like istanbul
coverage
# OSX
.DS_Store
# Visual Studio files
.ntvs_analysis.dat
.vs
bin
obj
# Resx Generated Code
*.resx.ts
# Styles Generated Code
*.scss.ts

View File

@ -0,0 +1,11 @@
{
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.6.0",
"libraryName": "react-graph-personalemail",
"libraryId": "08d71f2b-958d-4a90-8ecf-05d08063b537",
"packageManager": "npm",
"componentType": "webpart"
}
}

View File

@ -0,0 +1,26 @@
## spfx-personal-email
This is where you include your WebPart documentation.
### Building the code
```bash
git clone the repo
npm i
npm i -g gulp
gulp
```
This package produces the following:
* lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources
* deploy/* - all resources which should be uploaded to a CDN.
### Build options
gulp clean - TODO
gulp test - TODO
gulp serve - TODO
gulp bundle - TODO
gulp package-solution - TODO

View File

@ -0,0 +1,20 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"personal-email-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/personalEmail/PersonalEMailWebPart.js",
"manifest": "./src/webparts/personalEMail/PersonalEmailWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"PersonalEmailWebPartStrings": "lib/webparts/personalEmail/loc/{locale}.js",
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

View File

@ -0,0 +1,7 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "spfx-personal-email",
"accessKey": "<!-- ACCESS KEY -->"
}

View File

@ -0,0 +1,19 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "spfx-personal-email-client-side-solution",
"id": "08d71f2b-958d-4a90-8ecf-05d08063b537",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Mail.Read"
}
]
},
"paths": {
"zippedPackage": "solution/spfx-personal-email.sppkg"
}
}

View File

@ -0,0 +1,10 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

View File

@ -0,0 +1,7 @@
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.initialize(gulp);

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,42 @@
{
"name": "react-graph-personalemail",
"version": "1.0.0",
"author": {
"name": "Waldek Mastykarz",
"url": "https://rencore.com"
},
"license": "MIT",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.6.0",
"@microsoft/sp-lodash-subset": "1.6.0",
"@microsoft/sp-office-ui-fabric-core": "1.6.0",
"@microsoft/sp-webpart-base": "1.6.0",
"@pnp/spfx-controls-react": "^1.4.0",
"@pnp/spfx-property-controls": "^1.7.0",
"@types/es6-promise": "0.0.33",
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
"@types/webpack-env": "1.13.1",
"react": "15.6.2",
"react-dom": "15.6.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.6.0",
"@microsoft/sp-module-interfaces": "1.6.0",
"@microsoft/sp-webpart-workbench": "1.6.0",
"tslint-microsoft-contrib": "~5.0.0",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

View File

@ -0,0 +1,27 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "ac41debd-d92c-4de0-9d67-e7bc191030e1",
"alias": "pnpPersonalEmail",
"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,
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "Personal e-mail" },
"description": { "default": "Shows email of a user" },
"officeFabricIconFontName": "Mail",
"properties": {
"title": "Personal e-mail",
"nrOfMessages": 5
}
}]
}

View File

@ -0,0 +1,84 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import * as strings from 'PersonalEmailWebPartStrings';
import { PersonalEmail, IPersonalEmailProps } from './components';
import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';
import { MSGraphClient } from '@microsoft/sp-http';
export interface IPersonalEmailWebPartProps {
title: string;
nrOfMessages: number;
}
export default class PersonalEmailWebPart extends BaseClientSideWebPart<IPersonalEmailWebPartProps> {
private graphClient: MSGraphClient;
public onInit(): Promise<void> {
return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
this.graphClient = client;
resolve();
}, err => reject(err));
});
}
public render(): void {
const element: React.ReactElement<IPersonalEmailProps> = React.createElement(
PersonalEmail,
{
title: this.properties.title,
nrOfMessages: this.properties.nrOfMessages,
// pass the current display mode to determine if the title should be
// editable or not
displayMode: this.displayMode,
// pass the reference to the MSGraphClient
graphClient: this.graphClient,
// handle updated web part title
updateProperty: (value: string): void => {
// store the new title in the title web part property
this.properties.title = value;
}
}
);
ReactDom.render(element, this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupFields: [
PropertyFieldNumber("nrOfMessages", {
key: "nrOfMessages",
label: strings.NrOfMessagesToShow,
value: this.properties.nrOfMessages,
minValue: 1,
maxValue: 10
})
]
}
]
}
]
};
}
}

View File

@ -0,0 +1,16 @@
export interface IMessages {
value: IMessage[];
}
export interface IMessage {
bodyPreview: string;
from: {
emailAddress: {
address: string;
name: string;
}
};
receivedDateTime: string;
subject: string;
webLink: string;
}

View File

@ -0,0 +1,9 @@
import { IPersonalEmailWebPartProps } from "../PersonalEmailWebPart";
import { MSGraphClient } from "@microsoft/sp-http";
import { DisplayMode } from "@microsoft/sp-core-library";
export interface IPersonalEmailProps extends IPersonalEmailWebPartProps {
displayMode: DisplayMode;
graphClient: MSGraphClient;
updateProperty: (value: string) => void;
}

View File

@ -0,0 +1,7 @@
import { IMessage } from '.';
export interface IPersonalEmailState {
error: string;
loading: boolean;
messages: IMessage[];
}

View File

@ -0,0 +1,66 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.personalEmail {
.title, .viewAll {
padding-left: 10px;
}
.list {
margin-bottom: 1em;
}
.message {
display: block;
padding: 0.5em 10px;
color: $ms-color-black;
&:hover {
color: inherit;
background: $ms-color-neutralLight;
}
}
.from {
@include ms-font-l;
@include ms-fontWeight-semilight;
}
.subject {
@include ms-font-s;
@include ms-fontWeight-semibold;
color: $ms-color-themePrimary;
float: left;
width: 80%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.date {
@include ms-font-s;
@include ms-fontWeight-semibold;
color: $ms-color-themePrimary;
float: right;
width: 20%;
text-align: right;
word-break: keep-all;
}
.preview {
@include ms-font-s;
@include ms-fontWeight-light;
clear: both;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.noMessages {
@include ms-font-m;
}
.error {
@include ms-font-m;
color: $ms-color-alert;
}
}

View File

@ -0,0 +1,124 @@
import * as React from 'react';
import styles from './PersonalEmail.module.scss';
import * as strings from 'PersonalEmailWebPartStrings';
import { IPersonalEmailProps, IPersonalEmailState, IMessage, IMessages } from '.';
import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/components/Spinner';
import { List } from 'office-ui-fabric-react/lib/components/List';
import { Link } from 'office-ui-fabric-react/lib/components/Link';
export class PersonalEmail extends React.Component<IPersonalEmailProps, IPersonalEmailState> {
constructor(props: IPersonalEmailProps) {
super(props);
this.state = {
messages: [],
loading: false,
error: undefined
};
}
/**
* Load recent messages for the current user
*/
private _loadMessages(): void {
if (!this.props.graphClient) {
return;
}
// update state to indicate loading and remove any previously loaded
// messages
this.setState({
error: null,
loading: true,
messages: []
});
this.props.graphClient
.api("me/messages")
.version("v1.0")
.select("bodyPreview,receivedDateTime,from,subject,webLink")
.top(this.props.nrOfMessages || 5)
.orderby("receivedDateTime desc")
.get((err: any, res: IMessages): void => {
if (err) {
// Something failed calling the MS Graph
this.setState({
error: err.message ? err.message : strings.Error,
loading: false
});
return;
}
// Check if a response was retrieved
if (res && res.value && res.value.length > 0) {
this.setState({
messages: res.value,
loading: false
});
}
else {
// No messages found
this.setState({
loading: false
});
}
});
}
/**
* Render message item
*/
private _onRenderCell = (item: IMessage, index: number | undefined): JSX.Element => {
return <Link href={item.webLink} className={styles.message} target='_blank'>
<div className={styles.from}>{item.from.emailAddress.name || item.from.emailAddress.address}</div>
<div className={styles.subject}>{item.subject}</div>
<div className={styles.date}>{(new Date(item.receivedDateTime).toLocaleDateString())}</div>
<div className={styles.preview}>{item.bodyPreview}</div>
</Link>;
}
public componentDidMount(): void {
// load data initially after the component has been instantiated
this._loadMessages();
}
public componentDidUpdate(prevProps: IPersonalEmailProps, prevState: IPersonalEmailState): void {
// verify if the component should update. Helps avoid unnecessary re-renders
// when the parent has changed but this component hasn't
if (prevProps.nrOfMessages !== this.props.nrOfMessages) {
this._loadMessages();
}
}
public render(): React.ReactElement<IPersonalEmailProps> {
return (
<div className={styles.personalEmail}>
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.updateProperty} className={styles.title} />
{
this.state.loading &&
<Spinner label={strings.Loading} size={SpinnerSize.large} />
}
{
this.state.messages &&
this.state.messages.length > 0 ? (
<div>
<List items={this.state.messages}
onRenderCell={this._onRenderCell} className={styles.list} />
<Link href='https://outlook.office.com/owa/' target='_blank' className={styles.viewAll}>{strings.ViewAll}</Link>
</div>
) : (
!this.state.loading && (
this.state.error ?
<span className={styles.error}>{this.state.error}</span> :
<span className={styles.noMessages}>{strings.NoMessages}</span>
)
)
}
</div>
);
}
}

View File

@ -0,0 +1,4 @@
export * from './IMessage';
export * from './IPersonalEmailProps';
export * from './IPersonalEmailState';
export * from './PersonalEmail';

View File

@ -0,0 +1,10 @@
define([], function() {
return {
"Error": "An error has occurred while retrieving your messages",
"Loading": "Retrieving your messages",
"NoMessages": "No messages were found",
"NrOfMessagesToShow": "Number of messages to show",
"PropertyPaneDescription": "Messages web part configuration",
"ViewAll": "View the full list"
}
});

View File

@ -0,0 +1,13 @@
declare interface IPersonalEmailWebPartStrings {
Error: string;
Loading: string;
NoMessages: string;
NrOfMessagesToShow: string;
PropertyPaneDescription: string;
ViewAll: string;
}
declare module 'PersonalEmailWebPartStrings' {
const strings: IPersonalEmailWebPartStrings;
export = strings;
}

View File

@ -0,0 +1,34 @@
{
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
]
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
}

View File

@ -0,0 +1,32 @@
{
"rulesDirectory": [
"tslint-microsoft-contrib"
],
"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
}
}