Merge for 1.13.2

CHANGELOG.JSON

@@ -1,5 +1,31 @@
 {
   "versions": [
+    {
+      "version": "1.13.2",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "Improvements to the `Lithuanian` localization [#285](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/285)"
+        ],
+        "fixes": [
+          "`IFrameDialog`: dimensions issue [#303](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/303)",
+          "`DateTimePicker`: IE11 layout issue [#301](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/301)",
+          "`FileTypeIcon`: Only displays PDF's in SPFx `1.8.2` [#300](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/300)",
+          "`FieldNameRenderer`: Fails to encode URI when `hasPreview` [#296](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/296)",
+          "`TaxonomyPicker`: Cannot find name `TermLabelAction [#293](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/293)",
+          "`ListItemAttachments`: Move deleted attachments to the recycle bin [#291](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/291)",
+          "`DateTimePicker`: Does not respect `isMonthPickerVisible` prop [#283](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/283)",
+          "`ListItemAttachments`: Render issue fixed + improvements to the attachment API calls [#282](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/282)",
+          "`RichText`: Fixes an issue when hitting enter in the control [#277](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/277)"
+        ]
+      },
+      "contributions": [
+        "[Tautvydas Duda](https://github.com/ltdu)",
+        "[Thomas Granheim](https://github.com/ThomasGranheim)",
+        "[Robert Lindström](https://github.com/robert-lindstrom)",
+        "[Alex Terentiev](https://github.com/AJIXuMuK)"
+      ]
+    },
     {
       "version": "1.13.1",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Releases
 
+## 1.13.2
+
+### Enhancements
+
+- Improvements to the `Lithuanian` localization [#285](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/285)
+
+### Fixes
+
+- `IFrameDialog`: dimensions issue [#303](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/303)
+- `DateTimePicker`: IE11 layout issue [#301](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/301)
+- `FileTypeIcon`: Only displays PDF's in SPFx `1.8.2` [#300](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/300)
+- `FieldNameRenderer`: Fails to encode URI when `hasPreview` [#296](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/296)
+- `TaxonomyPicker`: Cannot find name `TermLabelAction [#293](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/293)
+- `ListItemAttachments`: Move deleted attachments to the recycle bin [#291](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/291)
+- `DateTimePicker`: Does not respect `isMonthPickerVisible` prop [#283](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/283)
+- `ListItemAttachments`: Render issue fixed + improvements to the attachment API calls [#282](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/282)
+- `RichText`: Fixes an issue when hitting enter in the control [#277](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/277)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Tautvydas Duda](https://github.com/ltdu), [Thomas Granheim](https://github.com/ThomasGranheim), [Robert Lindström](https://github.com/robert-lindstrom), [Alex Terentiev](https://github.com/AJIXuMuK).
+
 ## 1.13.1
 
 ### Fixes

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

@@ -1,5 +1,27 @@
 # Releases
 
+## 1.13.2
+
+### Enhancements
+
+- Improvements to the `Lithuanian` localization [#285](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/285)
+
+### Fixes
+
+- `IFrameDialog`: dimensions issue [#303](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/303)
+- `DateTimePicker`: IE11 layout issue [#301](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/301)
+- `FileTypeIcon`: Only displays PDF's in SPFx `1.8.2` [#300](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/300)
+- `FieldNameRenderer`: Fails to encode URI when `hasPreview` [#296](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/296)
+- `TaxonomyPicker`: Cannot find name `TermLabelAction [#293](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/293)
+- `ListItemAttachments`: Move deleted attachments to the recycle bin [#291](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/291)
+- `DateTimePicker`: Does not respect `isMonthPickerVisible` prop [#283](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/283)
+- `ListItemAttachments`: Render issue fixed + improvements to the attachment API calls [#282](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/282)
+- `RichText`: Fixes an issue when hitting enter in the control [#277](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/277)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Tautvydas Duda](https://github.com/ltdu), [Thomas Granheim](https://github.com/ThomasGranheim), [Robert Lindström](https://github.com/robert-lindstrom), [Alex Terentiev](https://github.com/AJIXuMuK).
+
 ## 1.13.1
 
 ### Fixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "engines": {
     "node": ">=0.10.0"
   },

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "1.13.1";
+export const version: string = "1.13.2";

src/controls/dateTimePicker/DateTimePicker.module.scss

@@ -19,6 +19,7 @@
 
       .picker {
         flex-grow: 1;
+        flex-basis: 0%;
       }
 
       .time {

src/controls/dateTimePicker/DateTimePicker.tsx

@@ -219,9 +219,9 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
           <div className={styles.time}>
             <div className={styles.picker}>
               <HoursComponent disabled={disabled}
-                              timeConvention={timeConvention}
-                              value={hours}
-                              onChange={this.dropdownHoursChanged} />
+                timeConvention={timeConvention}
+                value={hours}
+                onChange={this.dropdownHoursChanged} />
             </div>
 
             <div className={styles.separator}>
@@ -230,8 +230,8 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
 
             <div className={styles.picker}>
               <MinutesComponent disabled={disabled}
-                                value={minutes}
-                                onChange={this.dropdownMinutesChanged} />
+                value={minutes}
+                onChange={this.dropdownMinutesChanged} />
             </div>
 
             {
@@ -246,8 +246,8 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
               showSeconds && (
                 <div className={styles.picker}>
                   <SecondsComponent disabled={disabled}
-                                    value={seconds}
-                                    onChange={this.dropdownSecondsChanged} />
+                    value={seconds}
+                    onChange={this.dropdownSecondsChanged} />
                 </div>
               )
             }
@@ -274,7 +274,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
                 disabled={disabled}
                 value={value}
                 strings={dateStrings}
-                isMonthPickerVisible={true}
+                isMonthPickerVisible={isMonthPickerVisible}
                 onSelectDate={this.onSelectDate}
                 allowTextInput={false}
                 firstDayOfWeek={firstDayOfWeek}

src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx

@@ -118,8 +118,9 @@ export class FieldNameRenderer extends React.Component<IFieldNameRendererProps,
             else {
                 let url: string;
                 const filePath = this.props.filePath;
+                const parentPath = filePath.substring(0, filePath.lastIndexOf('/'));
                 if (this.props.hasPreview !== false) {
-                    url = `#id=${filePath}&parent=${filePath.substring(0, filePath.lastIndexOf('/'))}`;
+                    url = `#id=${encodeURIComponent(filePath)}&parent=${encodeURIComponent(parentPath)}`;
                 }
                 else {
                     url = filePath;

src/controls/fileTypeIcon/FileTypeIcon.tsx

@@ -126,16 +126,25 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
         const knownImgs = ApplicationIconList[appIdx].imageName;
         // Check if the file extension is known
         const imgIdx = knownImgs.indexOf(extension);
+
+        const imgExists = ApplicationIconList[appIdx].cdnImageName && ApplicationIconList[appIdx].cdnImageName.indexOf(extension) !== -1;
+        let fallbackImg = null;
+        if (imgExists) {
+          fallbackImg = extension;
+        } else if (ApplicationIconList[appIdx].cdnImageName && ApplicationIconList[appIdx].cdnImageName.length > 0) {
+          fallbackImg = ApplicationIconList[appIdx].cdnImageName[0];
+        }
+
         if (imgIdx !== -1) {
           return {
             image: knownImgs[imgIdx],
-            cdnFallback: ApplicationIconList[appIdx].cdnImageName || null
+            cdnFallback: fallbackImg
           };
         } else {
           // Return the first one if it was not known
           return {
             image: knownImgs[0],
-            cdnFallback: ApplicationIconList[appIdx].cdnImageName || null
+            cdnFallback: fallbackImg
           };
         }
       }
@@ -156,22 +165,28 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
     // Check if an application has found
     if (appIdx !== -1) {
       const knownApp = ApplicationIconList[appIdx];
+
+      let fallbackImg = null;
+      if (knownApp.cdnImageName && knownApp.cdnImageName.length > 0) {
+        fallbackImg = knownApp.cdnImageName[0];
+      }
+
       if (iconType === IconType.font) {
         return {
           image: knownApp.iconName,
-          cdnFallback: null
+          cdnFallback: fallbackImg
         };
       } else {
         // Check if the application has a known list of image types
         if (knownApp.imageName.length > 0) {
           return {
             image: knownApp.imageName[0],
-            cdnFallback: null
+            cdnFallback: fallbackImg
           };
         } else {
           return {
             image: null,
-            cdnFallback: knownApp.cdnImageName || null
+            cdnFallback: fallbackImg
           };
         }
       }
@@ -209,11 +224,11 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
       // Return an image icon element
       const iconImage = this._getIconImageName();
       // Check if the image was found, otherwise a generic image will be returned
-      if (iconImage.image) {
-        iconElm = <Icon iconType={IconUIType.image} imageProps={{ className: `ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}` }} />;
-      } else if (iconImage.cdnFallback) {
+      if (iconImage.cdnFallback) {
         const iconUrl = `${ICON_CDN_URL}/${iconImage.size.replace("icon", "")}/${iconImage.cdnFallback}.png`;
         iconElm = <Icon iconType={IconUIType.image} imageProps={{ src: iconUrl }} />;
+      } else if (iconImage.cdnFallback) {
+        iconElm = <Icon iconType={IconUIType.image} imageProps={{ className: `ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}` }} />;
       } else {
         // Return a generic image
         let imgElm = <img />;

src/controls/fileTypeIcon/IFileTypeIcon.ts

@@ -48,7 +48,7 @@ export interface IApplicationIcons {
   extensions: string[];
   iconName: string;
   imageName: string[];
-  cdnImageName?: string;
+  cdnImageName?: string[];
 }
 
 /**
@@ -59,7 +59,8 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.Access,
     extensions: ['accdb', 'accde', 'accdt', 'accdr', 'mdb'],
     iconName: 'AccessLogo',
-    imageName: ['accdb']
+    imageName: ['accdb'],
+    cdnImageName: ["accdb"]
   },
   {
     application: ApplicationType.ASPX,
@@ -83,13 +84,15 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.CSV,
     extensions: ['csv'],
     iconName: 'ExcelDocument',
-    imageName: ['csv']
+    imageName: ['csv'],
+    cdnImageName: ['csv']
   },
   {
     application: ApplicationType.Excel,
     extensions: ['xls', 'xlt', 'xlm', 'xlsx', 'xlsm', 'xltx', 'xltm', 'ods'],
     iconName: 'ExcelDocument',
-    imageName: ['xlsx', 'xls', 'xltx', 'ods']
+    imageName: ['xlsx', 'xls', 'xltx', 'ods'],
+    cdnImageName: ['xlsx', 'xltx', 'ods']
   },
   {
     application: ApplicationType.HTML,
@@ -113,14 +116,15 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.OneNote,
     extensions: ['one', 'onepkg', 'onetoc'],
     iconName: 'OneNoteLogo',
-    imageName: ['one', 'onepkg', 'onetoc']
+    imageName: ['one', 'onepkg', 'onetoc'],
+    cdnImageName: ['one', 'onetoc']
   },
   {
     application: ApplicationType.PDF,
     extensions: ['pdf'],
     iconName: 'PDF',
     imageName: [],
-    cdnImageName: 'pdf'
+    cdnImageName: ['pdf']
   },
   {
     application: ApplicationType.PowerApps,
@@ -132,19 +136,22 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.PowerPoint,
     extensions: ['ppt', 'pot', 'pps', 'pptx', 'pptm', 'potx', 'potm', 'ppam', 'ppsx', 'ppsm', 'sldx', 'sldx'],
     iconName: 'PowerPointDocument',
-    imageName: ['odp', 'potx', 'ppsx', 'pptx']
+    imageName: ['odp', 'potx', 'ppsx', 'pptx'],
+    cdnImageName: ['pptx', 'odp', 'potx', 'ppsx']
   },
   {
     application: ApplicationType.Project,
     extensions: ['mpp', 'mpt', 'mpx', 'mpd'],
     iconName: 'ProjectLogoInverse',
-    imageName: ['mpp', 'mpt']
+    imageName: ['mpp', 'mpt'],
+    cdnImageName: ['mpp', 'mpt']
   },
   {
     application: ApplicationType.Publisher,
     extensions: ['pub'],
     iconName: 'PublisherLogo',
-    imageName: ['pub']
+    imageName: ['pub'],
+    cdnImageName: ['pub']
   },
   {
     application: ApplicationType.SASS,
@@ -156,13 +163,15 @@ export const ApplicationIconList: IApplicationIcons[] = [
     application: ApplicationType.Visio,
     extensions: ['vsd', 'vss', 'vst', 'vdx', 'vsx', 'vtx', 'vsdx'],
     iconName: 'VisioDocument',
-    imageName: ['vsdx', 'vssx', 'vstx']
+    imageName: ['vsdx', 'vssx', 'vstx'],
+    cdnImageName: ['vsdx', 'vssx', 'vstx']
   },
   {
     application: ApplicationType.Word,
     extensions: ['doc', 'dot', 'docx', 'docm', 'dotx', 'dotm', 'docb', 'odt'],
     iconName: 'WordDocument',
-    imageName: ['docx', 'dotx', 'odt']
+    imageName: ['docx', 'dotx', 'odt'],
+    cdnImageName: ['docx', 'dotx', 'odt']
   }
 ];
 

src/controls/iFrameDialog/IFrameDialog.tsx

@@ -59,7 +59,8 @@ export interface IFrameDialogProps extends IDialogProps {
 }
 
 export interface IFrameDialogState {
-  dialogId: string;
+  dialogId: string | null;
+  isStylingSet?: boolean;
 }
 
 /**
@@ -108,11 +109,21 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
       name,
       sandbox,
       scrolling,
-      seamless
+      seamless,
+      modalProps,
+      className
     } = this.props;
+
+    let dlgModalProps = {
+      ...modalProps,
+      onLayerDidMount: () => { this.setDialogStyling(); }
+    };
+
     return (
-      <Dialog className={`${this.state.dialogId} ${this.props.className}`}
-        {...omit(this.props, 'className')}>
+      <Dialog
+        className={`${this.state.dialogId} ${className || ''}`}
+        modalProps={dlgModalProps}
+        {...omit(this.props, 'className', 'modalProps')}>
         <IFrameDialogContent src={this.props.url}
           iframeOnLoad={iframeOnLoad}
           close={this.props.onDismiss}
@@ -133,12 +144,19 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
    * Set the dialog style
    */
   private setDialogStyling(): void {
-    if (!this.props.hidden && this.state.dialogId) {
+    if (!this.state.isStylingSet && !this.props.hidden && this.state.dialogId) {
       const element = document.querySelector(`.${this.state.dialogId} .ms-Dialog-main`) as HTMLElement;
-      if (element && this.props.width) {
-        element.style.width = this.props.width;
-        element.style.minWidth = this.props.width;
-        element.style.maxWidth = this.props.width;
+      const {
+        width
+      } = this.props;
+      if (element && width) {
+        element.style.width = width;
+        element.style.minWidth = width;
+        element.style.maxWidth = width;
+
+        this.setState({
+          isStylingSet: true
+        });
       }
     }
   }