Update latest packages (#849)

* Upgrade to SPFx 1.8.1

* Unmount property pane when pane is closed

* Remove unused config

* Move styles to sass

* Disabled dropdown
This commit is contained in:
Abraham Galindo 2019-05-08 14:37:08 -05:00 committed by Vesa Juvonen
parent 2bdb107864
commit 55ac20686a
26 changed files with 10896 additions and 141 deletions

View File

@ -1,20 +1,28 @@
{
"entries": [
{
"entry": "./lib/webparts/dropdownWithRemoteData/DropdownWithRemoteDataWebPart.js",
"manifest": "./src/webparts/dropdownWithRemoteData/DropdownWithRemoteDataWebPart.manifest.json",
"outputPath": "./dist/dropdown-with-remote-data.bundle.js"
},
{
"entry": "./lib/webparts/dropdownWithRemoteDataWithoutCustomControls/DropdownWithRemoteDataWithoutCustomControlsWebPart.js",
"manifest": "./src/webparts/dropdownWithRemoteDataWithoutCustomControls/DropdownWithRemoteDataWithoutCustomControlsWebPart.manifest.json",
"outputPath": "./dist/dropdown-with-remote-data-without-custom-controls.bundle.js"
}
],
"externals": {
},
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"externals": {},
"localizedResources": {
"dropdownWithRemoteDataStrings": "webparts/dropdownWithRemoteData/loc/{locale}.js",
"dropdownWithRemoteDataWithoutCustomControlsStrings": "webparts/dropdownWithRemoteDataWithoutCustomControls/loc/{locale}.js"
"dropdownWithRemoteDataStrings": "lib/webparts/dropdownWithRemoteData/loc/{locale}.js",
"dropdownWithRemoteDataWithoutCustomControlsStrings": "lib/webparts/dropdownWithRemoteDataWithoutCustomControls/loc/{locale}.js",
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
},
"bundles": {
"dropdown-with-remote-data-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/dropdownWithRemoteData/DropdownWithRemoteDataWebPart.js",
"manifest": "./src/webparts/dropdownWithRemoteData/DropdownWithRemoteDataWebPart.manifest.json"
}
]
},
"dropdown-with-remote-data-without-custom-controls-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/dropdownWithRemoteDataWithoutCustomControls/DropdownWithRemoteDataWithoutCustomControlsWebPart.js",
"manifest": "./src/webparts/dropdownWithRemoteDataWithoutCustomControls/DropdownWithRemoteDataWithoutCustomControlsWebPart.manifest.json"
}
]
}
}
}
}

View File

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

View File

@ -1,4 +1,5 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "react-custompropertypanecontrols",

View File

@ -1,8 +1,11 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "react-custompropertypanecontrols-client-side-solution",
"id": "21ba0db9-71ef-4f6b-8463-ce29e77e19f4",
"version": "2.0.1.0"
"version": "2.0.1.0",
"includeClientSideAssets": true,
"isDomainIsolated": false
},
"paths": {
"zippedPackage": "solution/react-custompropertypanecontrols.sppkg"

View File

@ -1,4 +1,5 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"initialPage": "https://localhost:5432/workbench",
"https": true,

View File

@ -1,45 +0,0 @@
{
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
// project). If true, this flag will deactivate any of these rules.
"removeExistingRules": true,
// When true, the TSLint task is configured with some default TSLint "rules.":
"useDefaultConfigAsBase": false,
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
// which are active, other than the list of rules below.
"lintConfig": {
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
"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-case": true,
"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-unused-imports": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false
}
}
}

View File

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

View File

@ -3,4 +3,6 @@
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);

View File

