v0.3.11 (#48)

feat(AnnotationEngine) add children content

Author: dimitrilahaye

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thetribe/react-components",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "Library of generic React components",
   "main": "dist/bundle.js",
   "types": "dist/index.d.ts",

src/annotation-engine/index.tsx

@@ -3,6 +3,7 @@ import { Annotation, PartialAnnotationStyle, StyleDataById } from './models';
 import Canvas from './style/canvas';
 import Container from './style/container';
 import Image from './style/image';
+import InnerContainer from './style/inner-container';
 import useAnnotationEngine, { Handles, OnEvent } from './use-annotation-engine';
 
 export interface AnnotationEngineProps {
@@ -31,6 +32,7 @@ const AnnotationEngine: FC<AnnotationEngineProps> = forwardRef(
             styleForAnnotations,
             styleForAnnotationToEdit,
             styleForPointsToEdit,
+            children,
         },
         ref: ForwardedRef<Handles>,
     ) => {
@@ -50,6 +52,7 @@ const AnnotationEngine: FC<AnnotationEngineProps> = forwardRef(
 
         return (
             <Container className={className}>
+                {children && <InnerContainer>{children}</InnerContainer>}
                 <Image src={backgroundImagePath} />
                 {foregroundImagePath && <Image src={foregroundImagePath} />}
                 <Canvas ref={cRef} id={id} />

src/annotation-engine/stories.tsx

@@ -49,6 +49,17 @@ const Label = styled.label`
     color: white;
 `;
 
+const InnerContent = styled.div`
+    background-color: wheat;
+    border-radius: 12px;
+    box-sizing: content-box;
+    color: black;
+    height: fit-content;
+    margin: 12px auto;
+    padding: 10px;
+    width: fit-content;
+`;
+
 type SaveAnnotationFunction = (geometry: Array<Coordinates>, isClosed: boolean) => string;
 
 const useSaveAnnotation = () => {
@@ -534,7 +545,9 @@ const RoadcareBehaviorTemplate: Story<StyledProps> = ({ width, height, ...args }
                 styleForAnnotationToEdit={styleForAnnotationToEdit}
                 styleForAnnotations={styleOps.styleForAnnotations}
                 styleForPointsToEdit={styleOps.styleForPointsToEdit}
-            />
+            >
+                <InnerContent>Inner container</InnerContent>
+            </StyledAnnotationEngine>
             <ActionContainer>
                 <Label>Type de forme</Label>
                 <select onChange={(event) => setShapeType(event.target.value)} value={shapeType}>

src/annotation-engine/style/inner-container.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const InnerContainer = styled.div`
+    display: flex;
+    height: auto;
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+`;
+
+export default InnerContainer;