Added v2 web part and upgraded to SPFx 1.8.2 (#877)
This commit is contained in:
Hugo Bernier
Vesa Juvonen
parent
51c228f46d
commit
97267e6ca2
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": true,
|
||||
"isCreatingSolution": false,
|
||||
"environment": "spo",
|
||||
"version": "1.8.1",
|
||||
"version": "1.8.2",
|
||||
"libraryName": "react-github-badge",
|
||||
"libraryId": "566f9f40-96ac-41b6-bf11-a1f4675dc838",
|
||||
"packageManager": "npm",
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
|
||||
React version of Eric Skaggs [@skaggej](https://www.twitter.com/skaggej) js-GitHubBadge sample.
|
||||
|
||||
Displays information from GitHub for a specified user.
|
||||
Displays information about a GitHub user.
|
||||
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -29,6 +29,7 @@ Converted from: [js-GitHubBadge](https://github.com/SharePoint/sp-dev-fx-webpart
|
|||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0 | April 18, 2019 | Initial release
|
||||
2.0 | June 06, 2019 | Upgraded to SPFx 1.8.2. Added GitHub Badge v2.
|
||||
|
||||
## Disclaimer
|
||||
|
||||
|
|
@ -47,6 +48,8 @@ Version|Date|Comments
|
|||
|
||||
This sample illustrates how to convert an existing Javascript-only SPFx web part to a React SPFx web part while keeping the same look and feel. Please refer to the [js-GitHubBadge](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/js-gitHubBadge) sample for the original Javascript-only web part.
|
||||
|
||||
A second webpart (called `GitHub Badge v2`) demonstrates how to render the same data using a Fabric UI persona card.
|
||||
|
||||
For more information about the conversion process, refer to this [blog article](https://tahoeninjas.blog/2019/04/19/converting-spfx-from-javascript-to-react/).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-github-badge" />
|
||||
|
|
|
|||
|
|
@ -9,10 +9,20 @@
|
|||
"manifest": "./src/webparts/gitHubBadge/GitHubBadgeWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
},
|
||||
"git-hub-badge-v-2-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/gitHubBadgeV2/GitHubBadgeV2WebPart.js",
|
||||
"manifest": "./src/webparts/gitHubBadgeV2/GitHubBadgeV2WebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"GitHubBadgeWebPartStrings": "lib/webparts/gitHubBadge/loc/{locale}.js"
|
||||
"GitHubBadgeWebPartStrings": "lib/webparts/gitHubBadge/loc/{locale}.js",
|
||||
"GitHubBadgeV2WebPartStrings": "lib/webparts/gitHubBadgeV2/loc/{locale}.js",
|
||||
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,30 +11,32 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "16.7.0",
|
||||
"react-dom": "16.7.0",
|
||||
"@types/react": "16.4.2",
|
||||
"@types/react-dom": "16.0.5",
|
||||
"@microsoft/sp-core-library": "1.8.1",
|
||||
"@microsoft/sp-property-pane": "1.8.1",
|
||||
"@microsoft/sp-webpart-base": "1.8.1",
|
||||
"@microsoft/sp-lodash-subset": "1.8.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.8.1",
|
||||
"@microsoft/sp-core-library": "1.8.2",
|
||||
"@microsoft/sp-lodash-subset": "1.8.2",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.8.2",
|
||||
"@microsoft/sp-property-pane": "1.8.2",
|
||||
"@microsoft/sp-webpart-base": "1.8.2",
|
||||
"@pnp/spfx-controls-react": "1.13.2",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.7.22",
|
||||
"@types/react-dom": "16.8.0",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"@types/es6-promise": "0.0.33"
|
||||
"office-ui-fabric-react": "6.143.0",
|
||||
"react": "16.7.0",
|
||||
"react-dom": "16.7.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.4.2"
|
||||
"@types/react": "16.7.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "1.8.1",
|
||||
"@microsoft/sp-tslint-rules": "1.8.1",
|
||||
"@microsoft/sp-module-interfaces": "1.8.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.8.1",
|
||||
"@microsoft/rush-stack-compiler-2.7": "0.4.0",
|
||||
"gulp": "~3.9.1",
|
||||
"@microsoft/rush-stack-compiler-2.9": "0.7.7",
|
||||
"@microsoft/sp-build-web": "1.8.2",
|
||||
"@microsoft/sp-module-interfaces": "1.8.2",
|
||||
"@microsoft/sp-tslint-rules": "1.8.2",
|
||||
"@microsoft/sp-webpart-workbench": "1.8.2",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2"
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,280 @@
|
|||
# Upgrade project C:\github\sp-dev-fx-webparts\samples\react-github-badge to v1.8.2
|
||||
|
||||
Date: 2019-6-6
|
||||
|
||||
## Findings
|
||||
|
||||
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.8.2. [Summary](#Summary) of the modifications is included at the end of the report.
|
||||
|
||||
### FN001001 @microsoft/sp-core-library | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-core-library
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-core-library@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001002 @microsoft/sp-lodash-subset | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-lodash-subset@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001003 @microsoft/sp-office-ui-fabric-core | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-office-ui-fabric-core@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001004 @microsoft/sp-webpart-base | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-webpart-base@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001005 @types/react | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @types/react
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @types/react@16.7.22 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001006 @types/react-dom | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @types/react-dom
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @types/react-dom@16.8.0 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001021 @microsoft/sp-property-pane | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-property-pane@1.8.2 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN001022 office-ui-fabric-react | Required
|
||||
|
||||
Install SharePoint Framework dependency package office-ui-fabric-react
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i office-ui-fabric-react@6.143.0 -SE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002001 @microsoft/sp-build-web | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-build-web@1.8.2 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002002 @microsoft/sp-module-interfaces | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-module-interfaces@1.8.2 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002003 @microsoft/sp-webpart-workbench | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-webpart-workbench@1.8.2 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002009 @microsoft/sp-tslint-rules | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-tslint-rules@1.8.2 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002010 @microsoft/rush-stack-compiler-2.7 | Required
|
||||
|
||||
Remove SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-2.7
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm un @microsoft/rush-stack-compiler-2.7 -D
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN002011 @microsoft/rush-stack-compiler-2.9 | Required
|
||||
|
||||
Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-2.9
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i @microsoft/rush-stack-compiler-2.9@0.7.7 -DE
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN010001 .yo-rc.json version | Recommended
|
||||
|
||||
Update version in .yo-rc.json
|
||||
|
||||
In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.8.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
File: [./.yo-rc.json](./.yo-rc.json)
|
||||
|
||||
### FN012017 tsconfig.json extends property | Required
|
||||
|
||||
Update tsconfig.json extends property
|
||||
|
||||
In file [./tsconfig.json](./tsconfig.json) update the code as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json"
|
||||
}
|
||||
```
|
||||
|
||||
File: [./tsconfig.json](./tsconfig.json)
|
||||
|
||||
### FN020001 @types/react | Required
|
||||
|
||||
Add resolution for package @types/react
|
||||
|
||||
In file [./package.json](./package.json) update the code as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"resolutions": {
|
||||
"@types/react": "16.7.22"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
### FN017001 Run npm dedupe | Optional
|
||||
|
||||
If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm dedupe
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
## Summary
|
||||
|
||||
### Execute script
|
||||
|
||||
```sh
|
||||
npm i @microsoft/sp-core-library@1.8.2 @microsoft/sp-lodash-subset@1.8.2 @microsoft/sp-office-ui-fabric-core@1.8.2 @microsoft/sp-webpart-base@1.8.2 @types/react@16.7.22 @types/react-dom@16.8.0 @microsoft/sp-property-pane@1.8.2 office-ui-fabric-react@6.143.0 -SE
|
||||
npm i @microsoft/sp-build-web@1.8.2 @microsoft/sp-module-interfaces@1.8.2 @microsoft/sp-webpart-workbench@1.8.2 @microsoft/sp-tslint-rules@1.8.2 @microsoft/rush-stack-compiler-2.9@0.7.7 -DE
|
||||
npm un @microsoft/rush-stack-compiler-2.7 -D
|
||||
npm dedupe
|
||||
```
|
||||
|
||||
### Modify files
|
||||
|
||||
#### [./.yo-rc.json](./.yo-rc.json)
|
||||
|
||||
Update version in .yo-rc.json:
|
||||
|
||||
```json
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.8.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### [./tsconfig.json](./tsconfig.json)
|
||||
|
||||
Update tsconfig.json extends property:
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json"
|
||||
}
|
||||
```
|
||||
|
||||
#### [./package.json](./package.json)
|
||||
|
||||
Add resolution for package @types/react:
|
||||
|
||||
```json
|
||||
{
|
||||
"resolutions": {
|
||||
"@types/react": "16.7.22"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
"group": { "default": "Other" },
|
||||
"title": { "default": "GitHub Badge" },
|
||||
"description": { "default": "Displays information from GitHub for a specified user" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"officeFabricIconFontName": "GitGraph",
|
||||
"properties": {
|
||||
"gitHubUserName": "skaggej"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import styles from './GitHubBadge.module.scss';
|
||||
import { IGitHubBadgeProps, IGitHubBadgeState } from './GitHubBadge.types';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import { IGitHubService, IGitHubUserProfile, MockGitHubService, GitHubService } from '../../../services/GitHubServices';
|
||||
|
||||
export default class GitHubBadge extends React.Component<IGitHubBadgeProps, IGitHubBadgeState> {
|
||||
|
|
@ -17,12 +16,12 @@ export default class GitHubBadge extends React.Component<IGitHubBadgeProps, IGit
|
|||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
this.getUserProfile();
|
||||
this.getGitHubData();
|
||||
}
|
||||
|
||||
public componentDidUpdate(prevProps: IGitHubBadgeProps, prevState: IGitHubBadgeState): void {
|
||||
if (prevProps.gitHubUserName !== this.props.gitHubUserName) {
|
||||
this.getUserProfile();
|
||||
this.getGitHubData();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,7 +85,7 @@ export default class GitHubBadge extends React.Component<IGitHubBadgeProps, IGit
|
|||
);
|
||||
}
|
||||
|
||||
private getUserProfile() {
|
||||
private getGitHubData() {
|
||||
// Create an instance of the GitHub service
|
||||
//const service: IGitHubService = new MockGitHubService();
|
||||
const service: IGitHubService = new GitHubService(this.props.httpClient);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "991bd02a-c6ff-44a7-aca2-032c662fccbe",
|
||||
"alias": "GitHubBadgeV2WebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||
"group": { "default": "Other" },
|
||||
"title": { "default": "GitHub Badge v2" },
|
||||
"description": { "default": "Displays information about a GitHub user" },
|
||||
"officeFabricIconFontName": "GitGraph",
|
||||
"properties": {
|
||||
"gitHubUserName": "skaggej"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||
import {
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-property-pane';
|
||||
|
||||
import * as strings from 'GitHubBadgeV2WebPartStrings';
|
||||
import GitHubBadgeV2 from './components/GitHubBadgeV2';
|
||||
import { IGitHubBadgeV2Props } from './components/IGitHubBadgeV2.types';
|
||||
|
||||
export interface IGitHubBadgeV2WebPartProps {
|
||||
gitHubUserName: string;
|
||||
}
|
||||
|
||||
export default class GitHubBadgeV2WebPart extends BaseClientSideWebPart<IGitHubBadgeV2WebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IGitHubBadgeV2Props > = React.createElement(
|
||||
GitHubBadgeV2,
|
||||
{
|
||||
gitHubUserName: this.properties.gitHubUserName,
|
||||
httpClient: this.context.httpClient,
|
||||
displayMode: this.displayMode,
|
||||
onConfigure: () =>{
|
||||
this.context.propertyPane.open();
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected get disableReactivePropertyChanges(): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupFields: [
|
||||
PropertyPaneTextField('gitHubUserName', {
|
||||
label: strings.GitHubUserNameFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.gitHubBadgeV2 {
|
||||
|
||||
.label {
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
font-size: $ms-font-size-m;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.personaIcon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
import * as React from 'react';
|
||||
import styles from './GitHubBadgeV2.module.scss';
|
||||
import { IGitHubBadgeV2Props, IGitHubBadgeV2State } from './IGitHubBadgeV2.types';
|
||||
import { IGitHubService, IGitHubUserProfile, MockGitHubService, GitHubService } from '../../../services/GitHubServices';
|
||||
import { IPersonaProps, Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
|
||||
import { Shimmer, ShimmerElementsGroup, ShimmerElementType } from 'office-ui-fabric-react/lib/Shimmer';
|
||||
import { Icon } from 'office-ui-fabric-react/lib/Icon';
|
||||
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
|
||||
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
|
||||
import { DisplayMode } from '@microsoft/sp-core-library';
|
||||
import * as strings from 'GitHubBadgeV2WebPartStrings';
|
||||
|
||||
/**
|
||||
* This sample demonstrates how easy it is to change how a web part is rendered
|
||||
* using a Fabric UI Persona component.
|
||||
*
|
||||
* In a real-world situation, we wouldn't have two web parts (GitHubBadge and GitHubBadgeV2);
|
||||
* We wanted to demonstrate how the changes to the web part are limited to the component
|
||||
*/
|
||||
export default class GitHubBadgeV2 extends React.Component<IGitHubBadgeV2Props, IGitHubBadgeV2State> {
|
||||
constructor(props: IGitHubBadgeV2Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isLoading: this.props.gitHubUserName !== ""
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* When the component mounts, get data
|
||||
*/
|
||||
public componentDidMount(): void {
|
||||
this.getGitHubData();
|
||||
}
|
||||
|
||||
/**
|
||||
* If the username changes, reload the data
|
||||
*/
|
||||
public componentDidUpdate(prevProps: IGitHubBadgeV2Props, prevState: IGitHubBadgeV2State): void {
|
||||
if (prevProps.gitHubUserName !== this.props.gitHubUserName) {
|
||||
this.getGitHubData();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a shimmer when loading,
|
||||
* a persona when data is loaded,
|
||||
* and an error message if anything goes wrong
|
||||
*/
|
||||
public render(): React.ReactElement<IGitHubBadgeV2Props> {
|
||||
const { userProfile, isLoading, errorMessage } = this.state;
|
||||
|
||||
return (
|
||||
<div className={styles.gitHubBadgeV2}>
|
||||
{/* Show a shimmer when loading */}
|
||||
{isLoading &&
|
||||
<Shimmer customElementsGroup={this.getCustomElements()} isDataLoaded={false}>
|
||||
<Persona size={PersonaSize.size100} presence={PersonaPresence.none} />
|
||||
</Shimmer>
|
||||
}
|
||||
{/* If no username was specified, show a placeholder */}
|
||||
{!isLoading && this.props.gitHubUserName === "" &&
|
||||
<Placeholder iconName={strings.PlaceholderIconName}
|
||||
iconText={strings.PlaceholderIconText}
|
||||
description={strings.PlaceholderDescription}
|
||||
buttonLabel={strings.PlaceholderButtonLabel}
|
||||
onConfigure={this.props.onConfigure}
|
||||
hideButton={this.props.displayMode === DisplayMode.Read}
|
||||
/>
|
||||
}
|
||||
{/* If we're done loading and have a user id, show the profile */}
|
||||
{!isLoading && this.props.gitHubUserName !== "" && userProfile && userProfile.id !== undefined &&
|
||||
<Persona
|
||||
imageUrl={userProfile.avatar_url}
|
||||
imageAlt={userProfile.name}
|
||||
text={userProfile.name}
|
||||
secondaryText={userProfile.bio}
|
||||
tertiaryText={userProfile.company}
|
||||
optionalText={userProfile.location}
|
||||
size={PersonaSize.size100}
|
||||
presence={PersonaPresence.none}
|
||||
hidePersonaDetails={false}
|
||||
onRenderOptionalText={this.onRenderOptionalText}
|
||||
onRenderTertiaryText={this.onRenderTertiaryText}
|
||||
/>
|
||||
}
|
||||
{/* If we're done loading and don't have a user id, user does not exist. Show an unknown user */}
|
||||
{!isLoading && this.props.gitHubUserName !== "" && userProfile && userProfile.id === undefined &&
|
||||
<Persona
|
||||
showUnknownPersonaCoin={true}
|
||||
text={strings.PersonaUserNotFound}
|
||||
size={PersonaSize.size100}
|
||||
/>
|
||||
}
|
||||
{/* If something went wrong, show an error message */}
|
||||
{!isLoading && errorMessage &&
|
||||
<MessageBar messageBarType={MessageBarType.error} isMultiline={true} dismissButtonAriaLabel={strings.MessageBarDismissLabel}>
|
||||
{errorMessage}
|
||||
</MessageBar>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrive data from GitHub
|
||||
*/
|
||||
private getGitHubData() {
|
||||
// Don't retrieve anything if there isn't a username
|
||||
if (this.props.gitHubUserName === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create an instance of the GitHub service
|
||||
//const service: IGitHubService = new MockGitHubService();
|
||||
const service: IGitHubService = new GitHubService(this.props.httpClient);
|
||||
|
||||
// Call the GitHub service
|
||||
service.getUserProfile(this.props.gitHubUserName).then((results: IGitHubUserProfile) => {
|
||||
// Set the userProfile with the results we got and isLoading to false, because we're done
|
||||
// loading. It'll make things redraw magically.
|
||||
this.setState({
|
||||
userProfile: results,
|
||||
isLoading: false
|
||||
});
|
||||
}, (error:any)=>{
|
||||
// Oops, we got an error.
|
||||
// Save the error message so we can display it.
|
||||
this.setState({
|
||||
errorMessage: error,
|
||||
isLoading: false
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the persona's tertiary text with a people icon to mimic the GitHub profile
|
||||
*/
|
||||
private onRenderTertiaryText = (props: IPersonaProps): JSX.Element => {
|
||||
return (
|
||||
<div>
|
||||
<Icon iconName={'People'} className={styles.personaIcon} />
|
||||
{props.tertiaryText}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the persona's optional text with a point of
|
||||
* interest icon to mimic GitHub's profile
|
||||
*/
|
||||
private onRenderOptionalText = (props: IPersonaProps): JSX.Element => {
|
||||
return (
|
||||
<div>
|
||||
<Icon iconName={'POI'} className={styles.personaIcon} />
|
||||
{props.optionalText}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a custom shimmer that looks like a persona
|
||||
*/
|
||||
private getCustomElements = (): JSX.Element => {
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<ShimmerElementsGroup
|
||||
shimmerElements={[{ type: ShimmerElementType.circle, height: 100 }, { type: ShimmerElementType.gap, width: 16, height: 40 }]}
|
||||
/>
|
||||
<ShimmerElementsGroup
|
||||
flexWrap={true}
|
||||
width="100%"
|
||||
shimmerElements={[
|
||||
{ type: ShimmerElementType.line, width: '100%', height: 10, verticalAlign: 'bottom' },
|
||||
{ type: ShimmerElementType.line, width: '90%', height: 8 },
|
||||
{ type: ShimmerElementType.gap, width: '10%', height: 20 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { IGitHubUserProfile } from "../../../services/GitHubServices";
|
||||
import { HttpClient } from '@microsoft/sp-http';
|
||||
import { DisplayMode } from '@microsoft/sp-core-library';
|
||||
|
||||
export interface IGitHubBadgeV2Props {
|
||||
gitHubUserName: string;
|
||||
httpClient: HttpClient;
|
||||
displayMode: DisplayMode;
|
||||
onConfigure: () => void;
|
||||
}
|
||||
|
||||
export interface IGitHubBadgeV2State {
|
||||
isLoading: boolean;
|
||||
userProfile?: IGitHubUserProfile;
|
||||
errorMessage?: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
define([], function() {
|
||||
return {
|
||||
PersonaUserNotFound: "User not found",
|
||||
MessageBarDismissLabel: "Close",
|
||||
PlaceholderButtonLabel: "Configure",
|
||||
PlaceholderDescription: "To get started, please specify the GitHub username you wish to display.",
|
||||
PlaceholderIconText: "Provide a GitHub username",
|
||||
PlaceholderIconName: "Edit",
|
||||
PropertyPaneDescription: "Specify the name of the GitHub user whose GitHub profile you wish to display",
|
||||
GitHubUserNameFieldLabel: "GitHub user name"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
declare interface IGitHubBadgeV2WebPartStrings {
|
||||
PersonaUserNotFound: string;
|
||||
MessageBarDismissLabel: string;
|
||||
PlaceholderButtonLabel: string;
|
||||
PlaceholderDescription: string;
|
||||
PlaceholderIconText: string;
|
||||
PlaceholderIconName: string;
|
||||
PropertyPaneDescription: string;
|
||||
GitHubUserNameFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'GitHubBadgeV2WebPartStrings' {
|
||||
const strings: IGitHubBadgeV2WebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json",
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue