@arcblock/ux 2.13.70 → 3.0.1

package/lib/Datatable/CustomToolbar.js

@@ -1,331 +1,248 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import { TableFilter, TableViewCol } from 'mui-datatables';
-import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import DownloadIcon from '@mui/icons-material/CloudDownload';
-import PrintIcon from '@mui/icons-material/Print';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import FilterIcon from '@mui/icons-material/FilterList';
-import Popover from '@mui/material/Popover';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import LinearProgress from '@mui/material/LinearProgress';
-import { handleCSVDownload } from './utils';
-import TableSearch from './TableSearch';
-import { useDatatableContext } from './DatatableContext';
-import { styled, useTheme } from '../Theme';
-function useMobile() {
-  const theme = useTheme();
-  return useMediaQuery(theme.breakpoints.down('sm'));
+import { jsx as t, jsxs as r, Fragment as S } from "react/jsx-runtime";
+import { useState as T, useRef as V, isValidElement as v } from "react";
+import i from "prop-types";
+import { TableFilter as ue, TableViewCol as pe } from "mui-datatables";
+import he, { PrintContextConsumer as me } from "react-to-print";
+import { MoreVert as fe, CloudDownload as be, ViewColumn as Ce, FilterList as ge, Print as $ } from "@mui/icons-material";
+import { Popover as xe, Tooltip as D, IconButton as R, ListItemIcon as L, ListItemText as j, MenuItem as U, Menu as we, LinearProgress as ye, useTheme as Te, useMediaQuery as ve } from "@mui/material";
+import { useDeepCompareEffect as Re } from "ahooks";
+import { handleCSVDownload as ke } from "./utils.js";
+import Fe from "./TableSearch.js";
+import { useDatatableContext as Pe } from "./DatatableContext.js";
+import { styled as z } from "../Theme/index.js";
+function Ie() {
+  const s = Te();
+  return ve(s.breakpoints.down("sm"));
 }
-export default function CustomToolbar(props) {
-  const [menuIconEl, setMenuIconEl] = useState(null);
-  const moreBtn = useRef(null);
-  const isMobile = useMobile();
-  const toolbarId = useRef(Math.random().toString(32).slice(2));
-  const [searchOpened, setSearchOpened] = useState(false);
-  const {
-    customPreButtons,
-    customButtons,
-    loading,
-    disabled
-  } = useDatatableContext();
-  const {
-    data,
-    options,
-    components,
-    columns,
-    filterList,
-    filterData,
-    filterUpdate,
-    resetFilters,
-    updateFilterByType,
-    toggleViewColumn,
-    updateColumns,
-    title,
-    searchText,
-    searchTextUpdate,
-    searchClose
-  } = props;
-  const [allPopsEl, setAllPopsEl] = useState({});
-  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 || TableFilter;
-  const TableViewColComponent = components.TableViewCol || TableViewCol;
-  useEffect(() => {
-    if (loading || disabled) {
-      setAllPopsEl({});
+function Be(s) {
+  const [f, d] = T(null), k = V(null), F = Ie(), N = V(Math.random().toString(32).slice(2)), [O, A] = T(!1), { customPreButtons: b, customButtons: C, loading: u, disabled: g } = Pe(), {
+    data: Q = [],
+    options: o,
+    components: p = {},
+    columns: P,
+    filterList: G = [],
+    filterData: H = [],
+    filterUpdate: J,
+    resetFilters: K,
+    updateFilterByType: W,
+    toggleViewColumn: X,
+    updateColumns: Y,
+    title: I = "",
+    searchText: Z = null,
+    searchTextUpdate: _,
+    searchClose: ee
+  } = s, [B, h] = T({}), te = o.customToolbar ? o.customToolbar(s) : "", { search: oe, downloadCsv: ie, print: m, viewColumns: ne, filterTable: le } = o.textLabels.toolbar, re = o.search === !1 || o.search === "false", x = o.print === !1 || o.print === "false", se = p.TableFilter || ue, ae = p.TableViewCol || pe;
+  Re(() => {
+    (u || g) && h({});
+  }, [u, g]);
+  const q = (e) => /* @__PURE__ */ t(he, { content: () => s.tableRef(), children: /* @__PURE__ */ t(me, { children: e }) }), w = (e) => `toolbar-pop-${N.current}-${e}`, a = [];
+  o.download === !1 || o.download === "false" || a.push({
+    icon: /* @__PURE__ */ t(be, {}),
+    title: ie,
+    onClick: () => {
+      ke(s);
     }
-  }, [loading, disabled]);
-  const printArea = func => {
-    return /*#__PURE__*/_jsx(ReactToPrint, {
-      content: () => props.tableRef(),
-      children: /*#__PURE__*/_jsx(PrintContextConsumer, {
-        children: func
-      })
-    });
-  };
-  const getPopId = key => `toolbar-pop-${toolbarId.current}-${key}`;
-  const defaultButtons = [];
-
-  // download/viewColumns/filter button behaviours, rendered using custom button logic
-  if (!(options.download === false || options.download === 'false')) {
-    defaultButtons.push({
-      icon: /*#__PURE__*/_jsx(DownloadIcon, {}),
-      title: downloadCsv,
-      onClick: () => {
-        handleCSVDownload(props);
-      }
-    });
-  }
-  if (!(options.viewColumns === false || options.viewColumns === 'false')) {
-    defaultButtons.push({
-      icon: /*#__PURE__*/_jsx(ViewColumnIcon, {}),
-      title: viewColumns,
-      // eslint-disable-next-line react/no-unstable-nested-components
-      popRender() {
-        return /*#__PURE__*/_jsx(TableViewColComponent, {
-          data: data,
-          columns: columns,
-          options: options,
-          onColumnUpdate: toggleViewColumn,
-          updateColumns: updateColumns,
-          components: components
-        });
-      }
-    });
-  }
-  if (!(options.filter === false || options.filter === 'false')) {
-    defaultButtons.push({
-      icon: /*#__PURE__*/_jsx(FilterIcon, {}),
-      title: filterTable,
-      // eslint-disable-next-line react/no-unstable-nested-components
-      popRender() {
-        return /*#__PURE__*/_jsx(TableFilterComponent, {
-          customFooter: options.customFilterDialogFooter,
-          columns: columns,
-          options: options,
-          filterList: filterList,
-          filterData: filterData,
-          onFilterUpdate: filterUpdate,
-          onFilterReset: resetFilters,
-          updateFilterByType: updateFilterByType,
-          components: components
-        });
-      }
-    });
-  }
-  const showMore = [...customPreButtons, !hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
-  const allPops = [];
-
-  // 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 = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
-    if (/*#__PURE__*/isValidElement(e)) {
-      return e;
+  }), o.viewColumns === !1 || o.viewColumns === "false" || a.push({
+    icon: /* @__PURE__ */ t(Ce, {}),
+    title: ne,
+    // eslint-disable-next-line react/no-unstable-nested-components
+    popRender() {
+      return /* @__PURE__ */ t(
+        ae,
+        {
+          data: Q,
+          columns: P,
+          options: o,
+          onColumnUpdate: X,
+          updateColumns: Y,
+          components: p
+        }
+      );
     }
-    const popId = getPopId(index);
+  }), o.filter === !1 || o.filter === "false" || a.push({
+    icon: /* @__PURE__ */ t(ge, {}),
+    title: le,
+    // eslint-disable-next-line react/no-unstable-nested-components
+    popRender() {
+      return /* @__PURE__ */ t(
+        se,
+        {
+          customFooter: o.customFilterDialogFooter,
+          columns: P,
+          options: o,
+          filterList: G,
+          filterData: H,
+          onFilterUpdate: J,
+          onFilterReset: K,
+          updateFilterByType: W,
+          components: p
+        }
+      );
+    }
+  });
+  const E = [...b, !x, ...a, ...C].filter((e) => !!e).length > 1 && F, M = [], ce = [...b, ...a, ...C].map((e, c) => {
+    if (v(e))
+      return e;
+    const n = w(c);
     if (e.icon) {
-      const {
-        popRender,
-        icon
-      } = e;
-      // When popRender is present, clicking the button will bubble up the content returned by the popRender
-      if (popRender) {
-        allPops.push(/*#__PURE__*/_jsx(Popover, {
-          open: !!allPopsEl[popId],
-          anchorEl: () => allPopsEl[popId],
-          onClose: () => {
-            setAllPopsEl({});
-          },
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'right'
+      const { popRender: l, icon: y } = e;
+      return l && M.push(
+        /* @__PURE__ */ t(
+          xe,
+          {
+            open: !!B[n],
+            anchorEl: () => B[n],
+            onClose: () => {
+              h({});
+            },
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "right"
+            },
+            children: /* @__PURE__ */ t("div", { children: l() })
           },
-          children: /*#__PURE__*/_jsx("div", {
-            children: popRender()
-          })
-        }, popId));
-      }
-      return /*#__PURE__*/_jsx(Tooltip, {
-        title: e.title,
-        children: /*#__PURE__*/_jsx(IconButton, {
+          n
+        )
+      ), /* @__PURE__ */ t(D, { title: e.title, children: /* @__PURE__ */ t(
+        R,
+        {
           "data-testid": `${e.title}-iconButton`,
-          id: `btn-${popId}`,
+          id: `btn-${n}`,
           "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-${popId}`)
-              });
-            }
+            e.onClick && e.onClick(), l && h({
+              [n]: document.getElementById(`btn-${n}`)
+            });
           },
-          children: /*#__PURE__*/_jsx("div", {
-            className: "custom-toolbar-icon",
-            children: icon
-          })
-        })
-      }, popId);
+          children: /* @__PURE__ */ t("div", { className: "custom-toolbar-icon", children: y })
+        }
+      ) }, n);
     }
     return e;
-  });
-
-  // The toolbar menu in the mobile to replace toolbarButtons
-  const menuItems = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
-    const popId = getPopId(index);
-    let content;
-    if (/*#__PURE__*/isValidElement(e)) {
-      content = e;
-    } else if (e.icon) {
-      const {
-        icon
-      } = e;
-      content = /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: icon
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          children: e.title
-        })]
-      });
+  }), de = [...b, ...a, ...C].map((e, c) => {
+    const n = w(c);
+    let l;
+    if (v(e))
+      l = e;
+    else if (e.icon) {
+      const { icon: y } = e;
+      l = /* @__PURE__ */ r(S, { children: [
+        /* @__PURE__ */ t(L, { children: y }),
+        /* @__PURE__ */ t(j, { children: e.title })
+      ] });
     }
-    return /*#__PURE__*/_jsx(MenuItem, {
-      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
+    return /* @__PURE__ */ t(
+      U,
+      {
+        onClick: () => {
+          d(null), e.onClick && e.onClick(), e.popRender && h({
+            [n]: k.current
           });
-        }
+        },
+        children: l
       },
-      children: content
-    }, popId);
+      n
+    );
   });
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsxs(Container, {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: `custom-toobar-title ${isMobile && searchOpened && /*#__PURE__*/isValidElement(title) ? 'toobar-title-hidden' : ''}`,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "custom-toobar-title-inner",
-          children: /*#__PURE__*/_jsx("span", {
-            children: title
-          })
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `custom-toobar-btns ${loading || disabled ? 'toobar-btns-disabled' : ''}`,
-        children: [!hideSearch && /*#__PURE__*/_jsx(TableSearch, {
-          search: search,
-          options: options,
-          searchText: searchText,
-          searchTextUpdate: searchTextUpdate,
-          searchClose: searchClose,
-          onSearchOpen: setSearchOpened
-        }), !showMore && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [!hidePrint && printArea(({
-            handlePrint
-          }) => /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(Tooltip, {
-              title: print,
-              children: /*#__PURE__*/_jsx(IconButton, {
-                "data-testid": `${print}-iconButton`,
-                "aria-label": print,
-                disabled: options.print === 'disabled',
-                onClick: handlePrint,
-                children: /*#__PURE__*/_jsx(PrintIcon, {})
-              })
-            })
-          })), toolbarButtons]
-        }), showMore && /*#__PURE__*/_jsx(IconButton, {
-          ref: moreBtn,
-          "aria-haspopup": "true",
-          "aria-expanded": menuIconEl ? 'true' : undefined,
-          onClick: event => setMenuIconEl(event.currentTarget),
-          style: {
-            flexShrink: 0
-          },
-          children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-        })]
-      }), customToolbarEle]
-    }), /*#__PURE__*/_jsxs(Menu, {
-      anchorEl: menuIconEl,
-      open: !!menuIconEl,
-      onClose: () => setMenuIconEl(null),
-      MenuListProps: {
-        'aria-labelledby': 'more-button'
-      },
-      children: [!hidePrint && printArea(({
-        handlePrint
-      }) => /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => {
-          setMenuIconEl(null);
-          handlePrint();
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ r(qe, { children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: `custom-toobar-title ${F && O && v(I) ? "toobar-title-hidden" : ""}`,
+          children: /* @__PURE__ */ t("div", { className: "custom-toobar-title-inner", children: /* @__PURE__ */ t("span", { children: I }) })
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: `custom-toobar-btns ${u || g ? "toobar-btns-disabled" : ""}`, children: [
+        !re && /* @__PURE__ */ t(
+          Fe,
+          {
+            search: oe,
+            options: o,
+            searchText: Z,
+            searchTextUpdate: _,
+            searchClose: ee,
+            onSearchOpen: A
+          }
+        ),
+        !E && /* @__PURE__ */ r(S, { children: [
+          !x && q(({ handlePrint: e }) => /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(D, { title: m, children: /* @__PURE__ */ t(
+            R,
+            {
+              "data-testid": `${m}-iconButton`,
+              "aria-label": m,
+              disabled: o.print === "disabled",
+              onClick: e,
+              children: /* @__PURE__ */ t($, {})
+            }
+          ) }) })),
+          ce
+        ] }),
+        E && /* @__PURE__ */ t(
+          R,
+          {
+            ref: k,
+            "aria-haspopup": "true",
+            "aria-expanded": f ? "true" : void 0,
+            onClick: (e) => d(e.currentTarget),
+            style: { flexShrink: 0 },
+            children: /* @__PURE__ */ t(fe, {})
+          }
+        )
+      ] }),
+      te
+    ] }),
+    /* @__PURE__ */ r(
+      we,
+      {
+        anchorEl: f,
+        open: !!f,
+        onClose: () => d(null),
+        slotProps: {
+          list: {
+            "aria-labelledby": "more-button"
+          }
         },
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(PrintIcon, {
-            fontSize: "small"
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          children: print
-        })]
-      })), menuItems]
-    }), allPops.map((e, index) => /*#__PURE__*/_jsx("div", {
-      children: e
-    }, getPopId(index))), /*#__PURE__*/_jsx(ProgressContainer, {
-      children: loading && /*#__PURE__*/_jsx(LinearProgress, {
-        className: "toolbar-progress"
-      })
-    })]
-  });
+        children: [
+          !x && q(({ handlePrint: e }) => /* @__PURE__ */ r(
+            U,
+            {
+              onClick: () => {
+                d(null), e();
+              },
+              children: [
+                /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t($, { fontSize: "small" }) }),
+                /* @__PURE__ */ t(j, { children: m })
+              ]
+            }
+          )),
+          de
+        ]
+      }
+    ),
+    M.map((e, c) => /* @__PURE__ */ t("div", { children: e }, w(c))),
+    /* @__PURE__ */ t(Ee, { children: u && /* @__PURE__ */ t(ye, { className: "toolbar-progress" }) })
+  ] });
 }
