Merge pull request #43 from SharePoint/dev

v1.2.0 release merge
pnp · Jan 31, 2018 · 0189144 · 0189144
2 parents 1539f8e + 35550ff
commit 0189144
Show file tree

Hide file tree

Showing 110 changed files with 11,972 additions and 6,179 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Releases
 
+## 1.2.0
+
+**New controls**
+
+- Field controls are added to the project
+- `IFrameDialog` was added to the project
+
+**Fixes**
+
+- Fixed theming in the `WebPartTitle` control
+
 ## 1.1.3
 
 - `FileTypeIcon` icon fixed. This control should now also work in SPFx extensions.

diff --git a/config/config.json b/config/config.json
@@ -7,6 +7,14 @@
         "entrypoint": "./lib/webparts/controlsTest/ControlsTestWebPart.js",
         "manifest": "./src/webparts/controlsTest/ControlsTestWebPart.manifest.json"
       }]
+    },
+    "ootb-fields-field-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/ootbFields/OotbFieldsFieldCustomizer.js",
+          "manifest": "./src/extensions/ootbFields/OotbFieldsFieldCustomizer.manifest.json"
+        }
+      ]
     }
   },
   "externals": {},

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,16 @@
 # Releases
 
+## 1.2.0
+
+**New controls**
+
+- Field controls are added to the project
+- `IFrameDialog` was added to the project
+
+**Fixes**
+
+- Fixed theming in the `WebPartTitle` control
+
 ## 1.1.3
 
 - `FileTypeIcon` icon fixed. This control should now also work in SPFx extensions.

diff --git a/docs/documentation/docs/assets/FieldAttachmentsRenderer.png b/docs/documentation/docs/assets/FieldAttachmentsRenderer.png
diff --git a/docs/documentation/docs/assets/FieldDateRenderer.png b/docs/documentation/docs/assets/FieldDateRenderer.png
diff --git a/docs/documentation/docs/assets/FieldFileTypeRenderer.png b/docs/documentation/docs/assets/FieldFileTypeRenderer.png
diff --git a/docs/documentation/docs/assets/FieldLookupRenderer.png b/docs/documentation/docs/assets/FieldLookupRenderer.png
diff --git a/docs/documentation/docs/assets/FieldLookupRendererDialog.png b/docs/documentation/docs/assets/FieldLookupRendererDialog.png
diff --git a/docs/documentation/docs/assets/FieldNameRenderer.png b/docs/documentation/docs/assets/FieldNameRenderer.png
diff --git a/docs/documentation/docs/assets/FieldTaxonomyRenderer.png b/docs/documentation/docs/assets/FieldTaxonomyRenderer.png
diff --git a/docs/documentation/docs/assets/FieldTextRenderer.png b/docs/documentation/docs/assets/FieldTextRenderer.png
diff --git a/docs/documentation/docs/assets/FieldTitleRenderer.png b/docs/documentation/docs/assets/FieldTitleRenderer.png
diff --git a/docs/documentation/docs/assets/FieldUrlRendererImage.png b/docs/documentation/docs/assets/FieldUrlRendererImage.png
diff --git a/docs/documentation/docs/assets/FieldUrlRendererUrl.png b/docs/documentation/docs/assets/FieldUrlRendererUrl.png
diff --git a/docs/documentation/docs/assets/FieldUserRenderer.png b/docs/documentation/docs/assets/FieldUserRenderer.png
diff --git a/docs/documentation/docs/assets/FieldUserRendererPersona.png b/docs/documentation/docs/assets/FieldUserRendererPersona.png
diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md
@@ -6,7 +6,7 @@ This control returns the file type icon based on a specified file path or applic
 
 ## How to use this control in your solutions
 
-- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
 - Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/IFrameDialog.md b/docs/documentation/docs/controls/IFrameDialog.md
