@arcblock/ux 2.6.8 → 2.7.0

package/es/Datatable/CustomToolbar.js

@@ -0,0 +1,396 @@
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function useMobile() {
+  const theme = useTheme();
+  return useMediaQuery(theme.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 {
+    customButtons,
+    loading,
+    disabled
+  } = 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 || TableFilter;
+  const TableViewColComponent = components.TableViewCol || TableViewCol;
+  useEffect(() => {
+    if (loading || disabled) {
+      setAllPopsEl({});
+    }
+  }, [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 = [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
+  const allPops = [];
+  const [allPopsEl, setAllPopsEl] = 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__*/isValidElement(e)) {
+      return e;
+    }
+    const popId = getPopId(index);
+    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'
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            children: popRender()
+          })
+        }, popId));
+      }
+      return /*#__PURE__*/_jsx(Tooltip, {
+        title: e.title,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          "data-testid": `${e.title}-iconButton`,
+          id: `btn-${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-${popId}`)
+              });
+            }
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            className: "custom-toolbar-icon",
+            children: icon
+          })
+        })
+      }, popId);
+    }
+    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__*/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
+        })]
+      });
+    }
+    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
+          });
+        }
+      },
+      children: content
+    }, popId);
+  });
+  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();
+        },
+        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"
+      })
+    })]
+  });
+}
+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
+};
+CustomToolbar.defaultProps = {
+  data: [],
+  components: {},
+  filterList: [],
+  filterData: [],
+  title: '',
+  searchText: null
+};
+const Container = styled('div')`
+  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;
+      }
+    }
+    .custom-toolbar-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      font-size: 20px;
+      overflow: hidden;
+    }
+  }
+  .toobar-title-hidden {
+    opacity: 0;
+    cursor: none;
+  }
+`;
+const ProgressContainer = styled('div')`
+  width: 100%;
+  height: 2px;
+  .toolbar-progress {
+    height: 2px;
+  }
+`;

package/es/Datatable/DatatableContext.js

@@ -0,0 +1,34 @@
+import { createContext, useContext, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DatatableContext = /*#__PURE__*/createContext({});
+const {
+  Provider
+} = DatatableContext;
+
+// eslint-disable-next-line react/prop-types
+function DatatableProvider({
+  children
+}) {
+  const [customButtons, setCustomButtons] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+  const [filterLabel, setFilterLabel] = useState('Filter');
+  const value = {
+    customButtons,
+    setCustomButtons,
+    filterLabel,
+    setFilterLabel,
+    loading,
+    setLoading,
+    disabled,
+    setDisabled
+  };
+  return /*#__PURE__*/_jsx(Provider, {
+    value: value,
+    children: children
+  });
+}
+function useDatatableContext() {
+  return useContext(DatatableContext);
+}
+export { DatatableProvider, useDatatableContext };

package/es/Datatable/TableSearch.js

@@ -0,0 +1,165 @@
+import { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import SearchIcon from '@mui/icons-material/Search';
+import TextField from '@mui/material/TextField';
+import ClearIcon from '@mui/icons-material/Clear';
+import clsx from 'clsx';
+import { useDatatableContext } from './DatatableContext';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function TableSearch({
+  search,
+  options,
+  searchText,
+  searchTextUpdate,
+  searchClose,
+  onSearchOpen
+}) {
+  const {
+    searchOpen,
+    searchPlaceholder,
+    searchAlwaysOpen
+  } = options;
+  const [inputExpand, setInputExpand] = useState(!!searchText || searchOpen || false);
+  const [innerSearchText, setInnerSearchText] = useState(searchText);
+  const inputTimer = useRef(null);
+  const {
+    loading
+  } = useDatatableContext();
+  const {
+    searchDebounceTime
+  } = options;
+  const searchExpand = searchAlwaysOpen || inputExpand;
+  const clickSearchIcon = () => {
+    setInputExpand(true);
+    onSearchOpen(true);
+  };
+  const onChange = event => {
+    const {
+      value
+    } = event.currentTarget;
+    if (searchDebounceTime) {
+      clearTimeout(inputTimer.current);
+      setInnerSearchText(value);
+      inputTimer.current = setTimeout(() => {
+        searchTextUpdate(value);
+      }, searchDebounceTime);
+    } else {
+      searchTextUpdate(value);
+    }
+  };
+  const clickClose = () => {
+    setInputExpand(false);
+    searchClose();
+    setInnerSearchText('');
+    onSearchOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(Container, {
+    className: clsx({
+      'search-always-open': searchAlwaysOpen
+    }),
+    children: [searchExpand ? /*#__PURE__*/_jsx("div", {
+      className: "toolbar-search-icon-placeholder",
+      children: /*#__PURE__*/_jsx(SearchIcon, {})
+    }) : /*#__PURE__*/_jsx(Tooltip, {
+      title: search,
+      disableFocusListener: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": search,
+        "data-testid": `${search}-iconButton`,
+        disabled: options.search === 'disabled',
+        onClick: clickSearchIcon,
+        children: /*#__PURE__*/_jsx(SearchIcon, {})
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `toolbar-search-area ${searchExpand ? 'toolbar-btn-show' : ''}`,
+      children: [searchExpand && !loading && /*#__PURE__*/_jsx(TextField, {
+        variant: "standard",
+        spacing: 2,
+        onChange: onChange,
+        value: searchDebounceTime ? innerSearchText : searchText,
+        placeholder: searchPlaceholder || '',
+        autoFocus: !searchAlwaysOpen
+      }), loading && /*#__PURE__*/_jsx(TextField, {
+        disabled: true,
+        variant: "standard",
+        spacing: 2,
+        value: searchDebounceTime ? innerSearchText : searchText
+      })]
+    }), !searchAlwaysOpen && /*#__PURE__*/_jsx("div", {
+      className: `toolbar-search-close ${searchExpand ? 'toolbar-btn-show' : ''}`,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: clickClose,
+        "aria-label": "click to close the search box",
+        children: /*#__PURE__*/_jsx(ClearIcon, {})
+      })
+    })]
+  });
+}
+TableSearch.propTypes = {
+  search: PropTypes.string,
+  searchText: PropTypes.string,
+  onSearchOpen: PropTypes.func,
+  options: PropTypes.object.isRequired,
+  searchTextUpdate: PropTypes.func.isRequired,
+  searchClose: PropTypes.func.isRequired
+};
+TableSearch.defaultProps = {
+  search: '',
+  searchText: '',
+  onSearchOpen: () => {}
+};
+const Container = styled('div')`
+  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;
+
+      ${props => props.theme.breakpoints.down('md')} {
+        width: 200px;
+      }
+
+      ${props => props.theme.breakpoints.down('sm')} {
+        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;
+  }
+  &.search-always-open {
+    .MuiFormControl-root {
+      margin: 0 12px 0 0;
+    }
+    .toolbar-btn-show {
+      padding-left: 0;
+    }
+  }
+`;