Skip to content

Commit

Permalink
fix(metadata-table): open file via click (#6796)
Browse files Browse the repository at this point in the history
  • Loading branch information
@renjie-run
renjie-run authored Sep 19, 2024
1 parent 86770c4 commit 4022ce1
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 54 deletions.
42 changes: 0 additions & 42 deletions frontend/src/metadata/components/cell-editors/file-name-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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);
Expand All @@ -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>
Expand All @@ -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;
};

Expand Down
18 changes: 14 additions & 4 deletions frontend/src/metadata/views/table/table-main/records/record/cell/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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) => {
Expand Down
116 changes: 108 additions & 8 deletions frontend/src/metadata/views/table/table-main/records/record/cell/operation-btn/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 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 openFile = useCallback((event) => {
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 (
<>
Expand Down

0 comments on commit 4022ce1

Please sign in to comment.