From 54f68bcb9edda536809a806f24bb3d57e357985a Mon Sep 17 00:00:00 2001
From: mbonaci <mbonaci@gmail.com>
Date: Tue, 24 Sep 2019 11:10:49 +0200
Subject: [PATCH] Allow users to provide their own classNamePrefix to Filter's
 react-select in sematable config In order to ease the transition to
 react-select v2

---
 README.md              | 2 ++
 src/Filter.js          | 3 +++
 src/FilterContainer.js | 1 +
 src/selectors.js       | 2 ++
 src/sematable.js       | 2 ++
 5 files changed, 10 insertions(+)

diff --git a/README.md b/README.md
index fbb2f99..4b43a7c 100644
--- a/README.md
+++ b/README.md
@@ -188,6 +188,7 @@ You can style these components with `style` or `className`.
  - _defaultPageSize_ overrides the default page size (if not specified 5 will be used)
  - _autoHidePagination_ if pagination should be hidden if the number of pages is 1 (default is true, which means pagination is hidden if the number of pages is equal to 1)
  - _filterClassName_ css class for the filter component
+ - _filterClassNamePrefix_ css class prefix forwarded to [react-select](https://react-select.com/styles#using-classnames) ('Select' by default)
  - _filterContainerClassName_ css class for the filter component container element ('col-md-6' by default)
  - _filterPlaceholder_ filter placeholder text
  - _pageSizeClassName_ css class for the page size component ('col-md-6' by default)
@@ -283,6 +284,7 @@ getInitialData
 getIsInitialized
 getFiltered
 getFilter
+getFilterText
 getColumns
 getSortInfo
 getPageInfo
diff --git a/src/Filter.js b/src/Filter.js
index 8ccb18f..a8a107d 100644
--- a/src/Filter.js
+++ b/src/Filter.js
@@ -10,6 +10,7 @@ const propTypes = {
   onTextChange: PropTypes.func.isRequired,
   options: PropTypes.array.isRequired,
   className: PropTypes.string,
+  classNamePrefix: PropTypes.string,
   hasFilterable: PropTypes.bool,
   placeholder: PropTypes.node,
   style: PropTypes.object,
@@ -63,6 +64,7 @@ class Filter extends Component {
       onChange,
       options,
       className,
+      classNamePrefix,
       hasFilterable,
       placeholder,
       style,
@@ -70,6 +72,7 @@ class Filter extends Component {
     const defaultPlaceholder = hasFilterable ? 'Search or filter using tags...' : 'Search...';
     return (
       <Creatable
+        classNamePrefix={classNamePrefix || 'Select'}
         className={className}
         options={options}
         noOptionsMessage={() => 'Type text to search, press Enter to save as filter'}
diff --git a/src/FilterContainer.js b/src/FilterContainer.js
index d01dd34..3dc45bd 100644
--- a/src/FilterContainer.js
+++ b/src/FilterContainer.js
@@ -24,6 +24,7 @@ const mapStateToProps = (state, { tableName }) => {
     filterText: selectors.getFilterText(state),
     options: selectors.getFilterOptions(state),
     columns: selectors.getColumns(state),
+    classNamePrefix: selectors.getFilterClassNamePrefix(state),
   };
 };
 
diff --git a/src/selectors.js b/src/selectors.js
index d702efc..c9b145c 100644
--- a/src/selectors.js
+++ b/src/selectors.js
@@ -122,6 +122,7 @@ export default (tableName) => {
     direction: tableProp(state, 'direction'),
   });
   const getSelectEnabled = (state) => tableProp(state, 'configs.selectEnabled');
+  const getFilterClassNamePrefix = (state) => tableProp(state, 'configs.filterClassNamePrefix');
 
   const getFiltered = createSelector(
     getInitialData,
@@ -261,6 +262,7 @@ export default (tableName) => {
     getSelectAll,
     getPrimaryKey,
     getFilterOptions,
+    getFilterClassNamePrefix,
     getFiltered,
   };
 
diff --git a/src/sematable.js b/src/sematable.js
index 411a97b..16c81f4 100644
--- a/src/sematable.js
+++ b/src/sematable.js
@@ -155,6 +155,7 @@ const sematable = (tableName, TableComponent, columns, configs = {}) => {
         filterContainerClassName = 'col-md-6',
         pageSizeClassName,
         filterClassName,
+        filterClassNamePrefix = 'Select',
         filterPlaceholder,
       } = configs;
 
@@ -225,6 +226,7 @@ const sematable = (tableName, TableComponent, columns, configs = {}) => {
           <div className={filterContainerClassName}>
             {showFilter && <Filter
               className={filterClassName}
+              classNamePrefix={filterClassNamePrefix}
               value={filter}
               filterText={filterText}
               options={filterOptions}