-CustomToolbar.propTypes = {
-  data: PropTypes.array,
-  options: PropTypes.object.isRequired,
-  components: PropTypes.object,
-  columns: PropTypes.array.isRequired,
-  filterList: PropTypes.array,
-  filterData: PropTypes.array,
-  filterUpdate: PropTypes.func.isRequired,
-  resetFilters: PropTypes.func.isRequired,
-  updateFilterByType: PropTypes.func.isRequired,
-  toggleViewColumn: PropTypes.func.isRequired,
-  updateColumns: PropTypes.func.isRequired,
-  title: PropTypes.any,
-  searchText: PropTypes.any,
-  searchTextUpdate: PropTypes.func.isRequired,
-  searchClose: PropTypes.func.isRequired,
-  tableRef: PropTypes.func.isRequired
+Be.propTypes = {
+  data: i.array,
+  options: i.object.isRequired,
+  components: i.object,
+  columns: i.array.isRequired,
+  filterList: i.array,
+  filterData: i.array,
+  filterUpdate: i.func.isRequired,
+  resetFilters: i.func.isRequired,
+  updateFilterByType: i.func.isRequired,
+  toggleViewColumn: i.func.isRequired,
+  updateColumns: i.func.isRequired,
+  title: i.any,
+  searchText: i.any,
+  searchTextUpdate: i.func.isRequired,
+  searchClose: i.func.isRequired,
+  tableRef: i.func.isRequired
 };
-CustomToolbar.defaultProps = {
-  data: [],
-  components: {},
-  filterList: [],
-  filterData: [],
-  title: '',
-  searchText: null
-};
-const Container = styled('div')`
+const qe = z("div")`
   display: flex;
   align-items: center;
   height: 56px;
@@ -385,11 +302,13 @@ const Container = styled('div')`
     opacity: 0;
     cursor: none;
   }
-`;
-const ProgressContainer = styled('div')`
+`, Ee = z("div")`
   width: 100%;
   height: 2px;
   .toolbar-progress {
     height: 2px;
   }
-`;
+`;
+export {
+  Be as default
+};

package/lib/Datatable/Datatable.stories.d.ts

@@ -0,0 +1,32 @@
+import { default as Basic } from './demo/basic';
+import { default as Durable } from './demo/durable';
+import { default as Stripped } from './demo/stripped';
+import { default as LocaleZh } from './demo/locale-zh';
+import { default as ElementTitle } from './demo/element-title';
+import { default as CustomButtons } from './demo/custom-buttons';
+import { default as ColumnWidth } from './demo/column-width';
+import { default as SelectItem } from './demo/select-item';
+import { default as SetTableBodyHeight } from './demo/set-table-body-height';
+import { default as HideTableHeader } from './demo/hide-table-header';
+import { default as ParentContainerHasHeight } from './demo/parent-container-has-height';
+import { default as InFlexHeight } from './demo/in-flex-height';
+import { default as EmptyTable } from './demo/empty-table';
+import { default as VerticalKeyWidth } from './demo/vertical-key-width';
+import { default as CustomCellRender } from './demo/custom-cell-render';
+import { default as SearchOpenAndPlaceholder } from './demo/search-open-and-placeholder';
+import { default as DynamicData } from './demo/dynamic-data';
+import { default as LotsOfData } from './demo/lots-of-data';
+import { default as JumpToPage } from './demo/jump-to-page';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+    let decorators: ((StoryFn: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;
+export { Basic, Durable, Stripped, LocaleZh, ElementTitle, CustomButtons, ColumnWidth, SelectItem, SetTableBodyHeight, HideTableHeader, ParentContainerHasHeight, InFlexHeight, EmptyTable, VerticalKeyWidth, CustomCellRender, SearchOpenAndPlaceholder, DynamicData, LotsOfData, JumpToPage };