Merge pull request #29 from szymon-rd/filters-rebuild

fix clearing filters and filter search optimalization

Author: kamilszewczyk0

scaladoc/resources/dotty_res/scripts/components/FilterBar.js

@@ -3,92 +3,101 @@
  */
 
  class FilterBar extends Component {
-  constructor(props) {
-    super(props);
-
-    this.refs = {
-      elements: findRefs(".documentableElement"),
-      filterBar: findRef(".documentableFilter"),
-    };
-
-    this.state = {
-      filter: new Filter("", {}, this.refs.elements, true),
-      isVisible: false,
-      selectedPill: '',
-    };
-
-    this.inputComp = new Input({ onInputChange: this.onInputChange });
-    this.listComp = new DocumentableList({
-      filter: this.state.filter,
-    });
-    this.filterGroupComp = new FilterGroup({
-      filter: this.state.filter,
-      onFilterToggle: this.onFilterToggle,
-      onGroupSelectChange: this.onGroupSelectChange,
-      onFilterVisibilityChange: this.onFilterVisibilityChange,
-      onPillClick: this.onPillClick,
-      onPillCollapse: this.onPillCollapse,
-    });
-
-    this.render();
-  }
-
-  onInputChange = (value) => {
-    this.setState((prevState) => ({
-      filter: prevState.filter.onInputValueChange(value),
-    }));
-  };
-
-  onGroupSelectChange = (key, isActive) => {
-    this.setState((prevState) => ({
-      filter: prevState.filter.onGroupSelectionChange(key, isActive),
-    }));
-  };
-
-  onClearFilters = () => {
-    this.setState(() => ({
-      filter: ""
-    }))
-  }
-
-  onFilterVisibilityChange = () => {
-    this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
-  };
-
-  onFilterToggle = (key, value) => {
-    this.setState((prevState) => ({
-      filter: prevState.filter.onFilterToggle(key, value),
-    }));
-  };
-
-  onPillClick = (key) => {
-    this.setState((prevState) => ({
-      filter: prevState.filter,
-      selectedPill: key
-    }))
-  }
-
-  onPillCollapse = () => {
-    this.setState((prevState) => ({
-      filter: prevState.filter,
-      selectedPill: ""
-    }))
-  }
-
-  render() {
-    if (this.refs.filterBar) {
-      if (this.state.isVisible) {
-        this.refs.filterBar.classList.add("active");
-      } else {
-        this.refs.filterBar.classList.remove("active");
-      }
-    }
-
-    this.listComp.render({ filter: this.state.filter });
-    this.filterGroupComp.render({ filter: this.state.filter, selectedPill: this.state.selectedPill });
-  }
-}
-
-window.addEventListener("dynamicPageLoad", () => {
-  new FilterBar()
-})
+   constructor(props) {
+     super(props);
+
+     this.refs = {
+       elements: findRefs(".documentableElement"),
+       filterBar: findRef(".documentableFilter"),
+     };
+
+     this.state = {
+       filter: new Filter("", {}, this.refs.elements, true),
+       isVisible: false,
+       selectedPill: "",
+     };
+
+     this.inputComp = new Input({ onInputChange: this.onInputChange });
+     this.listComp = new DocumentableList({
+       filter: this.state.filter,
+     });
+     this.filterGroupComp = new FilterGroup({
+       filter: this.state.filter,
+       onFilterToggle: this.onFilterToggle,
+       onGroupSelectChange: this.onGroupSelectChange,
+       onFilterVisibilityChange: this.onFilterVisibilityChange,
+       onPillClick: this.onPillClick,
+       onPillCollapse: this.onPillCollapse,
+     });
+
+     this.render();
+   }
+
+   onInputChange = (value) => {
+     this.setState((prevState) => ({
+       filter: prevState.filter.onInputValueChange(value),
+     }));
+   };
+
+   onGroupSelectChange = (key, isActive) => {
+     this.setState((prevState) => ({
+       filter: prevState.filter.onGroupSelectionChange(key, isActive),
+     }));
+   };
+
+   onClearFilters = () => {
+     this.inputComp.inputRef.value = "";
+     this.setState((prevState) => ({
+       filter: prevState.filter.onInputValueChange(""),
+     }));
+   };
+
+   onFilterVisibilityChange = () => {
+     this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
+   };
+
+   onFilterToggle = (key, value) => {
+     this.setState((prevState) => ({
+       filter: prevState.filter.onFilterToggle(key, value),
+     }));
+   };
+
+   onPillClick = (key) => {
+     this.setState((prevState) => ({
+       filter: prevState.filter,
+       selectedPill: key,
+     }));
+   };
+
+   onPillCollapse = () => {
+     this.setState((prevState) => ({
+       filter: prevState.filter,
+       selectedPill: "",
+     }));
+   };
+
+   render() {
+     if (this.refs.filterBar) {
+       if (this.state.isVisible) {
+         this.refs.filterBar.classList.add("active");
+       } else {
+         this.refs.filterBar.classList.remove("active");
+       }
+     }
+
+     this.listComp.render({ filter: this.state.filter });
+     this.filterGroupComp.render({
+       filter: this.state.filter,
+       selectedPill: this.state.selectedPill,
+     });
+   }
+ }
+
+ window.addEventListener("dynamicPageLoad", () => {
+   new FilterBar();
+ });
+
+ const clearButton = document.querySelector(".clearButton");
+ clearButton.addEventListener("click", () => {
+   new FilterBar().onClearFilters();
+ });

scaladoc/resources/dotty_res/scripts/components/Input.js

@@ -8,7 +8,7 @@ class Input extends Component {
   }
 
   onInputChange = ({ currentTarget: { value } }) => {
-    this.props.onInputChange(value);
+    setTimeout(this.props.onInputChange(value), 300);
   };
 
   onKeydown = (e) => {

scaladoc/resources/dotty_res/styles/theme/components/api-filters.css

@@ -7,7 +7,7 @@
   top: var(--header-height);
   padding: calc(2 * var(--base-spacing)) 0;
   margin-bottom: calc(3 * var(--base-spacing));
-  background-color: var(--background-default);
+  background-color: var(--background-subtle);
 }
 
 .filtersContainer {
@@ -17,7 +17,7 @@
 }
 
 .filterableInput {
-  background-color: var(--background-default);
+  background-color: var(--background-subtle);
   color: var(--action-primary-content-active);
   background-image: url("../../../images/icon-buttons/search/dark/default.svg");
   background-repeat: no-repeat;