BREAKING CHANGE: Move Search logic to reusable HOC (#140)

* create HOC with serach

* connected source_list  HOC

* add test for with_search

* add new snapshot for multi_select

* all case coveraga test

* corrected HOC and test with HOC

* corrected HOC and test with HOC

* Case_Teset_For_Deep_Props (#1)

Corrected test & add skin-deep

* corrected with_search & snapshots

Author: MaksimDrobchak

package.json

@@ -77,6 +77,7 @@
     "react-test-renderer": "^16.0.0",
     "sass-loader": "^7.1.0",
     "semantic-release": "^8.2.0",
+    "skin-deep": "^1.2.0",
     "storybook-readme": "3.0.6",
     "style-loader": "^0.23.1",
     "webpack": "^4.29.0",

src/components/source_list.js

@@ -1,21 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { List } from "react-virtualized/dist/commonjs/List";
-
 import Column from "./column/column";
 import ItemsList from "./list/items_list";
 import NoItems from "./items/no_items";
-import Search from "./search/search";
 import SelectAll from "./items/select_all";
 import Item from "./items/item";
+
 import { groupItems } from "./item_grouping_util";
+import withSearch from "./with_search";
 
 const SourceList = ({
-  searchRenderer,
   selectAllRenderer,
-  showSearch,
-  filterItems,
-  searchIcon,
   messages,
   showSelectAll,
   itemHeight,
@@ -30,25 +26,17 @@ const SourceList = ({
   selectItem,
   noItemsRenderer,
   disabled,
-  searchValue,
   withGrouping,
-  listRenderer
+  listRenderer,
+  children
 }) => {
-  const SearchRenderer = searchRenderer;
   const SelectAllRenderer = selectAllRenderer;
   const updatedFilteredItems = withGrouping
     ? groupItems(filteredItems)
     : filteredItems;
   return (
     <Column>
-      {showSearch && (
-        <SearchRenderer
-          onChange={filterItems}
-          searchIcon={searchIcon}
-          value={searchValue}
-          searchPlaceholder={messages.searchPlaceholder}
-        />
-      )}
+      {children}
       {showSelectAll && (
         <SelectAllRenderer
           height={selectAllHeight ? selectAllHeight : itemHeight}
@@ -79,7 +67,6 @@ const SourceList = ({
 };
 
 SourceList.propTypes = {
-  searchRenderer: PropTypes.any,
   selectAllRenderer: PropTypes.any,
   noItemsRenderer: PropTypes.any,
   itemRenderer: PropTypes.any,
@@ -103,7 +90,6 @@ SourceList.propTypes = {
 };
 
 SourceList.defaultProps = {
-  searchRenderer: Search,
   selectAllRenderer: SelectAll,
   noItemsRenderer: NoItems,
   itemRenderer: Item,
@@ -119,5 +105,5 @@ SourceList.defaultProps = {
   disabled: false,
   withGrouping: false
 };
-
-export default SourceList;
+export { SourceList };
+export default withSearch(SourceList);

src/components/with_search.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Search from "./search/search";
+
+const withSearch = WrappedComponent => ({
+  searchRenderer = Search,
+  showSearch,
+  filterItems,
+  searchIcon,
+  searchValue,
+  messages,
+  ...others
+}) => {
+  const SearchRenderer = searchRenderer;
+  return (
+    <WrappedComponent {...others}>
+      {showSearch && (
+        <SearchRenderer
+          onChange={filterItems}
+          searchIcon={searchIcon}
+          value={searchValue}
+          searchPlaceholder={messages.searchPlaceholder}
+        />
+      )}
+    </WrappedComponent>
+  );
+};
+export default withSearch;