feat(hierarchical-menu): Add CSS classes dependent on the depth

Hierarchical lists will have classes like `ais-hierarchical-menu--list__lvl1`. Updated docs and test
algolia · Oct 21, 2015 · 1256ea8 · 1256ea8
1 parent c8d1a5f
commit 1256ea8
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -1031,7 +1031,7 @@ search.addWidget(
 <div class="ais-hierarchical-menu">
   <div class="ais-hierarchical-menu--header ais-header">[custom header template]</div>
   <div class="ais-hierarchical-menu--body">
-    <div class="ais-hierarchical-menu--list">
+    <div class="ais-hierarchical-menu--list ais-hierarchical-menu--list__lvl0">
       <div class="ais-hierarchical-menu--item">
         <a class="ais-hierarchical-menu--link" href="/url">
           Your value
@@ -1043,7 +1043,7 @@ search.addWidget(
           Your active value
           <span class="ais-hierarchical-menu--count">42</span>
         </a>
-        <div class="ais-hierarchical-menu--list">
+        <div class="ais-hierarchical-menu--list ais-hierarchical-menu--list__lvl1">
           <div class="ais-hierarchical-menu--item">
             <a class="ais-hierarchical-menu--link" href="/url">
               Your subvalue 1
@@ -1073,6 +1073,10 @@ search.addWidget(
 }
 .ais-hierarchical-menu--list {
 }
+.ais-hierarchical-menu--list__lvl0 {
+}
+.ais-hierarchical-menu--list__lvl1 {
+}
 .ais-hierarchical-menu--item {
 }
 .ais-hierarchical-menu--item__active {

diff --git a/components/RefinementList/RefinementList.js b/components/RefinementList/RefinementList.js
@@ -13,8 +13,15 @@ class RefinementList extends React.Component {
   }
 
   _generateFacetItem(facetValue) {
+    var subList;
     var hasChildren = facetValue.data && facetValue.data.length > 0;
-    var subList = hasChildren && <RefinementList {...this.props} facetValues={facetValue.data} />;
+    if (hasChildren) {
+      subList = <RefinementList
+                  {...this.props}
+                  depth={this.props.depth + 1}
+                  facetValues={facetValue.data}
+                />;
+    }
     var data = facetValue;
 
     if (this.props.createURL) {
@@ -87,8 +94,14 @@ class RefinementList extends React.Component {
   }
 
   render() {
+    // Adding `-lvl0` classes
+    var cssClassList = [this.props.cssClasses.list];
+    if (this.props.cssClasses.depth) {
+      cssClassList.push(`${this.props.cssClasses.depth}${this.props.depth}`);
+    }
+
     return (
-      <div className={cx(this.props.cssClasses.list)}>
+      <div className={cx(cssClassList)}>
         {this.props.facetValues.map(this._generateFacetItem, this)}
       </div>
     );
@@ -116,6 +129,7 @@ RefinementList.propTypes = {
 
 RefinementList.defaultProps = {
   cssClasses: {},
+  depth: 0,
   facetNameKey: 'name'
 };
 

diff --git a/components/RefinementList/__tests__/RefinementList-test.js b/components/RefinementList/__tests__/RefinementList-test.js
@@ -54,6 +54,66 @@ describe('RefinementList', () => {
     );
   });
 
+  context('sublist', () => {
+    it('uses autoHide() and headerFooter()', () => {
+      var customProps = {
+        cssClasses: {
+          depth: 'depth',
+          item: 'item',
+          list: 'list'
+        },
+        facetValues: [
+          {
+            name: 'facet1',
+            data: [
+              {name: 'subfacet1'},
+              {name: 'subfacet2'}
+            ]
+          }
+        ]
+      };
+      parentListProps = {
+        className: 'list depth0'
+      };
+      itemProps = {
+        className: 'item',
+        onClick: () => {}
+      };
+      templateProps = {
+        templateKey: 'item',
+        data: {
+          cssClasses: {
+            depth: 'depth',
+            list: 'list',
+            item: 'item'
+          }
+        }
+      };
+      var out = render(customProps);
+      expect(out).toEqualJSX(
+        <div {...parentListProps}>
+          <div {...itemProps}>
+            <Template
+              {...templateProps}
+              data={{
+                ...templateProps.data,
+                name: 'facet1',
+                data: customProps.facetValues[0].data
+              }}
+            />
+            <RefinementList
+              {...templateProps.data}
+              depth={1}
+              facetNameKey="name"
+              facetValues={customProps.facetValues[0].data}
+              templateProps={{}}
+            />
+          </div>
+        </div>
+      );
+    });
+  });
+
   function render(extraProps = {}) {
     var props = getProps(extraProps);
     renderer.render(<RefinementList {...props} templateProps={{}} />);

diff --git a/themes/default.css b/themes/default.css
@@ -144,6 +144,10 @@
 }
 .ais-hierarchical-menu--list {
 }
+.ais-hierarchical-menu--list__lvl0 {
+}
+.ais-hierarchical-menu--list__lvl1 {
+}
 .ais-hierarchical-menu--item {
 }
 .ais-hierarchical-menu--item__active {

diff --git a/widgets/hierarchical-menu/hierarchical-menu.js b/widgets/hierarchical-menu/hierarchical-menu.js
@@ -82,6 +82,7 @@ function hierarchicalMenu({
         body: cx(bem('body'), cssClasses.body),
         footer: cx(bem('footer'), cssClasses.footer),
         list: cx(bem('list'), cssClasses.list),
+        depth: bem('list', 'lvl'),
         item: cx(bem('item'), cssClasses.item),
         active: cx(bem('item', 'active'), cssClasses.active),
         link: cx(bem('link'), cssClasses.link),