haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-02 07:47:32 +00:00
Code Issues Releases Wiki Activity

fix(metadata-table): open file via click (#6796)

Browse Source
This commit is contained in:
Jerry Ren 2024-09-19 16:22:35 +08:00 committed by GitHub
parent 86770c47f9
commit 4022ce1b4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 122 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/metadata/components/cell-editors/file-name-editor.js
View File

@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
import { ModalPortal } from '@seafile/sf-metadata-ui-component';
import { Utils } from '../../../utils/utils';
import ImageDialog from '../../../components/dialog/image-dialog';
import { EVENT_BUS_TYPE } from '../../../components/common/event-bus-type';
import { siteRoot, thumbnailSizeForOriginal, fileServerRoot } from '../../../utils/constants';
import { PRIVATE_COLUMN_KEY } from '../../constants';
const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
const [imageIndex, setImageIndex] = useState(0);
@ -67,24 +65,6 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
return '';
}, [_isDir, fileName]);
const parentDir = useMemo(() => {
const value = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
if (value === '/') return '';
return value;
}, [record]);
const repoID = useMemo(() => {
return window.sfMetadataContext.getSetting('repoID');
}, []);
const path = useMemo(() => {
return Utils.encodePath(Utils.joinPath(parentDir, fileName));
}, [parentDir, fileName]);
const url = useMemo(() => {
return `${siteRoot}lib/${repoID}/file${path}`;
}, [path, repoID]);
const moveToPrevImage = () => {
const imageItemsLength = imageItems.length;
setImageIndex((prevState) => (prevState + imageItemsLength - 1) % imageItemsLength);
@ -95,19 +75,6 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
};
useEffect(() => {
if (fileType === 'markdown') {
const fileName = record[PRIVATE_COLUMN_KEY.FILE_NAME];
const parentDir = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, parentDir, fileName);
}
return () => {};
}, [record, fileType]);
if (fileType === 'markdown') {
return null;
}
if (fileType === 'image') {
return (
<ModalPortal>
@ -122,15 +89,6 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
);
}
if (!fileType || fileType === 'sdoc') {
window.open(url);
} else {
let pathname = window.location.pathname;
if (pathname.endsWith('/')) {
pathname = pathname.slice(0, -1);
}
window.open(window.location.origin + pathname + Utils.encodePath(Utils.joinPath(parentDir, fileName)));
}
return null;
};

18
frontend/src/metadata/views/table/table-main/records/record/cell/index.js
View File

