adding filters to Locator component (#120)

yext · Aug 9, 2019 · 1a34404 · 1a34404
1 parent c7ec73a
commit 1a34404
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/ui/components/results/locatorcomponent.js b/src/ui/components/results/locatorcomponent.js
@@ -14,6 +14,7 @@ export default class LocatorComponent extends Component {
 
     this._resultsConfig = config.resultsConfig || {};
     this._mapConfig = config.mapConfig || {};
+    this._filtersConfig = config.filtersConfig || {};
 
     /**
      * Locator param: The template name to use for rendering with handlebars
@@ -32,6 +33,10 @@ export default class LocatorComponent extends Component {
   onMount () {
     this.initResults();
     this.initMap();
+
+    if (Object.keys(this._filtersConfig).length > 0) {
+      this.initFilters();
+    }
   }
 
   /**
@@ -53,4 +58,14 @@ export default class LocatorComponent extends Component {
       container: '.js-yxt-locatorMap'
     }, this._mapConfig));
   }
+
+  /**
+   * A helper method to mount the FilterBox component
+   */
+  initFilters () {
+    this.componentManager.create('FilterBox', Object.assign({
+      parent: this,
+      container: '.js-yxt-locatorFilters'
+    }, this._filtersConfig));
+  }
 }
diff --git a/src/ui/sass/modules/_Locator.scss b/src/ui/sass/modules/_Locator.scss
@@ -4,7 +4,7 @@
 {
   display: flex;
 
-  &-resultsWrapper
+  &-contentWrapper
   {
     width: 100%;
 

diff --git a/src/ui/templates/results/locator.hbs b/src/ui/templates/results/locator.hbs
@@ -1,4 +1,7 @@
 <div class="yxt-Locator">
-  <div class="js-yxt-locatorResults yxt-Locator-resultsWrapper"></div>
+  <div class="yxt-Locator-contentWrapper">
+    <div class="js-yxt-locatorFilters yxt-Locator-filtersWrapper"></div>
+    <div class="js-yxt-locatorResults yxt-Locator-resultsWrapper"></div>
+  </div>
   <div class="js-yxt-locatorMap yxt-Locator-mapWrapper"></div>
 </div>