Add disabled next and prev buttons

Author: linyers

client/src/Annotator/index.jsx

@@ -56,6 +56,7 @@ export const Annotator = ({
   hideHeaderText,
   hideNext,
   hidePrev,
+  disabledNextAndPrev,
   hideClone,
   hideSettings,
   hideSave,
@@ -171,6 +172,7 @@ export const Annotator = ({
           hideHeaderText={hideHeaderText}
           hideNext={hideNext}
           hidePrev={hidePrev}
+          disabledNextAndPrev={disabledNextAndPrev}
           hideClone={hideClone}
           hideSettings={hideSettings}
           hideSave={hideSave}
@@ -216,6 +218,7 @@ Annotator.propTypes = {
   hideHeaderText: PropTypes.bool,
   hideNext: PropTypes.bool,
   hidePrev: PropTypes.bool,
+  disabledNextAndPrev: PropTypes.bool,
   hideClone: PropTypes.bool,
   hideSettings: PropTypes.bool,
   settings: PropTypes.object,

client/src/DemoSite/index.jsx

@@ -128,8 +128,6 @@ export default () => {
     setLoading(false);
   }, []);
 
-  
-
   return (
     <>
     { !showLabel ? ( // Render loading indicator if loading is true
@@ -159,6 +157,7 @@ export default () => {
         changeSelectedImageIndex(isNaN(updatedIndex ) ? 0 : updatedIndex)
       }}
       hideSettings={true}
+      disabledNextAndPrev={settings.images.length <= 1}
       selectedImageIndex={selectedImageIndex}
     />)}
     </>

client/src/MainLayout/index.jsx

@@ -43,6 +43,7 @@ export const MainLayout = ({
   hideHeaderText,
   hideNext = false,
   hidePrev = false,
+  disabledNextAndPrev,
   hideClone = false,
   hideSettings = false,
   downloadImage = false,
@@ -221,8 +222,8 @@ export const MainLayout = ({
                 ) : null,
               ].filter(Boolean)}
               headerItems={[
-                !hidePrev && {name: "Prev"},
-                !hideNext && {name: "Next"},
+                !hidePrev && {name: "Prev", disabled: disabledNextAndPrev},
+                !hideNext && {name: "Next", disabled: disabledNextAndPrev},
                 state.annotationType !== "video"
                   ? null
                   : !state.videoPlaying

client/src/workspace/HeaderButton/index.jsx

@@ -30,19 +30,19 @@ const ButtonInnerContent = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
 }))
-const IconContainer = styled("div")(({ textHidden }) => ({
-  color: colors.grey[700],
+const IconContainer = styled("div")(({ textHidden, disabled }) => ({
+  color: disabled ? colors.grey[400] : colors.grey[700],
   height: textHidden ? 32 : 20,
   paddingTop: textHidden ? 8 : 0,
   "& .MuiSvgIcon-root": {
     width: 18,
     height: 18,
   },
 }))
-const Text = styled("div")(({ theme }) => ({
+const Text = styled("div")(({ theme, disabled }) => ({
   fontWeight: "bold",
   fontSize: 11,
-  color: colors.grey[800],
+  color: disabled ? colors.grey[500] : colors.grey[800],
   display: "flex",
   alignItems: "center",
   lineHeight: 1,
@@ -61,11 +61,11 @@ export const HeaderButton = ({
     <ThemeProvider theme={theme}>
       <StyledButton onClick={onClick} disabled={disabled}>
         <ButtonInnerContent>
-          <IconContainer textHidden={hideText}>
+          <IconContainer textHidden={hideText} disabled={disabled}>
             {icon || getIcon(name, customIconMapping)}
           </IconContainer>
           {!hideText && (
-            <Text>
+            <Text disabled={disabled}>
               <div>{name}</div>
             </Text>
           )}