Fix lint issues

RobinNagpal · Nov 10, 2021 · bdf1426 · bdf1426
1 parent dad25ef
commit bdf1426
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 31 deletions.
diff --git a/src/components/Annotation.tsx b/src/components/Annotation.tsx
@@ -71,6 +71,7 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
     idFunction,
 
     onSelectedAnnotationUpdate,
+    onAnnotationClick: onAnnotationClickProp,
 
     renderShape,
     renderEditor,
@@ -132,7 +133,7 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
         removeTargetTouchEventListeners();
       }
     }
-  }, [options.allowTouch]);
+  });
 
   const setInnerRef = (el: HTMLImageElement | null) => {
     if (el) {
@@ -247,10 +248,10 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
   const onAnnotationClick = useCallback(
     (annotation: IAnnotation) => {
       setSelectedAnnotation(annotation);
-      props.onSelectedAnnotationUpdate(annotation, true);
-      props.onAnnotationClick(annotation);
+      onSelectedAnnotationUpdate(annotation, true);
+      onAnnotationClickProp(annotation);
     },
-    [props.onAnnotationClick, props.onSelectedAnnotationUpdate]
+    [onAnnotationClickProp, onSelectedAnnotationUpdate]
   );
 
   useHandleEscapeEvent(unselectSelectedAnnotation, selectedAnnotation);

diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 
 const Img = styled.img`
@@ -18,9 +17,6 @@ interface ImageProps {
 
 export default function Image(props: ImageProps) {
   const imageRef = useRef<HTMLImageElement>(null);
-  useEffect(() => {
-    props.setInnerRef(imageRef.current);
-  }, [imageRef.current]);
 
   const { alt, className, draggable, src, style } = props;
   return (

diff --git a/src/components/Stories/Common/AnnotationStoryTemplate.tsx b/src/components/Stories/Common/AnnotationStoryTemplate.tsx
@@ -16,29 +16,31 @@ export const argTypes: ArgTypes = {
   },
 };
 
-export const BaseStoryTemplate: (
+const StoryComponent: (args: AnnotationPropsOptional) => React.ReactElement = (
+  args: AnnotationPropsOptional
+) => {
+  const [annotations, setAnnotations] = useState<any[]>(args.annotations || []);
+
+  return (
+    <div style={{ width: '800px' }}>
+      <Annotation
+        annotations={annotations}
+        onAnnotationsUpdate={setAnnotations}
+        {...args}
+      />
+    </div>
+  );
+};
+
+export const BaseStoryTemplateWithAnnotations: (
   config: AnnotationPropsOptional
 ) => Story<AnnotationPropsOptional> = (config: AnnotationPropsOptional) => {
-  let element = (args: AnnotationPropsOptional) => {
-    const [annotations, setAnnotations] = useState<any[]>(
-      config.annotations || []
-    );
-
-    return (
-      <div style={{ width: '800px' }}>
-        <Annotation
-          annotations={annotations}
-          onAnnotationsUpdate={setAnnotations}
-          {...args}
-        />
-      </div>
-    );
-  };
-  return element;
+  return (args: AnnotationPropsOptional) =>
+    StoryComponent({ ...args, annotations: config.annotations });
 };
 
 export const DefaultAnnotationStoryTemplate: Story<AnnotationPropsOptional> =
-  BaseStoryTemplate({});
+  BaseStoryTemplateWithAnnotations({ annotations: [] });
 
 export const ovalAnnotations = [
   {
@@ -83,7 +85,7 @@ export const ovalAnnotations = [
 ];
 
 export const OvalTemplateWithExistingAnnotations: Story<AnnotationPropsOptional> =
-  BaseStoryTemplate({
+  BaseStoryTemplateWithAnnotations({
     annotations: ovalAnnotations,
   });
 
@@ -143,7 +145,7 @@ export const rectangularAnnotations = [
 ];
 
 export const RectangleTemplateWithExistingAnnotations: Story<AnnotationPropsOptional> =
-  BaseStoryTemplate({
+  BaseStoryTemplateWithAnnotations({
     annotations: rectangularAnnotations,
   });
 
@@ -216,6 +218,6 @@ export const pointAnnotations = [
 ];
 
 export const PointTemplateWithExistingAnnotations: Story<AnnotationPropsOptional> =
-  BaseStoryTemplate({
+  BaseStoryTemplateWithAnnotations({
     annotations: pointAnnotations,
   });
diff --git a/src/utils/useHandleEscapeEvent.ts b/src/utils/useHandleEscapeEvent.ts
@@ -18,5 +18,5 @@ export default function useHandleEscapeEvent(
       // Unbind the event listener on clean up
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [selectedItem]);
+  }, [selectedItem, unselectSelectedAnnotation]);
 }