Merge pull request #37 from SharePoint/dev

Prepare v1.4.2 release

CHANGELOG.md

@@ -1,12 +1,19 @@
 # Releases
 
+## 1.4.2
+
+**Enhancements**
+
+- Introduced the `onGetErrorMessage` property for the `PropertyFieldNumber` field control ([#36 - PropertyFieldNumber control suggestion](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/36))
+
 ## 1.4.1
 
 **Enhancements**
 
 - Optimized telemetry so that it only pushes control data
 
 **Fixes**
+
 - Fixes for issue [#30 - Check if Label is null and if so don't render it.](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/30)
 - Fix for issue [#33 - `PropertyFieldPeoplePicker` Validation does not work as expected.](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/33)
 

docs/documentation/docs/about/release-notes.md

@@ -1,12 +1,19 @@
 # Releases
 
+## 1.4.2
+
+**Enhancements**
+
+- Introduced the `onGetErrorMessage` property for the `PropertyFieldNumber` field control ([#36 - PropertyFieldNumber control suggestion](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/36))
+
 ## 1.4.1
 
 **Enhancements**
 
 - Optimized telemetry so that it only pushes control data
 
 **Fixes**
+
 - Fixes for issue [#30 - Check if Label is null and if so don't render it.](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/30)
 - Fix for issue [#33 - `PropertyFieldPeoplePicker` Validation does not work as expected.](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/33)
 

docs/documentation/docs/controls/PropertyFieldNumber.md

@@ -37,6 +37,26 @@ PropertyFieldNumber("numberValue", {
 })
 ```
 
+You can also implement your own validation with the `onGetErrorMessage` property as follows:
+
+```TypeScript
+PropertyFieldNumber("numberValue", {
+  key: "numberValue",
+  label: "Number value only",
+  description: "Number field description",
+  value: this.properties.numberValue,
+  maxValue: 10,
+  minValue: 1,
+  disabled: false,
+  onGetErrorMessage: (value: number) => {
+    if (value % 2 !== 0) {
+      return 'Only even numbers are allowed';
+    }
+    return '';
+  }
+})
+```
+
 ## Implementation
 
 The `PropertyFieldNumber` control can be configured with the following properties:
@@ -52,6 +72,7 @@ The `PropertyFieldNumber` control can be configured with the following propertie
 | minValue | number | no | Minimum number that can be inserted. |
 | disabled | boolean | no | Specify if the control needs to be disabled. |
 | errorMessage | string | no | If set, this will be displayed as an error message. |
+| onGetErrorMessage | (value: number) => string | no | If set, this method is used to get the validation error message and determine whether the input value is valid or not. |
 | deferredValidationTime | number | no | Number field will start to validate after users stop typing for `deferredValidationTime` milliseconds. |
 
 

docs/documentation/docs/index.md

@@ -21,7 +21,7 @@ npm install @pnp/spfx-property-controls --save --save-exact
 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"
+"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
 ```
 
 ## Controls
@@ -35,6 +35,7 @@ The following controls are currently available:
 - [PropertyFieldSpinButton](./controls/PropertyFieldSpinButton) (Property pane spin button)
 - [PropertyFieldTermPicker](./controls/PropertyFieldTermPicker) (Property pane managed metadata term selector)
 - [PropertyFieldMultiSelect](./controls/PropertyFieldMultiSelect) (Property pane field which allows multi-value selection)
+- [PropertyFieldNumber](./controls/PropertyFieldNumber) (Property pane field which allows only number values)
 
 The following controls are extended controls that show a callout next to the label
 

docs/documentation/mkdocs.yml

@@ -9,6 +9,7 @@ pages:
     - PropertyFieldSpinButton: 'controls/PropertyFieldSpinButton.md'
     - PropertyFieldTermPicker: 'controls/PropertyFieldTermPicker.md'
     - PropertyFieldMultiSelect: 'controls/PropertyFieldMultiSelect.md'
+    - PropertyFieldNumber: 'controls/PropertyFieldNumber.md'
   - 'Controls with callout':
     - PropertyFieldButtonWithCallout: 'controls/PropertyFieldButtonWithCallout.md'
     - PropertyFieldCheckboxWithCallout: 'controls/PropertyFieldCheckboxWithCallout.md'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-property-controls",
   "description": "Reusable property pane controls for SharePoint Framework solutions",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "engines": {
     "node": ">=0.10.0"
   },

src/propertyFields/number/IPropertyFieldNumber.ts

@@ -41,6 +41,19 @@ export interface IPropertyFieldNumberProps {
    * So, make sure to set this only if you want to see an error message dispalyed for the text field.
    */
   errorMessage?: string;
+  /**
+   * The method is used to get the validation error message and determine whether the input value is valid or not.
+   *
+   *   When it returns string:
+   *   - If valid, it returns empty string.
+   *   - If invalid, it returns the error message string and an error message is displayed below the text field.
+   *
+   *   When it returns Promise<string>:
+   *   - The resolved value is display as error message.
+   *   - The rejected, the value is thrown away.
+   *
+   */
+  onGetErrorMessage?: (value: number) => string | Promise<string>;
   /**
    * Number field will start to validate after users stop typing for `deferredValidationTime` milliseconds.
    * Default value is 200.

src/propertyFields/number/PropertyFieldNumberHost.tsx

@@ -28,7 +28,7 @@ export default class PropertyFieldNumberHost extends React.Component<IPropertyFi
    * Validate if field value is a number
    * @param value
    */
-  private _validateNumber = (value: string): string => {
+  private _validateNumber = (value: string): string | Promise<string> => {
     if (isNaN(Number(value))) {
       return `${strings.NotNumberValidationMessage} ${value}.`;
     }
@@ -43,7 +43,11 @@ export default class PropertyFieldNumberHost extends React.Component<IPropertyFi
       return `${strings.MaximumNumberValidationMessage} ${this.props.maxValue}`;
     }
 
-    return '';
+    if (this.props.onGetErrorMessage) {
+      return this.props.onGetErrorMessage(nrValue);
+    } else {
+      return '';
+    }
   }
 
   /**