FileTypeIcon enhancements (#1789)

* Added onClick support to FileTypeIcon * Added various events to FileTypeIcon * Updated documentation * Update docs/documentation/docs/controls/FileTypeIcon.md Co-authored-by: Michaël Maillot <battosaimykle@gmail.com> * Update docs/documentation/docs/controls/FileTypeIcon.md Co-authored-by: Michaël Maillot <battosaimykle@gmail.com> * Update docs/documentation/docs/controls/FileTypeIcon.md Co-authored-by: Michaël Maillot <battosaimykle@gmail.com> * Update docs/documentation/docs/controls/FileTypeIcon.md Co-authored-by: Michaël Maillot <battosaimykle@gmail.com> * Update docs/documentation/docs/controls/FileTypeIcon.md Co-authored-by: Michaël Maillot <battosaimykle@gmail.com> * Update docs/documentation/docs/controls/FileTypeIcon.md Co-authored-by: Michaël Maillot <battosaimykle@gmail.com> * Removed unused imports in IFileTypeIcon.ts --------- Co-authored-by: Michaël Maillot <battosaimykle@gmail.com>
pnp · May 6, 2024 · 34f318a · 34f318a
1 parent 6be67f9
commit 34f318a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md
@@ -42,5 +42,11 @@ The FileTypeIcon component can be configured with the following properties:
 | path | string | no | Path to the document. If this is provided, the control will use the file extension to display the corresponding icon. |
 | size | ImageSize | no | This is a property that only needs to be used when the type is set to image. It allows you to specify the image size. small (16px), normal (20px), medium (48px) and large (96px) are possible. Use the **ImageSize** enum to get the list of available images sizes. |
 | type | IconType | yes | This property specifies is you want to use the icon font or image. Use the **IconType** enum to get the list of available icon types. |
+| onClick | React.MouseEvent&lt;HTMLElement&gt; | no | Event triggered when the icon is clicked. |
+| onDoubleClick | React.MouseEvent&lt;HTMLElement&gt; | no | Event triggered when the icon is double clicked. |
+| onMouseEnter | React.MouseEvent&lt;HTMLElement&gt; | no | Event triggered when the mouse cursor enters the icon (without event bubbling). |
+| onMouseLeave | React.MouseEvent&lt;HTMLElement&gt; | no | Event triggered when the mouse cursor leaves the icon. |
+| onMouseOver | React.MouseEvent&lt;HTMLElement&gt; | no | Event triggered when the mouse cursor enters the icon (with event bubbling). |
+| onMouseUp | React.MouseEvent&lt;HTMLElement&gt; | no | Event triggered when the mouse button is released after clicked on the icon. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FileTypeIcon)
diff --git a/src/controls/fileTypeIcon/FileTypeIcon.tsx b/src/controls/fileTypeIcon/FileTypeIcon.tsx
@@ -264,6 +264,14 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
       iconElm = <Icon iconName={iconClass} />;
     }
 
+    // Bind events
+    iconElm.props.onClick = this.props.onClick;
+    iconElm.props.onDoubleClick = this.props.onDoubleClick;
+    iconElm.props.onMouseEnter = this.props.onMouseEnter;
+    iconElm.props.onMouseLeave = this.props.onMouseLeave;
+    iconElm.props.onMouseOver = this.props.onMouseOver;
+    iconElm.props.onMouseUp = this.props.onMouseUp;
+
     // Return the icon element
     return iconElm;
   }

diff --git a/src/controls/fileTypeIcon/IFileTypeIcon.ts b/src/controls/fileTypeIcon/IFileTypeIcon.ts
@@ -1,3 +1,5 @@
+import { MouseEventHandler } from "react";
+
 /**
  * Available icon types
  */
@@ -225,11 +227,16 @@ export interface ImageInformation {
  * Interface for the FileTypeIcon component properties
  */
 export interface IFileTypeIconProps {
-
   type: IconType;
   application?: ApplicationType;
   path?: string;
   size?: ImageSize;
+  onClick?: MouseEventHandler<HTMLElement> | undefined;
+  onDoubleClick?: MouseEventHandler<HTMLElement> | undefined;
+  onMouseEnter?: MouseEventHandler<HTMLElement> | undefined;
+  onMouseLeave?: MouseEventHandler<HTMLElement> | undefined;
+  onMouseOver?: MouseEventHandler<HTMLElement> | undefined;
+  onMouseUp?: MouseEventHandler<HTMLElement> | undefined;
 }
 
 /**

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -1530,6 +1530,17 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             <FileTypeIcon type={IconType.image} application={ApplicationType.PDF} />
             <FileTypeIcon type={IconType.image} path="https://contoso.sharepoint.com/documents/filename.pdf" />
           </div>
+          <div className="ms-font-m">
+            Image icons with support to events:
+            <FileTypeIcon type={IconType.image} application={ApplicationType.PowerApps} size={ImageSize.medium}
+              onClick={(e) => console.log("onClick on FileTypeIcon!")}
+              onDoubleClick={(e) => console.log("onDoubleClick on FileTypeIcon!")}
+              onMouseEnter={(e) => console.log("onMouseEnter on FileTypeIcon!")}
+              onMouseLeave={(e) => console.log("onMouseLeave on FileTypeIcon!")}
+              onMouseOver={(e) => console.log("onMouseOver on FileTypeIcon!")}
+              onMouseUp={(e) => console.log("onMouseUp on FileTypeIcon!")}
+              />
+          </div>
           <div className="ms-font-m">Icon size tester:
             <Dropdown options={sizeOptions} onChanged={this._onIconSizeChange} />
             <FileTypeIcon type={IconType.image} size={this.state.imgSize} application={ApplicationType.Excel} />