UIPFIMP-52: React-highlighter is incompatible with react 17 (#129)

folio-org · Nov 9, 2022 · 56c856f · 56c856f
1 parent df53b67
commit 56c856f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change history for ui-plugin-find-import-profile
 
+## **5.4.0** (in progress)
+
+### Bugs fixed:
+* React-highlighter is incompatible with react 17 (UIPFIMP-52)
+
 ## [5.3.0](https://github.com/folio-org/ui-plugin-find-import-profile/tree/v5.3.0) (2022-10-27)
 
 ### Features added:

diff --git a/FindImportProfile/FindImportProfile.js b/FindImportProfile/FindImportProfile.js
@@ -18,6 +18,7 @@ import {
   ENTITY_KEYS,
   PROFILE_NAMES,
 } from '@folio/data-import/src/utils/constants';
+import { listTemplate } from '@folio/data-import/src/components/ListTemplate';
 
 import * as containers from './FindImportProfileContainer';
 import { fetchAssociations } from './utils/fetchAssociations';
@@ -50,6 +51,7 @@ const FindImportProfile = ({
   const [confirmationLabel, setConfirmationLabel] = useState(null);
   const [confirmationHeading, setConfirmationHeading] = useState(null);
   const [confirmationMessage, setConfirmationMessage] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
 
   const handleProfilesSelect = (associations, confirmationModalMessage, records, callback) => {
     setIsLinkingAllowed(true);
@@ -187,6 +189,13 @@ const FindImportProfile = ({
           >
             {viewProps => (
               <PluginFindRecordModal
+                onSearchChange={term => setSearchTerm(term)}
+                resultsFormatter={listTemplate({
+                  entityKey,
+                  searchTerm,
+                  selectRecord: null,
+                  selectedRecords: [],
+                })}
                 {...viewProps}
                 {...modalProps}
                 isMultiSelect={!isSingleSelect}
@@ -199,6 +208,7 @@ const FindImportProfile = ({
                   ...modalProps,
                 })}
                 closeModal={() => {
+                  setSearchTerm('');
                   modalProps.closeModal();
                   onClose();
                 }}

diff --git a/FindImportProfile/FindImportProfileContainer/AbstractContainer.js b/FindImportProfile/FindImportProfileContainer/AbstractContainer.js
@@ -8,7 +8,6 @@ import {
 
 import { stripesShape } from '@folio/stripes/core';
 import { StripesConnectedSource } from '@folio/stripes/smart-components';
-import { listTemplate } from '@folio/data-import/src/components/ListTemplate';
 
 const idPrefix = 'uiPluginFindImportProfile-';
 
@@ -61,13 +60,6 @@ export class AbstractContainer extends Component {
       profileShape,
     } = props;
 
-    const resultsFormatter = listTemplate({
-      entityKey,
-      searchTerm: '',
-      selectRecord: null,
-      selectedRecords: [],
-    });
-
     if (this.source) {
       this.source.update(this.props);
     }
@@ -86,7 +78,6 @@ export class AbstractContainer extends Component {
       queryGetter: this.queryGetter,
       querySetter: this.querySetter,
       renderFilters: noop,
-      resultsFormatter,
       visibleColumns: get(profileShape, 'visibleColumns', []),
       sortableColumns: get(profileShape, 'visibleColumns', []),
       source: this.source,

diff --git a/package.json b/package.json
@@ -81,7 +81,6 @@
     "classnames": "^2.2.5",
     "lodash": "^4.16.4",
     "prop-types": "^15.6.0",
-    "react-highlighter": "^0.4.3",
     "redux-form": "^8.3.7"
   },
   "peerDependencies": {