Feature/implement classifer dropdown

src/components/DropdownEditor/index.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const Inner = styled.div`
+  padding: 8px 16px;
+
+  textarea {
+    border: 0;
+    font-size: 14px;
+    margin: 6px 0;
+    min-height: 60px;
+    outline: 0;
+  }
+`
+
+const Button = styled.div`
+  background: whitesmoke;
+  border: 0;
+  box-sizing: border-box;
+  color: #363636;
+  cursor: pointer;
+  font-size: 1rem;
+  margin: 0;
+  outline: 0;
+  padding: 8px 16px;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(0,0,0,0.1);
+  width: 100%;
+
+  transition: background 0.21s ease-in-out;
+
+  &:focus, &:hover {
+    background: #eeeeee;
+  }
+`
+
+function DropdownEditor (props) {
+  return (
+    <React.Fragment>
+      <Inner>
+        <select defaultValue={props.value} onChange={props.onChange}>
+          <option value="na">- classify -</option>
+          <option>Young Coffee</option>
+          <option>Mature Coffee</option>
+        </select>
+        {/*<textarea
+          placeholder='Write description'
+          onFocus={props.onFocus}
+          onBlur={props.onBlur}
+          onChange={props.onChange}
+          value={props.value}
+        >
+        </textarea>*/}
+      </Inner>
+      {(props.value && props.value.length > 0 && props.value !== 'na') &&
+        <Button
+          onClick={props.onSubmit}
+        >
+          Submit
+        </Button>
+      }
+    </React.Fragment>
+  )
+}
+
+export default DropdownEditor

src/components/Editor/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
 import TextEditor from '../TextEditor'
+import DropdownEditor from '../DropdownEditor'
 import { getHorizontallyCentralPoint, getVerticallyLowestPoint } from '../../utils/pointsUtils'
 import { PolygonSelector } from '../../selectors'
 
@@ -47,17 +48,32 @@ function Editor (props) {
       }}
     >
       <Container>
-        <TextEditor
-          onChange={e => props.onChange({
-            ...props.annotation,
-            data: {
-              ...props.annotation.data,
-              text: e.target.value
-            }
-          })}
-          onSubmit={props.onSubmit}
-          value={props.annotation.data && props.annotation.data.text}
-        />
+        {(geometry.type === PolygonSelector.TYPE) &&
+          <DropdownEditor
+            onChange={e => props.onChange({
+              ...props.annotation,
+              data: {
+                ...props.annotation.data,
+                text: e.target.value
+              }
+            })}
+            onSubmit={props.onSubmit}
+            value={props.annotation.data && props.annotation.data.text}
+          />
+        }
+        {(geometry.type !== PolygonSelector.TYPE) &&
+          <TextEditor
+            onChange={e => props.onChange({
+              ...props.annotation,
+              data: {
+                ...props.annotation.data,
+                text: e.target.value
+              }
+            })}
+            onSubmit={props.onSubmit}
+            value={props.annotation.data && props.annotation.data.text}
+          />
+        }
       </Container>
     </div>
   )

src/components/PolygonControls/index.js

@@ -21,7 +21,6 @@ const Container = styled.div`
     0px 1px 5px 0px rgba(0, 0, 0, 0.2),
     0px 2px 2px 0px rgba(0, 0, 0, 0.14),
     0px 3px 1px -2px rgba(0, 0, 0, 0.12);
-  margin-top: 16px;
   transform-origin: top left;
 
   animation: ${fadeInScale} 0.31s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -61,7 +60,7 @@ function PolygonControls (props) {
       style={{
         position: 'absolute',
         left: `${getHorizontallyCentralPoint(geometry.points)}%`,
-        top: `${getVerticallyLowestPoint(geometry.points)}%`,
+        top: `${(getVerticallyLowestPoint(geometry.points) + 10)}%`,
         ...props.style
       }}
     >