haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-22 03:47:09 +00:00
Code Issues Releases Wiki Activity

fix: metadata arrow action (#6300)

Browse Source 
Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
2024-07-05 13:59:06 +08:00
committed by GitHub
parent e19c4c1eac
commit 182b0f278f
12 changed files with 51 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/metadata/metadata-view/components/popover/groupby-popover/widgets/groupby-item.jsx
View File

@@ -32,10 +32,9 @@ class GroupbyItem extends Component {
}; };
renderTipMessage = () => { renderTipMessage = () => {
const { column } = this.props; const { column, view } = this.props;
const { tooltipOpen } = this.state; const { tooltipOpen } = this.state;
const page = window.app.getPage(); const { shown_column_keys } = view || {};
const { shown_column_keys } = page || {};
if (!shown_column_keys || !Array.isArray(shown_column_keys) || shown_column_keys.includes(column.key)) { if (!shown_column_keys || !Array.isArray(shown_column_keys) || shown_column_keys.includes(column.key)) {
return null; return null;
@@ -110,6 +109,7 @@ class GroupbyItem extends Component {
GroupbyItem.propTypes = { GroupbyItem.propTypes = {
index: PropTypes.number, index: PropTypes.number,
column: PropTypes.object, column: PropTypes.object,
view: PropTypes.object,
groupby: PropTypes.object, groupby: PropTypes.object,
columnsOptions: PropTypes.array, columnsOptions: PropTypes.array,
geoCountTypeOptions: PropTypes.array, geoCountTypeOptions: PropTypes.array,

11
frontend/src/metadata/metadata-view/components/table/container.js
View File

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

1
frontend/src/metadata/metadata-view/components/table/index.css
View File

@@ -634,6 +634,7 @@
width: 16px; width: 16px;
margin-left: 0; margin-left: 0;
transform: translateY(0px); transform: translateY(0px);
flex-shrink: 0;
} }
.sf-metadata-result-table-cell .select-all-checkbox-container .sf-metadata-icon-partially-selected { .sf-metadata-result-table-cell .select-all-checkbox-container .sf-metadata-icon-partially-selected {

4
frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container-right.js
View File

@@ -33,7 +33,7 @@ class GroupContainerRight extends Component {
isExpanded={isExpanded} isExpanded={isExpanded}
columns={columns} columns={columns}
summaryConfigs={summaryConfigs} summaryConfigs={summaryConfigs}
getTableContentLeft={this.props.getTableContentLeft} getTableContentRect={this.props.getTableContentRect}
/> />
</div> </div>
); );
@@ -50,7 +50,7 @@ GroupContainerRight.propTypes = {
height: PropTypes.number, height: PropTypes.number,
groupOffsetLeft: PropTypes.number, groupOffsetLeft: PropTypes.number,
lastFrozenColumnKey: PropTypes.string, lastFrozenColumnKey: PropTypes.string,
getTableContentLeft: PropTypes.func, getTableContentRect: PropTypes.func,
}; };
export default GroupContainerRight; export default GroupContainerRight;

6
frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.js
View File

@@ -41,7 +41,7 @@ class GroupContainer extends Component {
fixedFrozenDOMs = (scrollLeft, scrollTop) => { fixedFrozenDOMs = (scrollLeft, scrollTop) => {
if (this.backDrop) { if (this.backDrop) {
const tableContentLeft = this.props.getTableContentLeft(); const tableContentLeft = this.props.getTableContentRect();
this.backDrop.style.position = 'fixed'; this.backDrop.style.position = 'fixed';
this.backDrop.style.marginLeft = tableContentLeft + 'px'; this.backDrop.style.marginLeft = tableContentLeft + 'px';
this.backDrop.style.marginTop = (-scrollTop) + 'px'; this.backDrop.style.marginTop = (-scrollTop) + 'px';
@@ -134,7 +134,7 @@ class GroupContainer extends Component {
lastFrozenColumnKey={lastFrozenColumnKey} lastFrozenColumnKey={lastFrozenColumnKey}
columns={columns} columns={columns}
summaryConfigs={summaryConfigs} summaryConfigs={summaryConfigs}
getTableContentLeft={this.props.getTableContentLeft} getTableContentRect={this.props.getTableContentRect}
/> />
</div> </div>
); );
@@ -158,7 +158,7 @@ GroupContainer.propTypes = {
scrollLeft: PropTypes.number, scrollLeft: PropTypes.number,
maxLevel: PropTypes.number, maxLevel: PropTypes.number,
summaryConfigs: PropTypes.object, summaryConfigs: PropTypes.object,
getTableContentLeft: PropTypes.func, getTableContentRect: PropTypes.func,
onExpandGroupToggle: PropTypes.func, onExpandGroupToggle: PropTypes.func,
updateSummaryConfig: PropTypes.func, updateSummaryConfig: PropTypes.func,
}; };

4
frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js
View File

@@ -10,7 +10,7 @@ class GroupHeaderCell extends React.PureComponent {
fixedFrozenDOMs = (scrollLeft, scrollTop) => { fixedFrozenDOMs = (scrollLeft, scrollTop) => {
if (this.headerCell) { if (this.headerCell) {
const { firstColumnWidth, groupOffsetLeft } = this.props; const { firstColumnWidth, groupOffsetLeft } = this.props;
const tableContentLeft = this.props.getTableContentLeft(); const tableContentLeft = this.props.getTableContentRect();
this.headerCell.style.position = 'fixed'; this.headerCell.style.position = 'fixed';
this.headerCell.style.marginLeft = (SEQUENCE_COLUMN_WIDTH + firstColumnWidth + groupOffsetLeft + tableContentLeft) + 'px'; this.headerCell.style.marginLeft = (SEQUENCE_COLUMN_WIDTH + firstColumnWidth + groupOffsetLeft + tableContentLeft) + 'px';
this.headerCell.style.marginTop = (-scrollTop) + 'px'; this.headerCell.style.marginTop = (-scrollTop) + 'px';
@@ -64,7 +64,7 @@ GroupHeaderCell.propTypes = {
groupOffsetLeft: PropTypes.number, groupOffsetLeft: PropTypes.number,
summary: PropTypes.object, summary: PropTypes.object,
summaryMethod: PropTypes.string, summaryMethod: PropTypes.string,
getTableContentLeft: PropTypes.func, getTableContentRect: PropTypes.func,
}; };
export default GroupHeaderCell; export default GroupHeaderCell;

4
frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js
View File

@@ -57,7 +57,7 @@ class GroupHeaderRight extends Component {
isExpanded={isExpanded} isExpanded={isExpanded}
summary={summary} summary={summary}
summaryMethod={summaryMethod} summaryMethod={summaryMethod}
getTableContentLeft={this.props.getTableContentLeft} getTableContentRect={this.props.getTableContentRect}
/> />
); );
}); });
@@ -79,7 +79,7 @@ GroupHeaderRight.propTypes = {
lastFrozenColumnKey: PropTypes.string, lastFrozenColumnKey: PropTypes.string,
columns: PropTypes.array, columns: PropTypes.array,
summaryConfigs: PropTypes.object, summaryConfigs: PropTypes.object,
getTableContentLeft: PropTypes.func, getTableContentRect: PropTypes.func,
}; };
export default GroupHeaderRight; export default GroupHeaderRight;

5
frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js
View File

@@ -19,11 +19,6 @@ class GroupTitle extends Component {
this.collaborators = window.sfMetadataContext.getCollaboratorsFromCache(); this.collaborators = window.sfMetadataContext.getCollaboratorsFromCache();
} }
getOptionColors = () => {
const { dtableUtils } = window.app;
return dtableUtils.getOptionColors();
};
renderCollaborator = (collaborator) => { renderCollaborator = (collaborator) => {
const { email, avatar_url, name } = collaborator || {}; const { email, avatar_url, name } = collaborator || {};
return ( return (

26
frontend/src/metadata/metadata-view/components/table/table-main/records/index.js
View File

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

11
frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js
View File

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

14
frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx
View File

@@ -168,7 +168,8 @@ class RecordsGroupBody extends Component {
}; };
setColumnVisibleEnd = () => { setColumnVisibleEnd = () => {
const { columns, getScrollLeft, tableContentWidth } = this.props; const { columns, getScrollLeft, getTableContentRect } = this.props;
const { width: tableContentWidth } = getTableContentRect();
let columnVisibleEnd = 0; let columnVisibleEnd = 0;
const contentScrollLeft = getScrollLeft(); const contentScrollLeft = getScrollLeft();
let endColumnWidth = tableContentWidth + contentScrollLeft; let endColumnWidth = tableContentWidth + contentScrollLeft;
@@ -208,7 +209,8 @@ class RecordsGroupBody extends Component {
}; };
scrollToColumn = (idx) => { scrollToColumn = (idx) => {
const { columns, tableContentWidth } = this.props; const { columns, getTableContentRect } = this.props;
const { width: tableContentWidth } = getTableContentRect();
const newScrollLeft = getColumnScrollPosition(columns, idx, tableContentWidth); const newScrollLeft = getColumnScrollPosition(columns, idx, tableContentWidth);
if (newScrollLeft !== null) { if (newScrollLeft !== null) {
this.props.setRecordsScrollLeft(newScrollLeft); this.props.setRecordsScrollLeft(newScrollLeft);
@@ -822,13 +824,12 @@ class RecordsGroupBody extends Component {
maxLevel={maxLevel} maxLevel={maxLevel}
groupOffsetLeft={groupOffsetLeft} groupOffsetLeft={groupOffsetLeft}
scrollLeft={scrollLeft} scrollLeft={scrollLeft}
leftBarWidth={0}
columns={columns} columns={columns}
summaryConfigs={summaryConfigs} summaryConfigs={summaryConfigs}
isExpanded={isExpanded} isExpanded={isExpanded}
folding={folding} folding={folding}
lastFrozenColumnKey={lastFrozenColumnKey} lastFrozenColumnKey={lastFrozenColumnKey}
getTableContentLeft={this.props.getTableContentLeft} getTableContentRect={this.props.getTableContentRect}
onExpandGroupToggle={this.onExpandGroupToggle} onExpandGroupToggle={this.onExpandGroupToggle}
/> />
); );
@@ -923,7 +924,7 @@ class RecordsGroupBody extends Component {
scrollTop={this.oldScrollTop} scrollTop={this.oldScrollTop}
getRowTop={this.getRowTop} getRowTop={this.getRowTop}
getScrollLeft={this.props.getScrollLeft} getScrollLeft={this.props.getScrollLeft}
getTableContentLeft={this.props.getTableContentLeft} getTableContentRect={this.props.getTableContentRect}
getMobileFloatIconStyle={this.props.getMobileFloatIconStyle} getMobileFloatIconStyle={this.props.getMobileFloatIconStyle}
onToggleMobileMoreOperations={this.props.onToggleMobileMoreOperations} onToggleMobileMoreOperations={this.props.onToggleMobileMoreOperations}
onToggleInsertRecordDialog={this.props.onToggleInsertRecordDialog} onToggleInsertRecordDialog={this.props.onToggleInsertRecordDialog}
@@ -983,7 +984,6 @@ RecordsGroupBody.propTypes = {
columns: PropTypes.array, columns: PropTypes.array,
colOverScanStartIdx: PropTypes.number, colOverScanStartIdx: PropTypes.number,
colOverScanEndIdx: PropTypes.number, colOverScanEndIdx: PropTypes.number,
tableContentWidth: PropTypes.number,
totalWidth: PropTypes.number, totalWidth: PropTypes.number,
containerWidth: PropTypes.number, containerWidth: PropTypes.number,
groups: PropTypes.array, groups: PropTypes.array,
@@ -1003,7 +1003,7 @@ RecordsGroupBody.propTypes = {
hasSelectedCell: PropTypes.func, hasSelectedCell: PropTypes.func,
cacheScrollTop: PropTypes.func, cacheScrollTop: PropTypes.func,
scrollToLoadMore: PropTypes.func, scrollToLoadMore: PropTypes.func,
getTableContentLeft: PropTypes.func, getTableContentRect: PropTypes.func,
getMobileFloatIconStyle: PropTypes.func, getMobileFloatIconStyle: PropTypes.func,
onToggleMobileMoreOperations: PropTypes.func, onToggleMobileMoreOperations: PropTypes.func,
onToggleInsertRecordDialog: PropTypes.func, onToggleInsertRecordDialog: PropTypes.func,

22
frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js
View File

@@ -29,7 +29,7 @@ import { gettext } from '../../../../../../utils/constants';
import './index.css'; import './index.css';
const READONLY_PREVIEW_COLUMNS = [ const READONLY_PREVIEW_COLUMNS = [
CellType.LONG_TEXT, CellType.IMAGE, CellType.FILE, CellType.LINK, CellType.DIGITAL_SIGN, CellType.LINK_FORMULA,
]; ];
const propTypes = { const propTypes = {
@@ -48,7 +48,7 @@ const propTypes = {
getRowTop: PropTypes.func, getRowTop: PropTypes.func,
scrollTop: PropTypes.number, scrollTop: PropTypes.number,
getScrollLeft: PropTypes.func, getScrollLeft: PropTypes.func,
getTableContentLeft: PropTypes.func, getTableContentRect: PropTypes.func,
getMobileFloatIconStyle: PropTypes.func, getMobileFloatIconStyle: PropTypes.func,
onToggleMobileMoreOperations: PropTypes.func, onToggleMobileMoreOperations: PropTypes.func,
onToggleInsertRecordDialog: PropTypes.func, onToggleInsertRecordDialog: PropTypes.func,
@@ -427,7 +427,7 @@ class InteractionMasks extends React.Component {
if (frozen) { if (frozen) {
// use fixed // use fixed
const { top: containerTop } = this.container.getClientRects()[0]; const { top: containerTop } = this.container.getClientRects()[0];
const tableContentLeft = this.props.getTableContentLeft(); const { left: tableContentLeft } = this.props.getTableContentRect();
let top = containerTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx); let top = containerTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx);
let left = tableContentLeft + column.left; let left = tableContentLeft + column.left;
if (isGroupView) { if (isGroupView) {
@@ -869,12 +869,15 @@ class InteractionMasks extends React.Component {
const rect = cellContainer.getBoundingClientRect(); const rect = cellContainer.getBoundingClientRect();
const leftInterval = this.getLeftInterval(); const leftInterval = this.getLeftInterval();
const nextColumnWidth = columns[current.idx - 1] ? columns[current.idx - 1].width : 0; const nextColumnWidth = columns[current.idx - 1] ? columns[current.idx - 1].width : 0;
const { left: tableContentLeft, right } = this.props.getTableContentRect();
const viewLeft = tableContentLeft + 130;
// selectMask is outside the viewport, scroll to next column // selectMask is outside the viewport, scroll to next column
if (rect.x < 0 || rect.x > window.innerWidth) { if (rect.x < 0 || rect.x > right) {
this.props.scrollToColumn(current.idx - 1); this.props.scrollToColumn(current.idx - 1);
} else if (nextColumnWidth > rect.x - leftInterval) { } else if (nextColumnWidth > rect.x - leftInterval - viewLeft) {
// selectMask is part of the viewport, newScrollLeft = columnWidth - visibleWidth // selectMask is part of the viewport, newScrollLeft = columnWidth - visibleWidth
const newScrollLeft = nextColumnWidth - (rect.x - leftInterval); const newScrollLeft = nextColumnWidth - (rect.x - leftInterval - viewLeft);
this.props.setRecordsScrollLeft(this.props.getScrollLeft() - newScrollLeft); this.props.setRecordsScrollLeft(this.props.getScrollLeft() - newScrollLeft);
} }
return ({ ...current, idx: current.idx === 0 ? 0 : current.idx - 1 }); return ({ ...current, idx: current.idx === 0 ? 0 : current.idx - 1 });
@@ -890,13 +893,14 @@ class InteractionMasks extends React.Component {
if (columnIdx === 1 && column.frozen === true) { if (columnIdx === 1 && column.frozen === true) {
this.props.scrollToColumn(1); this.props.scrollToColumn(1);
} else { } else {
const { right: tableContentRight } = this.props.getTableContentRect();
const nextColumnWidth = columns[columnIdx + 1] ? columns[columnIdx + 1].width : 0; const nextColumnWidth = columns[columnIdx + 1] ? columns[columnIdx + 1].width : 0;
// selectMask is outside the viewport, scroll to next column // selectMask is outside the viewport, scroll to next column
if (rect.x < 0 || rect.x > window.innerWidth) { if (rect.x < 0 || rect.x > tableContentRight) {
this.props.scrollToColumn(columnIdx + 1); this.props.scrollToColumn(columnIdx + 1);
} else if (rect.x + rect.width + nextColumnWidth > window.innerWidth) { } else if (rect.x + rect.width + nextColumnWidth > tableContentRight) {
// selectMask is part of the viewport, newScrollLeft = columnWidth - visibleWidth // selectMask is part of the viewport, newScrollLeft = columnWidth - visibleWidth
const newScrollLeft = nextColumnWidth - (window.innerWidth - rect.x - rect.width); const newScrollLeft = nextColumnWidth - (tableContentRight - rect.x - rect.width);
this.props.setRecordsScrollLeft(this.props.getScrollLeft() + newScrollLeft); this.props.setRecordsScrollLeft(this.props.getScrollLeft() + newScrollLeft);
} }
} }