Merge pull request #28 from SharePoint/dev

Merge for release 1.3.0
pnp · Feb 2, 2018 · c420d43 · c420d43
2 parents 1aecc29 + 1cc081a
commit c420d43
Show file tree

Hide file tree

Showing 40 changed files with 637 additions and 40 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,6 @@ obj
 
 # Documentation
 docs/documentation/site
+
+# other files
+tslint.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,17 @@
 # Releases
 
-## 1.1.2
+## 1.3.0
+
+**New controls**
+
+- `PropertyFieldCodeEditor` got added
+
+**Enhancements**
+
+- `PropertyFieldTermPicker` improved with save and cancel button
+- `PropertyFieldTermPicker` improved with `onClick` event on input field
+
+## 1.2.0
 
 **Enhancements**
 

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,6 +1,17 @@
 # Releases
 
-## 1.1.2
+## 1.3.0
+
+**New controls**
+
+- `PropertyFieldCodeEditor` got added
+
+**Enhancements**
+
+- `PropertyFieldTermPicker` improved with save and cancel button
+- `PropertyFieldTermPicker` improved with `onClick` event on input field
+
+## 1.2.0
 
 **Enhancements**
 

diff --git a/docs/documentation/docs/assets/codeeditor-editing.png b/docs/documentation/docs/assets/codeeditor-editing.png
diff --git a/docs/documentation/docs/assets/codeeditor-initial.png b/docs/documentation/docs/assets/codeeditor-initial.png
diff --git a/docs/documentation/docs/controls/PropertyFieldButtonWithCallout.md b/docs/documentation/docs/controls/PropertyFieldButtonWithCallout.md
@@ -13,7 +13,7 @@ This control generates a button control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldCheckboxWithCallout.md b/docs/documentation/docs/controls/PropertyFieldCheckboxWithCallout.md
@@ -13,7 +13,7 @@ This control generates a checkbox control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldChoiceGroupWithCallout.md b/docs/documentation/docs/controls/PropertyFieldChoiceGroupWithCallout.md
@@ -13,7 +13,7 @@ This control generates a choice group control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldCodeEditor.md b/docs/documentation/docs/controls/PropertyFieldCodeEditor.md
@@ -0,0 +1,74 @@
+# PropertyFieldCodeEditor control
+
+This control generates a code editor which can be used to add custom styling or content to your web part.
+
+**PropertyFieldCodeEditor**
+
+![Code editor initial](../assets/codeeditor-initial.png)
+
+**PropertyFieldCodeEditor editing experience**
+
+![Code editor editing experience](../assets/codeeditor-editing.png)
+
+## How to use this control in your solutions
+
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
+2. Import the following modules to your component:
+
+```TypeScript
+import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';
+```
+
+3. Create a new property for your web part, for example:
+
+```TypeScript
+export interface IPropertyControlsTestWebPartProps {
+  htmlCode: string;
+}
+```
+
+4. Add the custom property control to the `groupFields` of the web part property pane configuration:
+
+```TypeScript
+PropertyFieldCodeEditor('htmlCode', {
+  label: 'Edit HTML Code',
+  panelTitle: 'Edit HTML Code',
+  initialValue: this.properties.htmlCode,
+  onPropertyChange: this.onPropertyPaneFieldChanged,
+  properties: this.properties,
+  disabled: false,
+  key: 'codeEditorFieldId',
+  language: PropertyFieldCodeEditorLanguages.HTML
+})
+```
+
+## Implementation
+
+The `PropertyFieldColorPicker` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| label | string | yes | Property field label displayed on top. |
+| disabled | boolean | no | Specify if the control needs to be disabled. |
+| panelTitle | string | yes | Title of the code editor panel. |
+| initialValue | string | no | Defines the initial code. |
+| language | PropertyFieldCodeEditorLanguages | no | Sets the language on the code editor. |
+| properties | any | yes | Parent web part properties, this object is use to update the property value.  |
+| onPropertyChange | function | yes | Defines a onPropertyChange function to raise when the date gets changed. |
+| key | string | yes | An unique key that indicates the identity of this control. |
+
+Enum `PropertyFieldCodeEditorLanguages`
+
+| Name |
+| ---- |
+| css |
+| JavaScript |
+| JSON |
+| Handlebars |
+| HTML |
+| Plain Text |
+| Sass |
+| TypeScript |
+| XML |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/PropertyFieldCodeEditor)
diff --git a/docs/documentation/docs/controls/PropertyFieldColorPicker.md b/docs/documentation/docs/controls/PropertyFieldColorPicker.md
@@ -12,7 +12,7 @@ This control generates a color picker that you can use inside the property pane.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldDateTimePicker.md b/docs/documentation/docs/controls/PropertyFieldDateTimePicker.md
@@ -19,7 +19,7 @@ The control can be configured to be date only or date and time.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldDropdownWithCallout.md b/docs/documentation/docs/controls/PropertyFieldDropdownWithCallout.md
@@ -13,7 +13,7 @@ This control generates a dropdown control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldLabelWithCallout.md b/docs/documentation/docs/controls/PropertyFieldLabelWithCallout.md
@@ -13,7 +13,7 @@ This control generates a label control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldLinkWithCallout.md b/docs/documentation/docs/controls/PropertyFieldLinkWithCallout.md
@@ -13,7 +13,7 @@ This control generates a link control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldListPicker.md b/docs/documentation/docs/controls/PropertyFieldListPicker.md
@@ -15,7 +15,7 @@ The control can be configured as a single or multi-selection list picker:
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldPeoplePicker.md b/docs/documentation/docs/controls/PropertyFieldPeoplePicker.md
@@ -16,7 +16,7 @@ This control generates a people / group picker that can be used in the property
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldSliderWithCallout.md b/docs/documentation/docs/controls/PropertyFieldSliderWithCallout.md
@@ -13,7 +13,7 @@ This control generates a slider control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldSpinButton.md b/docs/documentation/docs/controls/PropertyFieldSpinButton.md
@@ -12,7 +12,7 @@ This control generates a spin button which allows the user to incrementally adju
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldTermPicker.md b/docs/documentation/docs/controls/PropertyFieldTermPicker.md
@@ -26,7 +26,7 @@ This control generates a term picker that can be used in the property pane of yo
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldTextWithCallout.md b/docs/documentation/docs/controls/PropertyFieldTextWithCallout.md
@@ -13,7 +13,7 @@ This control generates a text field control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/PropertyFieldToggleWithCallout.md b/docs/documentation/docs/controls/PropertyFieldToggleWithCallout.md
@@ -13,7 +13,7 @@ This control generates a toggle control with a callout.
 
 ## How to use this control in your solutions
 
