Add searchable prop in CategoryWidget to optionally use the search functionality

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Add groupByDate tests [#346](https://github.com/CartoDB/carto-react/pull/346)
 - Refactor PieWidgetUI [#341](https://github.com/CartoDB/carto-react/pull/341)
+- Add searchable prop in CategoryWidget to optionally use the search functionality [#338](https://github.com/CartoDB/carto-react/pull/338)
 - Implement stringSearch filter [#331](https://github.com/CartoDB/carto-react/pull/331)
 - Add filters tests [#331](https://github.com/CartoDB/carto-react/pull/331)
 

packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js

@@ -161,5 +161,11 @@ describe('CategoryWidgetUI', () => {
       fireEvent.click(screen.getByText(/Search in 4 elements/));
       fireEvent.click(screen.getByText(/Cancel/));
     });
+
+    test('searchable prop', () => {
+      render(<CategoryWidgetUI data={DATA} maxItems={1} searchable={false} />);
+      expect(screen.queryByText('Search in 4 elements')).not.toBeInTheDocument();
+      expect(screen.getByText('Others (4)')).toBeInTheDocument();
+    });
   });
 });

packages/react-ui/src/widgets/CategoryWidgetUI.js

@@ -141,7 +141,8 @@ function CategoryWidgetUI(props) {
     order,
     selectedCategories,
     animation,
-    filterable
+    filterable,
+    searchable
   } = props;
   const [sortedData, setSortedData] = useState([]);
   const [maxValue, setMaxValue] = useState(1);
@@ -283,15 +284,20 @@ function CategoryWidgetUI(props) {
     [blockedCategories, labels, maxItems, searchValue, showAll]
   );
 
+  const getCategoriesCount = useCallback(() => {
+    const blocked = blockedCategories.length;
+    return blocked ? data.length - blocked : data.length - maxItems;
+  }, [data, maxItems, blockedCategories]);
+
   const getCategoryLabel = useCallback(
     (name) => {
       if (name === REST_CATEGORY) {
-        return 'Others';
+        return `Others ${searchable ? '' : `(${getCategoriesCount()})`}`;
       } else {
         return labels[name] || name;
       }
     },
-    [labels]
+    [getCategoriesCount, labels, searchable]
   );
 
   const getProgressbarLength = useCallback(
@@ -363,11 +369,6 @@ function CategoryWidgetUI(props) {
     }
   }, [animation, sortedData]);
 
-  const getCategoriesCount = useCallback(() => {
-    const blocked = blockedCategories.length;
-    return blocked ? data.length - blocked : data.length - maxItems;
-  }, [data, maxItems, blockedCategories]);
-
   // Separated to simplify the widget layout but inside the main component to avoid passing all dependencies
   const CategoryItem = (props) => {
     const { data, onCategoryClick } = props;
@@ -569,7 +570,7 @@ function CategoryWidgetUI(props) {
               </>
             )}
           </Grid>
-          {data.length > maxItems ? (
+          {data.length > maxItems && searchable ? (
             showAll ? (
               <Button size='small' color='primary' onClick={handleCancelClicked}>
                 Cancel
@@ -606,7 +607,8 @@ CategoryWidgetUI.defaultProps = {
   order: CategoryWidgetUI.ORDER_TYPES.RANKING,
   selectedCategories: [],
   animation: true,
-  filterable: true
+  filterable: true,
+  searchable: true
 };
 
 CategoryWidgetUI.propTypes = {
@@ -624,6 +626,7 @@ CategoryWidgetUI.propTypes = {
   order: PropTypes.oneOf(Object.values(CategoryWidgetUI.ORDER_TYPES)),
   animation: PropTypes.bool,
   filterable: PropTypes.bool,
+  searchable: PropTypes.bool
 };
 
 export default CategoryWidgetUI;

packages/react-widgets/src/widgets/CategoryWidget.js

@@ -24,6 +24,7 @@ const EMPTY_ARRAY = [];
  * @param  {Object} [props.labels] - Overwrite category labels.
  * @param  {boolean} [props.animation] - Enable/disable widget animations on data updates. Enabled by default.
  * @param  {boolean} [props.filterable] - Enable/disable widget filtering capabilities. Enabled by default.
+ * @param  {boolean} [props.searchable] - Enable/disable widget searching capabilities. Enabled by default.
  * @param  {Function} [props.onError] - Function to handle error messages from the widget.
  * @param  {Object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default)
  * @param  {Object} [props.noDataAlertProps] - Extra props to pass to [NoDataAlert]()
@@ -40,6 +41,7 @@ function CategoryWidget(props) {
     labels,
     animation,
     filterable,
+    searchable,
     onError,
     wrapperProps,
     noDataAlertProps
@@ -128,6 +130,7 @@ function CategoryWidget(props) {
           onSelectedCategoriesChange={handleSelectedCategoriesChange}
           animation={animation}
           filterable={filterable}
+          searchable={searchable}
         />
       ) : (
         <NoDataAlert {...noDataAlertProps} />
@@ -147,6 +150,7 @@ CategoryWidget.propTypes = {
   labels: PropTypes.object,
   animation: PropTypes.bool,
   filterable: PropTypes.bool,
+  searchable: PropTypes.bool,
   onError: PropTypes.func,
   wrapperProps: PropTypes.object,
   noDataAlertProps: PropTypes.object
@@ -156,6 +160,7 @@ CategoryWidget.defaultProps = {
   labels: {},
   animation: true,
   filterable: true,
+  searchable: true,
   wrapperProps: {},
   noDataAlertProps: {}
 };