@ -6,26 +6,35 @@
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-client-base": "~1.0.0",
"@microsoft/sp-core-library": "~1.0.0",
"@microsoft/sp-webpart-base": "~1.0.0",
"@types/react": "0.14.46",
"@types/react-addons-shallow-compare": "0.14.17",
"@types/react-addons-test-utils": "0.14.15",
"@types/react-addons-update": "0.14.14",
"@types/react-dom": "0.14.18",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"react": "15.4.2",
"@microsoft/sp-core-library": "1.8.1",
"@microsoft/sp-http": "1.8.1",
"@microsoft/sp-lodash-subset": "1.8.1",
"@microsoft/sp-property-pane": "1.8.1",
"@microsoft/sp-webpart-base": "1.8.1",
"@pnp/spfx-controls-react": "1.12.0",
"@types/es6-promise": "0.0.33",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@types/webpack-env": "1.13.1",
"office-ui-fabric-react": "5.132.0",
"react": "16.7.0",
"react-addons-update": "^15.5.2",
"react-dom": "15.4.2"
"react-dom": "16.7.0"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.0.1",
"@microsoft/sp-module-interfaces": "~1.0.0",
"@microsoft/sp-webpart-workbench": "~1.0.0",
"@microsoft/rush-stack-compiler-2.7": "0.4.0",
"@microsoft/sp-build-web": "1.8.1",
"@microsoft/sp-module-interfaces": "1.8.1",
"@microsoft/sp-tslint-rules": "1.8.1",
"@microsoft/sp-webpart-workbench": "1.8.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "5.2.2",
"assert": "1.4.1",
"gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0"
"tslint": "5.0.0",
"tslint-microsoft-contrib": "5.0.0",
"typescript": "2.4.2"
},
"scripts": {
"build": "gulp bundle",

File diff suppressed because it is too large Load Diff

View File

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

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';
import { IPropertyPaneAsyncDropdownProps } from './IPropertyPaneAsyncDropdownProps';
import { IPropertyPaneAsyncDropdownInternalProps } from './IPropertyPaneAsyncDropdownInternalProps';
@ -30,7 +27,8 @@ export class PropertyPaneAsyncDropdown implements IPropertyPaneField<IPropertyPa
onPropertyChange: properties.onPropertyChange,
selectedKey: properties.selectedKey,
disabled: properties.disabled,
onRender: this.onRender.bind(this)
onRender: this.onRender.bind(this),
onDispose: this.onDispose.bind(this)
};
}
@ -42,6 +40,10 @@ export class PropertyPaneAsyncDropdown implements IPropertyPaneField<IPropertyPa
this.onRender(this.elem);
}
private onDispose(element: HTMLElement): void {
ReactDom.unmountComponentAtNode(element);
}
private onRender(elem: HTMLElement): void {
if (!this.elem) {
this.elem = elem;
@ -59,7 +61,7 @@ export class PropertyPaneAsyncDropdown implements IPropertyPaneField<IPropertyPa
ReactDom.render(element, elem);
}
private onChanged(option: IDropdownOption, index?: number): void {
private onChanged(option: IDropdownOption, index?: number): void {
//set the old value to what was the new value;
var oldValue : any = this.storedValue;

View File

@ -1,15 +1,16 @@
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "e134b73a-b441-43c5-8569-e10b665281af",
"alias":"ReactDropdownWithRemoteData",
"componentType": "WebPart",
"version": "0.0.2",
"version": "*",
"manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"safeWithCustomScriptDisabled": false,
"preconfiguredEntries": [{
"groupId": "e134b73a-b441-43c5-8569-e10b665281af",
"group": { "default": "Under Development" },
"group": { "default": "Other" },
"title": { "default": "Dropdown with custom properties" },
"description": { "default": "Sample web part using a property bound to a dropdown control with remote data" },
"officeFabricIconFontName": "Page",

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 {
Environment,
EnvironmentType

View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { Fabric } from 'office-ui-fabric-react';
import { DisplayMode } from '@microsoft/sp-core-library';
import { Placeholder } from '@microsoft/sp-webpart-base';
import { Placeholder } from "@pnp/spfx-controls-react/lib/PlaceHolder";
import { IConfigProps } from './IConfigProps';
export class Config extends React.Component<IConfigProps, {}> {
@ -10,15 +10,15 @@ export class Config extends React.Component<IConfigProps, {}> {
<Fabric>
{ this.props.displayMode === DisplayMode.Edit &&
<Placeholder
icon="ms-Icon--CheckboxComposite"
iconName="CheckboxComposite"
iconText="Custom Properties"
description="Set custom properties."
buttonLabel="Configure"
onAdd={ this.props.configure } />
onConfigure={ this.props.configure } />
}
{ this.props.displayMode === DisplayMode.Read &&
<Placeholder
icon="ms-ICon--CheckboxComposite"
iconName="CheckboxComposite"
iconText="Custom Properties"
description="Set custom properties." />
}

View File

@ -1,3 +1,5 @@
@import '~office-ui-fabric-react/dist/sass/_References.scss';
.dropdownWithRemoteData {
.container {
max-width: 700px;
@ -6,8 +8,26 @@
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-xl;
}
.subTitle {
@include ms-font-m;
}
.listItem {
max-width: 715px;

View File

@ -5,7 +5,7 @@ import { IDropdownWithRemoteDataProps } from './IDropdownWithRemoteDataProps';
import { Config } from './Config';
export default class DropdownWithRemoteData extends React.Component<IDropdownWithRemoteDataProps, void> {
export default class DropdownWithRemoteData extends React.Component<IDropdownWithRemoteDataProps, {}> {
public render(): React.ReactElement<IDropdownWithRemoteDataProps> {
const { needsConfiguration, configureWebPart} = this.props;
@ -17,15 +17,15 @@ export default class DropdownWithRemoteData extends React.Component<IDropdownWit
}
{ needsConfiguration === false &&
<div className={styles.container}>
<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
<div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
<p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>Welcome to SharePoint!</span>
<p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
<p className='ms-font-l ms-fontColor-white'>
<p className={styles.subTitle}>
Selected list ID: {this.props.list || 'no list selected'}
</p>
<p className='ms-font-l ms-fontColor-white'>
<p className={styles.subTitle}>
Selected item ID: {this.props.item || 'no item selected'}
</p>

View File

@ -16,10 +16,10 @@ export class ListService implements IListService {
public getLists(): Promise<IList[]> {
var httpClientOptions : ISPHttpClientOptions = {};
httpClientOptions.headers = {
'Accept': 'application/json;odata=nometadata',
'odata-version': ''
};
// httpClientOptions.headers = {
// 'Accept': 'application/json;odata=nometadata',
// 'odata-version': ''
// };
return new Promise<IList[]>((resolve: (results: IList[]) => void, reject: (error: any) => void): void => {
this.context.spHttpClient.get(this.context.pageContext.web.serverRelativeUrl + `/_api/web/lists?$select=id,title`,
@ -40,10 +40,10 @@ export class ListService implements IListService {
public getList(listName: string): Promise<IListItem[]> {
var httpClientOptions : ISPHttpClientOptions = {};
httpClientOptions.headers = {
'Accept': 'application/json;odata=nometadata',
'odata-version': ''
};
// httpClientOptions.headers = {
// 'Accept': 'application/json;odata=nometadata',
// 'odata-version': ''
// };
return new Promise<IListItem[]>((resolve: (results: IListItem[]) => void, reject: (error: any) => void): void => {
this.context.spHttpClient.get(this.context.pageContext.web.serverRelativeUrl + `/_api/web/lists('${listName}')/items?$select=Id,Title`,

View File

@ -1,15 +1,16 @@
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "ec34b5c6-7708-42ad-841e-46f2b75a074e",
"alias":"ReactDropdownwRemoteDataWOCustomControl",
"componentType": "WebPart",
"version": "0.0.2",
"version": "*",
"manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"safeWithCustomScriptDisabled": false,
"preconfiguredEntries": [{
"groupId": "ec34b5c6-7708-42ad-841e-46f2b75a074e",
"group": { "default": "Under Development" },
"group": { "default": "Other" },
"title": { "default": "Dropdown with remote data (without custom controls)" },
"description": { "default": "Sample web part using a property bound to the standard dropdown control with remote data" },
"officeFabricIconFontName": "Page",

View File

@ -1,10 +1,7 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneDropdown
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneDropdown } from "@microsoft/sp-property-pane";
import {
Environment,
EnvironmentType
@ -128,7 +125,8 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
groupFields: [
PropertyPaneDropdown('list', {
label: strings.ListFieldLabel,
options: this.lists
options: this.lists,
disabled: this.listsDropdownDisabled
}),
PropertyPaneDropdown('item', {
label: strings.ItemFieldLabel,

View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { Fabric } from 'office-ui-fabric-react';
import { DisplayMode } from '@microsoft/sp-core-library';
import { Placeholder } from '@microsoft/sp-webpart-base';
import { Placeholder } from "@pnp/spfx-controls-react/lib/PlaceHolder";
import { IConfigProps } from './IConfigProps';
export class Config extends React.Component<IConfigProps, {}> {
@ -10,15 +10,15 @@ export class Config extends React.Component<IConfigProps, {}> {
<Fabric>
{ this.props.displayMode === DisplayMode.Edit &&
<Placeholder
icon="ms-Icon--CheckboxComposite"
iconName="CheckboxComposite"
iconText="Custom Properties"
description="Set custom properties."
buttonLabel="Configure"
onAdd={ this.props.configure } />
onConfigure={ this.props.configure } />
}
{ this.props.displayMode === DisplayMode.Read &&
<Placeholder
icon="ms-ICon--CheckboxComposite"
iconName="CheckboxComposite"
iconText="Custom Properties"
description="Set custom properties." />
}

View File

@ -5,7 +5,7 @@ import { IDropdownWithRemoteDataWithoutCustomControlsProps } from './IDropdownWi
import { Config } from './Config';
export default class DropdownWithRemoteDataWithoutCustomControls extends React.Component<IDropdownWithRemoteDataWithoutCustomControlsProps, void> {
export default class DropdownWithRemoteDataWithoutCustomControls extends React.Component<IDropdownWithRemoteDataWithoutCustomControlsProps, {}> {
public render(): React.ReactElement<IDropdownWithRemoteDataWithoutCustomControlsProps> {
const { needsConfiguration, configureWebPart} = this.props;

View File

@ -2,14 +2,37 @@
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"skipLibCheck": true,
"experimentalDecorators": true,
"outDir": "lib",
"lib": [
"es5",
"dom",
"es2015.collection"
],
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"es6-collections",
"webpack-env"
]
}
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
],
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json"
}

View File

@ -1,3 +1,30 @@
{
"rulesDirectory": "./config"
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"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
}
}

View File

@ -1,8 +0,0 @@
// Type definitions for Microsoft ODSP projects
// Project: ODSP
/* Global definition for UNIT_TEST builds
Code that is wrapped inside an if(UNIT_TEST) {...}
block will not be included in the final bundle when the
--ship flag is specified */
declare const UNIT_TEST: boolean;

View File

@ -1 +0,0 @@
/// <reference path="@ms/odsp.d.ts" />