remove duplicate code from the stories

RobinNagpal · Oct 29, 2021 · 457ea98 · 457ea98
1 parent 393d32f
commit 457ea98
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 35 deletions.
diff --git a/src/components/Annotation.tsx b/src/components/Annotation.tsx
@@ -231,6 +231,7 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
           {annotations.map((annotation) => (
             <RenderShape
               key={annotation.data.id}
+              editMode={props.editorMode}
               annotation={annotation}
               renderContent={props.renderContent}
               isInSelectionMode={!!tmpAnnotation}
@@ -241,6 +242,7 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
           {!props.disableSelector && tmpAnnotation?.geometry && (
             <RenderShape
               key={tmpAnnotation.data.id}
+              editMode={props.editorMode}
               annotation={tmpAnnotation}
               renderContent={props.renderContent}
               isInSelectionMode={!!tmpAnnotation}

diff --git a/src/components/Shapes/withShapeWrapper.tsx b/src/components/Shapes/withShapeWrapper.tsx
@@ -1,16 +1,26 @@
 import React, { ComponentType, useState } from 'react';
-import { ShapeProps, WrappedShapeProps } from '../../types';
+import { EditorMode, ShapeProps, WrappedShapeProps } from '../../types';
 
 export const withShapeWrapper = (
   DecoratedShape: ComponentType<ShapeProps>
 ): ComponentType<
   Omit<WrappedShapeProps, 'isMouseOver' | 'onMouseEnter' | 'onMouseLeave'>
 > => {
   const WrappedComponent = (props: WrappedShapeProps) => {
-    const { annotation, onClick, renderContent, selectedAnnotation } = props;
+    const {
+      annotation,
+      editMode,
+      onClick,
+      renderContent,
+      selectedAnnotation,
+    } = props;
     const [mouseHovered, setMouseHovered] = useState<boolean>(false);
-    const reactElement =
-      mouseHovered && renderContent && props.annotation.data.text
+
+    const shouldShowContent =
+      editMode === EditorMode.Annotate && mouseHovered && renderContent;
+
+    const reactContentElement =
+      shouldShowContent && props.annotation.data.text
         ? renderContent(props)
         : null;
 
@@ -25,7 +35,7 @@ export const withShapeWrapper = (
           onMouseLeave={() => setMouseHovered(false)}
         />
 
-        {reactElement}
+        {reactContentElement}
       </div>
     );
   };

diff --git a/src/components/Stories/AnnotationToolbarButtons.stories.tsx b/src/components/Stories/AnnotationToolbarButtons.stories.tsx
@@ -14,9 +14,6 @@ import {
   RectangleTemplateWithExistingAnnotations,
 } from './AnnotationStoryTemplate';
 
-const defaultImageUrl =
-  'https://raw.githubusercontent.com/RobinNagpal/react-image-annotation-ts/HEAD/example/img.jpeg';
-
 const meta: Meta = {
   title: 'StackedAnnotationsHighlightOnly',
   component: Annotation,
@@ -30,21 +27,18 @@ export default meta;
 
 export const Oval = OvalTemplateWithExistingAnnotations.bind({});
 Oval.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [OvalSelector.TYPE],
 };
 
 export const Rectangle = RectangleTemplateWithExistingAnnotations.bind({});
 Rectangle.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [RectangleSelector.TYPE],
 };
 
 export const Point = PointTemplateWithExistingAnnotations.bind({});
 Point.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [PointSelector.TYPE],
 };
diff --git a/src/components/Stories/DefaultAnnotation.stories.tsx b/src/components/Stories/DefaultAnnotation.stories.tsx
@@ -6,9 +6,6 @@ import {
   DefaultAnnotationStoryTemplate,
 } from './AnnotationStoryTemplate';
 
-const defaultImageUrl =
-  'https://raw.githubusercontent.com/RobinNagpal/react-image-annotation-ts/HEAD/example/img.jpeg';
-
 const meta: Meta = {
   title: 'Annotation',
   component: Annotation,
@@ -23,6 +20,4 @@ export default meta;
 const StoryTemplate: Story<AnnotationPropsOptional> = DefaultAnnotationStoryTemplate;
 
 export const Default = StoryTemplate.bind({});
-Default.args = {
-  src: defaultImageUrl,
-};
+Default.args = {};
diff --git a/src/components/Stories/HighlightModeAnnotation.stories.tsx b/src/components/Stories/HighlightModeAnnotation.stories.tsx
@@ -12,9 +12,6 @@ import {
   DefaultAnnotationStoryTemplate,
 } from './AnnotationStoryTemplate';
 
-const defaultImageUrl =
-  'https://raw.githubusercontent.com/RobinNagpal/react-image-annotation-ts/HEAD/example/img.jpeg';
-
 const meta: Meta = {
   title: 'HighlightAnnotation',
   component: Annotation,
@@ -31,21 +28,18 @@ const StoryTemplate: Story<AnnotationPropsOptional> = DefaultAnnotationStoryTemp
 export const Oval = StoryTemplate.bind({});
 
 Oval.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [OvalSelector.TYPE],
 };
 
 export const Rectangle = StoryTemplate.bind({});
 Rectangle.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [RectangleSelector.TYPE],
 };
 
 export const Point = StoryTemplate.bind({});
 Point.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [PointSelector.TYPE],
 };
diff --git a/src/components/Stories/StackedAnnotationsAnnotate.stories.tsx b/src/components/Stories/StackedAnnotationsAnnotate.stories.tsx
@@ -14,9 +14,6 @@ import {
   RectangleTemplateWithExistingAnnotations,
 } from './AnnotationStoryTemplate';
 
-const defaultImageUrl =
-  'https://raw.githubusercontent.com/RobinNagpal/react-image-annotation-ts/HEAD/example/img.jpeg';
-
 const meta: Meta = {
   title: 'StackedAnnotationsAnnotate',
   component: Annotation,
@@ -30,21 +27,18 @@ export default meta;
 
 export const Oval = OvalTemplateWithExistingAnnotations.bind({});
 Oval.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.Annotate,
   shapes: [OvalSelector.TYPE],
 };
 
 export const Rectangle = RectangleTemplateWithExistingAnnotations.bind({});
 Rectangle.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.Annotate,
   shapes: [RectangleSelector.TYPE],
 };
 
 export const Point = PointTemplateWithExistingAnnotations.bind({});
 Point.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.Annotate,
   shapes: [PointSelector.TYPE],
 };
diff --git a/src/components/Stories/StackedAnnotationsHighlightOnly.stories.tsx b/src/components/Stories/StackedAnnotationsHighlightOnly.stories.tsx
@@ -14,9 +14,6 @@ import {
   RectangleTemplateWithExistingAnnotations,
 } from './AnnotationStoryTemplate';
 
-const defaultImageUrl =
-  'https://raw.githubusercontent.com/RobinNagpal/react-image-annotation-ts/HEAD/example/img.jpeg';
-
 const meta: Meta = {
   title: 'StackedAnnotationsHighlightOnly',
   component: Annotation,
@@ -30,21 +27,18 @@ export default meta;
 
 export const Oval = OvalTemplateWithExistingAnnotations.bind({});
 Oval.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [OvalSelector.TYPE],
 };
 
 export const Rectangle = RectangleTemplateWithExistingAnnotations.bind({});
 Rectangle.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [RectangleSelector.TYPE],
 };
 
 export const Point = PointTemplateWithExistingAnnotations.bind({});
 Point.args = {
-  src: defaultImageUrl,
   editorMode: EditorMode.HighlightOnly,
   shapes: [PointSelector.TYPE],
 };
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -136,6 +136,7 @@ export type WrappedShapeProps = Omit<
   ShapeProps,
   'isMouseOver' | 'onMouseEnter' | 'onMouseLeave'
 > & {
+  editMode: EditorMode;
   isInSelectionMode: boolean;
   onClick?: (annotation: IAnnotation) => void;
   renderContent?: (props: ContentProps) => ReactElement | null;