@arcblock/ux 2.1.6 → 2.1.7

package/lib/Datatable/utils.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.handleCSVDownload = handleCSVDownload;
+
+var _find = _interopRequireDefault(require("lodash/find"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function escapeDangerousCSVCharacters(data) {
+  if (typeof data === 'string') {
+    // Places single quote before the appearance of dangerous characters if they
+    // are the first in the data string.
+    // eslint-disable-next-line no-useless-escape
+    return data.replace(/^\+|^\-|^\=|^\@/g, "'$&");
+  }
+
+  return data;
+}
+
+function buildCSV(columns, data, options) {
+  const replaceDoubleQuoteInString = columnData => typeof columnData === 'string' ? columnData.replace(/"/g, '""') : columnData; // eslint-disable-next-line no-shadow
+
+
+  const buildHead = columns => {
+    return "".concat(columns.reduce((soFar, column) => column.download ? "".concat(soFar, "\"").concat(escapeDangerousCSVCharacters(replaceDoubleQuoteInString(column.label || column.name)), "\"").concat(options.downloadOptions.separator) : soFar, '').slice(0, -1), "\r\n");
+  };
+
+  const CSVHead = buildHead(columns); // eslint-disable-next-line no-shadow
+
+  const buildBody = data => {
+    if (!data.length) return '';
+    return data.reduce((soFar, row) => "".concat(soFar, "\"").concat(row.data.filter((_, index) => columns[index].download).map(columnData => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData))).join("\"".concat(options.downloadOptions.separator, "\"")), "\"\r\n"), '').trim();
+  };
+
+  const CSVBody = buildBody(data);
+  const csv = options.onDownload ? options.onDownload(buildHead, buildBody, columns, data) : "".concat(CSVHead).concat(CSVBody).trim();
+  return csv;
+}
+
+function downloadCSV(csv, filename) {
+  const blob = new Blob([csv], {
+    type: 'text/csv'
+  });
+  /* taken from react-csv */
+
+  if (navigator && navigator.msSaveOrOpenBlob) {
+    navigator.msSaveOrOpenBlob(blob, filename);
+  } else {
+    const dataURI = "data:text/csv;charset=utf-8,".concat(csv);
+    const URL = window.URL || window.webkitURL;
+    const downloadURI = typeof URL.createObjectURL === 'undefined' ? dataURI : URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.setAttribute('href', downloadURI);
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+} // eslint-disable-next-line no-shadow
+
+
+function createCSVDownload(columns, data, options, downloadCSV) {
+  const csv = buildCSV(columns, data, options);
+
+  if (options.onDownload && csv === false) {
+    return;
+  }
+
+  downloadCSV(csv, options.downloadOptions.filename);
+}
+
+function handleCSVDownload(props) {
+  const {
+    data,
+    displayData,
+    columns,
+    options,
+    columnOrder
+  } = props;
+  let dataToDownload = [];
+  let columnsToDownload = [];
+  let columnOrderCopy = Array.isArray(columnOrder) ? columnOrder.slice(0) : [];
+
+  if (columnOrderCopy.length === 0) {
+    columnOrderCopy = columns.map((item, idx) => idx);
+  }
+
+  data.forEach(row => {
+    const newRow = {
+      index: row.index,
+      data: []
+    };
+    columnOrderCopy.forEach(idx => {
+      newRow.data.push(row.data[idx]);
+    });
+    dataToDownload.push(newRow);
+  });
+  columnOrderCopy.forEach(idx => {
+    columnsToDownload.push(columns[idx]);
+  });
+
+  if (options.downloadOptions && options.downloadOptions.filterOptions) {
+    // check rows first:
+    if (options.downloadOptions.filterOptions.useDisplayedRowsOnly) {
+      const filteredDataToDownload = displayData.map((row, index) => {
+        let i = -1; // Help to preserve sort order in custom render columns
+
+        row.index = index;
+        return {
+          data: row.data.map(column => {
+            i += 1; // if we have a custom render, which will appear as a react element, we must grab the actual value from data
+            // that matches the dataIndex and column
+            // TODO: Create a utility function for checking whether or not something is a react object
+
+            let val = typeof column === 'object' && column !== null && !Array.isArray(column) ? (0, _find.default)(data, d => d.index === row.dataIndex).data[i] : column;
+            val = typeof val === 'function' ? (0, _find.default)(data, d => d.index === row.dataIndex).data[i] : val;
+            return val;
+          })
+        };
+      });
+      dataToDownload = [];
+      filteredDataToDownload.forEach(row => {
+        const newRow = {
+          index: row.index,
+          data: []
+        };
+        columnOrderCopy.forEach(idx => {
+          newRow.data.push(row.data[idx]);
+        });
+        dataToDownload.push(newRow);
+      });
+    } // now, check columns:
+
+
+    if (options.downloadOptions.filterOptions.useDisplayedColumnsOnly) {
+      columnsToDownload = columnsToDownload.filter(_ => _.display === 'true');
+      dataToDownload = dataToDownload.map(row => {
+        row.data = row.data.filter((_, index) => columns[columnOrderCopy[index]].display === 'true');
+        return row;
+      });
+    }
+  }
+
+  createCSVDownload(columnsToDownload, dataToDownload, options, downloadCSV);
+}
+
+var _default = {
+  handleCSVDownload
+};
+exports.default = _default;

package/lib/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "CountDown", {
     return _CountDown.default;
   }
 });
