@searpent/react-image-annotate 2.0.70 → 2.0.72

package/Annotator/reducers/general-reducer.js

@@ -1181,8 +1181,8 @@ export default (function (state, action) {
         var name = action.name,
             value = action.value,
             _imageIndex = action.imageIndex,
-            _groupId2 = action.groupId;
-        console.log(action);
+            _groupId2 = action.groupId,
+            metadataId = action.metadataId;
 
         if (isNaN(_imageIndex)) {
           var _state$albumMetadata;
@@ -1221,7 +1221,7 @@ export default (function (state, action) {
             var articleRegionToUpdate = (_state$images$_imageI2 = state.images[_imageIndex]) === null || _state$images$_imageI2 === void 0 ? void 0 : _state$images$_imageI2.regions[articleMetadataRegionIdx];
             var articleMetadata = JSON.parse(articleRegionToUpdate.text);
             var toBeUpdatedMetadataIdx = articleMetadata.findIndex(function (i) {
-              return i.key === name;
+              return i.metadataId === metadataId;
             });
 
             if (toBeUpdatedMetadataIdx < 0) {

package/MetadataEditorSidebarBox/index.js

@@ -13,10 +13,14 @@ var MetadataItemDiv = styled("div")(function (_ref) {
     "& > label": {
       fontSize: "1rem",
       marginBottom: ".5em",
-      textTransform: "capitalize"
+      textTransform: "capitalize",
+      wordWrap: "break-word"
     },
     label: {
       width: "50%"
+    },
+    select: {
+      width: "100%"
     }
   };
 });
@@ -26,6 +30,7 @@ var MetadataItem = function MetadataItem(_ref2) {
 
   var name = _ref2.name,
       value = _ref2.value,
+      metadataId = _ref2.metadataId,
       imageIndex = _ref2.imageIndex,
       groupId = _ref2.groupId,
       onChange = _ref2.onChange,
@@ -37,27 +42,31 @@ var MetadataItem = function MetadataItem(_ref2) {
     var _e$target = e.target,
         name = _e$target.name,
         value = _e$target.value;
-    console.log("onChange", {
-      name: name,
-      value: value
-    });
     onChange({
       name: name,
       value: value,
       imageIndex: imageIndex,
-      groupId: groupId
+      groupId: groupId,
+      metadataId: metadataId
     });
   };
 
   return React.createElement(MetadataItemDiv, null, React.createElement("label", {
     for: name
-  }, name), React.createElement("div", null, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && React.createElement(React.Fragment, null, React.createElement("input", {
+  }, name), React.createElement("div", {
+    style: {
+      width: "50%"
+    }
+  }, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && React.createElement(React.Fragment, null, React.createElement("input", {
     type: "text",
     value: value,
     name: name,
     onChange: handleChange,
     id: name,
-    list: "".concat(name, "-list")
+    list: "".concat(name, "-list"),
+    style: {
+      width: "100%"
+    }
   }), React.createElement("datalist", {
     id: "".concat(name, "-list")
   }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
@@ -75,7 +84,10 @@ var MetadataItem = function MetadataItem(_ref2) {
   }))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true && React.createElement("select", {
     name: name,
     id: name,
-    onChange: handleChange
+    onChange: handleChange,
+    style: {
+      width: '100%'
+    }
   }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
     if (opt.value && opt.label) {
       return React.createElement("option", {
@@ -102,11 +114,13 @@ var MetadataList = function MetadataList(_ref3) {
       groupId = _ref3.groupId;
   return React.createElement("div", null, React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
     var key = _ref4.key,
-        value = _ref4.value;
+        value = _ref4.value,
+        metadataId = _ref4.metadataId;
     return React.createElement(MetadataItem, {
       name: key,
       value: value,
       imageIndex: imageIndex,
+      metadataId: metadataId,
       groupId: groupId,
       onChange: onMetadataChange,
       metadataConfig: metadataConfigs.find(function (i) {
@@ -160,7 +174,7 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
   var selectedGroupId = state === null || state === void 0 ? void 0 : (_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : (_state$images$state$s3 = _state$images$state$s2.regions) === null || _state$images$state$s3 === void 0 ? void 0 : (_state$images$state$s4 = _state$images$state$s3.find(function (r) {
     return r.highlighted === true;
   })) === null || _state$images$state$s4 === void 0 ? void 0 : _state$images$state$s4.groupId;
-  var articleMetadata = [];
+  var articleMetadata = []; // example: [{key: "previousArticleId", value "123-123-123-123-123"}]
 
   if (selectedGroupId !== undefined) {
     var articleMetadataRegion = state === null || state === void 0 ? void 0 : state.images[state.selectedImage].regions.find(function (r) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.70",
+  "version": "2.0.72",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",