Add FacetTabs Component

documentation/components/FacetTabs.md

@@ -0,0 +1,37 @@
+#### Examples:
+
+
+__1:__  A simple example for showing facet as tabs.
+
+```jsx
+  const DummySearcher = require('../../src/components/DummySearcher').default;
+  const QueryResponse = require('../../src/api/QueryResponse').default;
+  const sampleFacets = require('../sampleData/Facets').default;
+
+  const queryResponse = new QueryResponse();
+  queryResponse.facets = [
+    sampleFacets.regionFacet,
+  ];
+
+  <DummySearcher
+    defaultQueryResponse={queryResponse}
+  >
+    <FacetTabs facetName = "region" />
+  </DummySearcher>
+```
+
+__2:__  Example for showing facet tabs by passing in a facet instead of facet name.
+
+```jsx
+  const sampleFacets = require('../sampleData/Facets').default;
+
+  <FacetTabs facet = {sampleFacets.regionFacet} />
+```
+
+__3:__  Example for showing facet tabs by passing in a facet and a background color.
+
+```jsx
+  const sampleFacets = require('../sampleData/Facets').default;
+
+  <FacetTabs facet={sampleFacets.regionFacet} backgroundColor='lightgray' />
+```

src/components/FacetResults.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 
 import Facet from './Facet';
 import SearchFacet from '../api/SearchFacet';
