fix: metadata arrow action

haiwen · Jul 5, 2024 · 5462e73 · 5462e73
1 parent 8b016da
commit 5462e73
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 66 deletions.
diff --git a/...nd/src/metadata/metadata-view/components/popover/groupby-popover/widgets/groupby-item.jsx b/...nd/src/metadata/metadata-view/components/popover/groupby-popover/widgets/groupby-item.jsx
@@ -32,10 +32,9 @@ class GroupbyItem extends Component {
   };
 
   renderTipMessage = () => {
-    const { column } = this.props;
+    const { column, view } = this.props;
     const { tooltipOpen } = this.state;
-    const page = window.app.getPage();
-    const { shown_column_keys } = page || {};
+    const { shown_column_keys } = view || {};
 
     if (!shown_column_keys || !Array.isArray(shown_column_keys) || shown_column_keys.includes(column.key)) {
       return null;
@@ -110,6 +109,7 @@ class GroupbyItem extends Component {
 GroupbyItem.propTypes = {
   index: PropTypes.number,
   column: PropTypes.object,
+  view: PropTypes.object,
   groupby: PropTypes.object,
   columnsOptions: PropTypes.array,
   geoCountTypeOptions: PropTypes.array,

diff --git a/frontend/src/metadata/metadata-view/components/table/container.js b/frontend/src/metadata/metadata-view/components/table/container.js
@@ -147,12 +147,8 @@ const Container = () => {
     return recordGetter(recordIndex);
   }, [groupRecordGetter, recordGetter]);
 
-  const getTableContentWidth = useCallback(() => {
-    return containerRef?.current?.offsetWidth || 0;
-  }, [containerRef]);
-
-  const getTableContentLeft = useCallback(() => {
-    return containerRef?.current?.getBoundingClientRect()?.left || 0;
+  const getTableContentRect = useCallback(() => {
+    return containerRef?.current?.getBoundingClientRect() || { x: 0, right: window.innerWidth };
   }, [containerRef]);
 
   useEffect(() => {
@@ -182,8 +178,7 @@ const Container = () => {
                 modifyRecords={modifyRecords}
                 recordGetterById={recordGetterById}
                 recordGetterByIndex={recordGetterByIndex}
-                getTableContentWidth={getTableContentWidth}
-                getTableContentLeft={getTableContentLeft}
+                getTableContentRect={getTableContentRect}
                 getAdjacentRowsIds={getAdjacentRowsIds}
                 loadAll={loadAll}
               />

diff --git a/frontend/src/metadata/metadata-view/components/table/index.css b/frontend/src/metadata/metadata-view/components/table/index.css
@@ -634,6 +634,7 @@
   width: 16px;
   margin-left: 0;
   transform: translateY(0px);
+  flex-shrink: 0;
 }
 
 .sf-metadata-result-table-cell .select-all-checkbox-container .sf-metadata-icon-partially-selected {

diff --git a/.../metadata-view/components/table/table-main/records/group-widgets/group-container-right.js b/.../metadata-view/components/table/table-main/records/group-widgets/group-container-right.js
@@ -33,7 +33,7 @@ class GroupContainerRight extends Component {
           isExpanded={isExpanded}
           columns={columns}
           summaryConfigs={summaryConfigs}
-          getTableContentLeft={this.props.getTableContentLeft}
+          getTableContentRect={this.props.getTableContentRect}
         />
       </div>
     );
@@ -50,7 +50,7 @@ GroupContainerRight.propTypes = {
   height: PropTypes.number,
   groupOffsetLeft: PropTypes.number,
   lastFrozenColumnKey: PropTypes.string,
-  getTableContentLeft: PropTypes.func,
+  getTableContentRect: PropTypes.func,
 };
 
 export default GroupContainerRight;
diff --git a/.../metadata-view/components/table/table-main/records/group-widgets/group-container/index.js b/.../metadata-view/components/table/table-main/records/group-widgets/group-container/index.js
@@ -41,7 +41,7 @@ class GroupContainer extends Component {
 
   fixedFrozenDOMs = (scrollLeft, scrollTop) => {
     if (this.backDrop) {
-      const tableContentLeft = this.props.getTableContentLeft();
+      const tableContentLeft = this.props.getTableContentRect();
       this.backDrop.style.position = 'fixed';
       this.backDrop.style.marginLeft = tableContentLeft + 'px';
       this.backDrop.style.marginTop = (-scrollTop) + 'px';
@@ -134,7 +134,7 @@ class GroupContainer extends Component {
           lastFrozenColumnKey={lastFrozenColumnKey}
           columns={columns}
           summaryConfigs={summaryConfigs}
-          getTableContentLeft={this.props.getTableContentLeft}
+          getTableContentRect={this.props.getTableContentRect}
         />
       </div>
     );
@@ -158,7 +158,7 @@ GroupContainer.propTypes = {
   scrollLeft: PropTypes.number,
   maxLevel: PropTypes.number,
   summaryConfigs: PropTypes.object,
-  getTableContentLeft: PropTypes.func,
+  getTableContentRect: PropTypes.func,
   onExpandGroupToggle: PropTypes.func,
   updateSummaryConfig: PropTypes.func,
 };

diff --git a/...data/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js b/...data/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js
@@ -10,7 +10,7 @@ class GroupHeaderCell extends React.PureComponent {
   fixedFrozenDOMs = (scrollLeft, scrollTop) => {
     if (this.headerCell) {
       const { firstColumnWidth, groupOffsetLeft } = this.props;
-      const tableContentLeft = this.props.getTableContentLeft();
+      const tableContentLeft = this.props.getTableContentRect();
       this.headerCell.style.position = 'fixed';
       this.headerCell.style.marginLeft = (SEQUENCE_COLUMN_WIDTH + firstColumnWidth + groupOffsetLeft + tableContentLeft) + 'px';
       this.headerCell.style.marginTop = (-scrollTop) + 'px';
@@ -64,7 +64,7 @@ GroupHeaderCell.propTypes = {
   groupOffsetLeft: PropTypes.number,
   summary: PropTypes.object,
   summaryMethod: PropTypes.string,
-  getTableContentLeft: PropTypes.func,
+  getTableContentRect: PropTypes.func,
 };
 
 export default GroupHeaderCell;
diff --git a/...ata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js b/...ata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js
@@ -57,7 +57,7 @@ class GroupHeaderRight extends Component {
           isExpanded={isExpanded}
           summary={summary}
           summaryMethod={summaryMethod}
-          getTableContentLeft={this.props.getTableContentLeft}
+          getTableContentRect={this.props.getTableContentRect}
         />
       );
     });
@@ -79,7 +79,7 @@ GroupHeaderRight.propTypes = {
   lastFrozenColumnKey: PropTypes.string,
   columns: PropTypes.array,
   summaryConfigs: PropTypes.object,
-  getTableContentLeft: PropTypes.func,
+  getTableContentRect: PropTypes.func,
 };
 
 export default GroupHeaderRight;
diff --git a/...c/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js b/...c/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js
@@ -19,11 +19,6 @@ class GroupTitle extends Component {
     this.collaborators = window.sfMetadataContext.getCollaboratorsFromCache();
   }
 
-  getOptionColors = () => {
-    const { dtableUtils } = window.app;
-    return dtableUtils.getOptionColors();
-  };
-
   renderCollaborator = (collaborator) => {
     const { email, avatar_url, name } = collaborator || {};
     return (

diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js
@@ -28,7 +28,8 @@ class Records extends Component {
     this.lastScrollLeft = this.scrollLeft;
     this.initPosition = { idx: -1, rowIdx: -1, groupRecordIndex: -1 };
     const columnMetrics = this.createColumnMetrics(props);
-    const initHorizontalScrollState = this.getHorizontalScrollState({ gridWidth: props.tableContentWidth, columnMetrics, scrollLeft: 0 });
+    const { width: tableContentWidth } = props.getTableContentRect();
+    const initHorizontalScrollState = this.getHorizontalScrollState({ gridWidth: tableContentWidth, columnMetrics, scrollLeft: 0 });
     this.state = {
       columnMetrics,
       recordMetrics: this.createRowMetrics(),
@@ -45,7 +46,6 @@ class Records extends Component {
   }
 
   componentDidMount() {
-    window.addEventListener('popstate', this.onPopState);
     document.addEventListener('copy', this.onCopyCells);
     document.addEventListener('paste', this.onPasteCells);
     if (window.isMobile) {
@@ -56,11 +56,11 @@ class Records extends Component {
     }
     this.unsubscribeSelectNone = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.SELECT_NONE, this.selectNone);
     this.getScrollPosition();
-    this.checkExpandRow();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { columns, tableContentWidth } = nextProps;
+    const { columns, getTableContentRect } = nextProps;
+    const { width: tableContentWidth } = getTableContentRect();
     if (
       this.props.columns !== columns
     ) {
@@ -71,7 +71,7 @@ class Records extends Component {
         gridWidth: tableContentWidth,
       });
       this.setState({ columnMetrics });
-    } else if (this.props.tableContentWidth !== tableContentWidth) {
+    } else if (this.props.getTableContentRect()?.width !== tableContentWidth) {
       this.updateHorizontalScrollState({
         columnMetrics: this.state.columnMetrics,
         scrollLeft: this.lastScrollLeft,
@@ -82,7 +82,6 @@ class Records extends Component {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('popstate', this.onPopState);
     document.removeEventListener('copy', this.onCopyCells);
     document.removeEventListener('paste', this.onPasteCells);
     if (window.isMobile) {
@@ -143,10 +142,6 @@ class Records extends Component {
     }
   };
 
-  checkExpandRow = async () => {
-    // todo
-  };
-
   storeScrollPosition = () => {
     const scrollTop = this.bodyRef.getScrollTop();
     const scrollLeft = this.getScrollLeft();
@@ -177,11 +172,12 @@ class Records extends Component {
   };
 
   handleHorizontalScroll = (scrollLeft, scrollTop) => {
+    const { width: tableContentWidth } = this.props.getTableContentRect();
     if (isMobile) {
       this.updateHorizontalScrollState({
         scrollLeft,
         columnMetrics: this.state.columnMetrics,
-        gridWidth: this.props.tableContentWidth,
+        gridWidth: tableContentWidth,
       });
       return;
     }
@@ -213,7 +209,7 @@ class Records extends Component {
     this.updateHorizontalScrollState({
       scrollLeft,
       columnMetrics: this.state.columnMetrics,
-      gridWidth: this.props.tableContentWidth,
+      gridWidth: tableContentWidth,
     });
   };
 
@@ -359,10 +355,6 @@ class Records extends Component {
     this.updateSelectedRange(selectedRange);
   };
 
-  onPopState = () => {
-    this.checkExpandRow();
-  };
-
   onCopyCells = (e) => {
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.COPY_CELLS, e);
   };
@@ -753,7 +745,7 @@ Records.propTypes = {
   groups: PropTypes.array,
   groupbys: PropTypes.array,
   searchResult: PropTypes.object,
-  tableContentWidth: PropTypes.number,
+  getTableContentRect: PropTypes.func,
   scrollToLoadMore: PropTypes.func,
   updateRecord: PropTypes.func,
   updateRecords: PropTypes.func,

diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js
@@ -81,7 +81,8 @@ class RecordsBody extends Component {
   };
 
   setColumnVisibleEnd = () => {
-    const { columns, getScrollLeft, tableContentWidth } = this.props;
+    const { columns, getScrollLeft, getTableContentRect } = this.props;
+    const { width: tableContentWidth } = getTableContentRect();
     let columnVisibleEnd = 0;
     const contentScrollLeft = getScrollLeft();
     let endColumnWidth = tableContentWidth + contentScrollLeft;
@@ -135,7 +136,8 @@ class RecordsBody extends Component {
   };
 
   scrollToColumn = (idx) => {
-    const { columns, tableContentWidth } = this.props;
+    const { columns, getTableContentRect } = this.props;
+    const { width: tableContentWidth } = getTableContentRect();
     const newScrollLeft = getColumnScrollPosition(columns, idx, tableContentWidth);
     if (newScrollLeft !== null) {
       this.props.setRecordsScrollLeft(newScrollLeft);
@@ -550,7 +552,7 @@ class RecordsBody extends Component {
             getRowTop={this.getRowTop}
             scrollTop={this.oldScrollTop}
             getScrollLeft={this.props.getScrollLeft}
-            getTableContentLeft={this.props.getTableContentLeft}
+            getTableContentRect={this.props.getTableContentRect}
             getMobileFloatIconStyle={this.props.getMobileFloatIconStyle}
             onToggleMobileMoreOperations={this.props.onToggleMobileMoreOperations}
             editorPortalTarget={this.props.editorPortalTarget}
@@ -606,7 +608,7 @@ RecordsBody.propTypes = {
   hasSelectedCell: PropTypes.func,
   cacheScrollTop: PropTypes.func,
   scrollToLoadMore: PropTypes.func,
-  getTableContentLeft: PropTypes.func,
+  getTableContentRect: PropTypes.func,
   getMobileFloatIconStyle: PropTypes.func,
   onToggleMobileMoreOperations: PropTypes.func,
   onToggleInsertRecordDialog: PropTypes.func,
@@ -628,7 +630,6 @@ RecordsBody.propTypes = {
   paste: PropTypes.func,
   searchResult: PropTypes.object,
   scrollToRowIndex: PropTypes.number,
-  tableContentWidth: PropTypes.number,
   frozenColumnsWidth: PropTypes.number,
   editMobileCell: PropTypes.func,
   insertRecords: PropTypes.func,

diff --git a/...end/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx b/...end/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx
@@ -168,7 +168,8 @@ class RecordsGroupBody extends Component {
   };
 
   setColumnVisibleEnd = () => {
-    const { columns, getScrollLeft, tableContentWidth } = this.props;
+    const { columns, getScrollLeft, getTableContentRect } = this.props;
+    const { width: tableContentWidth } = getTableContentRect();
     let columnVisibleEnd = 0;
     const contentScrollLeft = getScrollLeft();
     let endColumnWidth = tableContentWidth + contentScrollLeft;
@@ -208,7 +209,8 @@ class RecordsGroupBody extends Component {
   };
 
   scrollToColumn = (idx) => {
-    const { columns, tableContentWidth } = this.props;
+    const { columns, getTableContentRect } = this.props;
+    const { width: tableContentWidth } = getTableContentRect();
     const newScrollLeft = getColumnScrollPosition(columns, idx, tableContentWidth);
     if (newScrollLeft !== null) {
       this.props.setRecordsScrollLeft(newScrollLeft);
@@ -822,14 +824,12 @@ class RecordsGroupBody extends Component {
             maxLevel={maxLevel}
             groupOffsetLeft={groupOffsetLeft}
             scrollLeft={scrollLeft}
-            leftBarWidth={0}
-            appNavWidth={0}
             columns={columns}
             summaryConfigs={summaryConfigs}
             isExpanded={isExpanded}
             folding={folding}
             lastFrozenColumnKey={lastFrozenColumnKey}
-            getTableContentLeft={this.props.getTableContentLeft}
+            getTableContentRect={this.props.getTableContentRect}
             onExpandGroupToggle={this.onExpandGroupToggle}
           />
         );
@@ -924,7 +924,7 @@ class RecordsGroupBody extends Component {
             scrollTop={this.oldScrollTop}
             getRowTop={this.getRowTop}
             getScrollLeft={this.props.getScrollLeft}
-            getTableContentLeft={this.props.getTableContentLeft}
+            getTableContentRect={this.props.getTableContentRect}
             getMobileFloatIconStyle={this.props.getMobileFloatIconStyle}
             onToggleMobileMoreOperations={this.props.onToggleMobileMoreOperations}
             onToggleInsertRecordDialog={this.props.onToggleInsertRecordDialog}
@@ -984,7 +984,6 @@ RecordsGroupBody.propTypes = {
   columns: PropTypes.array,
   colOverScanStartIdx: PropTypes.number,
   colOverScanEndIdx: PropTypes.number,
-  tableContentWidth: PropTypes.number,
   totalWidth: PropTypes.number,
   containerWidth: PropTypes.number,
   groups: PropTypes.array,
@@ -1004,7 +1003,7 @@ RecordsGroupBody.propTypes = {
   hasSelectedCell: PropTypes.func,
   cacheScrollTop: PropTypes.func,
   scrollToLoadMore: PropTypes.func,
-  getTableContentLeft: PropTypes.func,
+  getTableContentRect: PropTypes.func,
   getMobileFloatIconStyle: PropTypes.func,
   onToggleMobileMoreOperations: PropTypes.func,
   onToggleInsertRecordDialog: PropTypes.func,