+Object.defineProperty(exports, "Datatable", {
+  enumerable: true,
+  get: function get() {
+    return _Datatable.default;
+  }
+});
 Object.defineProperty(exports, "Earth", {
   enumerable: true,
   get: function get() {
@@ -230,6 +236,8 @@ var _Logo = _interopRequireDefault(require("./Logo"));
 
 var _RelativeTime = _interopRequireDefault(require("./RelativeTime"));
 
+var _Datatable = _interopRequireDefault(require("./Datatable"));
+
 var _Tabs = _interopRequireDefault(require("./Tabs"));
 
 var _Tag = _interopRequireDefault(require("./Tag"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "2b8a9723f5280a51416f34afd78472d2e4dbb353",
+  "gitHead": "a54ef3a9335aae1bc7404b5f4a8c9c508b6ff81f",
   "dependencies": {
-    "@arcblock/icons": "^2.1.6",
-    "@arcblock/react-hooks": "^2.1.6",
+    "@arcblock/icons": "^2.1.7",
+    "@arcblock/react-hooks": "^2.1.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -75,6 +75,7 @@
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.21",
     "mdi-material-ui": "^7.2.0",
+    "mui-datatables": "^4.2.2",
     "notistack": "^2.0.5",
     "react-cookie-consent": "^6.4.1",
     "react-helmet": "^6.1.0",

package/src/Datatable/CustomToolbar.js

@@ -0,0 +1,371 @@
+import React, { useState, useRef, 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 { handleCSVDownload } from './utils';
+import TableSearch from './TableSearch';
+
+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 {
+    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 || TableFilter;
+  const TableViewColComponent = components.TableViewCol || TableViewCol;
+
+  const printArea = func => {
+    return (
+      <ReactToPrint content={() => props.tableRef()}>
+        <PrintContextConsumer>{func}</PrintContextConsumer>
+      </ReactToPrint>
+    );
+  };
+
+  const getPopId = key => `toolbar-pop-${toolbarId.current}-${key}`;
+
+  const defaultButtons = [];
+
+  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({});
+
+  const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
+    if (isValidElement(e)) {
+      return e;
+    }
+
+    const popId = getPopId(index);
+
+    if (e.Icon) {
+      const { Icon, popRender } = e;
+      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) {
+                setAllPopsEl({
+                  [popId]: document.getElementById(`btn-${popId}`),
+                });
+              }
+            }}>
+            <Icon />
+          </IconButton>
+        </Tooltip>
+      );
+    }
+
+    return e;
+  });
+
+  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) {
+            setAllPopsEl({
+              [popId]: moreBtn.current,
+            });
+          }
+        }}>
+        {content}
+      </MenuItem>
+    );
+  });
+
+  return (
+    <div>
+      <Container>
+        <div className="custom-toobar-title">
+          <div className="custom-toobar-title-inner">
+            <span>{title}</span>
+          </div>
+        </div>
+        <div className="custom-toobar-right">
+          <div className="custom-toobar-btns">
+            {!hideSearch && (
+              <TableSearch
+                search={search}
+                options={options}
+                searchText={searchText}
+                searchTextUpdate={searchTextUpdate}
+                searchClose={searchClose}
+                isMobile={isMobile}
+              />
+            )}
+            {!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)}>
+                <MoreVertIcon />
+              </IconButton>
+            )}
+          </div>
+        </div>
+      </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>
+      ))}
+    </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.string,
+  searchText: PropTypes.any,
+  searchTextUpdate: PropTypes.func.isRequired,
+  searchClose: PropTypes.func.isRequired,
+  tableRef: PropTypes.func.isRequired,
+  customButtons: PropTypes.array.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;
+      &-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/src/Datatable/TableSearch.js

@@ -0,0 +1,127 @@
+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,
+  isMobile,
+  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' : ''} ${
+          isMobile ? 'small-textfield' : ''
+        }`}>
+        {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,
+  isMobile: PropTypes.bool.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;
+      &.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;
+  }
+`;