Browse Source

Retain filter when tag dropdown is closed/opened

Markelle Kelly 6 years ago
parent
commit
5bfd23550a

+ 4 - 2
packages/toc/src/generators/notebookgenerator/index.ts

@@ -100,7 +100,6 @@ export function createNotebookGenerator(
               lastLevel,
               cell
             );
-
             // Do not render the code cell in TOC if it is filtered out by tags
             if (
               currentCollapseLevel < 0 &&
@@ -208,6 +207,7 @@ export function createNotebookGenerator(
           // If the cell is rendered, generate the ToC items from
           // the HTML. If it is not rendered, generate them from
           // the text of the cell.
+
           if (
             (cell as MarkdownCell).rendered &&
             !(cell as MarkdownCell).inputHidden
@@ -236,7 +236,7 @@ export function createNotebookGenerator(
               cell
             );
             if (renderedHeading && renderedHeading.type === 'markdown') {
-              // Do not put the item in TOC if its filtered out by tags
+              // Do not put the item in TOC if it's filtered out by tags
               if (
                 currentCollapseLevel < 0 &&
                 !Private.headingIsFilteredOut(renderedHeading, options.filtered)
@@ -248,6 +248,8 @@ export function createNotebookGenerator(
               !renderedHeading
             ) {
               // Determine whether the heading has children
+              if (renderedHeading) {
+              }
               if (
                 prevHeading &&
                 prevHeading.type === 'header' &&

+ 4 - 0
packages/toc/src/generators/notebookgenerator/optionsmanager.ts

@@ -27,6 +27,7 @@ export class NotebookGeneratorOptionsManager extends TableOfContentsRegistry.IGe
     this._notebook = notebook;
     this.sanitizer = options.sanitizer;
     this.tagTool = null;
+    this.storeTags = [];
   }
 
   readonly sanitizer: ISanitizer;
@@ -81,6 +82,8 @@ export class NotebookGeneratorOptionsManager extends TableOfContentsRegistry.IGe
   get filtered() {
     if (this.tagTool) {
       this._filtered = this.tagTool.getFiltered();
+    } else if (this.storeTags.length > 0) {
+      this._filtered = this.storeTags;
     } else {
       this._filtered = [];
     }
@@ -125,4 +128,5 @@ export class NotebookGeneratorOptionsManager extends TableOfContentsRegistry.IGe
   private _showTags = false;
   private _notebook: INotebookTracker;
   private _widget: TableOfContents;
+  public storeTags: string[];
 }

+ 9 - 10
packages/toc/src/generators/notebookgenerator/tagstool/index.tsx

@@ -11,11 +11,11 @@ export interface ITagsToolComponentProps {
   allTagsList: string[];
   tracker: INotebookTracker;
   generatorOptionsRef: NotebookGeneratorOptionsManager;
+  inputFilter: string[];
 }
 
 export interface ITagsToolComponentState {
   selected: string[];
-  filtered: string[];
 }
 
 /*
@@ -28,8 +28,7 @@ export class TagsToolComponent extends React.Component<
   constructor(props: ITagsToolComponentProps) {
     super(props);
     this.state = {
-      selected: [],
-      filtered: []
+      selected: this.props.inputFilter
     };
   }
 
@@ -60,14 +59,14 @@ export class TagsToolComponent extends React.Component<
   };
 
   public getFiltered() {
-    return this.state.filtered;
+    return this.state.selected;
   }
 
   /*
   * Deselect all tags in the dropdown and clear filters in the TOC.
   */
   deselectAllTags = () => {
-    this.setState({ selected: [], filtered: [] });
+    this.setState({ selected: [] });
     this.props.generatorOptionsRef.updateWidget();
   };
 
@@ -93,7 +92,7 @@ export class TagsToolComponent extends React.Component<
   * Tells the generator to filter the TOC by the selected tags.
   */
   filterTags = (selected: string[]) => {
-    this.setState({ filtered: selected });
+    this.setState({ selected });
     this.props.generatorOptionsRef.updateWidget();
   };
 
@@ -101,13 +100,13 @@ export class TagsToolComponent extends React.Component<
     let temp: string[] = [];
     let idx = 0;
     let needsUpdate = false;
-    for (let i = 0; i < this.state.filtered.length; i++) {
+    for (let i = 0; i < this.state.selected.length; i++) {
       if (
-        this.props.allTagsList.indexOf(this.state.filtered[i] as string) > -1
+        this.props.allTagsList.indexOf(this.state.selected[i] as string) > -1
       ) {
-        temp[idx] = this.state.filtered[i];
+        temp[idx] = this.state.selected[i];
         idx++;
-      } else {
+      } else if (this.props.generatorOptionsRef.showTags === true) {
         needsUpdate = true;
       }
     }

+ 6 - 0
packages/toc/src/generators/notebookgenerator/toolbargenerator.tsx

@@ -99,6 +99,9 @@ export function notebookGeneratorToolbar(
     };
 
     toggleTagDropdown = () => {
+      if (options.showTags && this.tagTool) {
+        options.storeTags = this.tagTool.state.selected;
+      }
       options.showTags = !options.showTags;
       this.setState({ showTags: options.showTags });
     };
@@ -218,10 +221,13 @@ export function notebookGeneratorToolbar(
             allTagsList={this.allTags}
             tracker={tracker}
             generatorOptionsRef={options}
+            inputFilter={options.storeTags}
             ref={tagTool => (this.tagTool = tagTool)}
           />
         );
         options.setTagTool(this.tagTool);
+        if (this.tagTool) {
+        }
         tagDropdown = <div className={'toc-tag-dropdown'}> {tagTool} </div>;
         tagIcon = (
           <div