@arcblock/ux 2.1.6 → 2.1.9

package/src/Datatable/CustomToolbar.js

@@ -0,0 +1,406 @@
+import React, { useState, useRef, useEffect, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import { TableFilter, TableViewCol } from 'mui-datatables';
+import styled from 'styled-components';
+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 { useTheme } from '@mui/material/styles';
+import LinearProgress from '@mui/material/LinearProgress';
+import { handleCSVDownload } from './utils';
+import TableSearch from './TableSearch';
+import { useDatatableContext } from './DatatableContext';
+
+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 (
+      <ReactToPrint content={() => props.tableRef()}>
+        <PrintContextConsumer>{func}</PrintContextConsumer>
+      </ReactToPrint>
+    );
+  };
+
+  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: DownloadIcon,
+      title: downloadCsv,
+      onClick: () => {
+        handleCSVDownload(props);
+      },
+    });
+  }
+
+  if (!(options.viewColumns === false || options.viewColumns === 'false')) {
+    defaultButtons.push({
+      Icon: ViewColumnIcon,
+      title: viewColumns,
+      popRender() {
+        return (
+          <TableViewColComponent
+            data={data}
+            columns={columns}
+            options={options}
+            onColumnUpdate={toggleViewColumn}
+            updateColumns={updateColumns}
+            components={components}
+          />
+        );
+      },
+    });
+  }
+
+  if (!(options.filter === false || options.filter === 'false')) {
+    defaultButtons.push({
+      Icon: FilterIcon,
+      title: filterTable,
+      popRender() {
+        return (
+          <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 (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(
+          <Popover
+            open={!!allPopsEl[popId]}
+            anchorEl={() => allPopsEl[popId]}
+            onClose={() => {
+              setAllPopsEl({});
+            }}
+            key={popId}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right',
+            }}>
+            <div>{popRender()}</div>
+          </Popover>
+        );
+      }
+
+      return (
+        <Tooltip title={e.title} key={popId}>
+          <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}`),
+                });
+              }
+            }}>
+            <Icon />
+          </IconButton>
+        </Tooltip>
+      );
+    }
+
+    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 (isValidElement(e)) {
+      content = e;
+    } else if (e.Icon) {
+      const { Icon } = e;
+
+      content = (
+        <>
+          <ListItemIcon>
+            <Icon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>{e.title}</ListItemText>
+        </>
+      );
+    }
+
+    return (
+      <MenuItem
+        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}
+      </MenuItem>
+    );
+  });
+
+  return (
+    <div>
+      <Container>
+        <div
+          className={`custom-toobar-title ${
+            isMobile && searchOpened && isValidElement(title) ? 'toobar-title-hidden' : ''
+          }`}>
+          <div className="custom-toobar-title-inner">
+            <span>{title}</span>
+          </div>
+        </div>
+        <div className={`custom-toobar-btns ${loading || disabled ? 'toobar-btns-disabled' : ''}`}>
+          {!hideSearch && (
+            <TableSearch
+              search={search}
+              options={options}
+              searchText={searchText}
+              searchTextUpdate={searchTextUpdate}
+              searchClose={searchClose}
+              onSearchOpen={setSearchOpened}
+            />
+          )}
+          {!showMore && (
+            <>
+              {!hidePrint &&
+                printArea(({ handlePrint }) => (
+                  <span>
+                    <Tooltip title={print}>
+                      <IconButton
+                        data-testid={`${print}-iconButton`}
+                        aria-label={print}
+                        disabled={options.print === 'disabled'}
+                        onClick={handlePrint}>
+                        <PrintIcon />
+                      </IconButton>
+                    </Tooltip>
+                  </span>
+                ))}
+
+              {toolbarButtons}
+            </>
+          )}
+          {showMore && (
+            <IconButton
+              ref={moreBtn}
+              aria-haspopup="true"
+              aria-expanded={menuIconEl ? 'true' : undefined}
+              onClick={event => setMenuIconEl(event.currentTarget)}
+              style={{ flexShrink: 0 }}>
+              <MoreVertIcon />
+            </IconButton>
+          )}
+        </div>
+        {customToolbarEle}
+      </Container>
+
+      <Menu
+        anchorEl={menuIconEl}
+        open={!!menuIconEl}
+        onClose={() => setMenuIconEl(null)}
+        MenuListProps={{
+          'aria-labelledby': 'more-button',
+        }}>
+        {!hidePrint &&
+          printArea(({ handlePrint }) => (
+            <MenuItem
+              onClick={() => {
+                setMenuIconEl(null);
+                handlePrint();
+              }}>
+              <ListItemIcon>
+                <PrintIcon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText>{print}</ListItemText>
+            </MenuItem>
+          ))}
+        {menuItems}
+      </Menu>
+      {allPops.map((e, index) => (
+        <div key={getPopId(index)}>{e}</div>
+      ))}
+      {loading && <LinearProgress />}
+    </div>
+  );
+}
+
+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;
+      }
+    }
+  }
+  .toobar-title-hidden {
+    opacity: 0;
+    cursor: none;
+  }
+`;

package/src/Datatable/DatatableContext.js

@@ -0,0 +1,32 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const DatatableContext = createContext({});
+
+const { Provider } = DatatableContext;
+
+// eslint-disable-next-line react/prop-types
+const DatatableProvide = ({ 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 <Provider value={value}>{children}</Provider>;
+};
+
+function useDatatableContext() {
+  return useContext(DatatableContext);
+}
+
+export { DatatableProvide, useDatatableContext };

package/src/Datatable/TableSearch.js

@@ -0,0 +1,130 @@
+import React, { useState } 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 styled from 'styled-components';
+
+export default function TableSearch({
+  search,
+  options,
+  searchText,
+  searchTextUpdate,
+  searchClose,
+  onSearchOpen,
+}) {
+  const [inputMode, setInputMode] = useState(false);
+
+  const clickSearchIcon = () => {
+    setInputMode(true);
+    onSearchOpen(true);
+  };
+
+  const onChange = event => {
+    searchTextUpdate(event.currentTarget.value);
+  };
+
+  const clickClose = () => {
+    setInputMode(false);
+    searchClose();
+    onSearchOpen(false);
+  };
+
+  return (
+    <Container>
+      {inputMode ? (
+        <div className="toolbar-search-icon-placeholder">
+          <SearchIcon />
+        </div>
+      ) : (
+        <Tooltip title={search} disableFocusListener>
+          <IconButton
+            aria-label={search}
+            data-testid={`${search}-iconButton`}
+            disabled={options.search === 'disabled'}
+            onClick={clickSearchIcon}>
+            <SearchIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+
+      <div className={`toolbar-search-area ${inputMode ? 'toolbar-btn-show' : ''}`}>
+        {inputMode && (
+          <TextField
+            variant="standard"
+            spacing={2}
+            onChange={onChange}
+            value={searchText || ''}
+            autoFocus
+          />
+        )}
+      </div>
+      <div className={`toolbar-search-close ${inputMode ? 'toolbar-btn-show' : ''}`}>
+        <IconButton onClick={clickClose}>
+          <ClearIcon />
+        </IconButton>
+      </div>
+    </Container>
+  );
+}
+
+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;
+  }
+`;