+import Configurable from './Configurable';
 
 type FacetResultsProps = {
   /** The facet field names that should be displayed as pie charts */
@@ -42,6 +43,10 @@ type FacetResultsProps = {
    * buckets. By default, facets with no buckets will be hidden.
    */
   showEmptyFacets: boolean;
+  /**
+   * An optional list of facets that should not be shown but are needed for other reasons
+   */
+   hideFacet: Array<string>;
 };
 
 type FacetResultsDefaultProps = {
@@ -57,6 +62,7 @@ type FacetResultsDefaultProps = {
   orderHint: Array<string>;
   entityColors: Map<string, string>;
   showEmptyFacets: boolean;
+  hideFacet: Array<string>,
 };
 
 /**
@@ -67,7 +73,7 @@ type FacetResultsDefaultProps = {
  * not covered by one of these property's lists will be displayed
  * in a standard "More…" list.
  */
-export default class FacetResults extends React.Component<FacetResultsDefaultProps, FacetResultsProps, void> {
+class FacetResults extends React.Component<FacetResultsDefaultProps, FacetResultsProps, void> {
   static defaultProps = {
     pieChartFacets: null,
     barChartFacets: null,
@@ -81,6 +87,7 @@ export default class FacetResults extends React.Component<FacetResultsDefaultPro
     orderHint: [],
     entityColors: new Map(),
     showEmptyFacets: false,
+    hideFacet: [],
   };
 
   static contextTypes = {
@@ -129,6 +136,11 @@ export default class FacetResults extends React.Component<FacetResultsDefaultPro
   }
 
   shouldShow(facet: SearchFacet): boolean {
+    if (this.props.hideFacet && this.props.hideFacet.length > 0) {
+      if (this.props.hideFacet.includes(facet.field)) {
+        return false;
+      }
+    }
     if (this.props.showEmptyFacets || (facet && facet.buckets && facet.buckets.length > 0)) {
       return true;
     }
@@ -186,3 +198,5 @@ export default class FacetResults extends React.Component<FacetResultsDefaultPro
     );
   }
 }
+
+export default Configurable(FacetResults);

src/components/FacetTabs.js

@@ -0,0 +1,153 @@
+// @flow
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Configurable from './Configurable';
+import SearchFacet from '../api/SearchFacet';
+import SearchFacetBucket from '../api/SearchFacetBucket';
+import BusyIndicator from './BusyIndicator';
+
+type FacetTabsProps = {
+  /**
+   * Name of the facet that should be displayed as Tabs, default is 'table'
+   */
+  facetName: string; //eslint-disable-line
+  /**
+   * Optional callback to be used when a tab is clicked instead of default (which applies the facet filter)
+   */
+  handleClick?: () => void;
+  /**
+   * Optional facet that should be used instead of facetName
+   */
+  facet?: SearchFacet | null; //eslint-disable-line
+  /**
+   * The color that should be used for the background of facet tabs
+   */
+  backgroundColor?: string;
+};
+
+type FacetTabsState = {
+  tabsList: Array<any>;
+};
+
+class FacetTabs extends React.Component<FacetTabsProps, FacetTabsProps, FacetTabsState> {
+  static contextTypes = {
+    searcher: PropTypes.any,
+  };
+
+  static defaultProps = {
+    facetName: 'table',
+    facet: null,
+    backgroundColor: '#add8e6',
+  };
+
+  static displayName = 'FacetTabs';
+
+  constructor(props: FacetTabsProps) {
+    super(props);
+    this.state = {
+      tabsList: [],
+    };
+
+    (this: any).getTabsFromFacet = this.getTabsFromFacet.bind(this);
+    (this: any).populateTabs = this.populateTabs.bind(this);
+    (this: any).handleTabClick = this.handleTabClick.bind(this);
+  }
+
+  componentWillMount() {
+    this.populateTabs(this.props);
+  }
+
+  componentWillReceiveProps(newProps: FacetTabsProps) {
+    this.populateTabs(newProps);
+  }
+
+  //eslint-disable-next-line
+  numberWithCommas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  }
+
+  handleTabClick(bucket: SearchFacetBucket, label: string) {
+    this.context.searcher.addFacetFilter(label, bucket.value, bucket.filter);
+  }
+
+  getTabsFromFacet(facet: SearchFacet) {
+    const tabs = [];
+    facet.buckets.forEach((bucket: SearchFacetBucket) => {
+      const value = bucket.value;
+      const count = this.numberWithCommas(bucket.count);
+      if (this.props.handleClick) {
+        tabs.push(
+          <div //eslint-disable-line
+            onClick={() => {
+              this.props.handleClick(bucket);
+            }}
+            className="facet-tab"
+          >
+            <div className="facet-tab-text">
+              {value} <span style={{ color: 'gray' }}>({count})</span>
+            </div>
+          </div>,
+        );
+      } else {
+        tabs.push(
+          <div //eslint-disable-line
+            onClick={() => {
+              this.handleTabClick(bucket, facet.label);
+            }}
+            className="facet-tab"
+          >
+            <div className="facet-tab-text">
+              {value} <span style={{ color: 'gray' }}>({count})</span>
+            </div>
+          </div>,
+        );
+      }
+    });
+    this.setState({ tabsList: tabs });
+  }
+
+  populateTabs(props: FacetTabsProps) {
+    const { facetName, facet } = props;
+
+    if (facet && facet.buckets) {
+      this.getTabsFromFacet(facet);
+    } else if (facetName) {
+      const searcher = this.context.searcher;
+      if (searcher && searcher.state.response) {
+        if (searcher.state.response.facets) {
+          searcher.state.response.facets.forEach((currentFacet: SearchFacet) => {
+            if (currentFacet.field === facetName && currentFacet.buckets) {
+              this.getTabsFromFacet(currentFacet);
+            }
+          });
+        }
+      }
+    }
+  }
+
+  render() {
+    const tabData = this.state.tabsList;
+    const tabs =
+      tabData.length > 0 ? (
+        <div
+          className="facet-tab-container"
+          style={{ backgroundColor: `${this.props.backgroundColor}` }}
+        >
+          {tabData}
+        </div>
+      ) : (
+        <BusyIndicator
+          show
+          type="spinny"
+          message="Loading Facet Tabs..."
+          messageStyle={{ fontWeight: 600, color: '#2f75b0' }}
+          positionMessageRight
+        />
+      );
+    return <div>{tabs}</div>;
+  }
+}
+
+export default Configurable(FacetTabs);

src/index.js

@@ -79,6 +79,7 @@ export Facet from './components/Facet';
 export FacetInsights from './components/FacetInsights';
 export FacetResults from './components/FacetResults';
 export FacetSearchBar from './components/FacetSearchBar';
+export FacetTabs from './components/FacetTabs';
 export FormattedDate from './components/FormattedDate';
 export GridLayout from './components/GridLayout';
 export Header360 from './components/Header360';

styleguide.config.js

@@ -164,6 +164,7 @@ module.exports = {
               'src/components/FacetInsights.js',
               'src/components/FacetResults.js',
               'src/components/FacetSearchBar.js',
+              'src/components/FacetTabs.js',
               'src/components/HierarchicalFacetContents.js',
               'src/components/ListWithBarsFacetContents.js',
               'src/components/MapFacetContents.js',