@arcblock/ux 2.1.17 → 2.1.18

package/lib/Datatable/TableSearch.js

@@ -37,6 +37,9 @@ function TableSearch(_ref) {
     onSearchOpen
   } = _ref;
   const [inputMode, setInputMode] = (0, _react.useState)(false);
+  const [innerSearchText, setInnerSearchText] = (0, _react.useState)('');
+  const inputTimer = (0, _react.useRef)(null);
+  const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
   const clickSearchIcon = () => {
     setInputMode(true);
@@ -44,7 +47,19 @@ function TableSearch(_ref) {
   };
 
   const onChange = event => {
-    searchTextUpdate(event.currentTarget.value);
+    const {
+      value
+    } = event.currentTarget;
+
+    if (searchDebounceTime) {
+      clearTimeout(inputTimer.current);
+      setInnerSearchText(value);
+      inputTimer.current = setTimeout(() => {
+        searchTextUpdate(value);
+      }, searchDebounceTime);
+    } else {
+      searchTextUpdate(value);
+    }
   };
 
   const clickClose = () => {
@@ -69,7 +84,7 @@ function TableSearch(_ref) {
     variant: "standard",
     spacing: 2,
     onChange: onChange,
-    value: searchText || '',
+    value: searchDebounceTime ? innerSearchText : searchText || '',
     autoFocus: true
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "toolbar-search-close ".concat(inputMode ? 'toolbar-btn-show' : '')

package/lib/Datatable/index.js

@@ -17,6 +17,8 @@ var _isObject = _interopRequireDefault(require("lodash/isObject"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
+var _Empty = _interopRequireDefault(require("../Empty"));
+
 var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
 
 var _DatatableContext = require("./DatatableContext");
@@ -140,7 +142,7 @@ function ReDatatable(_ref2) {
   (0, _react.useEffect)(() => setDisabled(disabled), [disabled]);
   let textLabels = {
     body: {
-      noMatch: 'Sorry, no matching records found',
+      noMatch: /*#__PURE__*/_react.default.createElement(_Empty.default, null, "Sorry, no matching records found"),
       toolTip: 'Sort'
     },
     pagination: {
@@ -176,7 +178,7 @@ function ReDatatable(_ref2) {
   if (locale === 'zh') {
     textLabels = {
       body: {
-        noMatch: '对不起，没有找到匹配的记录',
+        noMatch: /*#__PURE__*/_react.default.createElement(_Empty.default, null, "\u5BF9\u4E0D\u8D77\uFF0C\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"),
         toolTip: '排序'
       },
       pagination: {

package/package.json

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

package/src/Datatable/TableSearch.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -16,6 +16,10 @@ export default function TableSearch({
   onSearchOpen,
 }) {
   const [inputMode, setInputMode] = useState(false);
+  const [innerSearchText, setInnerSearchText] = useState('');
+  const inputTimer = useRef(null);
+
+  const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
   const clickSearchIcon = () => {
     setInputMode(true);
@@ -23,7 +27,16 @@ export default function TableSearch({
   };
 
   const onChange = event => {
-    searchTextUpdate(event.currentTarget.value);
+    const { value } = event.currentTarget;
+    if (searchDebounceTime) {
+      clearTimeout(inputTimer.current);
+      setInnerSearchText(value);
+      inputTimer.current = setTimeout(() => {
+        searchTextUpdate(value);
+      }, searchDebounceTime);
+    } else {
+      searchTextUpdate(value);
+    }
   };
 
   const clickClose = () => {
@@ -56,7 +69,7 @@ export default function TableSearch({
             variant="standard"
             spacing={2}
             onChange={onChange}
-            value={searchText || ''}
+            value={searchDebounceTime ? innerSearchText : searchText || ''}
             autoFocus
           />
         )}

package/src/Datatable/index.js

@@ -4,6 +4,7 @@ import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
 import styled from 'styled-components';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
+import Empty from '../Empty';
 import CustomToolbar from './CustomToolbar';
 import { DatatableProvide, useDatatableContext } from './DatatableContext';
 
@@ -103,7 +104,10 @@ function ReDatatable({
   useEffect(() => setDisabled(disabled), [disabled]);
 
   let textLabels = {
-    body: { noMatch: 'Sorry, no matching records found', toolTip: 'Sort' },
+    body: {
+      noMatch: <Empty>Sorry, no matching records found</Empty>,
+      toolTip: 'Sort',
+    },
     pagination: {
       next: 'Next Page',
       previous: 'Previous Page',
@@ -125,7 +129,7 @@ function ReDatatable({
 
   if (locale === 'zh') {
     textLabels = {
-      body: { noMatch: '对不起，没有找到匹配的记录', toolTip: '排序' },
+      body: { noMatch: <Empty>对不起，没有找到匹配的记录</Empty>, toolTip: '排序' },
       pagination: {
         next: '下一页',
         previous: '上一页',