@arcblock/ux 2.1.6 → 2.1.9

package/lib/Datatable/CustomToolbar.js

@@ -0,0 +1,350 @@
+"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 _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
+
+var _utils = require("./utils");
+
+var _TableSearch = _interopRequireDefault(require("./TableSearch"));
+
+var _DatatableContext = require("./DatatableContext");
+
+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 [searchOpened, setSearchOpened] = (0, _react.useState)(false);
+  const {
+    customButtons,
+    loading,
+    disabled
+  } = (0, _DatatableContext.useDatatableContext)();
+  const {
+    data,
+    options,
+    components,
+    columns,
+    filterList,
+    filterData,
+    filterUpdate,
+    resetFilters,
+    updateFilterByType,
+    toggleViewColumn,
+    updateColumns,
+    title,
+    searchText,
+    searchTextUpdate,
+    searchClose
+  } = props;
+  const customToolbarEle = options.customToolbar ? options.customToolbar(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;
+  (0, _react.useEffect)(() => {
+    if (loading || disabled) {
+      setAllPopsEl({});
+    }
+  }, [loading, disabled]);
+
+  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 = []; // download/viewColumns/filter button behaviours, rendered using custom button logic
+
+  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)({}); // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
+  // The right-hand button of the form toolbar in desktop mode
+
+  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; // 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, {
+          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) {
+            // On the large screen, the bubble is positioned at the corresponding button
+            setAllPopsEl({
+              [popId]: document.getElementById("btn-".concat(popId))
+            });
+          }
+        }
+      }, /*#__PURE__*/_react.default.createElement(Icon, null)));
+    }
+
+    return e;
+  }); // The toolbar menu in the mobile to replace toolbarButtons
+
+  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) {
+          // On the small screen, the bubbles are positioned at the three dot buttons
+          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 ".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)), loading && /*#__PURE__*/_react.default.createElement(_LinearProgress.default, null));
+}
+
+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.any,
+  searchText: _propTypes.default.any,
+  searchTextUpdate: _propTypes.default.func.isRequired,
+  searchClose: _propTypes.default.func.isRequired,
+  tableRef: _propTypes.default.func.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;transition:all ease 0.3s;&-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;}}}.custom-toobar-btns{display:flex;justify-content:center;align-items:center;&.toobar-btns-disabled{position:relative;opacity:0.5;&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}}.toobar-title-hidden{opacity:0;cursor:none;}"]);

package/lib/Datatable/DatatableContext.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatatableProvide = void 0;
+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); }
+
+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; }
+
+const DatatableContext = /*#__PURE__*/(0, _react.createContext)({});
+const {
+  Provider
+} = DatatableContext; // eslint-disable-next-line react/prop-types
+
+const DatatableProvide = _ref => {
+  let {
+    children
+  } = _ref;
+  const [customButtons, setCustomButtons] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [disabled, setDisabled] = (0, _react.useState)(false);
+  const [filterLabel, setFilterLabel] = (0, _react.useState)('Filter');
+  const value = {
+    customButtons,
+    setCustomButtons,
+    filterLabel,
+    setFilterLabel,
+    loading,
+    setLoading,
+    disabled,
+    setDisabled
+  };
+  return /*#__PURE__*/_react.default.createElement(Provider, {
+    value: value
+  }, children);
+};
+
+exports.DatatableProvide = DatatableProvide;
+
+function useDatatableContext() {
+  return (0, _react.useContext)(DatatableContext);
+}

package/lib/Datatable/TableSearch.js

@@ -0,0 +1,98 @@
+"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,
+    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' : '')
+  }, 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
+};
+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;", "{width:200px;}", "{width:180px;}&.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;}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));