@searpent/react-image-annotate 2.0.2 → 2.0.3

package/Annotator/index.js

@@ -60,7 +60,11 @@ export var Annotator = function Annotator(_ref) {
       hideFullScreen = _ref.hideFullScreen,
       hideSave = _ref.hideSave,
       allowComments = _ref.allowComments,
-      onImagesChange = _ref.onImagesChange;
+      onImagesChange = _ref.onImagesChange,
+      groups = _ref.groups,
+      onGroupSelect = _ref.onGroupSelect,
+      selectedGroupId = _ref.selectedGroupId,
+      hideHistory = _ref.hideHistory;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -155,7 +159,11 @@ export var Annotator = function Annotator(_ref) {
     hideClone: hideClone,
     hideSettings: hideSettings,
     hideFullScreen: hideFullScreen,
-    hideSave: hideSave
+    hideSave: hideSave,
+    groups: groups,
+    onGroupSelect: onGroupSelect,
+    selectedGroupId: selectedGroupId,
+    hideHistory: hideHistory
   }));
 };
 export default Annotator;

package/GroupSelectorSidebarBox/index.js

@@ -0,0 +1,63 @@
+import React, { memo } from "react";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import CollectionsIcon from "@mui/icons-material/Collections";
+import { grey } from "@mui/material/colors";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import isEqual from "lodash/isEqual";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return {
+    img: {
+      width: 40,
+      height: 40,
+      borderRadius: 8
+    }
+  };
+});
+export var GroupSelectorSidebarBox = function GroupSelectorSidebarBox(_ref) {
+  var title = _ref.title,
+      subtitle = _ref.subtitle,
+      groups = _ref.groups,
+      onSelect = _ref.onSelect,
+      selectedGroupId = _ref.selectedGroupId;
+  var classes = useStyles();
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: title || '',
+    subTitle: subtitle || '',
+    icon: React.createElement(CollectionsIcon, {
+      style: {
+        color: grey[700]
+      }
+    })
+  }, React.createElement(List, null, groups.map(function (_ref2, i) {
+    var id = _ref2.id,
+        groupTitle = _ref2.title,
+        groupSubtitle = _ref2.subtitle,
+        color = _ref2.color;
+    return React.createElement(ListItem, {
+      button: true,
+      onClick: function onClick() {
+        return onSelect(id);
+      },
+      dense: true,
+      key: id,
+      style: {
+        backgroundColor: id === selectedGroupId ? '#bbdefb' : null
+      }
+    }, React.createElement(ListItemText, {
+      primary: React.createElement("strong", {
+        style: {
+          color: color
+        }
+      }, groupTitle),
+      secondary: groupSubtitle
+    }));
+  }))));
+};
+export default GroupSelectorSidebarBox;

package/MainLayout/index.js

@@ -10,6 +10,7 @@ import DebugBox from "../DebugSidebarBox";
 import HistorySidebarBox from "../HistorySidebarBox";
 import ImageCanvas from "../ImageCanvas";
 import ImageSelector from "../ImageSelectorSidebarBox";
+import GroupSelector from "../GroupSelectorSidebarBox";
 import KeyframeTimeline from "../KeyframeTimeline";
 import KeyframesSelector from "../KeyframesSelectorSidebarBox";
 import RegionSelector from "../RegionSelectorSidebarBox";
@@ -77,7 +78,15 @@ export var MainLayout = function MainLayout(_ref3) {
       _ref3$hideFullScreen = _ref3.hideFullScreen,
       hideFullScreen = _ref3$hideFullScreen === void 0 ? false : _ref3$hideFullScreen,
       _ref3$hideSave = _ref3.hideSave,
-      hideSave = _ref3$hideSave === void 0 ? false : _ref3$hideSave;
+      hideSave = _ref3$hideSave === void 0 ? false : _ref3$hideSave,
+      _ref3$groups = _ref3.groups,
+      groups = _ref3$groups === void 0 ? [] : _ref3$groups,
+      _ref3$onGroupSelect = _ref3.onGroupSelect,
+      onGroupSelect = _ref3$onGroupSelect === void 0 ? function () {} : _ref3$onGroupSelect,
+      _ref3$selectedGroupId = _ref3.selectedGroupId,
+      selectedGroupId = _ref3$selectedGroupId === void 0 ? null : _ref3$selectedGroupId,
+      _ref3$hideHistory = _ref3.hideHistory,
+      hideHistory = _ref3$hideHistory === void 0 ? false : _ref3$hideHistory;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -323,7 +332,12 @@ export var MainLayout = function MainLayout(_ref3) {
     //     images={state.images}
     //   />
     // ),
-    React.createElement(RegionSelector, {
+    groups && React.createElement(GroupSelector, {
+      title: "Articles",
+      groups: groups,
+      selectedGroupId: selectedGroupId,
+      onSelect: onGroupSelect
+    }), React.createElement(RegionSelector, {
       regions: activeImage ? activeImage.regions : emptyArr,
       onSelectRegion: action("SELECT_REGION", "region"),
       onDeleteRegion: action("DELETE_REGION", "region"),
@@ -335,7 +349,7 @@ export var MainLayout = function MainLayout(_ref3) {
       currentTime: state.currentVideoTime,
       duration: state.videoDuration,
       keyframes: state.keyframes
-    }), React.createElement(HistorySidebarBox, {
+    }), !hideHistory && React.createElement(HistorySidebarBox, {
       history: state.history,
       onRestoreHistory: action("RESTORE_HISTORY")
     })].filter(Boolean)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "dependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",