Merge pull request #3 from pnp/master

FI
This commit is contained in:
Peter Paul Kirschner 2020-07-06 20:55:57 +02:00 committed by GitHub
commit 9cfbdaf142
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
246 changed files with 113535 additions and 49915 deletions

View File

@ -7,7 +7,7 @@ export class BaseService {
public baseUrl: string;
constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
this.baseUrl = (<any>window)._spPageContextInfo.webAbsoluteUrl;
}
@ -178,4 +178,4 @@ export class BaseService {
return deferred.promise;
}
}
}

View File

@ -0,0 +1,160 @@
{
"title": "solution-overview",
"steps": [
{
"file": "src/webparts/appInsightsDashboard/AppInsightsDashboardWebPart.ts",
"description": "Webpart properties declared to capture the below information\n1. **_AppId_** - Application ID of the Azure App Insights\n2. **_AppKey_** - Application key of the Azure App Insights",
"selection": {
"start": {
"line": 14,
"character": 1
},
"end": {
"line": 17,
"character": 2
}
}
},
{
"file": "src/webparts/appInsightsDashboard/components/AppInsightsDashboard.tsx",
"line": 22,
"description": "Upated the default class component to **React Functional component**.",
"selection": {
"start": {
"line": 22,
"character": 1
},
"end": {
"line": 22,
"character": 95
}
}
},
{
"file": "src/webparts/appInsightsDashboard/components/AppInsightsDashboard.tsx",
"line": 31,
"description": "Using **React Context API** feature to pass the properties using context instead of passing the properties to each component.",
"selection": {
"start": {
"line": 31,
"character": 3
},
"end": {
"line": 31,
"character": 44
}
}
},
{
"file": "src/webparts/appInsightsDashboard/components/AppInsightsDashboard.tsx",
"line": 52,
"description": "Child components for different statistics\n1. **_Page Views_**\n2. **_User statistics_**\n3. **_Performance statistics_**",
"selection": {
"start": {
"line": 44,
"character": 9
},
"end": {
"line": 52,
"character": 15
}
}
},
{
"file": "src/common/components/CustomPivot.tsx",
"line": 29,
"description": "Created a **custom Pivot component** using **Office UI Fabric Pivot control** to match the **Azure style**. All the statistics child components will use this custom pivot component for interval and timespan selection.",
"selection": {
"start": {
"line": 16,
"character": 9
},
"end": {
"line": 29,
"character": 15
}
}
},
{
"file": "src/common/components/DataList.tsx",
"line": 80,
"description": "Common **Details List** component using **Office UI Fabric Details list** control to display the data as a list for some of the statistics along with the graphical representation.",
"selection": {
"start": {
"line": 51,
"character": 9
},
"end": {
"line": 80,
"character": 15
}
}
},
{
"file": "src/common/enumHelper.ts",
"line": 28,
"description": "Enum collections for user selection\n1. **_Time Interval_**\n2. **_Time Span_**\n3. **_Segments_**",
"selection": {
"start": {
"line": 1,
"character": 1
},
"end": {
"line": 28,
"character": 2
}
}
},
{
"file": "src/common/Helper.ts",
"line": 7,
"description": "Common Helper class to define all the communications to **Azure App Insights API**."
},
{
"file": "src/common/components/PerformanceStatistics.tsx",
"line": 61,
"description": "Using **Kusto query** to read the information from **Azure App Insights** and then to populate the data in a **Details List** or **Chart**.",
"selection": {
"start": {
"line": 49,
"character": 13
},
"end": {
"line": 61,
"character": 87
}
}
},
{
"file": "src/common/Helper.ts",
"line": 78,
"description": "Passing the **Kusto query** to the helper method along with some key parameters.",
"selection": {
"start": {
"line": 69,
"character": 5
},
"end": {
"line": 78,
"character": 6
}
}
},
{
"file": "src/common/Helper.ts",
"line": 116,
"description": "Sending the final consolidated URL with query and dynamic values to another helper method to get the actual response from **Azure App Insights**.\nBelow is the post url used\n\n**https://api.applicationinsights.io/v1/app**",
"selection": {
"start": {
"line": 113,
"character": 5
},
"end": {
"line": 116,
"character": 6
}
}
}
],
"ref": "master"
}

