mirror of
https://github.com/haiwen/seahub.git
synced 2025-08-01 07:10:55 +00:00
fix: metadata group (#6447)
* fix: metadata group * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: update code * feat: optimize code * feat: optimize code --------- Co-authored-by: 杨国璇 <ygx@Hello-word.local> Co-authored-by: 杨国璇 <ygx@192.168.124.7>
This commit is contained in:
parent
7a43fafe37
commit
ff872a7f75
@ -10,7 +10,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 48px);
|
height: calc(100% - 48px);
|
||||||
border-top: 1px solid #e8e8e8;
|
border-top: 1px solid #e8e8e8;
|
||||||
transform: translateZ(10px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-mode-container {
|
.view-mode-container {
|
||||||
@ -24,6 +23,7 @@
|
|||||||
.dir-column-view {
|
.dir-column-view {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { ClickOutside } from '@seafile/sf-metadata-ui-component';
|
import { ClickOutside } from '@seafile/sf-metadata-ui-component';
|
||||||
import { isFunction, Z_INDEX, getCellValueByColumn } from '../../../_basic';
|
import { isFunction, Z_INDEX, getCellValueByColumn, PRIVATE_COLUMN_KEYS } from '../../../_basic';
|
||||||
import { isCtrlKeyHeldDown, isKeyPrintable } from '../../../utils/keyboard-utils';
|
import { isCtrlKeyHeldDown, isKeyPrintable } from '../../../utils/keyboard-utils';
|
||||||
import { isCellValueChanged } from '../../../utils/cell-comparer';
|
import { isCellValueChanged } from '../../../utils/cell-comparer';
|
||||||
import { EVENT_BUS_TYPE } from '../../../constants';
|
import { EVENT_BUS_TYPE } from '../../../constants';
|
||||||
@ -206,57 +206,44 @@ class NormalEditorContainer extends React.Component {
|
|||||||
getOldRowData = (originalOldCellValue) => {
|
getOldRowData = (originalOldCellValue) => {
|
||||||
const { column } = this.props;
|
const { column } = this.props;
|
||||||
const { key: columnKey, name: columnName } = column;
|
const { key: columnKey, name: columnName } = column;
|
||||||
let oldRowData;
|
let oldValue = originalOldCellValue;
|
||||||
if (this.getEditor().getOldValue) {
|
if (this.getEditor().getOldValue) {
|
||||||
const original = this.getEditor().getOldValue();
|
const original = this.getEditor().getOldValue();
|
||||||
oldRowData = { [columnName]: original[Object.keys(original)[0]] } ;
|
oldValue = original[Object.keys(original)[0]];
|
||||||
} else {
|
|
||||||
oldRowData = { [columnName]: originalOldCellValue };
|
|
||||||
}
|
}
|
||||||
|
const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnName]: oldValue } : { [columnName]: oldValue } ;
|
||||||
const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
|
const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
|
||||||
return { oldRowData, originalOldRowData };
|
return { oldRowData, originalOldRowData };
|
||||||
};
|
};
|
||||||
|
|
||||||
commit = (args) => {
|
commit = (args) => {
|
||||||
const { onCommit, record, column } = this.props;
|
const { record, column } = this.props;
|
||||||
const { key: columnKey, type: columnType, name: columnName } = column;
|
const { key: columnKey, type: columnType } = column;
|
||||||
const originalOldCellValue = getCellValueByColumn(record, column);
|
const originalOldCellValue = getCellValueByColumn(record, column);
|
||||||
const updated = this.getEditor().getValue();
|
const updated = this.getEditor().getValue();
|
||||||
if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) {
|
if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) {
|
||||||
this.props.onCommitCancel();
|
this.props.onCommitCancel();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!this.isNewValueValid(updated)) {
|
this.commitData(updated, true);
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.changeCommitted = true;
|
|
||||||
const rowId = record._id;
|
|
||||||
const key = Object.keys(updated)[0];
|
|
||||||
const value = updated[key];
|
|
||||||
const updates = { [columnName]: value };
|
|
||||||
const { oldRowData, originalOldRowData } = this.getOldRowData(originalOldCellValue);
|
|
||||||
|
|
||||||
// updates used for update remote record data
|
|
||||||
// originalUpdates used for update local record data
|
|
||||||
// oldRowData ues for undo/undo modify record
|
|
||||||
// originalOldRowData ues for undo/undo modify record
|
|
||||||
onCommit({ rowId, cellKey: columnKey, updates, originalUpdates: updated, oldRowData, originalOldRowData });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
commitData = (updated) => {
|
commitData = (updated, closeEditor = false) => {
|
||||||
if (!this.isNewValueValid(updated)) {
|
if (!this.isNewValueValid(updated)) return;
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { onCommit, record, column } = this.props;
|
const { onCommit, record, column } = this.props;
|
||||||
const { key: columnKey } = column;
|
const { key: columnKey, name: columnName } = column;
|
||||||
this.changeCommitted = true;
|
this.changeCommitted = true;
|
||||||
const rowId = record._id;
|
const rowId = record._id;
|
||||||
const originalOldCellValue = getCellValueByColumn(record, column);
|
const originalOldCellValue = getCellValueByColumn(record, column);
|
||||||
const key = Object.keys(updated)[0];
|
const key = Object.keys(updated)[0];
|
||||||
const value = updated[key];
|
const value = updated[key];
|
||||||
const updates = { [column.name]: value };
|
const updates = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnKey]: value } : { [columnName]: value };
|
||||||
const { oldRowData, originalOldRowData } = this.getOldRowData(originalOldCellValue);
|
const { oldRowData, originalOldRowData } = this.getOldRowData(originalOldCellValue);
|
||||||
onCommit({ rowId, cellKey: columnKey, updates, originalUpdates: updated, oldRowData, originalOldRowData }, false);
|
// updates used for update remote record data
|
||||||
|
// originalUpdates used for update local record data
|
||||||
|
// oldRowData ues for undo/undo modify record
|
||||||
|
// originalOldRowData ues for undo/undo modify record
|
||||||
|
onCommit({ rowId, cellKey: columnKey, updates, originalUpdates: updated, oldRowData, originalOldRowData }, closeEditor);
|
||||||
};
|
};
|
||||||
|
|
||||||
commitCancel = () => {
|
commitCancel = () => {
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { ClickOutside } from '@seafile/sf-metadata-ui-component';
|
import { ClickOutside } from '@seafile/sf-metadata-ui-component';
|
||||||
import { CellType, isFunction, Z_INDEX, getCellValueByColumn, getColumnOptionNameById } from '../../../_basic';
|
import { CellType, isFunction, Z_INDEX, getCellValueByColumn, getColumnOptionNameById, PRIVATE_COLUMN_KEYS } from '../../../_basic';
|
||||||
import { isCellValueChanged } from '../../../utils/cell-comparer';
|
import { isCellValueChanged } from '../../../utils/cell-comparer';
|
||||||
import { EVENT_BUS_TYPE } from '../../../constants';
|
import { EVENT_BUS_TYPE } from '../../../constants';
|
||||||
import Editor from '../editor';
|
import Editor from '../editor';
|
||||||
@ -124,48 +124,50 @@ class PopupEditorContainer extends React.Component {
|
|||||||
getOldRowData = (originalOldCellValue) => {
|
getOldRowData = (originalOldCellValue) => {
|
||||||
const { column } = this.props;
|
const { column } = this.props;
|
||||||
const { key: columnKey, name: columnName, type: columnType } = column;
|
const { key: columnKey, name: columnName, type: columnType } = column;
|
||||||
let oldRowData;
|
let oldValue = originalOldCellValue;
|
||||||
if (this.getEditor().getOldValue) {
|
if (this.getEditor().getOldValue) {
|
||||||
const original = this.getEditor().getOldValue();
|
const original = this.getEditor().getOldValue();
|
||||||
oldRowData = { [columnName]: original[Object.keys(original)[0]] } ;
|
oldValue = original[Object.keys(original)[0]];
|
||||||
} else {
|
|
||||||
oldRowData = { [columnName]: originalOldCellValue };
|
|
||||||
}
|
}
|
||||||
// long-text cell value need format to {text: '', links: [], ...}
|
|
||||||
if (columnType === CellType.LONG_TEXT) {
|
if (columnType === CellType.LONG_TEXT) {
|
||||||
const original = this.getEditor().getValue();
|
oldValue = this.getEditor().getValue(); // long-text cell value need format to {text: '', links: [], ...}
|
||||||
oldRowData = { [columnName]: original };
|
|
||||||
}
|
}
|
||||||
|
const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnName]: oldValue } : { [columnName]: oldValue } ;
|
||||||
const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
|
const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
|
||||||
return { oldRowData, originalOldRowData };
|
return { oldRowData, originalOldRowData };
|
||||||
};
|
};
|
||||||
|
|
||||||
// The input area in the interface loses focus. Use this.getEditor().getValue() to get data.
|
// The input area in the interface loses focus. Use this.getEditor().getValue() to get data.
|
||||||
commit = () => {
|
commit = () => {
|
||||||
const { onCommit, column, record } = this.props;
|
const { column, record } = this.props;
|
||||||
if (!record._id) return;
|
if (!record._id) return;
|
||||||
const { key: columnKey, type: columnType, name: columnName } = column;
|
const { key: columnKey, type: columnType } = column;
|
||||||
const originalOldCellValue = getCellValueByColumn(record, column);
|
|
||||||
const newValue = this.getEditor().getValue();
|
const newValue = this.getEditor().getValue();
|
||||||
let updated = columnType === CellType.DATE ? { [columnKey]: newValue } : newValue;
|
let updated = columnType === CellType.DATE ? { [columnKey]: newValue } : newValue;
|
||||||
|
if (columnType === CellType.SINGLE_SELECT) {
|
||||||
|
updated[columnKey] = newValue[columnKey] ? getColumnOptionNameById(column, newValue[columnKey]) : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.commitData(updated, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// This is the updated data obtained by manually clicking the button
|
||||||
|
commitData = (updated, closeEditor = false) => {
|
||||||
|
const { onCommit, column, record } = this.props;
|
||||||
|
const { key: columnKey, type: columnType, name: columnName } = column;
|
||||||
|
const originalOldCellValue = getCellValueByColumn(record, column);
|
||||||
let originalUpdates = { ...updated };
|
let originalUpdates = { ...updated };
|
||||||
if (
|
if (!isCellValueChanged(originalOldCellValue, originalUpdates[columnKey], columnType) || !this.isNewValueValid(updated)) {
|
||||||
!isCellValueChanged(originalOldCellValue, originalUpdates[columnKey], columnType) ||
|
if (closeEditor && typeof this.editor.onClose === 'function') {
|
||||||
!this.isNewValueValid(updated)
|
|
||||||
) {
|
|
||||||
if (typeof this.editor.onClose === 'function') {
|
|
||||||
this.editor.onClose();
|
this.editor.onClose();
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (columnType === CellType.SINGLE_SELECT) {
|
|
||||||
updated[columnKey] = newValue[columnKey] ? getColumnOptionNameById(column, newValue[columnKey]) : '';
|
|
||||||
}
|
|
||||||
this.changeCommitted = true;
|
this.changeCommitted = true;
|
||||||
const rowId = record._id;
|
const rowId = record._id;
|
||||||
const key = Object.keys(updated)[0];
|
const key = Object.keys(updated)[0];
|
||||||
const value = updated[key];
|
const value = updated[key];
|
||||||
const updates = { [columnName]: value };
|
const updates = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnKey]: value } : { [columnName]: value };
|
||||||
|
|
||||||
// special treatment of long-text column types to keep the stored data consistent
|
// special treatment of long-text column types to keep the stored data consistent
|
||||||
if (columnType === CellType.LONG_TEXT) {
|
if (columnType === CellType.LONG_TEXT) {
|
||||||
@ -177,30 +179,7 @@ class PopupEditorContainer extends React.Component {
|
|||||||
// originalUpdates used for update local record data
|
// originalUpdates used for update local record data
|
||||||
// oldRowData ues for undo/undo modify record
|
// oldRowData ues for undo/undo modify record
|
||||||
// originalOldRowData ues for undo/undo modify record
|
// originalOldRowData ues for undo/undo modify record
|
||||||
onCommit({ rowId, cellKey: columnKey, updates, originalUpdates, oldRowData, originalOldRowData });
|
onCommit({ rowId, cellKey: columnKey, updates, originalUpdates, oldRowData, originalOldRowData }, closeEditor);
|
||||||
};
|
|
||||||
|
|
||||||
// This is the updated data obtained by manually clicking the button
|
|
||||||
commitData = (updated) => {
|
|
||||||
if (!this.isNewValueValid(updated)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.changeCommitted = true;
|
|
||||||
const { onCommit, record, column } = this.props;
|
|
||||||
const { key: columnKey, type: columnType, name: columnName } = column;
|
|
||||||
const rowId = record._id;
|
|
||||||
const originalOldCellValue = getCellValueByColumn(record, column);
|
|
||||||
let originalUpdates = { ...updated };
|
|
||||||
const key = Object.keys(updated)[0];
|
|
||||||
const value = updated[key];
|
|
||||||
const updates = { [columnName]: value };
|
|
||||||
|
|
||||||
// special treatment of long-text column types to keep the stored data consistent
|
|
||||||
if (columnType === CellType.LONG_TEXT) {
|
|
||||||
originalUpdates[key] = value.text;
|
|
||||||
}
|
|
||||||
const { oldRowData, originalOldRowData } = this.getOldRowData(originalOldCellValue);
|
|
||||||
onCommit({ rowId, cellKey: columnKey, updates, originalUpdates, oldRowData, originalOldRowData }, false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
commitCancel = () => {
|
commitCancel = () => {
|
||||||
|
@ -80,7 +80,7 @@ const ColumnPopover = ({ target, onChange }) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onChange(columnName, column.type, { key: column.unique ? column.key : '', data });
|
onChange(column.unique ? column.key : columnName, column.type, { key: column.unique ? column.key : '', data });
|
||||||
toggle();
|
toggle();
|
||||||
}, [nameRef, column, metadata, onChange, toggle]);
|
}, [nameRef, column, metadata, onChange, toggle]);
|
||||||
|
|
||||||
|
@ -147,10 +147,10 @@ const GroupbyItem = memo(({
|
|||||||
onUpdate(newGroupby, index);
|
onUpdate(newGroupby, index);
|
||||||
}, [groupby, index, onUpdate]);
|
}, [groupby, index, onUpdate]);
|
||||||
|
|
||||||
const selectSortType = useCallback((sortType) => {
|
const selectSortType = useCallback((option) => {
|
||||||
const { count_type } = groupby;
|
const { count_type } = groupby;
|
||||||
if (sortType === count_type) return;
|
if (option.sortType === count_type) return;
|
||||||
const newGroupby = { ...groupby, sort_type: sortType };
|
const newGroupby = { ...groupby, sort_type: option.sortType };
|
||||||
onUpdate(newGroupby, index);
|
onUpdate(newGroupby, index);
|
||||||
}, [groupby, index, onUpdate]);
|
}, [groupby, index, onUpdate]);
|
||||||
|
|
||||||
|
@ -45,8 +45,8 @@ Groupbys.propTypes = {
|
|||||||
onMove: PropTypes.func,
|
onMove: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
const DndOptionsContainer = DropTarget('sfMetadataGroupbyItem', {}, connect => ({
|
const DndGroupbysContainer = DropTarget('sfMetadataGroupbyItem', {}, connect => ({
|
||||||
connectDropTarget: connect.dropTarget()
|
connectDropTarget: connect.dropTarget()
|
||||||
}))(Groupbys);
|
}))(Groupbys);
|
||||||
|
|
||||||
export default html5DragDropContext(DndOptionsContainer);
|
export default html5DragDropContext(DndGroupbysContainer);
|
||||||
|
@ -419,6 +419,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
transform: translateZ(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-header-top {
|
.table-header-top {
|
||||||
|
@ -157,9 +157,9 @@ class RecordsBody extends Component {
|
|||||||
this.resultContentRef.scrollTop = scrollTop;
|
this.resultContentRef.scrollTop = scrollTop;
|
||||||
};
|
};
|
||||||
|
|
||||||
setScrollLeft = (scrollLeft) => {
|
setScrollLeft = (scrollLeft, scrollTop) => {
|
||||||
const { interactionMask } = this;
|
const { interactionMask } = this;
|
||||||
interactionMask && interactionMask.setScrollLeft(scrollLeft);
|
interactionMask && interactionMask.setScrollLeft(scrollLeft, scrollTop);
|
||||||
};
|
};
|
||||||
|
|
||||||
cancelSetScrollLeft = () => {
|
cancelSetScrollLeft = () => {
|
||||||
|
@ -109,6 +109,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* group-header-left */
|
/* group-header-left */
|
||||||
@ -222,7 +223,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.canvas-groups-rows .sf-metadata-ui.cell-formatter-container {
|
.canvas-groups-rows .sf-metadata-ui.cell-formatter-container {
|
||||||
overflow: unset;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* group rows count */
|
/* group rows count */
|
||||||
|
@ -7,7 +7,6 @@ import { isMobile } from '../../../../../../utils';
|
|||||||
import { isFrozen } from '../../../../../../utils/column-utils';
|
import { isFrozen } from '../../../../../../utils/column-utils';
|
||||||
import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
|
import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
|
||||||
import { Z_INDEX } from '../../../../../../_basic';
|
import { Z_INDEX } from '../../../../../../_basic';
|
||||||
import { SIDE_PANEL_FOLDED_WIDTH } from '../../../../../../../../constants';
|
|
||||||
|
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
@ -42,9 +41,8 @@ class GroupContainer extends Component {
|
|||||||
|
|
||||||
fixedFrozenDOMs = (scrollLeft, scrollTop) => {
|
fixedFrozenDOMs = (scrollLeft, scrollTop) => {
|
||||||
if (this.backDrop) {
|
if (this.backDrop) {
|
||||||
const { left: tableContentLeft } = this.props.getTableContentRect();
|
|
||||||
this.backDrop.style.position = 'fixed';
|
this.backDrop.style.position = 'fixed';
|
||||||
this.backDrop.style.marginLeft = (tableContentLeft - SIDE_PANEL_FOLDED_WIDTH) + 'px';
|
this.backDrop.style.marginLeft = '0px';
|
||||||
this.backDrop.style.marginTop = (-scrollTop) + 'px';
|
this.backDrop.style.marginTop = (-scrollTop) + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -153,8 +153,8 @@ class GroupBody extends Component {
|
|||||||
this.resultContentRef.scrollTop = scrollTop;
|
this.resultContentRef.scrollTop = scrollTop;
|
||||||
};
|
};
|
||||||
|
|
||||||
setScrollLeft = (scrollLeft) => {
|
setScrollLeft = (scrollLeft, scrollTop) => {
|
||||||
this.interactionMask && this.interactionMask.setScrollLeft(scrollLeft);
|
this.interactionMask && this.interactionMask.setScrollLeft(scrollLeft, scrollTop);
|
||||||
};
|
};
|
||||||
|
|
||||||
cancelSetScrollLeft = () => {
|
cancelSetScrollLeft = () => {
|
||||||
@ -192,9 +192,7 @@ class GroupBody extends Component {
|
|||||||
getRowTop = (groupRecordIndex) => {
|
getRowTop = (groupRecordIndex) => {
|
||||||
const { groupMetrics } = this.state;
|
const { groupMetrics } = this.state;
|
||||||
const groupRow = getGroupRecordByIndex(groupRecordIndex, groupMetrics);
|
const groupRow = getGroupRecordByIndex(groupRecordIndex, groupMetrics);
|
||||||
if (!groupRow) {
|
if (!groupRow) return 0;
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
return groupRow.top || 0;
|
return groupRow.top || 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -306,6 +304,7 @@ class GroupBody extends Component {
|
|||||||
onCellMouseEnter: this.onCellMouseEnter,
|
onCellMouseEnter: this.onCellMouseEnter,
|
||||||
onCellMouseMove: this.onCellMouseMove,
|
onCellMouseMove: this.onCellMouseMove,
|
||||||
onDragEnter: this.handleDragEnter,
|
onDragEnter: this.handleDragEnter,
|
||||||
|
modifyRecord: this.props.modifyRecord,
|
||||||
};
|
};
|
||||||
return this.cellMetaData;
|
return this.cellMetaData;
|
||||||
};
|
};
|
||||||
@ -589,10 +588,8 @@ class GroupBody extends Component {
|
|||||||
|
|
||||||
getFoldedGroups = () => {
|
getFoldedGroups = () => {
|
||||||
const localConfigs = window.sfMetadataContext.localStorage.getItem(LOCAL_FOLDED_GROUP_KEY);
|
const localConfigs = window.sfMetadataContext.localStorage.getItem(LOCAL_FOLDED_GROUP_KEY);
|
||||||
if (!localConfigs) {
|
if (!localConfigs) return {};
|
||||||
return {};
|
return localConfigs;
|
||||||
}
|
|
||||||
return localConfigs[LOCAL_FOLDED_GROUP_KEY] || {};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
getVisibleIndex = () => {
|
getVisibleIndex = () => {
|
||||||
|
@ -6,7 +6,7 @@ import GroupBody from './group-body';
|
|||||||
import RecordsFooter from './record-footer';
|
import RecordsFooter from './record-footer';
|
||||||
import { HorizontalScrollbar } from '../../../scrollbar';
|
import { HorizontalScrollbar } from '../../../scrollbar';
|
||||||
import { recalculate, setColumnOffsets } from '../../../../utils/column-utils';
|
import { recalculate, setColumnOffsets } from '../../../../utils/column-utils';
|
||||||
import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL, GROUP_ROW_TYPE, EVENT_BUS_TYPE } from '../../../../constants';
|
import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL, GROUP_ROW_TYPE, EVENT_BUS_TYPE, GROUP_VIEW_OFFSET } from '../../../../constants';
|
||||||
import {
|
import {
|
||||||
isWindowsBrowser, isWebkitBrowser, isMobile, getEventClassName,
|
isWindowsBrowser, isWebkitBrowser, isMobile, getEventClassName,
|
||||||
addClassName, removeClassName,
|
addClassName, removeClassName,
|
||||||
@ -200,7 +200,7 @@ class Records extends Component {
|
|||||||
this.handleScrollbarScroll(scrollLeft);
|
this.handleScrollbarScroll(scrollLeft);
|
||||||
}
|
}
|
||||||
if (this.bodyRef && this.bodyRef.interactionMask) {
|
if (this.bodyRef && this.bodyRef.interactionMask) {
|
||||||
this.bodyRef.setScrollLeft(scrollLeft);
|
this.bodyRef.setScrollLeft(scrollLeft, scrollTop);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateHorizontalScrollState({
|
this.updateHorizontalScrollState({
|
||||||
@ -633,7 +633,7 @@ class Records extends Component {
|
|||||||
deleteColumn } = this.props;
|
deleteColumn } = this.props;
|
||||||
const { recordMetrics, columnMetrics, selectedRange, colOverScanStartIdx, colOverScanEndIdx } = this.state;
|
const { recordMetrics, columnMetrics, selectedRange, colOverScanStartIdx, colOverScanEndIdx } = this.state;
|
||||||
const { columns, totalWidth, lastFrozenColumnKey } = columnMetrics;
|
const { columns, totalWidth, lastFrozenColumnKey } = columnMetrics;
|
||||||
const containerWidth = totalWidth + SEQUENCE_COLUMN_WIDTH + CANVAS_RIGHT_INTERVAL;
|
const containerWidth = totalWidth + SEQUENCE_COLUMN_WIDTH + CANVAS_RIGHT_INTERVAL + (isGroupView ? GROUP_VIEW_OFFSET : 0);
|
||||||
const hasSelectedRecord = this.hasSelectedRecord();
|
const hasSelectedRecord = this.hasSelectedRecord();
|
||||||
const isSelectedAll = RecordMetrics.isSelectedAll(recordIds, recordMetrics);
|
const isSelectedAll = RecordMetrics.isSelectedAll(recordIds, recordMetrics);
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useCallback, useMemo } from 'react';
|
import React, { useCallback, useMemo } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { PRIVATE_COLUMN_KEY, isFunction, getCellValueByColumn } from '../../../../../../_basic';
|
import { PRIVATE_COLUMN_KEY, PRIVATE_COLUMN_KEYS, isFunction, getCellValueByColumn } from '../../../../../../_basic';
|
||||||
import { TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../../../constants';
|
import { TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../../../constants';
|
||||||
import { isCellValueChanged } from '../../../../../../utils/cell-comparer';
|
import { isCellValueChanged } from '../../../../../../utils/cell-comparer';
|
||||||
import CellOperationBtn from './operation-btn';
|
import CellOperationBtn from './operation-btn';
|
||||||
@ -116,7 +116,7 @@ const Cell = React.memo(({
|
|||||||
|
|
||||||
const getOldRowData = useCallback((originalOldCellValue) => {
|
const getOldRowData = useCallback((originalOldCellValue) => {
|
||||||
const { key: columnKey, name: columnName } = column;
|
const { key: columnKey, name: columnName } = column;
|
||||||
const oldRowData = { [columnName]: originalOldCellValue };
|
const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnKey]: originalOldCellValue } : { [columnName]: originalOldCellValue };
|
||||||
const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
|
const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
|
||||||
return { oldRowData, originalOldRowData };
|
return { oldRowData, originalOldRowData };
|
||||||
}, [column]);
|
}, [column]);
|
||||||
@ -128,10 +128,8 @@ const Cell = React.memo(({
|
|||||||
if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) return;
|
if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) return;
|
||||||
const rowId = record._id;
|
const rowId = record._id;
|
||||||
const key = Object.keys(updated)[0];
|
const key = Object.keys(updated)[0];
|
||||||
const value = updated[key];
|
const updates = PRIVATE_COLUMN_KEYS.includes(columnKey) ? updated : { [columnName]: updated[key] };
|
||||||
const updates = { [columnName]: value };
|
|
||||||
const { oldRowData, originalOldRowData } = getOldRowData(originalOldCellValue);
|
const { oldRowData, originalOldRowData } = getOldRowData(originalOldCellValue);
|
||||||
|
|
||||||
// updates used for update remote record data
|
// updates used for update remote record data
|
||||||
// originalUpdates used for update local record data
|
// originalUpdates used for update local record data
|
||||||
// oldRowData ues for undo/undo modify record
|
// oldRowData ues for undo/undo modify record
|
||||||
|
@ -7,8 +7,12 @@ import {
|
|||||||
NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
|
NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
|
||||||
KeyCodes,
|
KeyCodes,
|
||||||
isFunction,
|
isFunction,
|
||||||
|
isEmptyObject,
|
||||||
|
HEADER_HEIGHT_TYPE,
|
||||||
} from '../../../../_basic';
|
} from '../../../../_basic';
|
||||||
import { EVENT_BUS_TYPE, GROUP_ROW_TYPE, TRANSFER_TYPES, EDITOR_TYPE } from '../../../../constants';
|
import { EVENT_BUS_TYPE, GROUP_ROW_TYPE, TRANSFER_TYPES, EDITOR_TYPE,
|
||||||
|
GRID_HEADER_DOUBLE_HEIGHT, GRID_HEADER_DEFAULT_HEIGHT,
|
||||||
|
} from '../../../../constants';
|
||||||
import {
|
import {
|
||||||
getNewSelectedRange, getSelectedDimensions, selectedRangeIsSingleCell,
|
getNewSelectedRange, getSelectedDimensions, selectedRangeIsSingleCell,
|
||||||
getSelectedRangeDimensions, getSelectedRow, getSelectedColumn,
|
getSelectedRangeDimensions, getSelectedRow, getSelectedColumn,
|
||||||
@ -358,12 +362,22 @@ class InteractionMasks extends React.Component {
|
|||||||
}) };
|
}) };
|
||||||
};
|
};
|
||||||
|
|
||||||
setScrollLeft = (scrollLeft) => {
|
setScrollLeft = (scrollLeft, scrollTop) => {
|
||||||
const { selectionMask, state: { selectedPosition } } = this;
|
const { selectionMask, state: { selectedPosition } } = this;
|
||||||
this.setMaskScrollLeft(selectionMask, selectedPosition, scrollLeft);
|
this.setMaskScrollLeft(selectionMask, selectedPosition, scrollLeft, scrollTop);
|
||||||
};
|
};
|
||||||
|
|
||||||
setMaskScrollLeft = (mask, position, scrollLeft) => {
|
geHeaderHeight = () => {
|
||||||
|
const { table } = this.props;
|
||||||
|
const settings = table.header_settings || {};
|
||||||
|
const heightMode = isEmptyObject(settings) ? HEADER_HEIGHT_TYPE.DEFAULT : settings.header_height;
|
||||||
|
const containerHeight = heightMode === HEADER_HEIGHT_TYPE.DOUBLE ? GRID_HEADER_DOUBLE_HEIGHT : GRID_HEADER_DEFAULT_HEIGHT;
|
||||||
|
// 1: header border-bottom
|
||||||
|
return containerHeight + 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
setMaskScrollLeft = (mask, position, scrollLeft, scrollTop) => {
|
||||||
|
const headerHeight = this.geHeaderHeight();
|
||||||
if (mask) {
|
if (mask) {
|
||||||
const { idx, rowIdx, groupRecordIndex } = position;
|
const { idx, rowIdx, groupRecordIndex } = position;
|
||||||
if (idx >= 0 && rowIdx >= 0) {
|
if (idx >= 0 && rowIdx >= 0) {
|
||||||
@ -372,10 +386,8 @@ class InteractionMasks extends React.Component {
|
|||||||
const frozen = !!column.frozen;
|
const frozen = !!column.frozen;
|
||||||
if (frozen) {
|
if (frozen) {
|
||||||
// use fixed
|
// use fixed
|
||||||
const { top: containerTop } = this.container.getClientRects()[0];
|
let top = -scrollTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx) + headerHeight;
|
||||||
const { left: tableContentLeft } = this.props.getTableContentRect();
|
let left = column.left;
|
||||||
let top = containerTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx);
|
|
||||||
let left = tableContentLeft + column.left;
|
|
||||||
if (isGroupView) {
|
if (isGroupView) {
|
||||||
top += 1;
|
top += 1;
|
||||||
left += groupOffsetLeft;
|
left += groupOffsetLeft;
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import { normalizeColumnData } from '../../utils/column-utils';
|
import { normalizeColumnData, getColumnName } from '../../utils/column-utils';
|
||||||
import { CellType, PRIVATE_COLUMN_KEYS, EDITABLE_PRIVATE_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../../_basic';
|
import { CellType, PRIVATE_COLUMN_KEYS, EDITABLE_PRIVATE_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../../_basic';
|
||||||
|
|
||||||
class Column {
|
class Column {
|
||||||
constructor(object) {
|
constructor(object) {
|
||||||
this.key = object.key || '';
|
this.key = object.key || '';
|
||||||
this.name = object.name || '';
|
this.name = getColumnName(this.key, object.name) || '';
|
||||||
this.type = object.type || '';
|
this.type = object.type || '';
|
||||||
this.data = object.data || null;
|
this.data = object.data || null;
|
||||||
this.width = object.width || 200;
|
this.width = object.width || 200;
|
||||||
|
@ -43,6 +43,14 @@ class DataProcessor {
|
|||||||
// todo
|
// todo
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static hasRelatedFilters = (filters, updatedColumnKeyMap) => {
|
||||||
|
return filters.some(filter => updatedColumnKeyMap[filter.column_key]);
|
||||||
|
};
|
||||||
|
|
||||||
|
static hasRelatedSort = (sorts, updatedColumnKeyMap) => {
|
||||||
|
return sorts.some(sort => updatedColumnKeyMap[sort.column_key]);
|
||||||
|
};
|
||||||
|
|
||||||
static hasRelatedGroupby(groupbys, updatedColumnKeyMap) {
|
static hasRelatedGroupby(groupbys, updatedColumnKeyMap) {
|
||||||
return groupbys.some(groupby => updatedColumnKeyMap[groupby.column_key]);
|
return groupbys.some(groupby => updatedColumnKeyMap[groupby.column_key]);
|
||||||
}
|
}
|
||||||
@ -99,8 +107,14 @@ class DataProcessor {
|
|||||||
table.view.groups = groups;
|
table.view.groups = groups;
|
||||||
}
|
}
|
||||||
|
|
||||||
static updateDataWithModifyRecords(table, relatedColumnKeyMap) {
|
static updateDataWithModifyRecords(table, relatedColumnKeyMap, rowIds, { collaborators }) {
|
||||||
// todo
|
const { available_columns, groupbys, row_ids } = table.view;
|
||||||
|
const _isGroupView = isGroupView({ groupbys }, available_columns);
|
||||||
|
const isRegroup = _isGroupView && this.hasRelatedGroupby(groupbys, relatedColumnKeyMap);
|
||||||
|
if (isRegroup) {
|
||||||
|
table.view.groups = this.getGroupedRows(table, row_ids, groupbys, { collaborators });
|
||||||
|
}
|
||||||
|
// todo update sort and filter and ui change
|
||||||
}
|
}
|
||||||
|
|
||||||
static handleReloadedRecords(table, reloadedRecords, relatedColumnKeyMap) {
|
static handleReloadedRecords(table, reloadedRecords, relatedColumnKeyMap) {
|
||||||
@ -140,12 +154,7 @@ class DataProcessor {
|
|||||||
this.updateSummaries();
|
this.updateSummaries();
|
||||||
}
|
}
|
||||||
|
|
||||||
static updatePageDataWithCommonOperations(table, value) {
|
|
||||||
// todo
|
|
||||||
}
|
|
||||||
|
|
||||||
static syncOperationOnData(table, operation, { collaborators }) {
|
static syncOperationOnData(table, operation, { collaborators }) {
|
||||||
|
|
||||||
switch (operation.op_type) {
|
switch (operation.op_type) {
|
||||||
case OPERATION_TYPE.MODIFY_RECORD:
|
case OPERATION_TYPE.MODIFY_RECORD:
|
||||||
case OPERATION_TYPE.MODIFY_RECORDS: {
|
case OPERATION_TYPE.MODIFY_RECORDS: {
|
||||||
@ -167,7 +176,7 @@ class DataProcessor {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.updateDataWithModifyRecords();
|
this.updateDataWithModifyRecords(table, relatedColumnKeyMap, row_ids, { collaborators });
|
||||||
this.updateSummaries();
|
this.updateSummaries();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -205,25 +214,28 @@ class DataProcessor {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
table.view.rows = updatedRowIds;
|
table.view.rows = updatedRowIds;
|
||||||
this.updatePageDataWithCommonOperations();
|
this.updateDataWithModifyRecords(table, { collaborators });
|
||||||
this.updateSummaries();
|
this.updateSummaries();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case OPERATION_TYPE.MODIFY_HIDDEN_COLUMNS:
|
|
||||||
case OPERATION_TYPE.MODIFY_FILTERS: {
|
case OPERATION_TYPE.MODIFY_FILTERS: {
|
||||||
this.run(table, { collaborators });
|
this.run(table, { collaborators });
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
case OPERATION_TYPE.MODIFY_SORTS: {
|
case OPERATION_TYPE.MODIFY_SORTS: {
|
||||||
const { sorts, rows } = table.view;
|
const { sorts, groupbys, rows } = table.view;
|
||||||
const availableColumns = table.view.available_columns || table.columns;
|
const availableColumns = table.view.available_columns || table.columns;
|
||||||
if (!isSortView({ sorts }, availableColumns)) {
|
const _isSortView = isSortView({ sorts }, availableColumns);
|
||||||
|
if (!_isSortView) {
|
||||||
this.run(table, { collaborators });
|
this.run(table, { collaborators });
|
||||||
break;
|
return;
|
||||||
}
|
}
|
||||||
table.view.rows = this.getSortedRows(table, rows, sorts, { collaborators });
|
const _isGroupView = isGroupView({ groupbys }, availableColumns);
|
||||||
this.updatePageDataWithCommonOperations();
|
const renderedRows = this.getSortedRows(table, rows, sorts, { collaborators });
|
||||||
|
const groups = _isGroupView ? this.getGroupedRows(table, renderedRows, groupbys, { collaborators }) : [];
|
||||||
|
const row_ids = isTableRows(renderedRows) ? renderedRows.map(row => row._id) : renderedRows;
|
||||||
|
table.view.rows = row_ids;
|
||||||
|
table.view.groups = groups;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case OPERATION_TYPE.MODIFY_GROUPBYS: {
|
case OPERATION_TYPE.MODIFY_GROUPBYS: {
|
||||||
@ -235,9 +247,6 @@ class DataProcessor {
|
|||||||
table.view.groups = this.getGroupedRows(table, rows, groupbys, { collaborators });
|
table.view.groups = this.getGroupedRows(table, rows, groupbys, { collaborators });
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case OPERATION_TYPE.INSERT_COLUMN: {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default: {
|
default: {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -294,7 +294,6 @@ export const normalizeColumns = (columns) => {
|
|||||||
...params,
|
...params,
|
||||||
key,
|
key,
|
||||||
type: columnType,
|
type: columnType,
|
||||||
name: getColumnName(key, name),
|
|
||||||
width: columnsWidth[key] || 200,
|
width: columnsWidth[key] || 200,
|
||||||
};
|
};
|
||||||
}).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key));
|
}).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key));
|
||||||
|
Loading…
Reference in New Issue
Block a user