v1.0.4

README.md

@@ -1,6 +1,6 @@
 # SPFx Fantastic 40 Web Parts
 
-![release](https://img.shields.io/badge/release-v1.0.3-blue.svg)
+![release](https://img.shields.io/badge/release-v1.0.4-blue.svg)
 ![status](https://img.shields.io/badge/status-stable-green.svg)
 ![mit](https://img.shields.io/badge/license-MIT-yellow.svg)
 
@@ -13,7 +13,7 @@ These webparts are available: **English, French, Spanish, German**.
 
 **IMPORTANT NOTE: These web parts are not officially supported by Microsoft. Please use the "Issues" tab on this site to report bug or requests for development.**
 
-**Current Version**: v1.0.3 - [Click here to download and install](https://github.com/OlivierCC/spfx-40-fantastics/wiki/Installation-process)
+**Current Version**: v1.0.4 - [Click here to download and install](https://github.com/OlivierCC/spfx-40-fantastics/wiki/Installation-process)
 
 **Current SPFx Release support** - ![GA](https://img.shields.io/badge/SPFx-General%20Availability-red.svg) - [Release Note](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-GA)
 

config/package-solution.json

@@ -2,7 +2,7 @@
   "solution": {
     "name": "SPFx Fantastic 40 WebParts",
     "id": "425c9654-a3f8-427e-827f-033979560b6b",
-    "version": "1.0.3.0"
+    "version": "1.0.4.0"
   },
   "paths": {
     "zippedPackage": "solution/spfx-fantastic-40.sppkg"

package.json

@@ -1,16 +1,16 @@
 {
   "name": "spfx-40-fantastics",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
   },
   "dependencies": {
    "@microsoft/sp-client-base": "~1.0.0",
-    "@microsoft/sp-core-library": "~1.0.0",
-    "@microsoft/sp-http": "^1.0.0",
-    "@microsoft/sp-loader": "^1.0.0",
-    "@microsoft/sp-webpart-base": "~1.0.0",
+    "@microsoft/sp-core-library": "~1.1.0",
+    "@microsoft/sp-http": "^1.1.1",
+    "@microsoft/sp-loader": "^1.1.1",
+    "@microsoft/sp-webpart-base": "~1.1.1",
     "@types/react": "0.14.46",
     "@types/react-addons-shallow-compare": "0.14.17",
     "@types/react-addons-test-utils": "0.14.15",
@@ -23,14 +23,14 @@
     "react": "15.4.2",
     "react-dom": "15.4.2",
     "orchestrator": "^0.3.8",
-    "sp-client-custom-fields": "^1.3.3",
+    "sp-client-custom-fields": "^1.3.5",
     "through2": "^2.0.3",
     "typewriting": "^1.2.2"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.0.1",
-    "@microsoft/sp-module-interfaces": "~1.0.0",
-    "@microsoft/sp-webpart-workbench": "~1.0.0",
+    "@microsoft/sp-build-web": "~1.1.0",
+    "@microsoft/sp-module-interfaces": "~1.1.0",
+    "@microsoft/sp-webpart-workbench": "~1.1.0",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0",
     "gulp": "~3.9.1"

src/webparts/accordion/AccordionWebPart.ts

@@ -197,6 +197,8 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
                     { id: 'Title', title: 'Title', required: true, type: CustomListFieldType.string }
                   ],
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   context: this.context,
                   key: "accordionCustomListField"

src/webparts/animatedText/AnimatedTextWebPart.ts

@@ -203,6 +203,8 @@ export default class AnimatedTextWebPart extends BaseClientSideWebPart<IAnimated
                   label: strings.Align,
                   initialValue: this.properties.align,
                   onPropertyChanged: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "animatedTextAlignField"
                 }),
@@ -212,6 +214,8 @@ export default class AnimatedTextWebPart extends BaseClientSideWebPart<IAnimated
                   previewFonts: true,
                   initialValue: this.properties.font,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "animatedTextFontField"
                 }),
@@ -221,20 +225,26 @@ export default class AnimatedTextWebPart extends BaseClientSideWebPart<IAnimated
                   preview: true,
                   initialValue: this.properties.fontSize,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "animatedTextFontSizeField"
                 }),
                 PropertyFieldColorPickerMini('fontColor', {
                   label: strings.FontColor,
                   initialColor: this.properties.fontColor,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "animatedTextFontColorField"
                 }),
                 PropertyFieldColorPickerMini('backgroundColor', {
                   label: strings.BackgroundColor,
                   initialColor: this.properties.backgroundColor,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "animatedTextBgColorField"
                 })

src/webparts/arcText/ArcTextWebPart.ts

@@ -153,6 +153,8 @@ export default class ArcTextWebPart extends BaseClientSideWebPart<IArcTextWebPar
                   previewFonts: true,
                   initialValue: this.properties.font,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "arcTextFontField"
                 }),
@@ -162,13 +164,17 @@ export default class ArcTextWebPart extends BaseClientSideWebPart<IArcTextWebPar
                   preview: true,
                   initialValue: this.properties.size,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "arcTextFontSizeField"
                 }),
                 PropertyFieldColorPicker('color', {
                   label: strings.ColorFieldLabel,
                   initialColor: this.properties.color,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "arcTextColorField"
                 })

src/webparts/audioEqualizer/AudioEqualizerWebPart.ts