@ -6,7 +6,7 @@ import CellOperationBtn from './operation-btn';
import { Utils } from '../../../../../../../utils/utils';
import ObjectUtils from '../../../../../../utils/object-utils';
import { isCellValueChanged, getCellValueByColumn } from '../../../../../../utils/cell';
import { PRIVATE_COLUMN_KEY, PRIVATE_COLUMN_KEYS, TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../../../constants';
import { CellType, PRIVATE_COLUMN_KEY, PRIVATE_COLUMN_KEYS, TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../../../constants';
import './index.css';
@ -37,6 +37,9 @@ const Cell = React.memo(({
// 'row-comment-cell': ,
});
}, [column, highlightClassName, isLastCell, isLastFrozenCell, isCellSelected]);
const isFileNameColumn = useMemo(() => {
return column.type === CellType.FILE_NAME;
}, [column]);
const isDir = useMemo(() => {
const isDirValue = record[PRIVATE_COLUMN_KEY.IS_DIR];
if (typeof isDirValue === 'string') return isDirValue.toUpperCase() === 'TRUE';
@ -148,16 +151,23 @@ const Cell = React.memo(({
const cellValue = getCellValueByColumn(record, column);
const cellEvents = needBindEvents && getEvents();
const props = {
const containerProps = {
className,
style,
...cellEvents,
};
return (
<div key={`${record._id}-${column.key}`} {...props}>
<div key={`${record._id}-${column.key}`} {...containerProps}>
<Formatter isCellSelected={isCellSelected} isDir={isDir} value={cellValue} field={column} onChange={modifyRecord} record={record} />
{isCellSelected && (<CellOperationBtn value={cellValue} column={column} isDir={isDir} />)}
{(isCellSelected && isFileNameColumn) && (
<CellOperationBtn
record={record}
cellValue={cellValue}
column={column}
isDir={isDir}
/>
)}
</div>
);
}, (props, nextProps) => {

116
frontend/src/metadata/views/table/table-main/records/record/cell/operation-btn/index.js
View File

@ -1,21 +1,121 @@
import React, { useCallback } from 'react';
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { UncontrolledTooltip } from 'reactstrap';
import { IconBtn } from '@seafile/sf-metadata-ui-component';
import { gettext } from '../../../../../../../../utils/constants';
import { CellType, EVENT_BUS_TYPE, EDITOR_TYPE } from '../../../../../../../constants';
import { Utils } from '../../../../../../../../utils/utils';
import { gettext, siteRoot } from '../../../../../../../../utils/constants';
import { EVENT_BUS_TYPE } from '../../../../../../../..//components/common/event-bus-type';
import { EVENT_BUS_TYPE as METADATA_EVENT_BUS_TYPE, EDITOR_TYPE, PRIVATE_COLUMN_KEY } from '../../../../../../../constants';
import './index.css';
const CellOperationBtn = ({ isDir, column, value }) => {
const FILE_TYPE = {
FOLDER: 'folder',
MARKDOWN: 'markdown',
SDOC: 'sdoc',
IMAGE: 'image',
};
const openFile = useCallback((event) => {
const CellOperationBtn = ({ isDir, column, record, cellValue, ...props }) => {
const _isDir = useMemo(() => {
const isDirValue = record[PRIVATE_COLUMN_KEY.IS_DIR];
if (typeof isDirValue === 'string') return isDirValue.toUpperCase() === 'TRUE';
return isDirValue;
}, [record]);
const fileName = useMemo(() => {
const { key } = column;
return record[key];
}, [column, record]);
const fileType = useMemo(() => {
if (_isDir) return FILE_TYPE.FOLDER;
if (!fileName) return '';
const index = fileName.lastIndexOf('.');
if (index === -1) return '';
const suffix = fileName.slice(index).toLowerCase();
if (suffix.indexOf(' ') > -1) return '';
if (Utils.imageCheck(fileName)) return FILE_TYPE.IMAGE;
if (Utils.isMarkdownFile(fileName)) return FILE_TYPE.MARKDOWN;
if (Utils.isSdocFile(fileName)) return FILE_TYPE.SDOC;
return '';
}, [_isDir, fileName]);
const getParentDir = () => {
const parentDir = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
if (parentDir === '/') {
return '';
}
return parentDir;
};
const generateUrl = () => {
const repoID = window.sfMetadataContext.getSetting('repoID');
const parentDir = getParentDir();
const path = Utils.encodePath(Utils.joinPath(parentDir, fileName));
return `${siteRoot}lib/${repoID}/file${path}`;
};
const openUrl = (url) => {
window.open(url);
};
const openMarkdown = () => {
const fileName = record[PRIVATE_COLUMN_KEY.FILE_NAME];
const parentDir = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, parentDir, fileName);
};
const openByNewWindow = (fileType) => {
if (!fileType) {
const url = generateUrl();
openUrl(url);
} else {
const parentDir = getParentDir();
let pathname = window.location.pathname;
if (pathname.endsWith('/')) {
pathname = pathname.slice(0, -1);
}
openUrl(window.location.origin + pathname + Utils.encodePath(Utils.joinPath(parentDir, fileName)));
}
};
const openSdoc = () => {
const url = generateUrl();
openUrl(url);
};
const openOthers = () => {
openByNewWindow(fileType);
};
const openFile = (event) => {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER);
}, []);
if (!value || column.type !== CellType.FILE_NAME) return null;
switch (fileType) {
case FILE_TYPE.MARKDOWN: {
openMarkdown();
break;
}
case FILE_TYPE.SDOC: {
openSdoc();
break;
}
case FILE_TYPE.IMAGE: {
// render image previewer via FileNameEditor
window.sfMetadataContext.eventBus.dispatch(METADATA_EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER);
break;
}
default: {
openOthers();
break;
}
}
};
if (!cellValue) return null;
return (
<>