@arcblock/ux 2.1.16 → 2.1.19

package/lib/Datatable/CustomToolbar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CustomToolbar;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -51,12 +51,14 @@ var _TableSearch = _interopRequireDefault(require("./TableSearch"));
 
 var _DatatableContext = require("./DatatableContext");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function useMobile() {
   const theme = (0, _styles.useTheme)();
   return (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
@@ -109,9 +111,12 @@ function CustomToolbar(props) {
   }, [loading, disabled]);
 
   const printArea = func => {
-    return /*#__PURE__*/_react.default.createElement(_reactToPrint.default, {
-      content: () => props.tableRef()
-    }, /*#__PURE__*/_react.default.createElement(_reactToPrint.PrintContextConsumer, null, func));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactToPrint.default, {
+      content: () => props.tableRef(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactToPrint.PrintContextConsumer, {
+        children: func
+      })
+    });
   };
 
   const getPopId = key => "toolbar-pop-".concat(toolbarId.current, "-").concat(key);
@@ -120,7 +125,7 @@ function CustomToolbar(props) {
 
   if (!(options.download === false || options.download === 'false')) {
     defaultButtons.push({
-      icon: /*#__PURE__*/_react.default.createElement(_CloudDownload.default, null),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudDownload.default, {}),
       title: downloadCsv,
       onClick: () => {
         (0, _utils.handleCSVDownload)(props);
@@ -130,11 +135,12 @@ function CustomToolbar(props) {
 
   if (!(options.viewColumns === false || options.viewColumns === 'false')) {
     defaultButtons.push({
-      icon: /*#__PURE__*/_react.default.createElement(_ViewColumn.default, null),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewColumn.default, {}),
       title: viewColumns,
 
+      // eslint-disable-next-line react/no-unstable-nested-components
       popRender() {
-        return /*#__PURE__*/_react.default.createElement(TableViewColComponent, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableViewColComponent, {
           data: data,
           columns: columns,
           options: options,
@@ -149,11 +155,12 @@ function CustomToolbar(props) {
 
   if (!(options.filter === false || options.filter === 'false')) {
     defaultButtons.push({
-      icon: /*#__PURE__*/_react.default.createElement(_FilterList.default, null),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterList.default, {}),
       title: filterTable,
 
+      // eslint-disable-next-line react/no-unstable-nested-components
       popRender() {
-        return /*#__PURE__*/_react.default.createElement(TableFilterComponent, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableFilterComponent, {
           customFooter: options.customFilterDialogFooter,
           columns: columns,
           options: options,
@@ -188,42 +195,46 @@ function CustomToolbar(props) {
       } = e; // When popRender is present, clicking the button will bubble up the content returned by the popRender
 
       if (popRender) {
-        allPops.push( /*#__PURE__*/_react.default.createElement(_Popover.default, {
+        allPops.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
           open: !!allPopsEl[popId],
           anchorEl: () => allPopsEl[popId],
           onClose: () => {
             setAllPopsEl({});
           },
-          key: popId,
           anchorOrigin: {
             vertical: 'bottom',
             horizontal: 'right'
-          }
-        }, /*#__PURE__*/_react.default.createElement("div", null, popRender())));
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: popRender()
+          })
+        }, popId));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
         title: e.title,
-        key: popId
-      }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-        "data-testid": "".concat(e.title, "-iconButton"),
-        id: "btn-".concat(popId),
-        "aria-label": e.title,
-        onClick: () => {
-          if (e.onClick) {
-            e.onClick();
-          }
-
-          if (popRender) {
-            // On the large screen, the bubble is positioned at the corresponding button
-            setAllPopsEl({
-              [popId]: document.getElementById("btn-".concat(popId))
-            });
-          }
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "custom-toolbar-icon"
-      }, icon)));
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          "data-testid": "".concat(e.title, "-iconButton"),
+          id: "btn-".concat(popId),
+          "aria-label": e.title,
+          onClick: () => {
+            if (e.onClick) {
+              e.onClick();
+            }
+
+            if (popRender) {
+              // On the large screen, the bubble is positioned at the corresponding button
+              setAllPopsEl({
+                [popId]: document.getElementById("btn-".concat(popId))
+              });
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "custom-toolbar-icon",
+            children: icon
+          })
+        })
+      }, popId);
     }
 
     return e;
@@ -239,11 +250,16 @@ function CustomToolbar(props) {
       const {
         icon
       } = e;
-      content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, icon), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, e.title));
+      content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+          children: icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+          children: e.title
+        })]
+      });
     }
 
