@arcblock/ux 2.1.4 → 2.1.7

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;
+  }
+`;

package/src/Datatable/index.js

@@ -0,0 +1,145 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import MUIDataTable, { TableFilterList } from 'mui-datatables';
+import styled from 'styled-components';
+import CustomToolbar from './CustomToolbar';
+
+const WrapFilterList = props => {
+  const hasFilter = !!props.filterList.filter(e => e.length).length;
+  if (hasFilter) {
+    return (
+      <FilterLine>
+        {hasFilter && <div className="toolbar-filter-title">Filter</div>}
+        <div className="toolbar-filter-content">
+          <TableFilterList {...props} />
+        </div>
+      </FilterLine>
+    );
+  }
+  return '';
+};
+
+WrapFilterList.propTypes = {
+  filterList: PropTypes.array,
+};
+
+WrapFilterList.defaultProps = {
+  filterList: [],
+};
+
+export default function Datatable({ locale, options, style, customButtons, ...rest }) {
+  const container = useRef(null);
+
+  let textLabels = {
+    body: { noMatch: 'Sorry, no matching records found', toolTip: 'Sort' },
+    pagination: {
+      next: 'Next Page',
+      previous: 'Previous Page',
+      rowsPerPage: 'Rows per page:',
+      displayRows: 'of',
+      jumpToPage: 'Jump to Page:',
+    },
+    toolbar: {
+      search: 'Search',
+      downloadCsv: 'Download CSV',
+      print: 'Print',
+      viewColumns: 'View Columns',
+      filterTable: 'Filter Table',
+    },
+    filter: { all: 'All', title: 'FILTERS', reset: 'RESET' },
+    viewColumns: { title: 'Show Columns', titleAria: 'Show/Hide Table Columns' },
+    selectedRows: { text: 'row(s) selected', delete: 'Delete', deleteAria: 'Delete Selected Rows' },
+  };
+
+  if (locale === 'zh') {
+    textLabels = {
+      body: { noMatch: '对不起，没有找到匹配的记录', toolTip: '排序' },
+      pagination: {
+        next: '下一页',
+        previous: '上一页',
+        rowsPerPage: '每页行数',
+        displayRows: '/',
+        jumpToPage: '跳转到页面：',
+      },
+      toolbar: {
+        search: '搜索',
+        downloadCsv: '下载CSV',
+        print: '打印',
+        viewColumns: '查看列',
+        filterTable: '筛选表格',
+      },
+      filter: { all: '全部', title: '筛选器', reset: '重置' },
+      viewColumns: { title: '显示的列', titleAria: '显示/隐藏 表格的列' },
+      selectedRows: { text: '个已选项目', delete: '删除', deleteAria: '删除所选项目' },
+    };
+  }
+
+  const opts = {
+    selectableRows: 'none',
+    textLabels,
+    ...options,
+  };
+
+  const WrapCustomToolBar = props => {
+    return <CustomToolbar {...props} customButtons={customButtons || []} />;
+  };
+
+  const props = {
+    options: opts,
+    ...rest,
+    components: {
+      TableToolbar: WrapCustomToolBar,
+      TableFilterList: WrapFilterList,
+    },
+  };
+
+  Datatable.propTypes = {
+    options: PropTypes.object,
+    style: PropTypes.object,
+    locale: PropTypes.string,
+    customButtons: PropTypes.array,
+  };
+
+  Datatable.defaultProps = {
+    options: {},
+    style: {},
+    locale: 'en',
+    customButtons: [],
+  };
+
+  return (
+    <TableContainer ref={container} style={style}>
+      <MUIDataTable {...props} />
+    </TableContainer>
+  );
+}
+
+const TableContainer = styled.div`
+  height: 100%;
+  > .MuiPaper-root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-shadow: none;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    [class*='MUIDataTableBody-emptyTitle'] {
+      padding-left: 16px;
+      width: 200%;
+      margin-left: -100%;
+      text-align: center;
+    }
+  }
+`;
+
+const FilterLine = styled.div`
+  display: flex;
+  align-items: center;
+  .toolbar-filter-content {
+    margin-bottom: 8px;
+  }
+  .toolbar-filter-title {
+    font-weight: 700;
+    font-size: 14px;
+  }
+`;

package/src/Datatable/utils.js

@@ -0,0 +1,165 @@
+import find from 'lodash/find';
+
+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 `${columns
+      .reduce(
+        (soFar, column) =>
+          column.download
+            ? `${soFar}"${escapeDangerousCSVCharacters(
+                replaceDoubleQuoteInString(column.label || column.name)
+              )}"${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) =>
+          `${soFar}"${row.data
+            .filter((_, index) => columns[index].download)
+            .map(columnData => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData)))
+            .join(`"${options.downloadOptions.separator}"`)}"\r\n`,
+        ''
+      )
+      .trim();
+  };
+  const CSVBody = buildBody(data);
+
+  const csv = options.onDownload
+    ? options.onDownload(buildHead, buildBody, columns, data)
+    : `${CSVHead}${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,${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);
+}
+
+export 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)
+                ? find(data, d => d.index === row.dataIndex).data[i]
+                : column;
+            val =
+              typeof val === 'function' ? find(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);
+}
+
+export default { handleCSVDownload };

package/src/index.js

@@ -15,6 +15,7 @@ import Icon from './Icon';
 import LocaleSelector from './Locale/selector';
 import Logo from './Logo';
 import RelativeTime from './RelativeTime';
+import Datatable from './Datatable';
 import Tabs from './Tabs';
 import Tag from './Tag';
 import Terminal from './Terminal';
@@ -50,6 +51,7 @@ export {
   Logo,
   Tabs,
   RelativeTime,
+  Datatable,
   Tag,
   Terminal,
   TerminalPlayer,