@searpent/react-image-annotate 2.0.30 → 2.0.31

package/MainLayout/index.js

@@ -343,7 +343,8 @@ export var MainLayout = function MainLayout(_ref5) {
     onSave: onSave,
     saveActive: saveActive,
     recalcActive: recalcActive,
-    onMetadataChange: onMetadataChange
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: state.metadataConfigs || []
   }), React.createElement(WorkspaceWrapper, null, React.createElement(Workspace, {
     style: {
       width: "auto"

package/PageSelector/index.js

@@ -12,7 +12,9 @@ function PageThumbnail(_ref) {
       metadata = _ref.metadata,
       showMetadata = _ref.showMetadata,
       imageIndex = _ref.imageIndex,
-      onMetadataChange = _ref.onMetadataChange;
+      onMetadataChange = _ref.onMetadataChange,
+      _ref$metadataConfigs = _ref.metadataConfigs,
+      metadataConfigs = _ref$metadataConfigs === void 0 ? [] : _ref$metadataConfigs;
 
   var handleChange = function handleChange(e) {
     e.preventDefault();
@@ -49,6 +51,8 @@ function PageThumbnail(_ref) {
   }, pageNumber))), React.createElement("div", {
     className: "ps-page-thumbnail-metadata-wrapper"
   }, metadata.map(function (_ref2) {
+    var _metadataConfigs$find;
+
     var key = _ref2.key,
         value = _ref2.value;
     return React.createElement(React.Fragment, null, React.createElement("label", {
@@ -60,8 +64,19 @@ function PageThumbnail(_ref) {
       onChange: handleChange,
       onClick: function onClick(e) {
         return e.stopPropagation();
-      }
-    }));
+      },
+      id: key,
+      list: "".concat(key, "-list")
+    }), React.createElement("datalist", {
+      id: "".concat(key, "-list")
+    }, (_metadataConfigs$find = metadataConfigs.find(function (mcf) {
+      return mcf.key === key;
+    })) === null || _metadataConfigs$find === void 0 ? void 0 : _metadataConfigs$find.options.map(function (opt) {
+      return React.createElement("option", {
+        key: opt,
+        value: opt
+      });
+    })));
   })));
 }
 
@@ -72,7 +87,8 @@ function PageSelector(_ref3) {
       onSave = _ref3.onSave,
       recalcActive = _ref3.recalcActive,
       saveActive = _ref3.saveActive,
-      onMetadataChange = _ref3.onMetadataChange;
+      onMetadataChange = _ref3.onMetadataChange,
+      metadataConfigs = _ref3.metadataConfigs;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -121,7 +137,8 @@ function PageSelector(_ref3) {
       metadata: page.metadata,
       showMetadata: showMetadata,
       imageIndex: page.id,
-      onMetadataChange: onMetadataChange
+      onMetadataChange: onMetadataChange,
+      metadataConfigs: metadataConfigs
     });
   })));
 }

package/package.json

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