diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md index d37f8bb77..208faed80 100644 --- 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<HTMLElement> | no | Event triggered when the icon is clicked. | +| onDoubleClick | React.MouseEvent<HTMLElement> | no | Event triggered when the icon is double clicked. | +| onMouseEnter | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor enters the icon (without event bubbling). | +| onMouseLeave | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor leaves the icon. | +| onMouseOver | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor enters the icon (with event bubbling). | +| onMouseUp | React.MouseEvent<HTMLElement> | 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 index 2e7f8cede..3406ca210 100644 --- a/src/controls/fileTypeIcon/FileTypeIcon.tsx +++ b/src/controls/fileTypeIcon/FileTypeIcon.tsx @@ -264,6 +264,14 @@ export class FileTypeIcon extends React.Component { iconElm = ; } + // 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 index a70ddf4fc..d2f2d7db7 100644 --- 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 | undefined; + onDoubleClick?: MouseEventHandler | undefined; + onMouseEnter?: MouseEventHandler | undefined; + onMouseLeave?: MouseEventHandler | undefined; + onMouseOver?: MouseEventHandler | undefined; + onMouseUp?: MouseEventHandler | undefined; } /** diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 549f5faee..f8d0549ba 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -1522,6 +1522,17 @@ export default class ControlsTest extends React.Component +
+ Image icons with support to events: + 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!")} + /> +
Icon size tester: