From 57954854d07bff2de354b4f4e64743a7e2efd647 Mon Sep 17 00:00:00 2001 From: Michael An <2331806369@qq.com> Date: Wed, 11 Sep 2024 10:13:10 +0800 Subject: [PATCH] change markdown view in metadata (#6746) * change markdown viewer in metadata * fix side nav click event --- .../src/components/common/event-bus-type.js | 1 + .../dir-view-mode/dir-column-view.js | 5 ++- .../dir-view-mode/markdown-viewer-dialog.js | 26 ++++------- frontend/src/components/main-side-nav.js | 6 +-- .../cell-editor/file-name-editor.js | 16 ++++++- .../record/cell/operation-btn/index.js | 44 ++++++++----------- .../table-masks/interaction-masks/index.js | 26 +++-------- .../lib-content-view/lib-content-container.js | 3 ++ .../lib-content-view/lib-content-view.js | 40 ++++++++++++++++- 9 files changed, 96 insertions(+), 71 deletions(-) diff --git a/frontend/src/components/common/event-bus-type.js b/frontend/src/components/common/event-bus-type.js index 187a732035..f1cd905022 100644 --- a/frontend/src/components/common/event-bus-type.js +++ b/frontend/src/components/common/event-bus-type.js @@ -4,4 +4,5 @@ export const EVENT_BUS_TYPE = { SEARCH_LIBRARY_CONTENT: 'search_library_content', RESTORE_IMAGE: 'restore_image', + OPEN_MARKDOWN_DIALOG: 'open_markdown_dialog', }; diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js index 1b17f94330..d16eb763cc 100644 --- a/frontend/src/components/dir-view-mode/dir-column-view.js +++ b/frontend/src/components/dir-view-mode/dir-column-view.js @@ -281,11 +281,12 @@ class DirColumnView extends React.Component { } {this.props.isViewFile && { - e.preventDefault(); - let { path, repoID, currentDirent } = this.props; - let { name } = currentDirent || {}; - let newUrl = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + (path.endsWith('/') ? '' : '/') + name; - window.open(newUrl, '_blank'); - }; - render() { - const { currentDirent } = this.props; - const { name } = currentDirent || {}; return (
- {name} + {this.props.fileName}
- +
@@ -59,7 +49,7 @@ class MarkdownViewerDialog extends React.Component { latestContributor={this.props.latestContributor} onLinkClick={this.props.onLinkClick} repoID={this.props.repoID} - path={this.props.path} + path={this.props.filePath} > diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js index 656c7b4c1f..92f6022ebf 100644 --- a/frontend/src/components/main-side-nav.js +++ b/frontend/src/components/main-side-nav.js @@ -152,7 +152,7 @@ class MainSideNav extends React.Component { className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide-share-admin' : 'side-panel-slide-up-share-admin'}`} style={style} > - {canAddRepo && canShareRepo && ( + {canAddRepo && canShareRepo && height !== 0 && (
  • this.tabItemClick(e, 'share-admin-libs')}> @@ -160,7 +160,7 @@ class MainSideNav extends React.Component {
    • )} - {canShareRepo && ( + {canShareRepo && height !== 0 && (
  • this.tabItemClick(e, 'share-admin-folders')}> @@ -168,7 +168,7 @@ class MainSideNav extends React.Component {
    • )} - {linksNavItem} + { height !== 0 && linksNavItem} ); } diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/file-name-editor.js b/frontend/src/metadata/metadata-view/components/cell-editor/file-name-editor.js index 32e3b908e7..278d99d7d8 100644 --- a/frontend/src/metadata/metadata-view/components/cell-editor/file-name-editor.js +++ b/frontend/src/metadata/metadata-view/components/cell-editor/file-name-editor.js @@ -4,6 +4,7 @@ import { ModalPortal } from '@seafile/sf-metadata-ui-component'; import { PRIVATE_COLUMN_KEY } from '../../_basic'; 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 } from '../../../../utils/constants'; const FileNameEditor = ({ column, record, table, onCommitCancel }) => { @@ -59,7 +60,7 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => { const suffix = fileName.slice(index).toLowerCase(); if (suffix.indexOf(' ') > -1) return ''; if (Utils.imageCheck(fileName)) return 'image'; - if (Utils.isMarkdownFile(fileName)) return 'file'; + if (Utils.isMarkdownFile(fileName)) return 'markdown'; if (Utils.isSdocFile(fileName)) return 'sdoc'; return ''; }, [_isDir, fileName]); @@ -92,6 +93,19 @@ 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 ( diff --git a/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record/cell/operation-btn/index.js b/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record/cell/operation-btn/index.js index d48dd7ebbd..526f255a14 100644 --- a/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record/cell/operation-btn/index.js +++ b/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record/cell/operation-btn/index.js @@ -8,11 +8,7 @@ import { gettext } from '../../../../../../../../utils'; import './index.css'; -const CellOperationBtn = ({ - isDir, - column, - value, -}) => { +const CellOperationBtn = ({ isDir, column, value }) => { const openFile = useCallback((event) => { event.stopPropagation(); @@ -20,27 +16,23 @@ const CellOperationBtn = ({ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER); }, []); - if (!value) return null; - const { type } = column; - if (type === CellType.FILE_NAME) { - const target = 'sf-metadata-cell-open-file-btn'; - return ( - <> - - - {gettext(isDir ? 'Open folder' : 'Open file')} - - - ); - } - return null; + if (!value || column.type !== CellType.FILE_NAME) return null; + + return ( + <> + + + {isDir ? gettext('Open folder') : gettext('Open file')} + + + ); }; CellOperationBtn.propTypes = { diff --git a/frontend/src/metadata/metadata-view/components/view/table/table-masks/interaction-masks/index.js b/frontend/src/metadata/metadata-view/components/view/table/table-masks/interaction-masks/index.js index 1f5eac4719..350baa7103 100644 --- a/frontend/src/metadata/metadata-view/components/view/table/table-masks/interaction-masks/index.js +++ b/frontend/src/metadata/metadata-view/components/view/table/table-masks/interaction-masks/index.js @@ -1011,16 +1011,15 @@ class InteractionMasks extends React.Component { renderSingleCellSelectView = () => { const { columns } = this.props; - const { - isEditorEnabled, - selectedPosition, - } = this.state; + const { isEditorEnabled, selectedPosition } = this.state; const isDragEnabled = this.isSelectedCellEditable(); const canEdit = window.sfMetadataContext.canModifyRows(); const showDragHandle = (isDragEnabled && canEdit); const column = getSelectedColumn({ selectedPosition, columns }); const { type: columnType } = column || {}; - if (isEditorEnabled && columnType !== CellType.RATE && columnType !== CellType.CHECKBOX && columnType !== CellType.FILE_NAME) return null; + if (isEditorEnabled && columnType !== CellType.RATE && columnType !== CellType.CHECKBOX && columnType !== CellType.FILE_NAME) { + return null; + } if (!this.isGridSelected()) return null; const props = { @@ -1030,12 +1029,7 @@ class InteractionMasks extends React.Component { }; return ( - {showDragHandle ? - - : null} + {showDragHandle && } ); }; @@ -1056,12 +1050,7 @@ class InteractionMasks extends React.Component { rowHeight={rowHeight} getSelectedRangeDimensions={this.getSelectedRangeDimensions} > - {showDragHandle ? - - : null} + {showDragHandle && } , )} - {isSelectedSingleCell && this.renderSingleCellSelectView()} - {!isSelectedSingleCell && this.renderCellRangeSelectView()} + {isSelectedSingleCell ? this.renderSingleCellSelectView() : this.renderCellRangeSelectView()} {isEditorEnabled && ( )} {this.props.isDirentDetailShow && ( diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index 40c2d4233a..665fcc310a 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -99,6 +99,9 @@ class LibContentView extends React.Component { this.isNeedUpdateHistoryState = true; // Load, refresh page, switch mode for the first time, no need to set historyState this.currentMoveItemName = ''; this.currentMoveItemPath = ''; + this.markdownFileName = ''; + this.markdownFileParentDir = ''; + this.unsubscribeEventBus = null; } showDirentDetail = (direntDetailPanelTab) => { @@ -129,6 +132,7 @@ class LibContentView extends React.Component { }; componentDidMount() { + this.unsubscribeEvent = this.props.eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick); this.calculatePara(this.props); } @@ -139,8 +143,7 @@ class LibContentView extends React.Component { } calculatePara = async (props) => { - const { repoID, eventBus } = props; - this.unsubscribeEvent = eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick); + const { repoID } = props; const path = this.getPathFromLocation(repoID); @@ -227,6 +230,7 @@ class LibContentView extends React.Component { window.onpopstate = this.oldonpopstate; collabServer.unwatchRepo(this.props.repoID, this.onRepoUpdateEvent); this.unsubscribeEvent(); + this.unsubscribeEventBus && this.unsubscribeEventBus(); this.props.eventBus.dispatch(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, { repoID: '', repoName: '', @@ -457,6 +461,13 @@ class LibContentView extends React.Component { window.history.pushState({ url: url, path: path }, path, url); }; + openMarkDownDialog = (parentDir, fileName) => { + this.markdownFileParentDir = parentDir; + this.markdownFileName = fileName; + const markdownFilePath = Utils.joinPath(parentDir, fileName); + this.showFile(markdownFilePath, true); + }; + showFile = (filePath, noRedirection) => { let repoID = this.props.repoID; @@ -519,6 +530,10 @@ class LibContentView extends React.Component { path: filePath, viewId: viewId, isDirentDetailShow: false + }, () => { + setTimeout(() => { + this.unsubscribeEventBus = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, this.openMarkDownDialog); + }, 1); }); const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?view=${encodeURIComponent(viewId)}`; window.history.pushState({ url: url, path: '' }, '', url); @@ -2003,9 +2018,27 @@ class LibContentView extends React.Component { this.setState({ currentMode: cookie.load('seafile_view_mode') || LIST_MODE, }); + this.markdownFileName = ''; + this.markdownFileParentDir = ''; } }; + getMarkDownFilePath = () => { + return this.markdownFileParentDir || this.state.path || ''; + }; + + getMarkDownFileName = () => { + return this.markdownFileName || this.state.currentDirent.name || ''; + }; + + openMarkdownFile = () => { + let { repoID } = this.props; + let path = this.getMarkDownFilePath(); + let name = this.getMarkDownFileName(); + let newUrl = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + (path.endsWith('/') ? '' : '/') + name; + window.open(newUrl, '_blank'); + }; + recalculateSelectedDirents = (unSelectNames, newDirentList) => { let selectedDirentList = this.state.selectedDirentList.slice(0); if (selectedDirentList.length > 0) { @@ -2289,6 +2322,9 @@ class LibContentView extends React.Component { onUploadFolder={this.onUploadFolder} eventBus={this.props.eventBus} onCloseMarkdownViewDialog={this.onCloseMarkdownViewDialog} + getMarkDownFilePath={this.getMarkDownFilePath} + getMarkDownFileName={this.getMarkDownFileName} + openMarkdownFile={this.openMarkdownFile} /> {canUpload && this.state.pathExist && !this.state.isViewFile && (