-    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      key: popId,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
       onClick: () => {
         setMenuIconEl(null);
 
@@ -257,66 +273,91 @@ function CustomToolbar(props) {
             [popId]: moreBtn.current
           });
         }
-      }
-    }, content);
+      },
+      children: content
+    }, popId);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "custom-toobar-title ".concat(isMobile && searchOpened && /*#__PURE__*/(0, _react.isValidElement)(title) ? 'toobar-title-hidden' : ''),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "custom-toobar-title-inner",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: title
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "custom-toobar-btns ".concat(loading || disabled ? 'toobar-btns-disabled' : ''),
+        children: [!hideSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableSearch.default, {
+          search: search,
+          options: options,
+          searchText: searchText,
+          searchTextUpdate: searchTextUpdate,
+          searchClose: searchClose,
+          onSearchOpen: setSearchOpened
+        }), !showMore && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [!hidePrint && printArea(_ref => {
+            let {
+              handlePrint
+            } = _ref;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+                title: print,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                  "data-testid": "".concat(print, "-iconButton"),
+                  "aria-label": print,
+                  disabled: options.print === 'disabled',
+                  onClick: handlePrint,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Print.default, {})
+                })
+              })
+            });
+          }), toolbarButtons]
+        }), showMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          ref: moreBtn,
+          "aria-haspopup": "true",
+          "aria-expanded": menuIconEl ? 'true' : undefined,
+          onClick: event => setMenuIconEl(event.currentTarget),
+          style: {
+            flexShrink: 0
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
+        })]
+      }), customToolbarEle]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
+      anchorEl: menuIconEl,
+      open: !!menuIconEl,
+      onClose: () => setMenuIconEl(null),
+      MenuListProps: {
+        'aria-labelledby': 'more-button'
+      },
+      children: [!hidePrint && printArea(_ref2 => {
+        let {
+          handlePrint
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          onClick: () => {
+            setMenuIconEl(null);
+            handlePrint();
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Print.default, {
+              fontSize: "small"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+            children: print
+          })]
+        });
+      }), menuItems]
+    }), allPops.map((e, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: e
+    }, getPopId(index))), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
+      children: loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, {
+        className: "toolbar-progress"
+      })
+    })]
   });
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "custom-toobar-title ".concat(isMobile && searchOpened && /*#__PURE__*/(0, _react.isValidElement)(title) ? 'toobar-title-hidden' : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "custom-toobar-title-inner"
-  }, /*#__PURE__*/_react.default.createElement("span", null, title))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "custom-toobar-btns ".concat(loading || disabled ? 'toobar-btns-disabled' : '')
-  }, !hideSearch && /*#__PURE__*/_react.default.createElement(_TableSearch.default, {
-    search: search,
-    options: options,
-    searchText: searchText,
-    searchTextUpdate: searchTextUpdate,
-    searchClose: searchClose,
-    onSearchOpen: setSearchOpened
-  }), !showMore && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hidePrint && printArea(_ref => {
-    let {
-      handlePrint
-    } = _ref;
-    return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: print
-    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      "data-testid": "".concat(print, "-iconButton"),
-      "aria-label": print,
-      disabled: options.print === 'disabled',
-      onClick: handlePrint
-    }, /*#__PURE__*/_react.default.createElement(_Print.default, null))));
-  }), toolbarButtons), showMore && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    ref: moreBtn,
-    "aria-haspopup": "true",
-    "aria-expanded": menuIconEl ? 'true' : undefined,
-    onClick: event => setMenuIconEl(event.currentTarget),
-    style: {
-      flexShrink: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null))), customToolbarEle), /*#__PURE__*/_react.default.createElement(_Menu.default, {
-    anchorEl: menuIconEl,
-    open: !!menuIconEl,
-    onClose: () => setMenuIconEl(null),
-    MenuListProps: {
-      'aria-labelledby': 'more-button'
-    }
-  }, !hidePrint && printArea(_ref2 => {
-    let {
-      handlePrint
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      onClick: () => {
-        setMenuIconEl(null);
-        handlePrint();
-      }
-    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Print.default, {
-      fontSize: "small"
-    })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, print));
-  }), menuItems), allPops.map((e, index) => /*#__PURE__*/_react.default.createElement("div", {
-    key: getPopId(index)
-  }, e)), /*#__PURE__*/_react.default.createElement(ProgressContainer, null, loading && /*#__PURE__*/_react.default.createElement(_LinearProgress.default, {
-    className: "toolbar-progress"
-  })));
 }
 
 CustomToolbar.propTypes = {

package/lib/Datatable/DatatableContext.js

@@ -3,21 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DatatableProvide = void 0;
+exports.DatatableProvide = DatatableProvide;
 exports.useDatatableContext = useDatatableContext;
 
-var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _react = require("react");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _jsxRuntime = require("react/jsx-runtime");
 
 const DatatableContext = /*#__PURE__*/(0, _react.createContext)({});
 const {
   Provider
 } = DatatableContext; // eslint-disable-next-line react/prop-types
 
-const DatatableProvide = _ref => {
+function DatatableProvide(_ref) {
   let {
     children
   } = _ref;
@@ -35,12 +33,11 @@ const DatatableProvide = _ref => {
     disabled,
     setDisabled
   };
-  return /*#__PURE__*/_react.default.createElement(Provider, {
-    value: value
-  }, children);
-};
-
-exports.DatatableProvide = DatatableProvide;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+    value: value,
+    children: children
+  });
+}
 
 function useDatatableContext() {
   return (0, _react.useContext)(DatatableContext);

package/lib/Datatable/TableSearch.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = TableSearch;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,11 +21,9 @@ var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function TableSearch(_ref) {
   let {
@@ -37,6 +35,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 +45,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 = () => {
@@ -53,29 +66,37 @@ function TableSearch(_ref) {
     onSearchOpen(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, inputMode ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "toolbar-search-icon-placeholder"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)) : /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: search,
-    disableFocusListener: true
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    "aria-label": search,
-    "data-testid": "".concat(search, "-iconButton"),
-    disabled: options.search === 'disabled',
-    onClick: clickSearchIcon
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "toolbar-search-area ".concat(inputMode ? 'toolbar-btn-show' : '')
-  }, inputMode && /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    variant: "standard",
-    spacing: 2,
-    onChange: onChange,
-    value: searchText || '',
-    autoFocus: true
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "toolbar-search-close ".concat(inputMode ? 'toolbar-btn-show' : '')
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: clickClose
-  }, /*#__PURE__*/_react.default.createElement(_Clear.default, null))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [inputMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "toolbar-search-icon-placeholder",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: search,
+      disableFocusListener: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        "aria-label": search,
+        "data-testid": "".concat(search, "-iconButton"),
+        disabled: options.search === 'disabled',
+        onClick: clickSearchIcon,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "toolbar-search-area ".concat(inputMode ? 'toolbar-btn-show' : ''),
+      children: inputMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        variant: "standard",
+        spacing: 2,
+        onChange: onChange,
+        value: searchDebounceTime ? innerSearchText : searchText || '',
+        autoFocus: true
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "toolbar-search-close ".concat(inputMode ? 'toolbar-btn-show' : ''),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        onClick: clickClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {})
+      })
+    })]
+  });
 }
 
 TableSearch.propTypes = {

package/lib/Datatable/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Datatable;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,31 +17,37 @@ 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");
 
-const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped"];
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function Datatable(_ref) {
   let props = Object.assign({}, _ref);
-  return /*#__PURE__*/_react.default.createElement(_DatatableContext.DatatableProvide, null, /*#__PURE__*/_react.default.createElement(ReDatatable, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatatableContext.DatatableProvide, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDatatable, _objectSpread({}, props))
+  });
 }
 /**
  * @param {Object} props.options The options of mui-datatable，detail see https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca
@@ -140,7 +146,9 @@ function ReDatatable(_ref2) {
   (0, _react.useEffect)(() => setDisabled(disabled), [disabled]);
   let textLabels = {
     body: {
-      noMatch: 'Sorry, no matching records found',
+      noMatch: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+        children: "Sorry, no matching records found"
+      }),
       toolTip: 'Sort'
     },
     pagination: {
@@ -176,7 +184,9 @@ function ReDatatable(_ref2) {
   if (locale === 'zh') {
     textLabels = {
       body: {
-        noMatch: '对不起，没有找到匹配的记录',
+        noMatch: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+          children: "\u5BF9\u4E0D\u8D77\uFF0C\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"
+        }),
         toolTip: '排序'
       },
       pagination: {
@@ -282,14 +292,15 @@ function ReDatatable(_ref2) {
     onChange: '',
     stripped: false
   };
-  return /*#__PURE__*/_react.default.createElement(TableContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContainer, {
     ref: container,
     className: stripped ? 'datatable-stripped' : '',
-    style: style
-  }, /*#__PURE__*/_react.default.createElement(_muiDatatables.default, Object.assign({
-    data: data,
-    columns: columns
-  }, props)));
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.default, _objectSpread({
+      data: data,
+      columns: columns
+    }, props))
+  });
 }
 
 const TableContainer = _styledComponents.default.div.withConfig({
@@ -302,22 +313,26 @@ const FilterLine = _styledComponents.default.div.withConfig({
   componentId: "sc-1ju12vq-1"
 })(["display:flex;align-items:center;.toolbar-filter-content{margin-bottom:8px;}.toolbar-filter-title{font-weight:700;font-size:14px;}"]);
 
-const WrapFilterList = props => {
+function WrapFilterList(props) {
   const {
     filterLabel
   } = (0, _DatatableContext.useDatatableContext)();
   const hasFilter = !!props.filterList.filter(e => e.length).length;
 
   if (hasFilter) {
-    return /*#__PURE__*/_react.default.createElement(FilterLine, null, hasFilter && /*#__PURE__*/_react.default.createElement("div", {
-      className: "toolbar-filter-title"
-    }, filterLabel), /*#__PURE__*/_react.default.createElement("div", {
-      className: "toolbar-filter-content"
-    }, /*#__PURE__*/_react.default.createElement(_muiDatatables.TableFilterList, props)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterLine, {
+      children: [hasFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "toolbar-filter-title",
+        children: filterLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "toolbar-filter-content",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.TableFilterList, _objectSpread({}, props))
+      })]
+    });
   }
 
   return '';
-};
+}
 
 WrapFilterList.propTypes = {
   filterList: _propTypes.default.array
@@ -326,15 +341,18 @@ WrapFilterList.defaultProps = {
   filterList: []
 };
 
-const WrapTableFooter = props => {
+function WrapTableFooter(props) {
   const {
     loading,
     disabled
   } = (0, _DatatableContext.useDatatableContext)();
-  return /*#__PURE__*/_react.default.createElement(FooterContainer, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "datatable-footer ".concat(loading || disabled ? 'datatable-footer-disabled' : '')
-  }, /*#__PURE__*/_react.default.createElement(_muiDatatables.TableFooter, props)));
-};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterContainer, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "datatable-footer ".concat(loading || disabled ? 'datatable-footer-disabled' : ''),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.TableFooter, _objectSpread({}, props))
+    })
+  });
+}
 
 const FooterContainer = _styledComponents.default.div.withConfig({
   displayName: "Datatable__FooterContainer",