From 3bd40d321ef96ba293a1963c404700ef349b308c Mon Sep 17 00:00:00 2001 From: guidozam Date: Sun, 10 Mar 2024 16:22:20 +0100 Subject: [PATCH 01/10] Added onClick support to FileTypeIcon --- src/controls/fileTypeIcon/FileTypeIcon.tsx | 4 ++++ src/controls/fileTypeIcon/IFileTypeIcon.ts | 3 +++ .../controlsTest/components/ControlsTest.tsx | 14 +++++++------- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/controls/fileTypeIcon/FileTypeIcon.tsx b/src/controls/fileTypeIcon/FileTypeIcon.tsx index 2e7f8cede..82125063d 100644 --- a/src/controls/fileTypeIcon/FileTypeIcon.tsx +++ b/src/controls/fileTypeIcon/FileTypeIcon.tsx @@ -264,6 +264,10 @@ export class FileTypeIcon extends React.Component { iconElm = ; } + if (this.props.onClick) { + iconElm.props.onClick = this.props.onClick; + } + // Return the icon element return iconElm; } diff --git a/src/controls/fileTypeIcon/IFileTypeIcon.ts b/src/controls/fileTypeIcon/IFileTypeIcon.ts index a70ddf4fc..6b4c85949 100644 --- a/src/controls/fileTypeIcon/IFileTypeIcon.ts +++ b/src/controls/fileTypeIcon/IFileTypeIcon.ts @@ -1,3 +1,5 @@ +import { MouseEventHandler } from "react"; + /** * Available icon types */ @@ -230,6 +232,7 @@ export interface IFileTypeIconProps { application?: ApplicationType; path?: string; size?: ImageSize; + onClick?: MouseEventHandler; } /** diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 549f5faee..c5d97a183 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -1514,13 +1514,13 @@ export default class ControlsTest extends React.Component
- Image icons: - - - - - - + Image icons with support to onClick event: + console.log("Clicked on FileTypeIcon!")} /> + console.log("Clicked on FileTypeIcon!")} /> + console.log("Clicked on FileTypeIcon!")} /> + console.log("Clicked on FileTypeIcon!")} /> + console.log("Clicked on FileTypeIcon!")} /> + console.log("Clicked on FileTypeIcon!")} />
Icon size tester: From e5c5392c3da96c65ceddfc15d87287a84c1524c3 Mon Sep 17 00:00:00 2001 From: guidozam Date: Sun, 10 Mar 2024 16:50:59 +0100 Subject: [PATCH 02/10] Added various events to FileTypeIcon --- src/controls/fileTypeIcon/FileTypeIcon.tsx | 10 +++++--- src/controls/fileTypeIcon/IFileTypeIcon.ts | 10 +++++--- .../controlsTest/components/ControlsTest.tsx | 25 +++++++++++++------ 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/src/controls/fileTypeIcon/FileTypeIcon.tsx b/src/controls/fileTypeIcon/FileTypeIcon.tsx index 82125063d..3406ca210 100644 --- a/src/controls/fileTypeIcon/FileTypeIcon.tsx +++ b/src/controls/fileTypeIcon/FileTypeIcon.tsx @@ -264,9 +264,13 @@ export class FileTypeIcon extends React.Component { iconElm = ; } - if (this.props.onClick) { - iconElm.props.onClick = this.props.onClick; - } + // 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 6b4c85949..71b4c485c 100644 --- a/src/controls/fileTypeIcon/IFileTypeIcon.ts +++ b/src/controls/fileTypeIcon/IFileTypeIcon.ts @@ -1,4 +1,4 @@ -import { MouseEventHandler } from "react"; +import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactEventHandler } from "react"; /** * Available icon types @@ -227,12 +227,16 @@ export interface ImageInformation { * Interface for the FileTypeIcon component properties */ export interface IFileTypeIconProps { - type: IconType; application?: ApplicationType; path?: string; size?: ImageSize; - onClick?: MouseEventHandler; + 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 c5d97a183..f8d0549ba 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -1514,13 +1514,24 @@ export default class ControlsTest extends React.Component
- Image icons with support to onClick event: - console.log("Clicked on FileTypeIcon!")} /> - console.log("Clicked on FileTypeIcon!")} /> - console.log("Clicked on FileTypeIcon!")} /> - console.log("Clicked on FileTypeIcon!")} /> - console.log("Clicked on FileTypeIcon!")} /> - console.log("Clicked on FileTypeIcon!")} /> + Image icons: + + + + + + +
+
+ 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: From c7d651c25e4790576f49ecd5fe574a8d9a12caa8 Mon Sep 17 00:00:00 2001 From: guidozam Date: Sun, 10 Mar 2024 18:21:12 +0100 Subject: [PATCH 03/10] Updated documentation --- docs/documentation/docs/controls/FileTypeIcon.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md index d37f8bb77..23968cb90 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\ | no | Event triggered when the icon is clicked. | +| onDoubleClick | React.MouseEvent\ | no | Event triggered when the icon is double clicked. | +| onMouseEnter | React.MouseEvent\ | no | Event triggered when the mouse cursor enter the icon. | +| onMouseLeave | React.MouseEvent\ | no | Event triggered when the mouse cursor leave the icon. | +| onMouseOver | React.MouseEvent\ | no | Event triggered when the mouse cursor is over the icon. | +| onMouseUp | React.MouseEvent\ | 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) From 98eec56ceee3c6f4a8773f25071f310ffb7a31aa Mon Sep 17 00:00:00 2001 From: Guido Zambarda Date: Wed, 1 May 2024 10:04:29 +0200 Subject: [PATCH 04/10] Update docs/documentation/docs/controls/FileTypeIcon.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël Maillot --- docs/documentation/docs/controls/FileTypeIcon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md index 23968cb90..ca0d111a3 100644 --- a/docs/documentation/docs/controls/FileTypeIcon.md +++ b/docs/documentation/docs/controls/FileTypeIcon.md @@ -44,7 +44,7 @@ The FileTypeIcon component can be configured with the following properties: | 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\ | no | Event triggered when the icon is clicked. | | onDoubleClick | React.MouseEvent\ | no | Event triggered when the icon is double clicked. | -| onMouseEnter | React.MouseEvent\ | no | Event triggered when the mouse cursor enter the icon. | +| onMouseEnter | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor enters the icon (without event bubbling). | | onMouseLeave | React.MouseEvent\ | no | Event triggered when the mouse cursor leave the icon. | | onMouseOver | React.MouseEvent\ | no | Event triggered when the mouse cursor is over the icon. | | onMouseUp | React.MouseEvent\ | no | Event triggered when the mouse button is released after clicked on the icon. | From cafb1e958172b29e9f13c3f007713e40c2c8abcc Mon Sep 17 00:00:00 2001 From: Guido Zambarda Date: Wed, 1 May 2024 10:04:44 +0200 Subject: [PATCH 05/10] Update docs/documentation/docs/controls/FileTypeIcon.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël Maillot --- docs/documentation/docs/controls/FileTypeIcon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md index ca0d111a3..dc736d86f 100644 --- a/docs/documentation/docs/controls/FileTypeIcon.md +++ b/docs/documentation/docs/controls/FileTypeIcon.md @@ -45,7 +45,7 @@ The FileTypeIcon component can be configured with the following properties: | onClick | React.MouseEvent\ | no | Event triggered when the icon is clicked. | | onDoubleClick | React.MouseEvent\ | 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\ | no | Event triggered when the mouse cursor leave the icon. | +| onMouseLeave | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor leaves the icon. | | onMouseOver | React.MouseEvent\ | no | Event triggered when the mouse cursor is over the icon. | | onMouseUp | React.MouseEvent\ | no | Event triggered when the mouse button is released after clicked on the icon. | From 40c3e61dfe18332f8ac4989ee919bc14c9614e1f Mon Sep 17 00:00:00 2001 From: Guido Zambarda Date: Wed, 1 May 2024 10:05:05 +0200 Subject: [PATCH 06/10] Update docs/documentation/docs/controls/FileTypeIcon.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël Maillot --- docs/documentation/docs/controls/FileTypeIcon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md index dc736d86f..340b41911 100644 --- a/docs/documentation/docs/controls/FileTypeIcon.md +++ b/docs/documentation/docs/controls/FileTypeIcon.md @@ -46,7 +46,7 @@ The FileTypeIcon component can be configured with the following properties: | onDoubleClick | React.MouseEvent\ | 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\ | no | Event triggered when the mouse cursor is over the icon. | +| onMouseOver | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor enters the icon (with event bubbling). | | onMouseUp | React.MouseEvent\ | 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) From 4d9602f237c819ef06224b96a34f6f2503227502 Mon Sep 17 00:00:00 2001 From: Guido Zambarda Date: Wed, 1 May 2024 10:05:17 +0200 Subject: [PATCH 07/10] Update docs/documentation/docs/controls/FileTypeIcon.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël Maillot --- docs/documentation/docs/controls/FileTypeIcon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md index 340b41911..c35860dbe 100644 --- a/docs/documentation/docs/controls/FileTypeIcon.md +++ b/docs/documentation/docs/controls/FileTypeIcon.md @@ -42,7 +42,7 @@ 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\ | no | Event triggered when the icon is clicked. | +| onClick | React.MouseEvent<HTMLElement> | no | Event triggered when the icon is clicked. | | onDoubleClick | React.MouseEvent\ | 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. | From f11c87cc8736d5b5221bc6b84b79d416ad7ce4f8 Mon Sep 17 00:00:00 2001 From: Guido Zambarda Date: Wed, 1 May 2024 10:05:36 +0200 Subject: [PATCH 08/10] Update docs/documentation/docs/controls/FileTypeIcon.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël Maillot --- docs/documentation/docs/controls/FileTypeIcon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md index c35860dbe..b0ae0ff1b 100644 --- a/docs/documentation/docs/controls/FileTypeIcon.md +++ b/docs/documentation/docs/controls/FileTypeIcon.md @@ -43,7 +43,7 @@ The FileTypeIcon component can be configured with the following properties: | 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\ | no | Event triggered when the icon is double 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). | From de014af08692bcd02da63316fc39065fb587e6a8 Mon Sep 17 00:00:00 2001 From: Guido Zambarda Date: Wed, 1 May 2024 10:05:57 +0200 Subject: [PATCH 09/10] Update docs/documentation/docs/controls/FileTypeIcon.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël Maillot --- docs/documentation/docs/controls/FileTypeIcon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md index b0ae0ff1b..208faed80 100644 --- a/docs/documentation/docs/controls/FileTypeIcon.md +++ b/docs/documentation/docs/controls/FileTypeIcon.md @@ -47,6 +47,6 @@ The FileTypeIcon component can be configured with the following properties: | 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\ | no | Event triggered when the mouse button is released after clicked on the icon. | +| 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) From a925c40abf22e44f02fbfa4469a0ab033f62e91b Mon Sep 17 00:00:00 2001 From: guidozam Date: Wed, 1 May 2024 10:08:55 +0200 Subject: [PATCH 10/10] Removed unused imports in IFileTypeIcon.ts --- src/controls/fileTypeIcon/IFileTypeIcon.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/fileTypeIcon/IFileTypeIcon.ts b/src/controls/fileTypeIcon/IFileTypeIcon.ts index 71b4c485c..d2f2d7db7 100644 --- a/src/controls/fileTypeIcon/IFileTypeIcon.ts +++ b/src/controls/fileTypeIcon/IFileTypeIcon.ts @@ -1,4 +1,4 @@ -import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactEventHandler } from "react"; +import { MouseEventHandler } from "react"; /** * Available icon types