sea-chart 2.0.59 → 2.0.60

package/dist/components/row-card/row-card.js

@@ -11,135 +11,215 @@ var _commonUtils = require("../../utils/common-utils");
 var _rowCardItem = _interopRequireDefault(require("./row-card-item"));
 var _rowCardHeader = _interopRequireDefault(require("./row-card-header"));
 require("./row-card.css");
-// 98: row-card-item height + margin top = 88 + 10 = 98
+// 98 = row-card-item height 88 + margin-top 10, keep in sync with row-card.css
 const CARD_RECORD_ITEM_HEIGHT = 98;
+const INITIAL_DISPLAY_ROWS_COUNT = 10;
+const VIRTUAL_ROWS_OVERSCAN = 3;
+const EMPTY_FORMULA_ROW = {};
 class RowCard extends _react.Component {
   constructor(props) {
     super(props);
     this.scrollToMore = e => {
       e.stopPropagation();
-      let {
-        displayRows: currentDisplayRows,
-        scrollLeft
-      } = this.state;
       const {
-        rows
-      } = this.props;
-      let currentDisplayRowsCount = currentDisplayRows.length;
-      let {
         offsetHeight,
         scrollTop
       } = this.recordsList;
+      this.updateVisibleRange(scrollTop, offsetHeight);
+      if (this.props.isVirtualized) {
+        this.updateVirtualRows();
+        return;
+      }
+      this.loadMoreRows(offsetHeight + scrollTop, this.recordsContent.offsetHeight);
+    };
+    this.mobileScrollToMore = e => {
+      e.stopPropagation();
+      const {
+        rowCardType
+      } = this.props;
+      if (rowCardType !== 'link') return;
+      const {
+        offsetHeight,
+        scrollTop,
+        scrollHeight
+      } = this.recordsContent;
+      this.updateVisibleRange(scrollTop, offsetHeight);
+      this.loadMoreRows(offsetHeight + scrollTop, scrollHeight);
+    };
+    this.updateVisibleRange = (scrollTop, offsetHeight) => {
       this.currentDisplayRowMinIndex = Math.floor(scrollTop / CARD_RECORD_ITEM_HEIGHT);
       this.currentDisplayRowMaxIndex = Math.floor((scrollTop + offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
-      if (scrollLeft >= 0) {
-        this.setItemScrollLeft(scrollLeft, -1);
-      }
-      if (currentDisplayRowsCount >= rows.length) return;
-      if (offsetHeight + scrollTop + 10 >= this.recordsContent.offsetHeight) {
-        let displayRows = rows.slice(currentDisplayRowsCount, currentDisplayRowsCount + 10);
+    };
+    this.loadMoreRows = (viewportBottom, contentHeight) => {
+      const {
+        rows
+      } = this.props;
+      const {
+        displayCount
+      } = this.state;
+      if (displayCount >= rows.length) return;
+      if (viewportBottom + 10 >= contentHeight) {
         this.setState({
-          displayRows: currentDisplayRows.concat(...displayRows)
+          displayCount: Math.min(displayCount + INITIAL_DISPLAY_ROWS_COUNT, rows.length)
         });
       }
     };
-    this.onRef = (ref, rowIdx) => {
-      this.recordItem[rowIdx] = ref;
+    this.updateVirtualRows = () => {
+      const {
+        isVirtualized,
+        rows
+      } = this.props;
+      if (!isVirtualized || !this.recordsList || this.recordsList.offsetHeight <= 0) return;
+      const {
+        offsetHeight,
+        scrollTop
+      } = this.recordsList;
+      const firstVisibleIndex = Math.floor(scrollTop / CARD_RECORD_ITEM_HEIGHT);
+      const lastVisibleIndex = Math.ceil((scrollTop + offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
+      const displayStartIndex = Math.max(0, firstVisibleIndex - VIRTUAL_ROWS_OVERSCAN);
+      const displayEndIndex = Math.min(rows.length, lastVisibleIndex + VIRTUAL_ROWS_OVERSCAN);
+      const {
+        displayStartIndex: currentStartIndex,
+        displayCount
+      } = this.state;
+      if (currentStartIndex === displayStartIndex && displayCount === displayEndIndex - displayStartIndex) return;
+      this.setState({
+        displayStartIndex,
+        displayCount: displayEndIndex - displayStartIndex
+      });
+    };
+    this.onRef = (ref, rowIdx, rowId) => {
+      if (!ref) {
+        this.recordItems.delete(rowId);
+        return;
+      }
+      this.recordItems.set(rowId, {
+        ref,
+        rowIdx
+      });
+      if (ref.getScrollLeft() !== this.currentScrollLeft) {
+        ref.setScrollLeft(this.currentScrollLeft);
+      }
+    };
+    this.isSameRowIds = (prevRows, rows) => {
+      if (!Array.isArray(prevRows) || !Array.isArray(rows) || prevRows.length !== rows.length) return false;
+      return prevRows.every((row, index) => row && rows[index] && row._id === rows[index]._id);
     };
     this.getCurrentDisplayRowMaxIndex = () => {
       if (this.recordsList) {
-        this.currentDisplayRowMaxIndex = Math.floor((0 + this.recordsList.offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
+        this.currentDisplayRowMaxIndex = Math.floor((this.recordsList.scrollTop + this.recordsList.offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
       }
     };
-    this.setScrollLeft = scrollLeft => {
-      this.setState({
-        scrollLeft
-      });
-    };
     this.setItemScrollLeft = (scrollLeft, currentRecordIdx) => {
       const {
-        isShowRowCardHeader
+        isShowRowCardHeader,
+        isVirtualized
       } = this.props;
-      if (isShowRowCardHeader) this.rowCardHeaderRef.setHeaderScrollLeft(scrollLeft);
-      const start = window.isMobile ? 0 : this.currentDisplayRowMinIndex;
-      const end = window.isMobile ? this.recordItem.length : this.currentDisplayRowMaxIndex;
-      for (let i = start; i <= end; i++) {
-        if (i !== currentRecordIdx && this.recordItem[i]) {
-          let cardRecordScrollLeft = this.recordItem[i].getScrollLeft();
-          if (cardRecordScrollLeft !== scrollLeft) {
-            this.recordItem[i].setScrollLeft(scrollLeft);
-          }
-        }
+      this.currentScrollLeft = scrollLeft;
+      if (this.state.scrollLeft !== scrollLeft) {
+        this.setState({
+          scrollLeft
+        });
       }
+      if (isShowRowCardHeader && this.rowCardHeaderRef) {
+        this.rowCardHeaderRef.setHeaderScrollLeft(scrollLeft);
+      }
+      const itemsToSync = [];
+      this.recordItems.forEach(_ref => {
+        let {
+          ref,
+          rowIdx
+        } = _ref;
+        const isInSyncRange = window.isMobile || isVirtualized || rowIdx >= this.currentDisplayRowMinIndex && rowIdx <= this.currentDisplayRowMaxIndex;
+        if (isInSyncRange && rowIdx !== currentRecordIdx && ref.getScrollLeft() !== scrollLeft) {
+          itemsToSync.push(ref);
+        }
+      });
+      itemsToSync.forEach(ref => ref.setScrollLeft(scrollLeft));
     };
     this.setRecordsListRef = ref => {
       this.recordsList = ref;
     };
-    this.mobileScrollToMore = e => {
-      e.stopPropagation();
+    this.getRenderedTable = (table, renderedColumns) => {
+      if (!this.renderedTableCache || this.renderedTableCache.table !== table || this.renderedTableCache.columns !== renderedColumns) {
+        this.renderedTableCache = {
+          table,
+          columns: renderedColumns,
+          result: {
+            ...table,
+            columns: renderedColumns
+          }
+        };
+      }
+      return this.renderedTableCache.result;
+    };
+    this.getCachedRowRenderData = row => {
       const {
-        rows,
-        rowCardType
+        renderedColumns,
+        formulaRows,
+        table
       } = this.props;
-      if (rowCardType !== 'link') return;
-      let {
-        displayRows: currentDisplayRows
-      } = this.state;
-      let currentDisplayRowsCount = currentDisplayRows.length;
-      let {
-        offsetHeight,
-        scrollTop,
-        scrollHeight
-      } = this.recordsContent;
-      this.currentDisplayRowMinIndex = Math.floor(scrollTop / CARD_RECORD_ITEM_HEIGHT);
-      this.currentDisplayRowMaxIndex = Math.floor((scrollTop + offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
-      if (currentDisplayRowsCount >= rows.length) return;
-      if (offsetHeight + scrollTop + 10 >= scrollHeight) {
-        let displayRows = rows.slice(currentDisplayRowsCount, currentDisplayRowsCount + 10);
-        this.setState({
-          displayRows: currentDisplayRows.concat(...displayRows)
+      let entry = this.rowRenderCache.get(row);
+      if (!entry) {
+        const formulaRow = formulaRows && formulaRows[row._id] || EMPTY_FORMULA_ROW;
+        const displayRowName = (0, _commonUtils.getRowName)(table.columns, row, formulaRows);
+        const renderedRow = {};
+        renderedColumns.forEach(column => {
+          renderedRow[column.key] = row[column.key];
         });
+        renderedRow['_id'] = row._id;
+        entry = {
+          renderedRow,
+          formulaRow,
+          displayRowName
+        };
+        this.rowRenderCache.set(row, entry);
       }
+      return entry;
     };
     const {
       rows: _rows
     } = props;
-    const _displayRows = _rows.slice(0, 10);
     this.state = {
-      displayRows: _displayRows,
+      displayStartIndex: 0,
+      displayCount: Math.min(INITIAL_DISPLAY_ROWS_COUNT, _rows.length),
       scrollLeft: 0
     };
     this.recordsList = null;
-    this.recordsContainer = null;
-    this.recordItem = [];
+    this.recordItems = new Map();
+    this.currentScrollLeft = 0;
     this.currentDisplayRowMinIndex = 0;
     this.currentDisplayRowMaxIndex = 0;
+    this.rowRenderCache = new WeakMap();
+    this.rowRenderCacheKey = null;
+    this.renderedTableCache = null;
   }
   componentDidMount() {
+    if (!this.recordsList) return;
     this.currentDisplayRowMaxIndex = Math.floor((0 + this.recordsList.offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
+    this.updateVirtualRows();
   }
-  componentDidUpdate(nextProps) {
-    let {
+  componentDidUpdate(prevProps) {
+    const {
       rows,
       highlightRowIndex
-    } = nextProps;
-    let {
-      displayRows: currentDisplayRows
+    } = this.props;
+    const {
+      displayCount
     } = this.state;
-    let currentDisplayRowsCount = currentDisplayRows.length;
-    if (this.props.rows !== rows) {
-      this.recordItem = [];
+    if (prevProps.rows !== rows && !this.isSameRowIds(prevProps.rows, rows)) {
       this.currentDisplayRowMinIndex = 0;
-      this.currentDisplayRowMaxIndex = Math.floor((0 + this.recordsList.offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
-      const displayRows = nextProps.rows.slice(0, 10);
+      this.currentDisplayRowMaxIndex = this.recordsList ? Math.floor(this.recordsList.offsetHeight / CARD_RECORD_ITEM_HEIGHT) : 0;
+      if (this.recordsList) this.recordsList.scrollTop = 0;
       this.setState({
-        displayRows
+        displayStartIndex: 0,
+        displayCount: Math.min(INITIAL_DISPLAY_ROWS_COUNT, rows.length)
       });
     }
-    if (this.props.isAdditionEditorView !== nextProps.isAdditionEditorView) {
+    if (prevProps.isAdditionEditorView !== this.props.isAdditionEditorView && this.recordsList) {
       this.recordsList.scrollTop = 0;
     }
-    if (this.props.highlightRowIndex !== highlightRowIndex) {
+    if (prevProps.rows === rows && prevProps.highlightRowIndex !== highlightRowIndex) {
       if (!this.recordsList) return;
       if (highlightRowIndex === -1) return;
       let {
@@ -147,11 +227,10 @@ class RowCard extends _react.Component {
       } = this.recordsList;
       let nextHighlightRowIndex = highlightRowIndex + 1;
       // need load more
-      let countBetweenHighlightAndDisplay = highlightRowIndex - currentDisplayRowsCount - 1;
+      let countBetweenHighlightAndDisplay = highlightRowIndex - displayCount - 1;
       if (countBetweenHighlightAndDisplay > 0) {
-        const displayRows = rows.slice(0, currentDisplayRowsCount + 10);
         this.setState({
-          displayRows
+          displayCount: Math.min(displayCount + INITIAL_DISPLAY_ROWS_COUNT, rows.length)
         }, () => {
           this.recordsList.scrollTop = nextHighlightRowIndex * CARD_RECORD_ITEM_HEIGHT + 10 - offsetHeight;
         });
@@ -166,8 +245,7 @@ class RowCard extends _react.Component {
   }
   componentWillUnmount() {
     this.recordsList = null;
-    this.recordsContainer = null;
-    this.recordItem = [];
+    this.recordItems.clear();
     this.currentDisplayRowMinIndex = 0;
     this.currentDisplayRowMaxIndex = 0;
   }
@@ -188,52 +266,34 @@ class RowCard extends _react.Component {
       createBtn,
       cardHeaderClassName,
       viewDeletedTip,
-      isExpandRowDetail
+      isExpandRowDetail,
+      rows
     } = this.props;
     const {
-      displayRows,
+      displayStartIndex,
+      displayCount,
       scrollLeft
     } = this.state;
     const rowCardListClass = `row-card-list ${cardListClassName ? cardListClassName : ''}`;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "row-card-container"
-    }, isShowRowCardHeader && /*#__PURE__*/_react.default.createElement(_rowCardHeader.default, {
-      cardHeaderClassName: cardHeaderClassName,
-      setItemScrollLeft: this.setItemScrollLeft,
-      renderedColumns: renderedColumns,
-      getCurrentDisplayRowMaxIndex: this.getCurrentDisplayRowMaxIndex,
-      showScrollBtn: showScrollBtn,
-      scrollLeft: scrollLeft,
-      setScrollLeft: this.setScrollLeft,
-      ref: ref => this.rowCardHeaderRef = ref,
-      rowCardType: rowCardType,
-      table: table
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: rowCardListClass,
-      ref: this.setRecordsListRef,
-      onScroll: this.scrollToMore
-    }, displayRows.length === 0 && !viewDeletedTip && /*#__PURE__*/_react.default.createElement("div", {
-      className: "no-records-tips"
-    }, noCardItemTip), viewDeletedTip && /*#__PURE__*/_react.default.createElement("div", {
-      className: "no-views-tips"
-    }, viewDeletedTip), displayRows.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "row-card-content",
-      ref: ref => this.recordsContent = ref,
-      onScroll: this.mobileScrollToMore
-    }, displayRows.map((row, rowIdx) => {
-      const formulaRow = formulaRows && formulaRows[row._id] || {};
-      const displayRowName = (0, _commonUtils.getRowName)(table.columns, row, formulaRows);
-      let renderedRow = {};
-      renderedColumns.forEach(column => {
-        renderedRow[column.key] = row[column.key];
-      });
-      renderedRow['_id'] = row._id;
-      const renderedTable = {
-        ...table,
-        columns: renderedColumns
+    const renderedTable = this.getRenderedTable(table, renderedColumns);
+    if (!this.rowRenderCacheKey || this.rowRenderCacheKey.renderedColumns !== renderedColumns || this.rowRenderCacheKey.formulaRows !== formulaRows) {
+      this.rowRenderCacheKey = {
+        renderedColumns,
+        formulaRows
       };
+      this.rowRenderCache = new WeakMap();
+    }
+    const displayRows = rows.slice(displayStartIndex, displayStartIndex + displayCount);
+    const hasDisplayRows = displayRows.length > 0;
+    const rowCards = hasDisplayRows ? displayRows.map((row, displayRowIdx) => {
+      const rowIdx = this.props.isVirtualized ? displayStartIndex + displayRowIdx : displayRowIdx;
+      const {
+        renderedRow,
+        formulaRow,
+        displayRowName
+      } = this.getCachedRowRenderData(row);
       return /*#__PURE__*/_react.default.createElement(_rowCardItem.default, {
-        key: `row-card-${rowIdx}`,
+        key: `row-card-${row._id}`,
         setItemScrollLeft: this.setItemScrollLeft,
         onRef: this.onRef,
         rowCardType: rowCardType,
@@ -253,7 +313,40 @@ class RowCard extends _react.Component {
         onExpandRow: this.props.onExpandRow,
         removeCardItem: this.props.removeCardItem
       });
-    })), createBtn));
+    }) : null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "row-card-container"
+    }, isShowRowCardHeader && /*#__PURE__*/_react.default.createElement(_rowCardHeader.default, {
+      cardHeaderClassName: cardHeaderClassName,
+      setItemScrollLeft: this.setItemScrollLeft,
+      renderedColumns: renderedColumns,
+      getCurrentDisplayRowMaxIndex: this.getCurrentDisplayRowMaxIndex,
+      showScrollBtn: showScrollBtn,
+      scrollLeft: scrollLeft,
+      ref: ref => this.rowCardHeaderRef = ref,
+      rowCardType: rowCardType,
+      table: table
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: rowCardListClass,
+      ref: this.setRecordsListRef,
+      onScroll: this.scrollToMore
+    }, displayRows.length === 0 && !viewDeletedTip && /*#__PURE__*/_react.default.createElement("div", {
+      className: "no-records-tips"
+    }, noCardItemTip), viewDeletedTip && /*#__PURE__*/_react.default.createElement("div", {
+      className: "no-views-tips"
+    }, viewDeletedTip), hasDisplayRows && /*#__PURE__*/_react.default.createElement("div", {
+      className: `row-card-content ${this.props.isVirtualized ? 'row-card-content-virtualized' : ''}`,
+      ref: ref => this.recordsContent = ref,
+      onScroll: this.mobileScrollToMore,
+      style: this.props.isVirtualized ? {
+        height: rows.length * CARD_RECORD_ITEM_HEIGHT
+      } : undefined
+    }, this.props.isVirtualized ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "row-card-virtual-window",
+      style: {
+        transform: `translateY(${displayStartIndex * CARD_RECORD_ITEM_HEIGHT}px)`
+      }
+    }, rowCards) : rowCards), createBtn));
   }
 }
 var _default = exports.default = RowCard;

package/dist/components/statistic-record-dialog/index.css

@@ -68,6 +68,7 @@
   height: 38px;
   line-height: 38px;
   padding-left: 30px;
+  padding-right: 78px;
   border-bottom: 0;
   background: #f5f5f5;
   border-radius: 3px;
@@ -93,13 +94,17 @@
   position: absolute;
   justify-content: center;
   align-items: center;
-  right: 30px;
+  right: 58px;
   top: 0px;
-  /* 2px border */
-  height: calc(100% - 2px);
+  height: 38px;
   color: #ccc;
 }
 
+.sea-chart-statistic-records-dialog .search-input-container .clear-search-text.exact-match-search-text {
+  right: 30px;
+  color: #666;
+}
+
 .sea-chart-statistic-records-dialog .search-input-container .clear-search-text .dtable-font {
   font-size: 12px;
 }
@@ -108,6 +113,59 @@
   cursor: pointer;
 }
 
+.sea-chart-statistic-records-dialog .search-input-container .right-exact-button {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  font-size: 14px;
+  color: #666666;
+  cursor: pointer;
+}
+
+.sea-chart-statistic-records-dialog .search-input-container .right-exact-button .sea-chart-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.sea-chart-statistic-records-dialog .search-input-container .right-exact-button:hover {
+  background-color: #e5e5e5;
+}
+
+.sea-chart-statistic-records-dialog .search-settings-container {
+  height: 38px;
+  padding: 0 20px;
+  border-bottom: 1px solid #e2e2e2;
+}
+
+.sea-chart-statistic-records-dialog .search-settings-container .dtable-switch.sm .custom-switch {
+  width: unset !important;
+  margin-bottom: unset;
+}
+
+.sea-chart-statistic-records-dialog .search-settings-container .toolbar-btn {
+  display: inline-flex;
+  height: 22px;
+  padding: 0 0.5rem;
+  border-radius: 3px;
+  align-items: center;
+  transition: all 0.1s ease-in;
+  font-size: 13px;
+}
+
+.sea-chart-statistic-records-dialog .search-settings-container .toolbar-btn:hover {
+  background-color: #f1f1f1;
+  cursor: pointer;
+}
+
+.sea-chart-statistic-records-dialog .search-settings-container .toolbar-btn .sea-chart-icon-field-set {
+  width: 14px;
+  height: 14px;
+  margin-right: 6px;
+}
+
 .sea-chart-statistic-records-dialog .sea-chart-statistic-records-container {
   width: 100%;
   height: 100%;