View File

@ -1,6 +1,3 @@
:global{
@import 'node_modules/office-ui-fabric-react/dist/css/fabric.css';
}
.dataLabel {
padding-right: 3px;
font-size: 14px;
@ -78,6 +75,7 @@
}
.chartContainer {
height: 350px;
width: 100%;
}
.chart {
height: 358px !important;

View File

@ -2,10 +2,10 @@
"@microsoft/generator-sharepoint": {
"isCreatingSolution": false,
"environment": "spo",
"version": "1.7.1",
"version": "1.10.0",
"libraryName": "react-chartcontrol",
"libraryId": "fb9665fb-4455-4b7f-99ab-2195920871fd",
"packageManager": "npm",
"componentType": "webpart"
}
}
}

View File

@ -8,7 +8,7 @@ This sample contains several web parts that demonstrate how to use the ChartCont
The web parts in this sample are not intended to be used in production -- they simply demonstrate how you would use all the capabilities of the ChartControl.
> **NOTE:** If you are looking for a ready-to-use web part, please look into [joelfmrodrigues' cool react-modern-charts sample](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-modern-charts), which was built without the ChartControl.
> **NOTE:** If you are looking for a ready-to-use web part, please look into [joelfmrodrigues' cool react-modern-charts sample](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-modern-charts), which was built without the `ChartControl`.
## About the samples
@ -16,7 +16,7 @@ We created the ChartControl by popular request of [@pnp/spfx-controls-react](htt
To keep things as easy as possible, the ChartControl supports (most) of the Chart.js functionality (yes, even the use of plugins!).
The samples in this solution mostly use code found from the Chart.js code samples -- with little or no conversion. Whereever possible, we localized strings, moved colors and styles to the web part's SCSS, and used Office Fabric UI components instead of regular buttons.
The samples in this solution mostly use code found from the Chart.js code samples -- with little or no conversion. Wherever possible, we localized strings, moved colors and styles to the web part's SCSS, and used Office Fabric UI components instead of regular buttons.
Each sample retrieves data and passes it to the ChartControl using one of the 3 methods:
@ -170,7 +170,7 @@ This sample shows how to use X and Y coordinate data elements in a scatter chart
## Used SharePoint Framework Version
![SPFx v1.7.1](https://img.shields.io/badge/SPFx-1.7.1-green.svg)
![SPFx v1.10.0](https://img.shields.io/badge/SPFx-1.10.1-green.svg)
## Applies to
@ -192,6 +192,7 @@ react-chart-control | Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), @be
Version|Date|Comments
-------|----|--------
1.0|January, 2019|Initial release
1.1|July 02, 2020|Upgraded to SPFx 1.10.0
## Disclaimer

View File

@ -3,7 +3,7 @@
"solution": {
"name": "react-chartcontrol-client-side-solution",
"id": "fb9665fb-4455-4b7f-99ab-2195920871fd",
"version": "1.0.0.0",
"version": "1.1.0.0",
"includeClientSideAssets": true
},
"paths": {

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,7 @@
{
"main": "lib/index.js",
"name": "react-chartcontrol",
"version": "0.0.1",
"version": "1.1.0",
"private": true,
"engines": {
"node": ">=0.10.0"
@ -11,10 +12,11 @@
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.7.1",
"@microsoft/sp-lodash-subset": "1.7.1",
"@microsoft/sp-office-ui-fabric-core": "1.7.1",
"@microsoft/sp-webpart-base": "1.7.1",
"@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-lodash-subset": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@pnp/common": "^1.2.8",
"@pnp/logging": "^1.2.8",
"@pnp/odata": "^1.2.8",
@ -22,27 +24,29 @@
"@pnp/spfx-controls-react": "1.11.0",
"@pnp/spfx-property-controls": "^1.13.1",
"@types/es6-promise": "0.0.33",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"chartjs-plugin-streaming": "^1.7.1",
"color": "^3.1.0",
"moment": "^2.23.0",
"office-ui-fabric-react": "6.189.2",
"patternomaly": "^1.3.2",
"react": "16.3.2",
"react-dom": "16.3.2"
"react": "16.8.5",
"react-dom": "16.8.5"
},
"resolutions": {
"@types/react": "16.4.2"
"@types/react": "16.8.8"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.7.1",
"@microsoft/sp-tslint-rules": "1.7.1",
"@microsoft/sp-module-interfaces": "1.7.1",
"@microsoft/sp-webpart-workbench": "1.7.1",
"gulp": "~3.9.1",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.10.0",
"@microsoft/sp-module-interfaces": "1.10.0",
"@microsoft/sp-tslint-rules": "1.10.0",
"@microsoft/sp-webpart-workbench": "1.10.0",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
"ajv": "~5.2.2",
"gulp": "~3.9.1"
}
}

View File

@ -8,7 +8,7 @@
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": { "default": "Other" },

View File

@ -1,11 +1,8 @@
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 { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
import * as strings from 'AccessibleTableWebPartStrings';
import AccessibleTable from './components/AccessibleTable';

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.accessibleTable {
.shomMeTheTable {
@ -34,7 +35,9 @@
font-size: $ms-font-size-xl;
font-weight: $ms-font-weight-semibold;
& span {
font-size: $ms-font-size-16;
//font-size: $ms-font-size-16;
font-size: 16px;
}
}
}

View File

@ -3,7 +3,7 @@
"id": "fcba1920-e685-428a-8637-ab15883a2d0b",
"alias": "AreaChartDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,
"requiresCustomScript": false,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'AreaChartDemoWebPartStrings';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.areaChartDemo {
color:inherit;

View File

@ -122,7 +122,6 @@ export default class AreaChartDemo extends React.Component<IAreaChartDemoProps,
private _renderCommandBar(): JSX.Element {
return (
<CommandBar
isSearchBoxVisible={false}
items={[
{
key: 'randomizeData',

View File

@ -3,7 +3,7 @@
"id": "74f7231a-c3f1-4ef5-94e7-3d2dd97cb39b",
"alias": "BarChartDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -2,10 +2,8 @@ import * as React from 'react';
import * as ReactDom from 'react-dom';
import * as strings from 'BarChartDemoWebPartStrings';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import BarChartDemo from './components/BarChartDemo';
import { IBarChartDemoProps } from './components/IBarChartDemo.types';

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.barChartDemo {
color: inherit; // so that SCSS doesn't complain about an empty class

View File

@ -6,7 +6,7 @@
"version": "*",
"manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"requiresCustomScript": false,
"preconfiguredEntries": [{

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'BarChartStaticWebPartStrings';
import BarChartStatic from './components/BarChartStatic';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.barChartStatic {
.container {
@ -71,4 +72,4 @@
display: inline-block;
}
}
}
}

View File

@ -3,7 +3,7 @@
"id": "dd21a307-fd9f-4fef-8d9f-d8abcb83b814",
"alias": "BubbleChartDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'BubbleChartDemoWebPartStrings';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.bubbleChartDemo {
color: inherit;

View File

@ -108,7 +108,6 @@ export default class BubbleChartDemo extends React.Component<IBubbleChartDemoPro
private _renderCommandBar(): JSX.Element {
return (
<CommandBar
isSearchBoxVisible={false}
items={[
{
key: 'randomizeData',

View File

@ -5,6 +5,7 @@
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"requiresCustomScript": false,
"preconfiguredEntries": [
{

View File

@ -5,21 +5,8 @@ import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
// Stuff for out-of-the-box property panes
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneChoiceGroup,
PropertyPaneLabel,
PropertyPaneDropdown,
PropertyPaneToggle,
PropertyPaneTextField,
IPropertyPaneChoiceGroupOption,
PropertyPaneSlider,
IPropertyPaneGroup,
PropertyPaneButton,
IPropertyPaneDropdownOption,
PropertyPaneHorizontalRule
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneChoiceGroup, PropertyPaneLabel, PropertyPaneDropdown, PropertyPaneToggle, PropertyPaneTextField, IPropertyPaneChoiceGroupOption, PropertyPaneSlider, IPropertyPaneGroup, PropertyPaneButton, IPropertyPaneDropdownOption, PropertyPaneHorizontalRule } from "@microsoft/sp-property-pane";
// Needed to create drop down choices
import {

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.chartinator {
color: inherit;

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.chartTitle {
font-size: 14px;

View File

@ -1,4 +1,4 @@
import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
import { IPropertyFieldRepeatingDataProps } from '.';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.propertyPaneGroupField {
padding-top : 4px;

View File

@ -1,9 +1,6 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {
IPropertyPaneField,
PropertyPaneFieldType
} from '@microsoft/sp-webpart-base';
import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
import { IPropertyFieldRepeatingDataProps } from "./PropertyFieldRepeatingData.types";
import { IPropertyFieldRepeatingDataHostProps } from './PropertyFieldRepeatingData.types';

View File

@ -1,4 +1,4 @@
import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
import { ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
/**

View File

@ -1,4 +1,4 @@
import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
import { IPropertyPaneChartPaletteSelectorProps } from './IPropertyPaneChartPaletteSelectorProps';
export interface IPropertyPaneChartPaletteSelectorInternalProps extends IPropertyPaneCustomFieldProps, IPropertyPaneChartPaletteSelectorProps { }

View File

@ -1,9 +1,6 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {
IPropertyPaneField,
PropertyPaneFieldType
} from '@microsoft/sp-webpart-base';
import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';

View File

@ -1,4 +1,4 @@
import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
import { IPropertyPaneDashSelectorProps } from './IPropertyPaneDashSelectorProps';
export interface IPropertyPaneDashSelectorInternalProps extends IPropertyPaneCustomFieldProps, IPropertyPaneDashSelectorProps { }

View File

@ -1,9 +1,6 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {
IPropertyPaneField,
PropertyPaneFieldType
} from '@microsoft/sp-webpart-base';
import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.dashSelector {
color: inherit;

View File

@ -3,7 +3,7 @@
"id": "849fad01-2cf4-4653-88ef-1fa9151a7b17",
"alias": "ComboChartDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'ComboChartDemoWebPartStrings';

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.comboChartDemo {
color: inherit;

View File

@ -3,7 +3,7 @@
"id": "3bc38cb3-d1b1-4572-8196-679445d39d58",
"alias": "CustomPluginDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'CustomPluginDemoWebPartStrings';

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.customPluginDemo {
color: inherit;

View File

@ -3,7 +3,7 @@
"id": "907cfe87-fffe-4d9c-8fac-3ea23c3f2c09",
"alias": "DonutPatternsDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -3,10 +3,8 @@ import * as ReactDom from 'react-dom';
import * as strings from 'DonutPatternsDemoWebPartStrings';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import DonutPatternsDemo from './components/DonutPatternsDemo';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.donutPatternsDemo {
color:inherit;

View File

@ -3,7 +3,7 @@
"id": "eeadd4a5-4787-4d86-a606-17271bcfe81b",
"alias": "DynamicDataCallableWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,11 +1,8 @@
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 { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
import * as strings from 'DynamicDataCallableWebPartStrings';
import DynamicDataCallable from './components/DynamicDataCallable';

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.dynamicDataCallable {
color: inherit;

View File

@ -3,7 +3,7 @@
"id": "d5db1f38-c34b-4083-b2b0-99b09d9161b1",
"alias": "DynamicDataConsumerWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -3,16 +3,8 @@ import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
// standard web part stuff
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneDynamicFieldSet,
PropertyPaneDynamicField,
IPropertyPaneConditionalGroup,
DynamicDataSharedDepth,
IWebPartPropertiesMetadata
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, IWebPartPropertiesMetadata } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneDynamicFieldSet, PropertyPaneDynamicField, IPropertyPaneConditionalGroup, DynamicDataSharedDepth } from "@microsoft/sp-property-pane";
// dynamic data web parts
import { DynamicProperty } from '@microsoft/sp-component-base';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.dynamicDataConsumer {
.container {
@ -71,4 +72,4 @@
display: inline-block;
}
}
}
}

View File

@ -3,7 +3,7 @@
"id": "a63646aa-098e-4c3f-b1f4-f32e9eed4013",
"alias": "HorizontalBarDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'HorizontalBarDemoWebPartStrings';
import HorizontalBarDemo from './components/HorizontalBarDemo';

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.horizontalBarDemo {
color: inherit;

View File

@ -77,7 +77,6 @@ export default class HorizontalBarDemo extends React.Component<IHorizontalBarDem
private _renderCommandBar(): JSX.Element {
return (
<CommandBar
isSearchBoxVisible={false}
items={[
{
key: 'addData',

View File

@ -3,7 +3,7 @@
"id": "3b06de0f-5762-4160-8a2c-405f34a7d55d",
"alias": "LineChartDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -2,10 +2,8 @@ import * as React from 'react';
import * as ReactDom from 'react-dom';
import * as strings from 'LineChartDemoWebPartStrings';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import LineChartDemo from './components/LineChartDemo';
import { ILineChartDemoProps } from './components/ILineChartDemo.types';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.lineChartDemo {
color: inherit;

View File

@ -3,7 +3,7 @@
"id": "0ccdae4a-e8b0-4bd8-aba3-30d54444ee10",
"alias": "PieChartDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'PieChartDemoWebPartStrings';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.pieChartDemo {
color:inherit;

View File

@ -96,7 +96,6 @@ export default class PieChartDemo extends React.Component<IPieChartDemoProps, {}
private _renderCommandBar(): JSX.Element {
return (
<CommandBar
isSearchBoxVisible={false}
items={[
{
key: 'randomizeData',

View File

@ -3,7 +3,7 @@
"id": "75942037-254d-4c8d-a5d1-44031c957ebf",
"alias": "PolarAreaDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'PolarAreaDemoWebPartStrings';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.polarAreaDemo {
color: inherit;

View File

@ -87,7 +87,6 @@ export default class PolarAreaDemo extends React.Component<IPolarAreaDemoProps,
private _renderCommandBar(): JSX.Element {
return (
<CommandBar
isSearchBoxVisible={false}
items={[
{
key: 'randomizeData',

View File

@ -3,7 +3,7 @@
"id": "510b8ccc-c873-4a41-87ca-b43d94bb6d20",
"alias": "RadarDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'RadarDemoWebPartStrings';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.radarDemo {
color: inherit;

View File

@ -3,7 +3,7 @@
"id": "98c90b31-f355-4c24-9997-a7c25e0ff016",
"alias": "RealtimePluginDemoWebPart",
"componentType": "WebPart",
"supportedHosts": ["SharePointWebPart"],
"version": "*",
"manifestVersion": 2,

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'RealtimePluginDemoWebPartStrings';

View File

@ -1,4 +1,5 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.realtimePluginDemo {
color: inherit;

View File

@ -114,7 +114,6 @@ export default class RealtimePluginDemo extends React.Component<IRealtimePluginD
private _renderCommandBar(): JSX.Element {
return (
<CommandBar
isSearchBoxVisible={false}
items={[
{
key: 'randomizeData',

View File

@ -5,6 +5,7 @@
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"requiresCustomScript": false,
"preconfiguredEntries": [
{

View File

@ -1,10 +1,8 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';

View File

@ -1,4 +1,5 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import '~office-ui-fabric-react/dist/sass/References.scss';
.scatterChartDemo {
color: inherit;

View File

@ -1,5 +1,9 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"noUnusedLocals": false,
"inlineSources": false,
"strictNullChecks": false,
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",

View File

@ -2,11 +2,11 @@
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.8.2",
"version": "1.10.0",
"libraryName": "react-kanban-board",
"libraryId": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart"
}
}
}

View File

@ -1,16 +1,32 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- React
createdDate: 7/17/2019 12:00:00 AM
---
# React Kanban Board Webpart
## Summary
This solution contains an SPFx webpart which shows a Kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
This solution contains an SPFx webpart that shows a kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
The webpart uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.
![picture of the web part in action](assets/kanbanofficeUI.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
## Applies to
@ -43,29 +59,27 @@ Version|Date|Comments
-------|----|--------
1.0.0.0|July 17, 2019|Initial release
1.0.1.0|April 21, 2020|Added support for Teams hosts
2.0.0.0|July 10, 2020| jqwidgets replaced with a customKanban Board based on Office UI Component and IE11 Support
2.0.0.0|July 10, 2020| jqwidgets replaced with a custom Kanban Board based on Office UI Component and IE11 Support
[Read More about the implementation of this Board](./src/kanban/Readme.md)
[Read More about the implementation of this Board](./src/kanban/README.md)
## Usage
* PNP Placeholder Control if not Configured
* PNP WebpartTitle Control (Toggle Show/Hide in PropertyPane)
* PNP Order PropertyPane Control (Change Position of Buckets)
* PNP List Selection PropertyPane Control (including Filter on BaseTemplateId)
* Usage of BucketEdit in Pane (Use an Component in PropertyPane (Custom Field))
* PNP Placeholder control if not Configured
* PNP WebpartTitle control (toggle Show/Hide in property pane)
* PNP OrderPropertyPane control (change position of buckets)
* PNP ListSelectionPropertyPane control (including filtering on BaseTemplateId)
* Usage of BucketEdit in Pane (Use a component in property pane (custom field))
* Office UI Fabric
* PNP JS DataConnection to SharePoint
<!---Thanks form @petkir to: -->
<!---Thanks from @petkir to: -->
<!--- -->
<!---* [Daniel Westerdale](https://github.com/westerdaled) for Testing and inspiration (everytime again)-->
<!---* [Hugo Bernier](https://github.com/hugoabernier) for Inspiration to use Office UI Fabric -->
<!---* [Jean-Philippe CIVADE](https://github.com/ewidance) for Bug Report IE11 (initiator of rewrite of this Sample)-->
<!---* [Jean-Philippe CIVADE](https://github.com/ewidance) for Bug Report IE11 (initiator of rewrite of this sample)-->
<!---* [RamPrasadMeenavalli](https://github.com/RamPrasadMeenavalli) for the initial Idea-->
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
@ -83,9 +97,9 @@ Version|Date|Comments
## Features
This sample highlights the following concepts
* Binding SharePoint list data to an custom Kanban-Control
* Binding SharePoint list data to a custom Kanban-Control
* Updating SharePoint List Items based on events from the custom Kanban-Control
When a task is moved to different columns in the Kanban Board, the status of the respective SharePoint list item is updated using PnP JS
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-kanban-board" />

View File

@ -3,7 +3,7 @@
"solution": {
"name": "react-kanban-board-client-side-solution",
"id": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
"version": "1.0.1.0",
"version": "2.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,7 @@
{
"name": "react-kanban-board",
"version": "1.0.1",
"main": "lib/index.js",
"version": "2.0.0",
"private": true,
"engines": {
"node": ">=0.10.0"
@ -11,11 +12,11 @@
"test": "gulp test"
},
"dependencies": {
"@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",
"@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-lodash-subset": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@pnp/common": "^1.3.3",
"@pnp/logging": "^1.3.3",
"@pnp/odata": "^1.3.3",
@ -24,26 +25,28 @@
"@pnp/spfx-controls-react": "1.19.0",
"@pnp/spfx-property-controls": "1.19.0",
"@types/es6-promise": "0.0.33",
"@types/react": "16.7.22",
"@types/react-dom": "16.8.0",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"classnames": "^2.2.6",
"office-ui-fabric-react": "6.214.0",
"react": "16.7.0",
"react-dom": "16.7.0"
"react": "16.8.5",
"react-dom": "16.8.5"
},
"resolutions": {
"@types/react": "16.7.22"
"@types/react": "16.8.8"
},
"devDependencies": {
"@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",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.10.0",
"@microsoft/sp-module-interfaces": "1.10.0",
"@microsoft/sp-tslint-rules": "1.10.0",
"@microsoft/sp-webpart-workbench": "1.10.0",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"autoprefixer": "^9.8.4",
"gulp": "~3.9.1",
"react-html-parser": "^2.0.2"
}

View File

@ -4,9 +4,8 @@ import * as strings from 'KanbanBoardStrings';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { IKanbanTask } from './IKanbanTask';
import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings';
import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions';
import classNames from 'classnames';
import { IconNames, Persona, PersonaSize, Stack } from 'office-ui-fabric-react';
import { Persona, PersonaSize } from 'office-ui-fabric-react';
export interface IKanbanTaskProps extends IKanbanTask, IKanbanBoardTaskSettings {

View File

@ -4,9 +4,9 @@
import * as React from 'react';
import styles from './KanbanTaskManagedProp.module.scss';
import { IKanbanTaskManagedProps, KanbanTaskMamagedPropertyType } from './IKanbanTask';
import { IStackStyles, Stack } from 'office-ui-fabric-react/lib/Stack';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
import { Persona, PersonaSize, PersonaPresence, IPersonaSharedProps, IPersonaProps } from 'office-ui-fabric-react';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import ReactHtmlParser from 'react-html-parser';
import { Persona, PersonaSize, IPersonaProps } from 'office-ui-fabric-react';
export interface IKanbanTaskManagedPropProps extends IKanbanTaskManagedProps { }

View File

@ -184,6 +184,8 @@ private _allowMove(taskId: string, prevBucket: IKanbanBucket, targetBucket: IKan
```
## Leanings
Read more about [Drag and Drop](https://petkir.wordpress.com/2020/07/01/drag-and-drop-in-react-spfx/)
```
IKanbanTask {
taskId: string;

View File

@ -1,5 +1,5 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
"extends": "node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,

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

32
samples/react-minesweeper/.gitignore vendored Normal file
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,12 @@
{
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.10.0",
"libraryName": "spfx-minesweeper",
"libraryId": "550b232e-4d6f-476b-9594-e6408fc3e8bb",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart"
}
}

View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Pieter Heemeryck
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -0,0 +1,58 @@
# Minesweeper
## Summary
This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!
![Minesweeper](./assets/Minesweeper.gif)
## Used SharePoint Framework Version
![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites
None.
## Solution
Solution|Author(s)
--------|---------
react-minesweeper | [Pieter Heemeryck](https://twitter.com/heemeryckpieter)
## Version history
Version|Date|Comments
-------|----|--------
1.0|July, 2020|Initial release
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome
* Clone this repository
* in the command line run:
* `npm install`
* `gulp serve`
## Features
* Difficulties: Beginner, Intermediate, Expert
* High scores are stored in localStorage
* Mine mode / flag mode (swap left & right click), useful on mobile
* [Chording](http://www.minesweeper.info/wiki/Chord)
This Web Part illustrates the following concepts on top of the SharePoint Framework:
* [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-minesweeper" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 817 KiB

View File

@ -0,0 +1,18 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"minesweeper-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/minesweeper/MinesweeperWebPart.js",
"manifest": "./src/webparts/minesweeper/MinesweeperWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"MinesweeperWebPartStrings": "lib/webparts/minesweeper/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-minesweeper",
"accessKey": "<!-- ACCESS KEY -->"
}

View File

@ -0,0 +1,13 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "spfx-minesweeper-client-side-solution",
"id": "550b232e-4d6f-476b-9594-e6408fc3e8bb",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false
},
"paths": {
"zippedPackage": "solution/spfx-minesweeper.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 -->"
}

Some files were not shown because too many files have changed in this diff Show More