Merge pull request #15 from FoxComm/feature/omit-parenthesis-on-filters-count

Add property to filterGroup using which we can omit putting parentheses on filters count

Author: anru

src/components/core/filters/filter-checkboxes.jsx

@@ -5,10 +5,12 @@ import type { FilterValue, FilterTypeProps } from './types';
 import styles from './filter-checkboxes.css';
 
 const FilterCheckboxes = (props: FilterTypeProps): Element<*> => {
+
   const term = (props.term || '').toUpperCase();
   const {
     onSelectFacet = (a, b, c) => {},
     values = [],
+    renderCount,
   } = props;
 
   const controls = values.map((facetValue) => {
@@ -28,7 +30,7 @@ const FilterCheckboxes = (props: FilterTypeProps): Element<*> => {
           />
           <div styleName="filter-label">
             {label}
-            <span styleName="count">&nbsp;({count})</span>
+            <span styleName="count">&nbsp;{renderCount(count)}</span>
           </div>
         </label>
       </div>

src/components/core/filters/filter-group.jsx

@@ -11,10 +11,18 @@ type State = {
   expanded: boolean,
 };
 
+type DefaultProps = {
+  renderCount: (count: number) => string,
+};
+
 export default class FilterGroup extends Component {
   props: FilterGroupProps;
   state: State = { expanded: this.props.initiallyExpanded };
 
+  static defaultProps: DefaultProps = {
+    renderCount: (count: number): string => `(${count})`,
+  }
+
   selectedCount = () => {
     const { values = [] } = this.props;
     return values.reduce((acc, val) => {
@@ -26,20 +34,21 @@ export default class FilterGroup extends Component {
   toggleExpansion = () => this.setState({ expanded: !this.state.expanded });
 
   render() {
-    const { children, label, term, values } = this.props;
+    const { children, label, term, values, renderCount } = this.props;
     const {
       onClearFacet = () => {},
       onSelectFacet = () => {},
     } = this.props;
     const { expanded } = this.state;
 
     const updatedChildren = React.Children.map(children, (child) => {
-      return React.cloneElement(child, { onSelectFacet, term, values });
+      return React.cloneElement(child, { onSelectFacet, term, values, renderCount });
     });
 
     return (
       <div styleName="group">
         <FilterHeader
+          renderCount={renderCount}
           count={this.selectedCount()}
           expanded={expanded}
           onClear={onClearFacet}

src/components/core/filters/filter-header.jsx

@@ -9,10 +9,12 @@ type Props = {
   expanded: boolean,
   onClear: Function,
   onClick: Function,
+  renderCount: (count: number) => string,
 };
 
 const FilterHeader = (props: Props): Element<*> => {
-  const { children, count, expanded, onClear, onClick } = props;
+
+  const { children, count, expanded, onClear, onClick, renderCount } = props;
   const iconStyle = expanded ? 'icon-minus' : 'icon-plus';
 
   return (
@@ -26,7 +28,7 @@ const FilterHeader = (props: Props): Element<*> => {
           >
             {children}
             {count > 0 && (
-              <span styleName="count">&nbsp;({count})</span>
+              <span styleName="count">&nbsp;{renderCount(count)}</span>
             )}
           </a>
         </span>

src/components/core/filters/types.js

@@ -16,6 +16,7 @@ export type FilterTypeProps = {
   onSelectFacet?: Function,
   term?: string,
   values?: Array<FilterValue>,
+  renderCount: (count: number) => string,
 };
 
 
@@ -27,4 +28,5 @@ export type FilterGroupProps = {
   onClearFacet?: Function,
   onSelectFacet?: Function,
   initiallyExpanded?: boolean,
+  renderCount?: (count: number) => string,
 };