Review fixes

Author: bagratinho

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

@@ -5,17 +5,17 @@ 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 = [],
-    omitParenthesesOnCounts,
+    renderCount,
   } = props;
 
   const controls = values.map((facetValue) => {
     const { count, label, selected, value } = facetValue;
     const onSelect = () => onSelectFacet(term, value, !selected);
-    const countText = omitParenthesesOnCounts ? count : `(${count})`;
 
     return (
       <div styleName="filter-value" key={label}>
@@ -30,7 +30,7 @@ const FilterCheckboxes = (props: FilterTypeProps): Element<*> => {
           />
           <div styleName="filter-label">
             {label}
-            <span styleName="count">&nbsp;{countText}</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: Function,
+};
+
 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,21 +34,21 @@ export default class FilterGroup extends Component {
   toggleExpansion = () => this.setState({ expanded: !this.state.expanded });
 
   render() {
-    const { children, label, term, values, omitParenthesesOnCounts } = 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, omitParenthesesOnCounts });
+      return React.cloneElement(child, { onSelectFacet, term, values, renderCount });
     });
 
     return (
       <div styleName="group">
         <FilterHeader
-          omitParenthesesOnCounts={omitParenthesesOnCounts}
+          renderCount={renderCount}
           count={this.selectedCount()}
           expanded={expanded}
           onClear={onClearFacet}

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

@@ -9,13 +9,13 @@ type Props = {
   expanded: boolean,
   onClear: Function,
   onClick: Function,
-  omitParenthesesOnCounts?: boolean,
+  renderCount: Function,
 };
 
 const FilterHeader = (props: Props): Element<*> => {
-  const { children, count, expanded, onClear, onClick, omitParenthesesOnCounts } = props;
+
+  const { children, count, expanded, onClear, onClick, renderCount } = props;
   const iconStyle = expanded ? 'icon-minus' : 'icon-plus';
-  const countText = omitParenthesesOnCounts ? count : `(${count})`;
 
   return (
     <div styleName="header">
@@ -28,7 +28,7 @@ const FilterHeader = (props: Props): Element<*> => {
           >
             {children}
             {count > 0 && (
-              <span styleName="count">&nbsp;{countText}</span>
+              <span styleName="count">&nbsp;{renderCount(count)}</span>
             )}
           </a>
         </span>

src/components/core/filters/types.js

@@ -16,7 +16,7 @@ export type FilterTypeProps = {
   onSelectFacet?: Function,
   term?: string,
   values?: Array<FilterValue>,
-  omitParenthesesOnCounts?: boolean,
+  renderCount: Function,
 };
 
 
@@ -28,5 +28,5 @@ export type FilterGroupProps = {
   onClearFacet?: Function,
   onSelectFacet?: Function,
   initiallyExpanded?: boolean,
-  omitParenthesesOnCounts?: boolean,
+  renderCount?: Function,
 };