diff --git a/src/components/DropdownEditor/index.js b/src/components/DropdownEditor/index.js
new file mode 100644
index 0000000..e3d6a2b
--- /dev/null
+++ b/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 (
+
+
+
+ {/**/}
+
+ {(props.value && props.value.length > 0 && props.value !== 'na') &&
+
+ }
+
+ )
+}
+
+export default DropdownEditor
diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
index 5e6d03b..e1a0e23 100644
--- a/src/components/Editor/index.js
+++ b/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) {
}}
>
- 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) &&
+ 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) &&
+ props.onChange({
+ ...props.annotation,
+ data: {
+ ...props.annotation.data,
+ text: e.target.value
+ }
+ })}
+ onSubmit={props.onSubmit}
+ value={props.annotation.data && props.annotation.data.text}
+ />
+ }
)
diff --git a/src/components/PolygonControls/index.js b/src/components/PolygonControls/index.js
index 9d49890..ae69264 100644
--- a/src/components/PolygonControls/index.js
+++ b/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
}}
>