haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-22 11:57:34 +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 = () => {
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,

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

@@ -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}
/>

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

@@ -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 {

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

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) => {
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,
};

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) => {
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;

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

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();
}
getOptionColors = () => {
const { dtableUtils } = window.app;
return dtableUtils.getOptionColors();
};
renderCollaborator = (collaborator) => {
const { email, avatar_url, name } = collaborator || {};
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.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,

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 = () => {
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,

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 = () => {
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,13 +824,12 @@ class RecordsGroupBody extends Component {
maxLevel={maxLevel}
groupOffsetLeft={groupOffsetLeft}
scrollLeft={scrollLeft}
leftBarWidth={0}
columns={columns}
summaryConfigs={summaryConfigs}
isExpanded={isExpanded}
folding={folding}
lastFrozenColumnKey={lastFrozenColumnKey}
getTableContentLeft={this.props.getTableContentLeft}
getTableContentRect={this.props.getTableContentRect}
onExpandGroupToggle={this.onExpandGroupToggle}
/>
);
@@ -923,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}
@@ -983,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,
@@ -1003,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,

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';
const READONLY_PREVIEW_COLUMNS = [
CellType.LONG_TEXT, CellType.IMAGE, CellType.FILE, CellType.LINK, CellType.DIGITAL_SIGN, CellType.LINK_FORMULA,
];
const propTypes = {
@@ -48,7 +48,7 @@ const propTypes = {
getRowTop: PropTypes.func,
scrollTop: PropTypes.number,
getScrollLeft: PropTypes.func,
getTableContentLeft: PropTypes.func,
getTableContentRect: PropTypes.func,
getMobileFloatIconStyle: PropTypes.func,
onToggleMobileMoreOperations: PropTypes.func,
onToggleInsertRecordDialog: PropTypes.func,
@@ -427,7 +427,7 @@ class InteractionMasks extends React.Component {
if (frozen) {
// use fixed
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 left = tableContentLeft + column.left;
if (isGroupView) {
@@ -869,12 +869,15 @@ class InteractionMasks extends React.Component {
const rect = cellContainer.getBoundingClientRect();
const leftInterval = this.getLeftInterval();
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
if (rect.x < 0 || rect.x > window.innerWidth) {
if (rect.x < 0 || rect.x > right) {
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
const newScrollLeft = nextColumnWidth - (rect.x - leftInterval);
const newScrollLeft = nextColumnWidth - (rect.x - leftInterval - viewLeft);
this.props.setRecordsScrollLeft(this.props.getScrollLeft() - newScrollLeft);
}
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) {
this.props.scrollToColumn(1);
} else {
const { right: tableContentRight } = this.props.getTableContentRect();
const nextColumnWidth = columns[columnIdx + 1] ? columns[columnIdx + 1].width : 0;
// 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);
} 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
const newScrollLeft = nextColumnWidth - (window.innerWidth - rect.x - rect.width);
const newScrollLeft = nextColumnWidth - (tableContentRight - rect.x - rect.width);
this.props.setRecordsScrollLeft(this.props.getScrollLeft() + newScrollLeft);
}
}