@@ -155,6 +155,8 @@ export default class AudioEqualizerWebPart extends BaseClientSideWebPart<IAudioE
                   preserveRatio: true,
                   preserveRatioEnabled: true,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   disabled: false,
                   onGetErrorMessage: null,
@@ -201,20 +203,26 @@ export default class AudioEqualizerWebPart extends BaseClientSideWebPart<IAudioE
                   label: strings.color,
                   initialColor: this.properties.color,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "audioEqualizerColorField"
                 }),
                 PropertyFieldColorPickerMini('color1', {
                   label: strings.color1,
                   initialColor: this.properties.color1,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "audioEqualizerColor1Field"
                 }),
                 PropertyFieldColorPickerMini('color2', {
                   label: strings.color2,
                   initialColor: this.properties.color2,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "audioEqualizerColor2Field"
                 })

src/webparts/barChart/BarChartWebPart.ts

@@ -180,6 +180,8 @@ export default class BarChartWebPart extends BaseClientSideWebPart<IBarChartWebP
                     { id: 'Hover Color', title: "Hover Color", required: true, type: CustomListFieldType.colorMini }
                   ],
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   context: this.context,
                   properties: this.properties,
                   key: "barChartCustomListField"
@@ -193,6 +195,8 @@ export default class BarChartWebPart extends BaseClientSideWebPart<IBarChartWebP
                   preserveRatio: true,
                   preserveRatioEnabled: true,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   disabled: false,
                   onGetErrorMessage: null,
@@ -239,6 +243,8 @@ export default class BarChartWebPart extends BaseClientSideWebPart<IBarChartWebP
                   previewFonts: true,
                   initialValue: this.properties.titleFont,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "barChartFontField"
                 }),
@@ -248,13 +254,17 @@ export default class BarChartWebPart extends BaseClientSideWebPart<IBarChartWebP
                   preview: true,
                   initialValue: this.properties.titleSize,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "barChartTitleSizeField"
                 }),
                 PropertyFieldColorPickerMini('titleColor', {
                   label: strings.TitleColor,
                   initialColor: this.properties.titleColor,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "barChartTitleColorField"
                 })

src/webparts/bingTranslator/BingTranslatorWebPart.ts

@@ -180,13 +180,17 @@ export default class BingTranslatorWebPart extends BaseClientSideWebPart<IBingTr
                   label: strings.color,
                   initialColor: this.properties.color,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "bingTranslatorColorField"
                 }),
                 PropertyFieldColorPicker('backgroundColor', {
                   label: strings.backgroundColor,
                   initialColor: this.properties.backgroundColor,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "bingTranslatorBgColorField"
                 })

src/webparts/carousel3D/Carousel3DWebPart.ts

@@ -231,6 +231,8 @@ export default class Carousel3DWebPart extends BaseClientSideWebPart<ICarousel3D
                     { id: 'Link Text', title: 'Link Text', required: false, type: CustomListFieldType.string, hidden: true }
                   ],
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   context: this.context,
                   properties: this.properties,
                   key: "carousel3DListField"
@@ -355,6 +357,8 @@ export default class Carousel3DWebPart extends BaseClientSideWebPart<ICarousel3D
                   previewFonts: true,
                   initialValue: this.properties.font,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "carousel3DFontField"
                 }),
@@ -364,13 +368,17 @@ export default class Carousel3DWebPart extends BaseClientSideWebPart<ICarousel3D
                   preview: true,
                   initialValue: this.properties.fontSize,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "carousel3DFontSizeField"
                 }),
                 PropertyFieldColorPickerMini('fontColor', {
                   label: strings.ColorFieldLabel,
                   initialColor: this.properties.fontColor,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "carousel3DFontColorField"
                 })

src/webparts/coverflow/DockMenuWebPart.ts

@@ -187,6 +187,8 @@ export default class DockMenuWebPart extends BaseClientSideWebPart<IDockMenuWebP
                     { id: 'Link Text', title: 'Link Text', required: false, type: CustomListFieldType.string, hidden: true }
                   ],
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   context: this.context,
                   properties: this.properties,
                   key: "coverflowListField"
@@ -282,13 +284,17 @@ export default class DockMenuWebPart extends BaseClientSideWebPart<IDockMenuWebP
                   label: strings.TextPanelAlignFieldLabel,
                   initialValue: this.properties.textPanelAlign,
                   onPropertyChanged: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "coverflowAlignField"
                 }),
                 PropertyFieldFontPicker('textPanelFont', {
                   label: strings.TextPanelFontFieldLabel,
                   initialValue: this.properties.textPanelFont,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "coverflowFontField"
                 }),
@@ -298,20 +304,26 @@ export default class DockMenuWebPart extends BaseClientSideWebPart<IDockMenuWebP
                   usePixels: true,
                   preview: true,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "coverflowFontSizeField"
                 }),
                 PropertyFieldColorPickerMini('textPanelFontColor', {
                   label: strings.TextPanelFontColorFieldLabel,
                   initialColor: this.properties.textPanelFontColor,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "coverflowFontColorField"
                 }),
                 PropertyFieldColorPickerMini('textPanelBackgroundColor', {
                   label: strings.TextPanelBackgroundColorFieldLabel,
                   initialColor: this.properties.textPanelBackgroundColor,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
+                  render: this.render.bind(this),
+                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                   properties: this.properties,
                   key: "coverflowBackgroundColorField"
                 })