Updated cursor on hovering image widget (ToolJet#3080)

burakozturk16 · May 23, 2022 · d6b9412 · d6b9412
1 parent 4b68627
commit d6b9412
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/frontend/src/Editor/Components/Image.jsx b/frontend/src/Editor/Components/Image.jsx
@@ -2,9 +2,13 @@ import React, { useRef, useEffect, useState } from 'react';
 import LazyLoad from 'react-lazyload';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 
-export const Image = function Image({ height, properties, styles, fireEvent, width }) {
+export const Image = function Image({ component, height, properties, styles, fireEvent, width }) {
   const { source, loadingState, alternativeText, zoomButtons } = properties;
   const { visibility, disabledState, borderType, backgroundColor, padding, imageFit } = styles;
+  const {
+    definition: { events },
+  } = component;
+  const hasOnClickEvent = events.some((event) => event.eventId === 'onClick');
   const widgetVisibility = visibility ?? true;
   const imageRef = useRef(null);
   const [imageOffset, setImageOffset] = useState(0);
@@ -60,6 +64,8 @@ export const Image = function Image({ height, properties, styles, fireEvent, wid
                             backgroundColor,
                             padding: Number.parseInt(padding),
                             objectFit: imageFit ? imageFit : 'contain',
+                            cursor: hasOnClickEvent ? 'pointer' : 'inherit',
+                            pointerEvents: 'auto',
                           }}
                           height={height}
                           onClick={() => fireEvent('onClick')}