mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-22 03:47:09 +00:00
add_child_tags context option (#7448)
Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
11
frontend/src/components/sf-table/constants/context-menu.js
Normal file
11
frontend/src/components/sf-table/constants/context-menu.js
Normal file
@@ -0,0 +1,11 @@
|
||||
export const OPERATION = {
|
||||
EDIT_TAG: 'edit_tag',
|
||||
SET_SUB_TAGS: 'set_sub_tags',
|
||||
DELETE_TAG: 'delete_tag',
|
||||
DELETE_TAGS: 'delete_tags',
|
||||
NEW_SUB_TAG: 'new_sub_tag',
|
||||
MERGE_TAGS: 'merge_tags',
|
||||
ADD_CHILD_TAGS: 'add_child_tags',
|
||||
};
|
||||
|
||||
export const POPUP_EDITOR_OPERATION_KEYS = [OPERATION.SET_SUB_TAGS, OPERATION.ADD_CHILD_TAGS];
|
@@ -5,12 +5,13 @@ import PopupEditorContainer from './popup-editor-container';
|
||||
import PreviewEditorContainer from './preview-editor-container';
|
||||
import { checkIsColumnSupportPreview, checkIsPopupColumnEditor } from '../../utils/column';
|
||||
import { EDITOR_TYPE } from '../../constants/grid';
|
||||
import { POPUP_EDITOR_OPERATION_KEYS } from '../../constants/context-menu';
|
||||
|
||||
const EditorContainer = (props) => {
|
||||
const { column, openEditorMode } = props;
|
||||
const { column, openEditorMode, operation } = props;
|
||||
if (!column || !isValidElement(column.editor)) return null;
|
||||
|
||||
if (checkIsPopupColumnEditor(column)) {
|
||||
if (checkIsPopupColumnEditor(column) || POPUP_EDITOR_OPERATION_KEYS.includes(operation)) {
|
||||
return <PopupEditorContainer { ...props } />;
|
||||
}
|
||||
if (checkIsColumnSupportPreview(column) && openEditorMode === EDITOR_TYPE.PREVIEWER) {
|
||||
|
@@ -55,7 +55,7 @@ class PopupEditorContainer extends React.Component {
|
||||
};
|
||||
|
||||
createEditor = () => {
|
||||
const { column, record, height, onPressTab, editorPosition, columns, modifyColumnData, readOnly } = this.props;
|
||||
const { column, record, height, onPressTab, editorPosition, columns, modifyColumnData, readOnly, operation } = this.props;
|
||||
const value = this.getInitialValue();
|
||||
|
||||
let editorProps = {
|
||||
@@ -78,6 +78,7 @@ class PopupEditorContainer extends React.Component {
|
||||
column,
|
||||
readOnly,
|
||||
onPressTab,
|
||||
operation,
|
||||
};
|
||||
|
||||
return (
|
||||
|
@@ -121,8 +121,8 @@ class InteractionMasks extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
onOpenEditorEvent = (mode) => {
|
||||
this.setState({ openEditorMode: mode }, () => {
|
||||
onOpenEditorEvent = (mode, op) => {
|
||||
this.setState({ openEditorMode: mode, selectedOperation: op }, () => {
|
||||
this.openEditor(null);
|
||||
});
|
||||
};
|
||||
@@ -206,7 +206,6 @@ class InteractionMasks extends React.Component {
|
||||
const { isEditorEnabled, selectedPosition, openEditorMode } = this.state;
|
||||
const { columns } = this.props;
|
||||
const selectedColumn = getSelectedColumn({ selectedPosition, columns });
|
||||
|
||||
// how to open editors?
|
||||
// 1. editor is closed
|
||||
// 2. record-cell is editable or open editor with preview mode
|
||||
@@ -1031,7 +1030,7 @@ class InteractionMasks extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { selectedRange, isEditorEnabled, draggedRange, selectedPosition, firstEditorKeyDown, openEditorMode, editorPosition } = this.state;
|
||||
const { selectedRange, isEditorEnabled, draggedRange, selectedPosition, firstEditorKeyDown, openEditorMode, editorPosition, selectedOperation } = this.state;
|
||||
const { columns, isGroupView, recordGetterByIndex, scrollTop, getScrollLeft, editorPortalTarget, contextMenu } = this.props;
|
||||
const isSelectedSingleCell = selectedRangeIsSingleCell(selectedRange);
|
||||
return (
|
||||
@@ -1066,6 +1065,7 @@ class InteractionMasks extends React.Component {
|
||||
onCommit={this.onCommit}
|
||||
onCommitCancel={this.onCommitCancel}
|
||||
modifyColumnData={this.props.modifyColumnData}
|
||||
operation={selectedOperation}
|
||||
{...{
|
||||
...this.getSelectedDimensions(selectedPosition),
|
||||
...this.state.editorPosition
|
||||
|
@@ -6,15 +6,7 @@ import { EVENT_BUS_TYPE } from '../../../../components/sf-table/constants/event-
|
||||
import { PRIVATE_COLUMN_KEY } from '../../../constants';
|
||||
import { TreeMetrics } from '../../../../components/sf-table/utils/tree-metrics';
|
||||
import { RecordMetrics } from '../../../../components/sf-table/utils/record-metrics';
|
||||
|
||||
const OPERATION = {
|
||||
EDIT_TAG: 'edit_tag',
|
||||
SET_SUB_TAGS: 'set_sub_tags',
|
||||
DELETE_TAG: 'delete_tag',
|
||||
DELETE_TAGS: 'delete_tags',
|
||||
NEW_SUB_TAG: 'new_sub_tag',
|
||||
MERGE_TAGS: 'merge_tags',
|
||||
};
|
||||
import { OPERATION } from '../../../../components/sf-table/constants/context-menu';
|
||||
|
||||
export const createContextMenuOptions = ({
|
||||
context,
|
||||
@@ -62,6 +54,10 @@ export const createContextMenuOptions = ({
|
||||
onMergeTags(option.tagsIds, menuPosition);
|
||||
break;
|
||||
}
|
||||
case OPERATION.ADD_CHILD_TAGS: {
|
||||
eventBus.dispatch(EVENT_BUS_TYPE.OPEN_EDITOR, null, option.value);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
@@ -160,13 +156,18 @@ export const createContextMenuOptions = ({
|
||||
tagsIds: [tag._id],
|
||||
});
|
||||
}
|
||||
|
||||
if (isNameColumn && canAddTag) {
|
||||
options.push({
|
||||
label: gettext('New child tag'),
|
||||
value: OPERATION.NEW_SUB_TAG,
|
||||
parentTagId: tag._id,
|
||||
});
|
||||
options.push(
|
||||
{
|
||||
label: gettext('New child tag'),
|
||||
value: OPERATION.NEW_SUB_TAG,
|
||||
parentTagId: tag._id,
|
||||
},
|
||||
{
|
||||
label: gettext('Add child tags'),
|
||||
value: OPERATION.ADD_CHILD_TAGS,
|
||||
}
|
||||
);
|
||||
}
|
||||
return options;
|
||||
};
|
||||
|
@@ -7,8 +7,8 @@ import { PRIVATE_COLUMN_KEY } from '../../../../constants';
|
||||
export const createColumnEditor = ({ column, otherProps }) => {
|
||||
switch (column.key) {
|
||||
case PRIVATE_COLUMN_KEY.TAG_NAME: {
|
||||
const { updateTag } = otherProps;
|
||||
return <TagNameEditor updateTag={updateTag} />;
|
||||
const { updateTag, addTagLinks, deleteTagLinks } = otherProps;
|
||||
return <TagNameEditor updateTag={updateTag} addTagLinks={addTagLinks} deleteTagLinks={deleteTagLinks} />;
|
||||
}
|
||||
case PRIVATE_COLUMN_KEY.PARENT_LINKS: {
|
||||
const { addTagLinks, deleteTagLinks } = otherProps;
|
||||
|
@@ -1,10 +1,13 @@
|
||||
import React, { forwardRef, useCallback, useMemo } from 'react';
|
||||
import EditTagDialog from '../../../../components/dialog/edit-tag-dialog';
|
||||
import ChildTagsEditor from './child-tags';
|
||||
import { gettext } from '../../../../../utils/constants';
|
||||
import { getRecordIdFromRecord } from '../../../../../metadata/utils/cell';
|
||||
import { useTags } from '../../../../hooks';
|
||||
import { OPERATION } from '../../../../../components/sf-table/constants/context-menu';
|
||||
import { PRIVATE_COLUMN_KEY } from '../../../../constants';
|
||||
|
||||
const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, ...editorProps }, ref) => {
|
||||
const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, operation, addTagLinks, deleteTagLinks, column, ...editorProps }, ref) => {
|
||||
const { tagsData } = useTags();
|
||||
|
||||
const tags = useMemo(() => {
|
||||
@@ -16,6 +19,12 @@ const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, ...editor
|
||||
updateTag(recordId, updates, { success_callback, fail_callback });
|
||||
}, [record, updateTag]);
|
||||
|
||||
if (operation && operation === OPERATION.ADD_CHILD_TAGS) {
|
||||
return (
|
||||
<ChildTagsEditor {...editorProps} addTagLinks={addTagLinks} deleteTagLinks={deleteTagLinks} column={{ key: PRIVATE_COLUMN_KEY.SUB_LINKS, width: column.width }} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<EditTagDialog {...editorProps} tags={tags} title={gettext('Edit tag')} tag={record} onToggle={onCommitCancel} onSubmit={handelUpdateTag} />
|
||||
);
|
||||
|
Reference in New Issue
Block a user