Merge branch 'allow-users-to-provide-ReactSelect-classNamePrefix'

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

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,13 +64,15 @@ class Filter extends Component {
       onChange,
       options,
       className,
+      classNamePrefix,
       hasFilterable,
       placeholder,
       style,
     } = this.props;
     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'}

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),
   };
 };
 

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,
   };
 

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}