1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-01 15:09:14 +00:00

repair router bug

This commit is contained in:
shanshuirenjia
2018-12-13 14:40:09 +08:00
parent 55a2945c17
commit 4d890a4b7c
6 changed files with 85 additions and 41 deletions

View File

@@ -1,7 +1,7 @@
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from '@reach/router';
import { gettext, siteRoot } from './utils/constants';
import { Router } from '@reach/router';
import { siteRoot } from './utils/constants';
import SidePanel from './components/side-panel';
import MainPanel from './components/main-panel';
import DraftsView from './pages/drafts/drafts-view';
@@ -53,8 +53,9 @@ class App extends Component {
draftList:[],
isLoadingDraft: true,
currentTab: '/',
pathPrefix: null,
pathPrefix: [],
};
this.dirViewPanels = ['my-libs', 'shared-libs', 'org']; // and group
}
componentDidMount() {
@@ -100,41 +101,55 @@ class App extends Component {
}
tabItemClick = (tabName, groupID) => {
let pathPrefix = this.generatorPrefix(tabName, groupID);
let pathPrefix = [];
if (groupID || this.dirViewPanels.indexOf(tabName) > -1) {
pathPrefix = this.generatorPrefix(tabName, groupID);
}
this.setState({
currentTab: tabName,
pathPrefix: pathPrefix
});
}
generatorPrefix = (currentTab, groupID) => {
if (groupID) { //group
return (
<Fragment>
<Link to={siteRoot + 'groups/'} className="normal">{gettext('Groups')}</Link>
<span className="path-split">/</span>
<Link to={siteRoot + 'group/' + groupID + '/'} className="normal">{currentTab}</Link>
<span className="path-split">/</span>
</Fragment>
);
generatorPrefix = (tabName, groupID) => {
let pathPrefix = [];
if (groupID) {
let navTab1 = {
url: siteRoot + 'groups/',
showName: 'Groups',
name: 'groups',
id: null,
}
let navTab2 = {
url: siteRoot + 'group/' + groupID + '/',
showName: tabName,
name: tabName,
id: groupID,
};
pathPrefix.push(navTab1);
pathPrefix.push(navTab2);
} else {
let navTab = {
url: siteRoot + tabName + '/',
showName: this.getTabShowName(tabName, groupID),
name: tabName,
id: null,
};
pathPrefix.push(navTab);
}
if (currentTab === 'my-libs') {
return (
<Fragment>
<Link to={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</Link>
<span className="path-split">/</span>
</Fragment>
);
return pathPrefix;
}
getTabShowName = (tabName) => {
if (tabName === 'my-libs') {
return 'Libraries';
}
if (currentTab === 'shared-libs') {
return (
<Fragment>
<Link to={siteRoot + 'shared-libs/'} className="normal">{gettext('Shared with me')}</Link>
<span className="path-split">/</span>
</Fragment>
);
if (tabName === 'shared-libs') {
return 'Shared with me';
}
if (tabName === 'org') {
return 'Shared with all';
}
return null;
}
render() {
@@ -170,9 +185,9 @@ class App extends Component {
<SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
<DirView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel}/>
<DirView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
<Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
<Group path={siteRoot + 'group/:groupID'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
<Group path={siteRoot + 'group/:groupID'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
<WikisWrapper path={siteRoot + 'wikis'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
</Router>
</MainPanel>

View File

@@ -5,9 +5,10 @@ import { siteRoot, gettext } from '../../utils/constants';
const propTypes = {
repoName: PropTypes.string.isRequired,
pathPrefix: PropTypes.object,
currentPath: PropTypes.string.isRequired,
onPathClick: PropTypes.func.isRequired,
onTabNavClick: PropTypes.func,
pathPrefix: PropTypes.array,
};
class DirPath extends React.Component {
@@ -17,6 +18,10 @@ class DirPath extends React.Component {
this.props.onPathClick(path);
}
onTabNavClick = (tabName, id) => {
this.props.onTabNavClick(tabName, id);
}
turnPathToLink = (path) => {
path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
let pathList = path.split('/');
@@ -47,13 +52,27 @@ class DirPath extends React.Component {
let pathElem = this.turnPathToLink(currentPath);
return (
<div className="path-containter">
{this.props.pathPrefix ?
this.props.pathPrefix :
<Fragment>
<Link to={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</Link>
{this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
return (
<Fragment key={index}>
<Link to={item.url} className="normal" onClick={() => this.onTabNavClick(item.name, item.id)}>{gettext(item.showName)}</Link>
<span className="path-split">/</span>
</Fragment>
</Fragment>
);
})}
{this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
<Fragment>
<Link to={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick.bind(this, 'my-libs')}>{gettext('Libraries')}</Link>
<span className="path-split">/</span>
</Fragment>
)
}
{!this.props.pathPrefix && (
<Fragment>
<a href={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick.bind(this, 'my-libs')}>{gettext('Libraries')}</a>
<span className="path-split">/</span>
</Fragment>
)}
{currentPath === '/' ?
<span>{repoName}</span>:
<a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>

View File

@@ -5,11 +5,12 @@ import DirTool from './dir-tool';
const propTypes = {
repoID: PropTypes.string.isRequired,
pathPrefix: PropTypes.object.isRequired,
repoName: PropTypes.string.isRequired,
permission: PropTypes.bool.isRequired,
currentPath: PropTypes.string.isRequired,
onPathClick: PropTypes.func.isRequired,
onTabNavClick: PropTypes.func,
pathPrefix: PropTypes.array,
};
class CurDirPath extends React.Component {
@@ -22,6 +23,7 @@ class CurDirPath extends React.Component {
pathPrefix={this.props.pathPrefix}
currentPath={this.props.currentPath}
onPathClick={this.props.onPathClick}
onTabNavClick={this.props.onTabNavClick}
/>
<DirTool
repoID={this.props.repoID}

View File

@@ -14,7 +14,7 @@ import FileUploader from '../file-uploader/file-uploader';
const propTypes = {
currentRepo: PropTypes.object,
pathPrefix: PropTypes.object.isRequired,
pathPrefix: PropTypes.array.isRequired,
path: PropTypes.string.isRequired,
repoID: PropTypes.string.isRequired,
repoName: PropTypes.string.isRequired,
@@ -40,6 +40,7 @@ const propTypes = {
onFileTagChanged: PropTypes.func.isRequired,
onMenuClick: PropTypes.func.isRequired,
onPathClick: PropTypes.func.isRequired,
onTabNavClick: PropTypes.func.isRequired,
updateDirent: PropTypes.func.isRequired,
onSearchedClick: PropTypes.func.isRequired,
onFileUploadSuccess: PropTypes.func.isRequired,
@@ -152,6 +153,7 @@ class DirPanel extends React.Component {
currentPath={this.props.path}
permission={this.props.permission}
onPathClick={this.props.onPathClick}
onTabNavClick={this.props.onTabNavClick}
/>
</div>
<div className="cur-view-content">

View File

@@ -11,7 +11,8 @@ import FileTag from '../../models/file-tag';
import Repo from '../../models/repo';
const propTypes = {
pathPrefix: PropTypes.object.isRequired,
pathPrefix: PropTypes.array.isRequired,
onTabNavClick: PropTypes.func.isRequired,
onMenuClick: PropTypes.func.isRequired,
};
@@ -456,6 +457,7 @@ class DirView extends React.Component {
onFileTagChanged={this.onFileTagChanged}
onMenuClick={this.onMenuClick}
onPathClick={this.onPathClick}
onTabNavClick={this.props.onTabNavClick}
updateDirent={this.updateDirent}
switchViewMode={this.switchViewMode}
onSearchedClick={this.onSearchedClick}

View File

@@ -180,6 +180,10 @@ class GroupView extends React.Component {
});
}
onTabNavClick = (tabName) => {
this.props.onTabNavClick(tabName);
}
render() {
let { errMessage, emptyTip, currentGroup } = this.state;
let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
@@ -203,7 +207,7 @@ class GroupView extends React.Component {
{currentGroup && (
<Fragment>
<div className="path-container">
<Link to={`${siteRoot}groups/`}>{gettext("Groups")}</Link>
<Link to={`${siteRoot}groups/`} onClick={() => this.onTabNavClick('groups')}>{gettext("Groups")}</Link>
<span className="path-split">/</span>
<span>{currentGroup.name}</span>
{currentGroup.parent_group_id !== 0 && (