-1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../getting-started) page for more information about installing the dependency.
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
 2. Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md
@@ -4,7 +4,23 @@ This repository provides developers with a set of reusable property pane control
 
 ## Getting started
 
-Check out how to get started here: [Getting started](./getting-started).
+### Installation
+
+To get started you have to install the following dependency to your project: `@pnp/spfx-property-controls`.
+
+Enter the following command to install the dependency to your project:
+
+```
+npm install @pnp/spfx-property-controls --save --save-exact
+```
+
+### Configuration
+
+Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the `config/config.json` and adding the following line to the `localizedResources` property:
+
+```json
+"PropertyControlStrings": "./node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+```
 
 ## Controls
 

diff --git a/docs/documentation/mkdocs.yml b/docs/documentation/mkdocs.yml
@@ -1,7 +1,6 @@
 site_name: SharePoint Framework Property Controls
 pages:
   - Home: 'index.md'
-  - 'Getting started': 'getting-started.md'
   - Controls:
     - PropertyFieldColorPicker: 'controls/PropertyFieldColorPicker.md'
     - PropertyFieldDateTimePicker: 'controls/PropertyFieldDateTimePicker.md'

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-property-controls",
   "description": "Reusable property pane controls for SharePoint Framework solutions",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "@types/applicationinsights-js": "1.0.5",
-    "applicationinsights-js": "1.0.14"
+    "applicationinsights-js": "^1.0.14",
+    "react-ace": "5.8.0"
   },
   "devDependencies": {
     "@microsoft/sp-core-library": "~1.3.0",
@@ -50,6 +51,7 @@
     "url": "https://github.com/SharePoint/sp-dev-fx-property-controls/issues"
   },
   "homepage": "https://github.com/SharePoint/sp-dev-fx-property-controls",
+  "main": "lib/index.js",
   "maintainers": [
     {
       "name": "eliostruyf",

diff --git a/src/PropertyFieldCodeEditor.ts b/src/PropertyFieldCodeEditor.ts
@@ -0,0 +1 @@
+export * from './propertyFields/codeEditor/index';
diff --git a/src/loc/en-us.js b/src/loc/en-us.js
@@ -1,13 +1,17 @@
 define([], function () {
   return {
+    // Common field labels
+    'SaveButtonLabel': 'Save',
+    'CancelButtonLabel': 'Cancel',
+
     // PeoplePicker labels
     'PeoplePickerSuggestedContacts': 'Suggested people',
     'PeoplePickerSuggestedGroups': 'Suggested groups',
     'PeoplePickerSuggestedCombined': 'Suggested people and groups',
     'PeoplePickerNoResults': 'No result found',
     'PeoplePickerLoading': 'Loading results ...',
 
-    //DatePicker labels
+    // DatePicker labels
     'DatePickerMonthLongJanuary': 'January',
     'DatePickerMonthShortJanuary': 'Jan',
     'DatePickerMonthLongFebruary': 'February',
@@ -51,7 +55,7 @@ define([], function () {
     'DateTimePickerDate': 'Date',
     'DateTimePickerTime': 'Time',
 
-    //ColorPicker Labels
+    // ColorPicker Labels
     'ColorPickerButtonTitle': 'Pick a Color'
   }
 });
diff --git a/src/loc/mystrings.d.ts b/src/loc/mystrings.d.ts
@@ -6,7 +6,7 @@ declare interface IPropertyControlStrings {
   PeoplePickerNoResults: string;
   PeoplePickerLoading: string;
 
-  //DatePicker labels
+  // DatePicker labels
   DatePickerMonthLongJanuary: string;
   DatePickerMonthShortJanuary: string;
   DatePickerMonthLongFebruary: string;
@@ -50,8 +50,12 @@ declare interface IPropertyControlStrings {
   DateTimePickerDate: string;
   DateTimePickerTime: string;
 
-  //ColorPicker Labels
+  // ColorPicker Labels
   ColorPickerButtonTitle: string;
+
+  // Code field labels
+  SaveButtonLabel: string;
+  CancelButtonLabel: string;
 }
 
 declare module 'PropertyControlStrings' {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from './propertyFields/codeEditor/index';