@arcblock/ux 2.1.20 → 2.1.21

package/lib/Datatable/TableSearch.js

@@ -21,6 +21,8 @@ var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _DatatableContext = require("./DatatableContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,6 +39,9 @@ function TableSearch(_ref) {
   const [inputMode, setInputMode] = (0, _react.useState)(false);
   const [innerSearchText, setInnerSearchText] = (0, _react.useState)('');
   const inputTimer = (0, _react.useRef)(null);
+  const {
+    loading
+  } = (0, _DatatableContext.useDatatableContext)();
   const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
   const clickSearchIcon = () => {
@@ -63,6 +68,7 @@ function TableSearch(_ref) {
   const clickClose = () => {
     setInputMode(false);
     searchClose();
+    setInnerSearchText('');
     onSearchOpen(false);
   };
 
@@ -80,15 +86,20 @@ function TableSearch(_ref) {
         onClick: clickSearchIcon,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "toolbar-search-area ".concat(inputMode ? 'toolbar-btn-show' : ''),
-      children: inputMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      children: [inputMode && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         variant: "standard",
         spacing: 2,
         onChange: onChange,
         value: searchDebounceTime ? innerSearchText : searchText || '',
         autoFocus: true
-      })
+      }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        disabled: true,
+        variant: "standard",
+        spacing: 2,
+        value: searchDebounceTime ? innerSearchText : searchText || ''
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "toolbar-search-close ".concat(inputMode ? 'toolbar-btn-show' : ''),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "3a9597b7caac6d1466136c9e7419833eb8d50190",
+  "gitHead": "ee49a5560e16fa5791cef6ab0cc5930c4f1c2cf5",
   "dependencies": {
-    "@arcblock/icons": "^2.1.20",
-    "@arcblock/react-hooks": "^2.1.20",
+    "@arcblock/icons": "^2.1.21",
+    "@arcblock/react-hooks": "^2.1.21",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Datatable/TableSearch.js

@@ -6,11 +6,13 @@ import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
 import ClearIcon from '@mui/icons-material/Clear';
 import styled from 'styled-components';
+import { useDatatableContext } from './DatatableContext';
 
 export default function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }) {
   const [inputMode, setInputMode] = useState(false);
   const [innerSearchText, setInnerSearchText] = useState('');
   const inputTimer = useRef(null);
+  const { loading } = useDatatableContext();
 
   const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
@@ -35,6 +37,7 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
   const clickClose = () => {
     setInputMode(false);
     searchClose();
+    setInnerSearchText('');
     onSearchOpen(false);
   };
 
@@ -57,7 +60,7 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
       )}
 
       <div className={`toolbar-search-area ${inputMode ? 'toolbar-btn-show' : ''}`}>
-        {inputMode && (
+        {inputMode && !loading && (
           <TextField
             variant="standard"
             spacing={2}
@@ -66,6 +69,15 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
             autoFocus
           />
         )}
+        {/* loading完成后没办法使用focus方法，所以改用两个 TextField */}
+        {loading && (
+          <TextField
+            disabled
+            variant="standard"
+            spacing={2}
+            value={searchDebounceTime ? innerSearchText : searchText || ''}
+          />
+        )}
       </div>
       <div className={`toolbar-search-close ${inputMode ? 'toolbar-btn-show' : ''}`}>
         <IconButton onClick={clickClose}>