Fix #298 - Export switches search to an uncontrolled input (#427)

* Fix #298 - Export switches search to an uncontrolled input * Update to use individual states instead of old style state as per https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables
material-table-core · Dec 16, 2021 · 8ea10b5 · 8ea10b5
1 parent 8932e17
commit 8ea10b5
Showing 1 changed file with 16 additions and 26 deletions.
diff --git a/src/components/MTableToolbar/index.js b/src/components/MTableToolbar/index.js
@@ -10,19 +10,17 @@ import Typography from '@material-ui/core/Typography';
 import { lighten, withStyles } from '@material-ui/core';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 
 let searchTimer;
 
 export function MTableToolbar(props) {
-  const [state, setState] = React.useState(() => ({
-    columnsButtonAnchorEl: null,
-    exportButtonAnchorEl: null,
-    searchText: props.searchText
-  }));
+  const [searchText, setSearchText] = useState(props.searchText);
+  const [exportButtonAnchorEl, setExportButtonAnchorEl] = useState(null);
+  const [columnsButtonAnchorEl, setColumnsButtonAnchorEl] = useState(null);
 
   const onSearchChange = (searchText) => {
-    setState({ ...state, searchText });
+    setSearchText(searchText);
     props.dataManager.changeSearchText(searchText);
     if (!props.isRemoteData) {
       props.onSearchChanged(searchText);
@@ -85,7 +83,7 @@ export function MTableToolbar(props) {
               ? null
               : props.classes.searchField
           }
-          value={state.searchText}
+          value={searchText}
           onChange={(event) => onSearchChange(event.target.value)}
           placeholder={localization.searchPlaceholder}
           variant={props.searchFieldVariant}
@@ -100,7 +98,7 @@ export function MTableToolbar(props) {
             endAdornment: (
               <InputAdornment position="end">
                 <IconButton
-                  disabled={!state.searchText}
+                  disabled={!searchText}
                   onClick={() => onSearchChange('')}
                   aria-label={localization.clearSearchAriaLabel}
                 >
@@ -138,22 +136,17 @@ export function MTableToolbar(props) {
               <IconButton
                 color="inherit"
                 onClick={(event) =>
-                  setState({
-                    ...state,
-                    columnsButtonAnchorEl: event.currentTarget
-                  })
+                  setColumnsButtonAnchorEl(event.currentTarget)
                 }
                 aria-label={localization.showColumnsAriaLabel}
               >
                 <props.icons.ViewColumn />
               </IconButton>
             </Tooltip>
             <Menu
-              anchorEl={state.columnsButtonAnchorEl}
-              open={Boolean(state.columnsButtonAnchorEl)}
-              onClose={() =>
-                setState({ ...state, columnsButtonAnchorEl: null })
-              }
+              anchorEl={columnsButtonAnchorEl}
+              open={Boolean(columnsButtonAnchorEl)}
+              onClose={() => setColumnsButtonAnchorEl(null)}
             >
               <MenuItem
                 key={'text'}
@@ -211,20 +204,17 @@ export function MTableToolbar(props) {
               <IconButton
                 color="inherit"
                 onClick={(event) =>
-                  setState({
-                    ...state,
-                    exportButtonAnchorEl: event.currentTarget
-                  })
+                  setExportButtonAnchorEl(event.currentTarget)
                 }
                 aria-label={localization.exportAriaLabel}
               >
                 <props.icons.Export />
               </IconButton>
             </Tooltip>
             <Menu
-              anchorEl={state.exportButtonAnchorEl}
-              open={Boolean(state.exportButtonAnchorEl)}
-              onClose={() => setState({ ...state, exportButtonAnchorEl: null })}
+              anchorEl={exportButtonAnchorEl}
+              open={Boolean(exportButtonAnchorEl)}
+              onClose={() => setExportButtonAnchorEl(null)}
             >
               {props.exportMenu.map((menuitem, index) => {
                 const [cols, datas] = getTableData();
@@ -233,7 +223,7 @@ export function MTableToolbar(props) {
                     key={`${menuitem.label}${index}`}
                     onClick={() => {
                       menuitem.exportFunc(cols, datas);
-                      setState({ exportButtonAnchorEl: null });
+                      setExportButtonAnchorEl(null);
                     }}
                   >
                     {menuitem.label}