@@ -0,0 +1,53 @@
+# IFrameDialog control
+
+This control renders a Dialog with an iframe as a content.
+
+Here is an example of the control in action:
+
+![IFrameDialog control](../assets/FieldLookupRendererDialog.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { IFrameDialog } from "@pnp/spfx-controls-react/lib/IFrameDialog";
+```
+
+- Use the `IFrameDialog` control in your code as follows:
+
+```TypeScript
+<IFrameDialog 
+    url={this.state.lookupDispFormUrl}
+    iframeOnLoad={this._onIframeLoaded.bind(this)}
+    hidden={this.state.hideDialog}
+    onDismiss={this._onDialogDismiss.bind(this)}
+    modalProps={{
+        isBlocking: true,
+        containerClassName: styles.dialogContainer
+    }}
+    dialogContentProps={{
+        type: DialogType.close,
+        showCloseButton: true
+    }}
+    width={'570px'}
+    height={'315px'}/>
+```
+
+## Implementation
+
+The IFrameDialog component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| dialogContentProps | IDialogContentProps | no | Props to be passed through to Dialog Content. |
+| hidden | boolean | no | Whether the dialog is hidden. |
+| modalProps | IModalProps | no | Props to be passed through to Modal. |
+| onDismiss | (ev?: React.MouseEvent<HTMLButtonElement>) => any | no | A callback function for when the Dialog is dismissed from the close button or light dismiss. Can also be specified separately in content and modal. |
+| url | string | yes | iframe Url |
+| iframeOnload | iframeOnLoad?: (iframe: any) => {} | no | iframe's onload event handler |
+| width | string | yes | iframe's width |
+| heigth | string | yes | iframe's height |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FileTypeIcon)
diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md
@@ -10,7 +10,7 @@ This control renders a list view for the given set of items.
 
 ## How to use this control in your solutions
 
-- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
 - Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/Placeholder.md b/docs/documentation/docs/controls/Placeholder.md
@@ -6,7 +6,7 @@ This control renders a placeholder which can be used to show a message that the
 
 ## How to use this control in your solutions
 
-- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
 - Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/SiteBreadcrumb.md b/docs/documentation/docs/controls/SiteBreadcrumb.md
@@ -7,7 +7,7 @@ This control returns a breadcrumb based on the current location.
 
 ## How to use this control in your solutions
 
-- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
 - Import the following modules to your component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/WebPartTitle.md b/docs/documentation/docs/controls/WebPartTitle.md
@@ -8,7 +8,7 @@ Here is an example of the control in action:
 
 ## How to use this control in your solutions
 
-- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
 - In the root web part file, the one that extends from the `BaseClientSideWebPart` class. Pass the following properties to your web part main component:
 
 ```TypeScript

diff --git a/docs/documentation/docs/controls/fields/FieldAttachmentsRenderer.md b/docs/documentation/docs/controls/fields/FieldAttachmentsRenderer.md
@@ -0,0 +1,37 @@
+# FieldAttachmentsRenderer control
+
+This control renders Clip icon based on the provided `count` property is defined and greater than 0.
+
+![FieldAttachmentsRenderer control output](../../assets/FieldAttachmentsRenderer.png)
+
+**Note:** this control displays correctly starting with SharePoint Framework v1.4
+
+## Covered Fields
+- Attachments
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { FieldAttachmentsRenderer } from "@pnp/spfx-controls-react/lib/FieldAttachmentsRenderer";
+```
+
+- Use the `FieldAttachmentsRenderer` control in your code as follows:
+
+```TypeScript
+<FieldAttachmentsRenderer count={event.fieldValue} className={'some-class'} cssProps={{ background: '#f00' }} />
+```
+
+## Implementation
+
+The FieldAttachmentsRenderer component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. |
+| className | ICssInput | no | CSS classes to apply to the renderer. |
+| count | number | no | Amount of attachments. The icon is displayed if the property is defined and greater than 0 |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldAttachmentsRenderer)
diff --git a/docs/documentation/docs/controls/fields/FieldDateRenderer.md b/docs/documentation/docs/controls/fields/FieldDateRenderer.md
@@ -0,0 +1,38 @@
+# FieldDateRenderer control
+
+This control renders date string as a simple text.
+
+![FieldDateRenderer control output](../../assets/FieldDateRenderer.png)
+
+## Covered Fields
+- Date and Time
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { FieldDateRenderer } from "@pnp/spfx-controls-react/lib/FieldDateRenderer";
+```
+
+- Use the `FieldDateRenderer` control in your code as follows:
+
+```TypeScript
+<FieldDateRenderer text={event.fieldValue} className={'some-class'} cssProps={{ background: '#f00' }} />
+```
+
+**Note:** FieldDateRenderer doesn't provide functionality to render date in friendly format. It just renders the provided text as is. To learn more about friendly formatting please refer to `FieldRendererHelper` implementation.
+
+## Implementation
+
+The FieldDateRenderer component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. |
+| className | ICssInput | no | CSS classes to apply to the renderer. |
+| text | string | no | Text to be rendered |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldDateRenderer)
+
diff --git a/docs/documentation/docs/controls/fields/FieldFileTypeRenderer.md b/docs/documentation/docs/controls/fields/FieldFileTypeRenderer.md
@@ -0,0 +1,39 @@
+# FieldFileTypeRenderer control
+
+This control renders document or folder icon based on file path. Office UI Fabric icons font is used to render the icons.
+
+**Note:** this control displays correctly starting with SharePoint Framework v1.4
+
+![FieldFileTypeRenderer control output](../../assets/FieldFileTypeRenderer.png)
+
+## Covered Fields
+- Type (DocIcon)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { FieldFileTypeRenderer } from "@pnp/spfx-controls-react/lib/FieldFileTypeRenderer";
+```
+
+- Use the `FieldFileTypeRenderer` control in your code as follows:
+
+```TypeScript
+<FieldFileTypeRenderer path={fileLeafRef} isFolder={false} className={'some-class'} cssProps={{ background: '#f00' }} />
+```
+
+## Implementation
+
+The FieldFileTypeRenderer component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. |
+| className | ICssInput | no | CSS classes to apply to the renderer. |
+| path | string | yes | document/file path |
+| isFolder | boolean | no | true if the icon should be rendered for a folder, not file |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldFileTypeRenderer)
+
diff --git a/docs/documentation/docs/controls/fields/FieldLookupRenderer.md b/docs/documentation/docs/controls/fields/FieldLookupRenderer.md
@@ -0,0 +1,41 @@
+# FieldLookupRenderer control
+
+This control renders lookup values. Each lookup item is clickable. Click on the lookup item leads to opening of referenced item's display form.
+
+**Note:** this control displays correctly starting with SharePoint Framework v1.4
+
+![FieldLookupRenderer control output](../../assets/FieldLookupRenderer.png)
+![FieldLookupRenderer dialog](../../assets/FieldLookupRendererDialog.png)
+
+## Covered Fields
+- Lookup (single, multi)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { FieldLookupRenderer } from "@pnp/spfx-controls-react/lib/FieldLookupRenderer";
+```
+
+- Use the `FieldLookupRenderer` control in your code as follows:
+
+```TypeScript
+<FieldLookupRenderer lookups={event.fieldValue} dispFormUrl={'https://contoso.sharepoint.com/_layouts/15/listform.aspx?PageType=4&ListId={list_id}'} className={'some-class'} cssProps={{ background: '#f00' }} />
+```
+
+## Implementation
+
+The FieldLookupRenderer component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. |
+| className | ICssInput | no | CSS classes to apply to the renderer. |
+| lookups | ISPFieldLookupValue[] | yes | Lookup field values. |
+| dispFormUrl | boolean | no | Url of Display form for the list that is referenced by the lookup. |
+| onClick | (args: ILookupClickEventArgs) => {} | no | Custom event handler of lookup item click. If not set the dialog with Display Form will be shown. |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldLookupRenderer)
+
diff --git a/docs/documentation/docs/controls/fields/FieldNameRenderer.md b/docs/documentation/docs/controls/fields/FieldNameRenderer.md
@@ -0,0 +1,45 @@
+# FieldNameRenderer control
+
+This control renders document's name as a link. The link provides either preview (if it is available) or direct download. Additionally, new documents are marked with "Glimmer" icon.
+
+**Note:** The Name column in document libraries is marked as noneditable. See [this issue](https://github.com/SharePoint/sp-dev-docs/issues/1207) for details.
+**Note** Glimmer icon displays correctly starting with SharePoint Framework v1.4
+
+![FieldNameRenderer control output](../../assets/FieldNameRenderer.png)
+
+## Covered Fields
+- Document Name (LinkFilename, LinkFilenameNomenu, FileLieafRef)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { FieldNameRenderer } from "@pnp/spfx-controls-react/lib/FieldNameRenderer";
+```
+
+- Use the `FieldNameRenderer` control in your code as follows:
+
+```TypeScript
+<FieldNameRenderer text={'Technical Requirements'} isLink={true} isNew={false} filePath={'https://contoso.sharepoint.com/Documents/tech-requirements.pdf'} className={'some-class'} cssProps={{ background: '#f00' }} />
+```
+
+## Implementation
+
+The FieldNameRenderer component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. |
+| className | ICssInput | no | CSS classes to apply to the renderer. |
+| text | string | no | Text to be rendered. |
+| isLink | boolean | yes | True if the name should be rendered as a link. |
+| isNew | boolean | no | True if the document is new. |
+| filePath | string | no | Path to the document. |
+| hasPreview | boolean | no | True if the document has preview (true by default) |
+| onClick | (args: INameClickEventArgs) => {} | no | Custom handler for link click. If not set link click will lead to rendering document preview. |
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldNameRenderer)
+