@arcblock/ux 2.1.4 → 2.1.7

package/lib/Blocklet/blocklet.js

@@ -36,7 +36,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Div = _styledComponents.default.div.withConfig({
   displayName: "blocklet__Div",
   componentId: "sc-atxvkd-0"
-})(["&.arcblock-blocklet{padding:16px 16px 0 16px;}.arcblock-blocklet__content{cursor:pointer;display:flex;", "{align-items:center;}}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:16px;overflow:hidden;border-radius:12px;transform:translateZ(0);", "{width:80px;height:80px;margin-bottom:12px;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:24px;}.arcblock-blocklet__text{height:57px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:16px;font-weight:500;line-height:19px;max-height:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin-top:4px;color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:34px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}.arcblock-blocklet__version{color:", ";font-size:12px;}"], props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
+})(["&.arcblock-blocklet{padding:", " ", " 0 ", ";}.arcblock-blocklet__content{cursor:pointer;display:flex;", "{align-items:center;}}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:", ";overflow:hidden;border-radius:12px;transform:translateZ(0);", "{width:80px;height:80px;margin-bottom:12px;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:", ";}.arcblock-blocklet__text{height:57px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin-top:", ";color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:34px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}.arcblock-blocklet__version{color:", ";font-size:12px;}"], props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.spacing(2), props => props.theme.spacing(0.5), props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
 
 function BlockletStore(_ref) {
   let {

package/lib/Datatable/CustomToolbar.js

@@ -0,0 +1,330 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomToolbar;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _muiDatatables = require("mui-datatables");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactToPrint = _interopRequireWildcard(require("react-to-print"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+
+var _CloudDownload = _interopRequireDefault(require("@mui/icons-material/CloudDownload"));
+
+var _Print = _interopRequireDefault(require("@mui/icons-material/Print"));
+
+var _ViewColumn = _interopRequireDefault(require("@mui/icons-material/ViewColumn"));
+
+var _FilterList = _interopRequireDefault(require("@mui/icons-material/FilterList"));
+
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
+
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+
+var _styles = require("@mui/material/styles");
+
+var _utils = require("./utils");
+
+var _TableSearch = _interopRequireDefault(require("./TableSearch"));
+
+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); }
+
+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 useMobile() {
+  const theme = (0, _styles.useTheme)();
+  return (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+}
+
+function CustomToolbar(props) {
+  const [menuIconEl, setMenuIconEl] = (0, _react.useState)(null);
+  const moreBtn = (0, _react.useRef)(null);
+  const isMobile = useMobile();
+  const toolbarId = (0, _react.useRef)(Math.random().toString(32).slice(2));
+  const {
+    data,
+    options,
+    components,
+    columns,
+    filterList,
+    filterData,
+    filterUpdate,
+    resetFilters,
+    updateFilterByType,
+    toggleViewColumn,
+    updateColumns,
+    title,
+    searchText,
+    searchTextUpdate,
+    searchClose,
+    customButtons
+  } = props;
+  const {
+    search,
+    downloadCsv,
+    print,
+    viewColumns,
+    filterTable
+  } = options.textLabels.toolbar;
+  const hideSearch = options.search === false || options.search === 'false';
+  const hidePrint = options.print === false || options.print === 'false';
+  const TableFilterComponent = components.TableFilter || _muiDatatables.TableFilter;
+  const TableViewColComponent = components.TableViewCol || _muiDatatables.TableViewCol;
+
+  const printArea = func => {
+    return /*#__PURE__*/_react.default.createElement(_reactToPrint.default, {
+      content: () => props.tableRef()
+    }, /*#__PURE__*/_react.default.createElement(_reactToPrint.PrintContextConsumer, null, func));
+  };
+
+  const getPopId = key => "toolbar-pop-".concat(toolbarId.current, "-").concat(key);
+
+  const defaultButtons = [];
+
+  if (!(options.download === false || options.download === 'false')) {
+    defaultButtons.push({
+      Icon: _CloudDownload.default,
+      title: downloadCsv,
+      onClick: () => {
+        (0, _utils.handleCSVDownload)(props);
+      }
+    });
+  }
+
+  if (!(options.viewColumns === false || options.viewColumns === 'false')) {
+    defaultButtons.push({
+      Icon: _ViewColumn.default,
+      title: viewColumns,
+
+      popRender() {
+        return /*#__PURE__*/_react.default.createElement(TableViewColComponent, {
+          data: data,
+          columns: columns,
+          options: options,
+          onColumnUpdate: toggleViewColumn,
+          updateColumns: updateColumns,
+          components: components
+        });
+      }
+
+    });
+  }
+
+  if (!(options.filter === false || options.filter === 'false')) {
+    defaultButtons.push({
+      Icon: _FilterList.default,
+      title: filterTable,
+
+      popRender() {
+        return /*#__PURE__*/_react.default.createElement(TableFilterComponent, {
+          customFooter: options.customFilterDialogFooter,
+          columns: columns,
+          options: options,
+          filterList: filterList,
+          filterData: filterData,
+          onFilterUpdate: filterUpdate,
+          onFilterReset: resetFilters,
+          updateFilterByType: updateFilterByType,
+          components: components
+        });
+      }
+
+    });
+  }
+
+  const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
+  const allPops = [];
+  const [allPopsEl, setAllPopsEl] = (0, _react.useState)({});
+  const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
+    if ( /*#__PURE__*/(0, _react.isValidElement)(e)) {
+      return e;
+    }
+
+    const popId = getPopId(index);
+
+    if (e.Icon) {
+      const {
+        Icon,
+        popRender
+      } = e;
+
+      if (popRender) {
+        allPops.push( /*#__PURE__*/_react.default.createElement(_Popover.default, {
+          open: !!allPopsEl[popId],
+          anchorEl: () => allPopsEl[popId],
+          onClose: () => {
+            setAllPopsEl({});
+          },
+          key: popId,
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right'
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", null, popRender())));
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_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) {
+            setAllPopsEl({
+              [popId]: document.getElementById("btn-".concat(popId))
+            });
+          }
+        }
+      }, /*#__PURE__*/_react.default.createElement(Icon, null)));
+    }
+
+    return e;
+  });
+  const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
+    const popId = getPopId(index);
+    let content;
+
+    if ( /*#__PURE__*/(0, _react.isValidElement)(e)) {
+      content = e;
+    } else if (e.Icon) {
+      const {
+        Icon
+      } = e;
+      content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(Icon, {
+        fontSize: "small"
+      })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, e.title));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: popId,
+      onClick: () => {
+        setMenuIconEl(null);
+
+        if (e.onClick) {
+          e.onClick();
+        }
+
+        if (e.popRender) {
+          setAllPopsEl({
+            [popId]: moreBtn.current
+          });
+        }
+      }
+    }, content);
+  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-toobar-title"
+  }, /*#__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-right"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-toobar-btns"
+  }, !hideSearch && /*#__PURE__*/_react.default.createElement(_TableSearch.default, {
+    search: search,
+    options: options,
+    searchText: searchText,
+    searchTextUpdate: searchTextUpdate,
+    searchClose: searchClose,
+    isMobile: isMobile
+  }), !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)
+  }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null))))), /*#__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)));
+}
+
+CustomToolbar.propTypes = {
+  data: _propTypes.default.array,
+  options: _propTypes.default.object.isRequired,
+  components: _propTypes.default.object,
+  columns: _propTypes.default.array.isRequired,
+  filterList: _propTypes.default.array,
+  filterData: _propTypes.default.array,
+  filterUpdate: _propTypes.default.func.isRequired,
+  resetFilters: _propTypes.default.func.isRequired,
+  updateFilterByType: _propTypes.default.func.isRequired,
+  toggleViewColumn: _propTypes.default.func.isRequired,
+  updateColumns: _propTypes.default.func.isRequired,
+  title: _propTypes.default.string,
+  searchText: _propTypes.default.any,
+  searchTextUpdate: _propTypes.default.func.isRequired,
+  searchClose: _propTypes.default.func.isRequired,
+  tableRef: _propTypes.default.func.isRequired,
+  customButtons: _propTypes.default.array.isRequired
+};
+CustomToolbar.defaultProps = {
+  data: [],
+  components: {},
+  filterList: [],
+  filterData: [],
+  title: '',
+  searchText: null
+};
+
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "CustomToolbar__Container",
+  componentId: "sc-cvz3dp-0"
+})(["display:flex;align-items:center;height:56px;.custom-toobar{&-title{position:relative;flex:1;font-size:18px;font-weight:800;height:56px;&-inner{line-height:56px;width:100%;height:56px;position:absolute;left:0;top:0;span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}}}&-right{display:flex;margin-left:auto;}&-btns{display:flex;justify-content:center;align-items:center;}}"]);

package/lib/Datatable/TableSearch.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TableSearch;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+
+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); }
+
+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 TableSearch(_ref) {
+  let {
+    search,
+    options,
+    searchText,
+    searchTextUpdate,
+    searchClose,
+    isMobile,
+    onSearchOpen
+  } = _ref;
+  const [inputMode, setInputMode] = (0, _react.useState)(false);
+
+  const clickSearchIcon = () => {
+    setInputMode(true);
+    onSearchOpen(true);
+  };
+
+  const onChange = event => {
+    searchTextUpdate(event.currentTarget.value);
+  };
+
+  const clickClose = () => {
+    setInputMode(false);
+    searchClose();
+    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' : '', " ").concat(isMobile ? 'small-textfield' : '')
+  }, 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))));
+}
+
+TableSearch.propTypes = {
+  search: _propTypes.default.string,
+  searchText: _propTypes.default.string,
+  onSearchOpen: _propTypes.default.func,
+  options: _propTypes.default.object.isRequired,
+  searchTextUpdate: _propTypes.default.func.isRequired,
+  searchClose: _propTypes.default.func.isRequired,
+  isMobile: _propTypes.default.bool.isRequired
+};
+TableSearch.defaultProps = {
+  search: '',
+  searchText: '',
+  onSearchOpen: () => {}
+};
+
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "TableSearch__Container",
+  componentId: "sc-43ylue-0"
+})(["display:flex;align-items:center;.toolbar-search-area{width:0;transition:all ease 0.3s;overflow:hidden;.MuiFormControl-root{width:inherit;margin:0 12px;}&.toolbar-btn-show{width:260px;padding-left:8px;&.small-textfield{width:200px;}}}.toolbar-search-close{width:0;transition:all ease 0.3s;overflow:hidden;&.toolbar-btn-show{width:40px;}}.toolbar-search-icon-placeholder{display:flex;justify-content:center;align-items:center;width:40px;height:40px;}"]);

package/lib/Datatable/index.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Datatable;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _muiDatatables = _interopRequireWildcard(require("mui-datatables"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
+
+const _excluded = ["locale", "options", "style", "customButtons"];
+
+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); }
+
+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 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; }
+
+const WrapFilterList = props => {
+  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"
+    }, "Filter"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "toolbar-filter-content"
+    }, /*#__PURE__*/_react.default.createElement(_muiDatatables.TableFilterList, props)));
+  }
+
+  return '';
+};
+
+WrapFilterList.propTypes = {
+  filterList: _propTypes.default.array
+};
+WrapFilterList.defaultProps = {
+  filterList: []
+};
+
+function Datatable(_ref) {
+  let {
+    locale,
+    options,
+    style,
+    customButtons
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const container = (0, _react.useRef)(null);
+  let textLabels = {
+    body: {
+      noMatch: 'Sorry, no matching records found',
+      toolTip: 'Sort'
+    },
+    pagination: {
+      next: 'Next Page',
+      previous: 'Previous Page',
+      rowsPerPage: 'Rows per page:',
+      displayRows: 'of',
+      jumpToPage: 'Jump to Page:'
+    },
+    toolbar: {
+      search: 'Search',
+      downloadCsv: 'Download CSV',
+      print: 'Print',
+      viewColumns: 'View Columns',
+      filterTable: 'Filter Table'
+    },
+    filter: {
+      all: 'All',
+      title: 'FILTERS',
+      reset: 'RESET'
+    },
+    viewColumns: {
+      title: 'Show Columns',
+      titleAria: 'Show/Hide Table Columns'
+    },
+    selectedRows: {
+      text: 'row(s) selected',
+      delete: 'Delete',
+      deleteAria: 'Delete Selected Rows'
+    }
+  };
+
+  if (locale === 'zh') {
+    textLabels = {
+      body: {
+        noMatch: '对不起，没有找到匹配的记录',
+        toolTip: '排序'
+      },
+      pagination: {
+        next: '下一页',
+        previous: '上一页',
+        rowsPerPage: '每页行数',
+        displayRows: '/',
+        jumpToPage: '跳转到页面：'
+      },
+      toolbar: {
+        search: '搜索',
+        downloadCsv: '下载CSV',
+        print: '打印',
+        viewColumns: '查看列',
+        filterTable: '筛选表格'
+      },
+      filter: {
+        all: '全部',
+        title: '筛选器',
+        reset: '重置'
+      },
+      viewColumns: {
+        title: '显示的列',
+        titleAria: '显示/隐藏 表格的列'
+      },
+      selectedRows: {
+        text: '个已选项目',
+        delete: '删除',
+        deleteAria: '删除所选项目'
+      }
+    };
+  }
+
+  const opts = _objectSpread({
+    selectableRows: 'none',
+    textLabels
+  }, options);
+
+  const WrapCustomToolBar = props => {
+    return /*#__PURE__*/_react.default.createElement(_CustomToolbar.default, Object.assign({}, props, {
+      customButtons: customButtons || []
+    }));
+  };
+
+  const props = _objectSpread(_objectSpread({
+    options: opts
+  }, rest), {}, {
+    components: {
+      TableToolbar: WrapCustomToolBar,
+      TableFilterList: WrapFilterList
+    }
+  });
+
+  Datatable.propTypes = {
+    options: _propTypes.default.object,
+    style: _propTypes.default.object,
+    locale: _propTypes.default.string,
+    customButtons: _propTypes.default.array
+  };
+  Datatable.defaultProps = {
+    options: {},
+    style: {},
+    locale: 'en',
+    customButtons: []
+  };
+  return /*#__PURE__*/_react.default.createElement(TableContainer, {
+    ref: container,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_muiDatatables.default, props));
+}
+
+const TableContainer = _styledComponents.default.div.withConfig({
+  displayName: "Datatable__TableContainer",
+  componentId: "sc-1ju12vq-0"
+})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}}"], props => props.theme.breakpoints.down('md'));
+
+const FilterLine = _styledComponents.default.div.withConfig({
+  displayName: "Datatable__FilterLine",
+  componentId: "sc-1ju12vq-1"
+})(["display:flex;align-items:center;.toolbar-filter-content{margin-bottom:8px;}.toolbar-filter-title{font-weight:700;font-size:14px;}"]);