Merge pull request #207 from ironcalc/feature/nicolas-hidden

UPDATE: Hide/Unhide sheets

webapp/src/components/SheetTabBar/SheetListMenu.tsx

@@ -59,7 +59,10 @@ const SheetListMenu = (properties: SheetListMenuProps) => {
           )}
           {hasColors && <ItemColor style={{ backgroundColor: tab.color }} />}
           <ItemName
-            style={{ fontWeight: index === selectedIndex ? "bold" : "normal" }}
+            style={{
+              fontWeight: index === selectedIndex ? "bold" : "normal",
+              color: tab.state === "visible" ? "#333" : "#888",
+            }}
           >
             {tab.name}
           </ItemName>

webapp/src/components/SheetTabBar/SheetTab.tsx

@@ -15,8 +15,9 @@ interface SheetTabProps {
   onSelected: () => void;
   onColorChanged: (hex: string) => void;
   onRenamed: (name: string) => void;
-  canDelete: () => boolean;
+  canDelete: boolean;
   onDeleted: () => void;
+  onHideSheet: () => void;
   workbookState: WorkbookState;
 }
 
@@ -94,15 +95,23 @@ function SheetTab(props: SheetTabProps) {
           Change Color
         </StyledMenuItem>
         <StyledMenuItem
-          disabled={!props.canDelete()}
+          disabled={!props.canDelete}
           onClick={() => {
             props.onDeleted();
             handleClose();
           }}
         >
-          {" "}
           Delete
         </StyledMenuItem>
+        <StyledMenuItem
+          disabled={!props.canDelete}
+          onClick={() => {
+            props.onHideSheet();
+            handleClose();
+          }}
+        >
+          Hide sheet
+        </StyledMenuItem>
       </StyledMenu>
       <SheetRenameDialog
         open={renameDialogOpen}

webapp/src/components/SheetTabBar/SheetTabBar.tsx

@@ -19,6 +19,7 @@ export interface SheetTabBarProps {
   onSheetColorChanged: (hex: string) => void;
   onSheetRenamed: (name: string) => void;
   onSheetDeleted: () => void;
+  onHideSheet: () => void;
 }
 
 function SheetTabBar(props: SheetTabBarProps) {
@@ -33,6 +34,18 @@ function SheetTabBar(props: SheetTabBarProps) {
     setAnchorEl(null);
   };
 
+  const nonHidenSheets = sheets
+    .map((s, index) => {
+      return {
+        state: s.state,
+        index,
+        name: s.name,
+        color: s.color,
+        sheetId: s.sheetId,
+      };
+    })
+    .filter((s) => s.state === "visible");
+
   return (
     <Container>
       <LeftButtonsContainer>
@@ -54,25 +67,24 @@ function SheetTabBar(props: SheetTabBarProps) {
       <VerticalDivider />
       <Sheets>
         <SheetInner>
-          {sheets.map((tab, index) => (
+          {nonHidenSheets.map((tab) => (
             <SheetTab
               key={tab.sheetId}
               name={tab.name}
               color={tab.color}
-              selected={index === selectedIndex}
-              onSelected={() => onSheetSelected(index)}
+              selected={tab.index === selectedIndex}
+              onSelected={() => onSheetSelected(tab.index)}
               onColorChanged={(hex: string): void => {
                 props.onSheetColorChanged(hex);
               }}
               onRenamed={(name: string): void => {
                 props.onSheetRenamed(name);
               }}
-              canDelete={(): boolean => {
-                return sheets.length > 1;
-              }}
+              canDelete={nonHidenSheets.length > 1}
               onDeleted={(): void => {
                 props.onSheetDeleted();
               }}
+              onHideSheet={props.onHideSheet}
               workbookState={workbookState}
             />
           ))}

webapp/src/components/SheetTabBar/types.ts

@@ -2,4 +2,5 @@ export interface SheetOptions {
   name: string;
   color: string;
   sheetId: number;
+  state: string;
 }

webapp/src/components/workbook.tsx

@@ -32,8 +32,8 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
   const setRedrawId = useState(0)[1];
   const info = model
     .getWorksheetsProperties()
-    .map(({ name, color, sheet_id }: WorksheetProperties) => {
-      return { name, color: color ? color : "#FFF", sheetId: sheet_id };
+    .map(({ name, color, sheet_id, state }: WorksheetProperties) => {
+      return { name, color: color ? color : "#FFF", sheetId: sheet_id, state };
     });
   const focusWorkbook = useCallback(() => {
     if (rootRef.current) {
@@ -586,6 +586,9 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         selectedIndex={model.getSelectedSheet()}
         workbookState={workbookState}
         onSheetSelected={(sheet: number): void => {
+          if (info[sheet].state !== "visible") {
+            model.unhideSheet(sheet);
+          }
           model.setSelectedSheet(sheet);
           setRedrawId((value) => value + 1);
         }}
@@ -616,6 +619,11 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           model.deleteSheet(selectedSheet);
           setRedrawId((value) => value + 1);
         }}
+        onHideSheet={(): void => {
+          const selectedSheet = model.getSelectedSheet();
+          model.hideSheet(selectedSheet);
+          setRedrawId((value) => value + 1);
+        }}
       />
     </Container>
   );