wrap point and rectangle

RobinNagpal · Oct 27, 2021 · cb9c9cd · cb9c9cd
1 parent e48bf32
commit cb9c9cd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 36 deletions.
diff --git a/src/components/Shapes/Point.tsx b/src/components/Shapes/Point.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
-import { IAnnotation } from '../../types/index';
+import { ShapeProps } from '../../types/index';
+import { withShapeWrapper } from './withShapeWrapper';
 
 const Container = styled.div`
   border-radius: 50%;
@@ -17,26 +18,27 @@ const Container = styled.div`
   z-index: 1;
   cursor: pointer;
 `;
-interface PointProps {
-  annotation: IAnnotation;
-}
 
-function Point(props: PointProps) {
-  const { geometry } = props.annotation;
+function Point(props: ShapeProps) {
+  const {
+    annotation: { geometry },
+    isMouseOver,
+    onMouseEnter,
+    onMouseLeave,
+  } = props;
   if (!geometry) return null;
-  const [mouseHovered, setMouseHovered] = useState<boolean>(false);
 
   return (
     <Container
       style={{
         top: `${geometry.y}%`,
         left: `${geometry.x}%`,
-        border: mouseHovered ? 'solid 3px grey' : 'solid 3px white',
+        border: isMouseOver ? 'solid 3px grey' : 'solid 3px white',
       }}
-      onMouseEnter={() => setMouseHovered(true)}
-      onMouseLeave={() => setMouseHovered(false)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     />
   );
 }
 
-export default Point;
+export default withShapeWrapper(Point);
diff --git a/src/components/Shapes/Rectangle.tsx b/src/components/Shapes/Rectangle.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
-import { IAnnotation } from '../../types/index';
+import { ShapeProps } from '../../types/index';
+import { withShapeWrapper } from './withShapeWrapper';
 
 const Container = styled.div`
   box-shadow: 0px 0px 1px 1px white inset;
@@ -10,37 +11,32 @@ const Container = styled.div`
   cursor: pointer;
 `;
 
-interface RectangleProps {
-  annotation: IAnnotation;
-  className?: string;
-  style?: object;
-}
-
-function Rectangle(props: RectangleProps) {
-  const { geometry } = props.annotation;
+function Rectangle(props: ShapeProps) {
+  const {
+    annotation: { geometry },
+    isMouseOver,
+    onMouseEnter,
+    onMouseLeave,
+  } = props;
   if (!geometry) return null;
-  const [mouseHovered, setMouseHovered] = useState<boolean>(false);
   return (
     <Container
-      className={props.className}
       style={{
         position: 'absolute',
         left: `${geometry.x}%`,
         top: `${geometry.y}%`,
         height: `${geometry.height}%`,
         width: `${geometry.width}%`,
-        border: mouseHovered ? 'solid 1px black' : 'dashed 2px black',
-        boxShadow: mouseHovered ? '0 0 1px 1px black inset' : '',
-        backgroundColor: mouseHovered
+        border: isMouseOver ? 'solid 1px black' : 'dashed 2px black',
+        boxShadow: isMouseOver ? '0 0 1px 1px black inset' : '',
+        backgroundColor: isMouseOver
           ? 'rgba(128, 128, 128, 0.3)'
           : 'rgba(128, 128, 128, 0.05)',
-
-        ...props.style,
       }}
-      onMouseEnter={() => setMouseHovered(true)}
-      onMouseLeave={() => setMouseHovered(false)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     />
   );
 }
 
-export default Rectangle;
+export default withShapeWrapper(Rectangle);
diff --git a/src/components/defaultProps.tsx b/src/components/defaultProps.tsx
@@ -15,7 +15,6 @@ import Editor from './Editor';
 import FancyRectangle from './FancyRectangle';
 import Overlay from './Overlay';
 import Oval from './Shapes/Oval';
-
 import Point from './Shapes/Point';
 import Rectangle from './Shapes/Rectangle';
 
@@ -39,7 +38,7 @@ const defaultProps: AnnotationProps = {
       case RectangleSelector.TYPE:
         return <FancyRectangle annotation={annotation} />;
       case PointSelector.TYPE:
-        return <Point annotation={annotation} />;
+        return <Point annotation={annotation} renderContent={renderContent} />;
       case OvalSelector.TYPE:
         return <Oval annotation={annotation} renderContent={renderContent} />;
       default:
@@ -56,9 +55,21 @@ const defaultProps: AnnotationProps = {
   }: RenderHighlightProps): ReactElement | null => {
     switch (annotation.geometry.type) {
       case RectangleSelector.TYPE:
-        return <Rectangle key={key} annotation={annotation} />;
+        return (
+          <Rectangle
+            key={key}
+            annotation={annotation}
+            renderContent={renderContent}
+          />
+        );
       case PointSelector.TYPE:
-        return <Point key={key} annotation={annotation} />;
+        return (
+          <Point
+            key={key}
+            annotation={annotation}
+            renderContent={renderContent}
+          />
+        );
       case OvalSelector.TYPE:
         return (
           <Oval