Skip to content

Commit

Permalink
Enhancements for #64 #66 #67 #72
Browse files Browse the repository at this point in the history
  • Loading branch information
estruyf committed Jun 8, 2018
1 parent af533c2 commit b5126ea
Show file tree
Hide file tree
Showing 22 changed files with 295 additions and 43 deletions.
24 changes: 17 additions & 7 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
# Releases

## 1.7.0

**Enhancements**

- Add `npm postinstall` script to automatically add the localization config [#64](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/64)
- Added a font field type for the `PropertyFieldCollectionData` control [#66](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/66)
- Added a URL field type for the `PropertyFieldCollectionData` control [#72](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/72)
- Add a description to the `PropertyFieldCollectionData` panel [#67](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/67)
- Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control

## 1.6.0

**New controls**

- `PropertyFieldCollectionData` was added [58](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/58)
- `PropertyFieldOrder` was added [19](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/19)
- `PropertyFieldSwatchColorPicker` was added [55](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/55)
- `PropertyFieldCollectionData` was added [#58](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/58)
- `PropertyFieldOrder` was added [#19](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/19)
- `PropertyFieldSwatchColorPicker` was added [#55](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/55)

**Enhancements**

- Allow the term set to be selectable in the `PropertyFieldTermPicker` [#60](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/60)

**Fixes**

- Fix for `PropertyFieldColorPicker` Palette Icon alignment issue in IE11 [56](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/56)
- Fix for `PropertyFieldColorPicker` Palette Icon alignment issue in IE11 [#56](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/56)

## 1.5.1

Expand All @@ -40,7 +50,7 @@

**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))
- Introduced the `onGetErrorMessage` property for the `PropertyFieldNumber` field control ([#36](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/36))

## 1.4.1

Expand All @@ -50,8 +60,8 @@

**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)
- Fixes for issue [#30](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/30)
- `PropertyFieldPeoplePicker` Validation does not work as expected [#33](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/33)

## 1.4.0

Expand Down
28 changes: 21 additions & 7 deletions docs/documentation/docs/about/release-notes.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,30 @@
# Releases

## 1.7.0

**Enhancements**

- Add `npm postinstall` script to automatically add the localization config [#64](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/64)
- Added a font field type for the `PropertyFieldCollectionData` control [#66](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/66)
- Added a URL field type for the `PropertyFieldCollectionData` control [#72](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/72)
- Add a description to the `PropertyFieldCollectionData` panel [#67](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/67)
- Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control

## 1.6.0

**New controls**

- `PropertyFieldCollectionData` was added [58](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/58)
- `PropertyFieldOrder` was added [19](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/19)
- `PropertyFieldSwatchColorPicker` was added [55](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/55)
- `PropertyFieldCollectionData` was added [#58](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/58)
- `PropertyFieldOrder` was added [#19](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/19)
- `PropertyFieldSwatchColorPicker` was added [#55](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/55)

**Enhancements**

- Allow the term set to be selectable in the `PropertyFieldTermPicker` [#60](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/60)

**Fixes**

- Fix for `PropertyFieldColorPicker` Palette Icon alignment issue in IE11 [56](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/56)
- Fix for `PropertyFieldColorPicker` Palette Icon alignment issue in IE11 [#56](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/56)

## 1.5.1

Expand All @@ -36,7 +50,7 @@

**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))
- Introduced the `onGetErrorMessage` property for the `PropertyFieldNumber` field control ([#36](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/36))

## 1.4.1

Expand All @@ -46,8 +60,8 @@

**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)
- Fixes for issue [#30](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/30)
- `PropertyFieldPeoplePicker` Validation does not work as expected [#33](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/33)

## 1.4.0

Expand Down
15 changes: 9 additions & 6 deletions docs/documentation/docs/controls/PropertyFieldCollectionData.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ The `PropertyFieldCollectionData` control can be configured with the following p
| key | string | yes | An unique key that indicates the identity of this control. |
| label | string | yes | Property field label displayed on top. |
| panelHeader | string | yes | Label to be used as the header in the panel. |
| panelDescription | string | no | Property that allows you to specify a description in the collection panel. |
| manageBtnLabel | string | yes | Label of the button to open the panel. |
| fields | ICustomCollectionField[] | yes | The fields to be used for the list of collection data. |
| value | string | yes | The collection data value. |
Expand All @@ -117,11 +118,13 @@ Interface `ICustomCollectionField`

Enum `CustomCollectionFieldType`

| Type |
| ---- |
| string |
| number |
| boolean |
| dropdown |
| Type | Description |
| ---- | ---- |
| string | Text field |
| number | Number field |
| boolean | Checkbox |
| dropdown | Dropdown field. You will have to specify the `options` property when using this field type |
| fabricIcon | Name of the [Office UI Fabric icon](https://developer.microsoft.com/en-us/fabric#/styles/icons) |
| url | URL field |

![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/PropertyFieldCollectionData)
3 changes: 3 additions & 0 deletions docs/documentation/docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ npm install @pnp/spfx-property-controls --save --save-exact

### Configuration

!!! note
Since `v1.7.0` the localized resource path will automatically be configured during the dependency installing.

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
Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@pnp/spfx-property-controls",
"description": "Reusable property pane controls for SharePoint Framework solutions",
"version": "1.6.0",
"version": "1.7.0",
"engines": {
"node": ">=0.10.0"
},
Expand All @@ -11,7 +11,8 @@
"test": "gulp test",
"versionUpdater": "gulp versionUpdater",
"prepublishOnly": "gulp",
"changelog": "node scripts/sync-changelogs.js"
"changelog": "node scripts/sync-changelogs.js",
"postinstall": "node postinstall/install.js"
},
"dependencies": {
"@types/applicationinsights-js": "1.0.5",
Expand Down
57 changes: 57 additions & 0 deletions postinstall/install.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
#!/usr/bin/env node

const fs = require('fs');
const path = require('path');

console.log("INFO: Adding the required localized resource configuration to the config.json file.");

// Get the current directory
const crntDir = path.resolve(__dirname);
// Split the whole directory path
let nesting = crntDir.split("/");
// Windows split
if (nesting.length <= 1) {
nesting = crntDir.split("\\");
}
// Check if correctly splitted
if (nesting.length > 0) {
// Find the first node_modules folder index
let idx = nesting.indexOf("node_modules");
// Check if index of the folder was found
if (idx !== -1) {
// Slice unnecessary nodes
const nest = nesting.slice(idx);
if (nest && nest.length > 0) {
const paths = nest.map(m => "..");
// Get the path of the projects root location
const rootDir = path.resolve(path.join(__dirname, paths.join('/')));
const fileLoc = `${rootDir}/config/config.json`;
// Check if config.json file exists
if (fs.existsSync(fileLoc)) {
// Get the config file
const config = fs.readFileSync(fileLoc, "utf8");
if (config && typeof config === "string") {
const contents = JSON.parse(config);
if (contents && contents.localizedResources && !contents.localizedResources.PropertyControlStrings) {
contents.localizedResources["PropertyControlStrings"] = "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js";
// Update the file
fs.writeFileSync(fileLoc, JSON.stringify(contents, null, 2));
console.log("INFO: Localized resource added.");
} else {
console.warn(`WARNING: it seems something is wrong with the config.json file or the "PropertyControlStrings" reference was already set.`);
}
} else {
console.warn("WARNING: the config.json file was not correctly retrieved.");
}
} else {
console.warn("WARNING: the config.json file does not exist.");
}
} else {
console.warn("WARNING: something is wrong with the installation path.");
}
} else {
console.warn("WARNING: something when wrong during with retrieving the project its root location.");
}
} else {
console.warn("WARNING: something is wrong with the installation path.");
}
1 change: 1 addition & 0 deletions src/loc/en-us.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
define([], function () {
return {
InvalidUrlError: "The provided URL is not valid",
// Common field labels
'SaveButtonLabel': 'Save',
'CancelButtonLabel': 'Cancel',
Expand Down
1 change: 1 addition & 0 deletions src/loc/mystrings.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
declare interface IPropertyControlStrings {
InvalidUrlError: string;
// PeoplePicker labels
PeoplePickerSuggestedContacts: string;
PeoplePickerSuggestedGroups: string;
Expand Down
3 changes: 3 additions & 0 deletions src/propertyFields/collectionData/FieldValidator.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export interface FieldValidator {
[property: string]: boolean;
}
4 changes: 3 additions & 1 deletion src/propertyFields/collectionData/ICustomCollectionField.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,7 @@ export enum CustomCollectionFieldType {
string = 1,
number,
boolean,
dropdown
dropdown,
fabricIcon,
url
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ export interface IPropertyFieldCollectionDataProps {
* Label to be used as the header in the panel.
*/
panelHeader: string;
/**
* Property that allows you to specify a description in the collection panel.
*/
panelDescription?: string;
/**
* Label of the button to open the panel.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,18 @@
}
}

.iconField {
position: relative;

i {
font-size: 20px;
position: absolute;
top: 0;
right: 10px;
vertical-align: top;
}
}


/* Table layout */
.table {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import * as React from 'react';
import * as appInsights from '../../common/appInsights';
import { ICustomCollectionField, IPropertyFieldCollectionDataHostProps, IPropertyFieldCollectionDataHostState } from '.';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import styles from './PropertyFieldCollectionDataHost.module.scss';
import { IPropertyFieldCollectionDataHostProps, IPropertyFieldCollectionDataHostState } from '.';
import { DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
import { Panel, PanelType } from 'office-ui-fabric-react/lib/components/Panel';
import { Label } from 'office-ui-fabric-react/lib/components/Label';
Expand Down Expand Up @@ -66,6 +64,11 @@ export class PropertyFieldCollectionDataHost extends React.Component<IPropertyFi
onDismiss={this.closePanel}
type={PanelType.large}
headerText={this.props.panelHeader}>
{
this.props.panelDescription && (
<p>{this.props.panelDescription}</p>
)
}
<CollectionDataViewer {...this.props} fOnSave={this.onSave} fOnClose={this.closePanel} />
</Panel>
</div>
Expand Down
Loading

0 comments on commit b5126ea

Please sign in to comment.