haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-09 10:57:27 +00:00
Code Issues Releases Wiki Activity

Router optimized (#2565)

Browse Source
This commit is contained in:
杨顺强 2018-11-26 17:53:18 +08:00 committed by Daniel Pan
parent f6a0b30281
commit 50a04fed0c
12 changed files with 143 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/app.js
View File

@ -16,6 +16,7 @@ import ShareAdminFolders from './pages/share-admin/folders';
import ShareAdminShareLinks from './pages/share-admin/share-links'; import ShareAdminShareLinks from './pages/share-admin/share-links';
import ShareAdminUploadLinks from './pages/share-admin/upload-links'; import ShareAdminUploadLinks from './pages/share-admin/upload-links';
import SharedLibraries from './pages/shared-libs/shared-libs'; import SharedLibraries from './pages/shared-libs/shared-libs';
import MainContentWrapper from './components/main-content-wrapper';
import 'seafile-ui'; import 'seafile-ui';
import './assets/css/fa-solid.css'; import './assets/css/fa-solid.css';
@ -25,6 +26,16 @@ import './css/layout.css';
import './css/toolbar.css'; import './css/toolbar.css';
import './css/search.css'; import './css/search.css';
const FilesActivitiesWrapper = MainContentWrapper(FilesActivities);
const DraftsViewWrapper = MainContentWrapper(DraftsView);
const StarredWrapper = MainContentWrapper(Starred);
const LinkedDevicesWrapper = MainContentWrapper(LinkedDevices);
const SharedLibrariesWrapper = MainContentWrapper(SharedLibraries);
const ShareAdminLibrariesWrapper = MainContentWrapper(ShareAdminLibraries);
const ShareAdminFoldersWrapper = MainContentWrapper(ShareAdminFolders);
const ShareAdminShareLinksWrapper = MainContentWrapper(ShareAdminShareLinks);
const ShareAdminUploadLinksWrapper = MainContentWrapper(ShareAdminUploadLinks);
class App extends Component { class App extends Component {
constructor(props) { constructor(props) {
@ -91,15 +102,14 @@ class App extends Component {
render() { render() {
let { currentTab } = this.state; let { currentTab } = this.state;
return ( return (
<div id="main"> <div id="main">
<SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} draftCounts={this.state.draftCounts} /> <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} draftCounts={this.state.draftCounts} />
<MainPanel> <MainPanel>
<Router> <Router>
<FilesActivities path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/> <FilesActivitiesWrapper path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<DraftsView path={siteRoot + 'drafts'} <DraftsViewWrapper path={siteRoot + 'drafts'}
currentTab={currentTab} currentTab={currentTab}
tabItemClick={this.tabItemClick} tabItemClick={this.tabItemClick}
onShowSidePanel={this.onShowSidePanel} onShowSidePanel={this.onShowSidePanel}
@ -113,14 +123,14 @@ class App extends Component {
updateDraftsList={this.updateDraftsList} updateDraftsList={this.updateDraftsList}
/> />
<ReviewContent path='reviews' /> <ReviewContent path='reviews' />
</DraftsView> </DraftsViewWrapper>
<Starred path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} /> <StarredWrapper path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<LinkedDevices path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} /> <LinkedDevicesWrapper path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<ShareAdminLibraries path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} /> <ShareAdminLibrariesWrapper path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<ShareAdminFolders path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} /> <ShareAdminFoldersWrapper path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} /> <ShareAdminShareLinksWrapper path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} /> <ShareAdminUploadLinksWrapper path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
<SharedLibraries path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} /> <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
</Router> </Router>
</MainPanel> </MainPanel>
</div> </div>

22
frontend/src/components/main-content-wrapper.js Normal file
View File

@ -0,0 +1,22 @@
import React, { Fragment } from 'react';
import GeneralToolBar from './toolbar/general-toolbar';
const MainContentWrapper = (WrapperedComponent) => {
return class extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Fragment>
<GeneralToolBar {...this.props} />
<WrapperedComponent {...this.props} />
</Fragment>
);
}
}
}
export default MainContentWrapper;

4
frontend/src/components/toolbar/general-toolbar.js
View File

@ -13,7 +13,7 @@ class GeneralToolbar extends React.Component {
let { onShowSidePanel, onSearchedClick } = this.props; let { onShowSidePanel, onSearchedClick } = this.props;
let placeHolder = this.props.searchPlaceholder || 'Search files in this library'; let placeHolder = this.props.searchPlaceholder || 'Search files in this library';
return ( return (
<Fragment> <div className="main-panel-north">
<div className="cur-view-toolbar"> <div className="cur-view-toolbar">
<span <span
className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none"
@ -25,7 +25,7 @@ class GeneralToolbar extends React.Component {
searchPlaceholder={placeHolder} searchPlaceholder={placeHolder}
onSearchedClick={onSearchedClick} onSearchedClick={onSearchedClick}
/> />
</Fragment> </div>
); );
} }
} }

28
frontend/src/pages/dashboard/files-activities.js
View File

@ -1,8 +1,7 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { gettext, siteRoot } from '../../utils/constants'; import { gettext, siteRoot } from '../../utils/constants';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
const contentPropTypes = { const contentPropTypes = {
data: PropTypes.object.isRequired, data: PropTypes.object.isRequired,
@ -245,25 +244,16 @@ class FilesActivities extends Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-center">
<div className="main-panel-north"> <div className="cur-view-container" id="activities">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <h3 className="sf-heading">{gettext('Activities')}</h3>
onShowSidePanel={this.props.onShowSidePanel} </div>
onSearchedClick={this.props.onSearchedClick} <div className="cur-view-content" onScroll={this.handleScroll}>
/> <FileActivitiesContent data={this.state} />
</div>
<div className="main-panel-center">
<div className="cur-view-container" id="activities">
<div className="cur-view-path">
<h3 className="sf-heading">{gettext('Activities')}</h3>
</div>
<div className="cur-view-content" onScroll={this.handleScroll}>
<FileActivitiesContent data={this.state} />
</div>
</div> </div>
</div> </div>
</Fragment> </div>
); );
} }
} }

38
frontend/src/pages/drafts/drafts-view.js
View File

@ -1,8 +1,7 @@
import React, { Fragment } from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { siteRoot, gettext } from '../../utils/constants'; import { siteRoot, gettext } from '../../utils/constants';
import { Link } from '@reach/router'; import { Link } from '@reach/router';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
const propTypes = { const propTypes = {
currentTab: PropTypes.string.isRequired, currentTab: PropTypes.string.isRequired,
@ -21,30 +20,21 @@ class DraftsView extends React.Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-center">
<div className="main-panel-north"> <div className="cur-view-container">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <ul className="tab-tabs-nav">
onShowSidePanel={this.props.onShowSidePanel} <li className={`tab ${this.props.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
onSearchedClick={this.props.onSearchedClick} <Link className='a' to={siteRoot + 'drafts/'} title={gettext('Drafts')}>{gettext('Drafts')}</Link>
/> </li>
</div> <li className={`tab ${this.props.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
<div className="main-panel-center"> <Link className='a' to={siteRoot + 'drafts/reviews/'} title={gettext('reviews')}>{gettext('Reviews')}</Link>
<div className="cur-view-container"> </li>
<div className="cur-view-path"> </ul>
<ul className="tab-tabs-nav">
<li className={`tab ${this.props.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
<Link className='a' to={siteRoot + 'drafts/'} title={gettext('Drafts')}>{gettext('Drafts')}</Link>
</li>
<li className={`tab ${this.props.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
<Link className='a' to={siteRoot + 'drafts/reviews/'} title={gettext('reviews')}>{gettext('Reviews')}</Link>
</li>
</ul>
</div>
{this.props.children}
</div> </div>
{this.props.children}
</div> </div>
</Fragment> </div>
); );
} }
} }

28
frontend/src/pages/linked-devices/linked-devices.js
View File

@ -1,8 +1,7 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import moment from 'moment'; import moment from 'moment';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { gettext, loginUrl } from '../../utils/constants'; import { gettext, loginUrl } from '../../utils/constants';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
import Toast from '../../components/toast'; import Toast from '../../components/toast';
class Content extends Component { class Content extends Component {
@ -195,25 +194,16 @@ class LinkedDevices extends Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-center">
<div className="main-panel-north"> <div className="cur-view-container" id="linked-devices">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
onShowSidePanel={this.props.onShowSidePanel} </div>
onSearchedClick={this.props.onSearchedClick} <div className="cur-view-content">
/> <Content data={this.state} />
</div>
<div className="main-panel-center">
<div className="cur-view-container" id="linked-devices">
<div className="cur-view-path">
<h3 className="sf-heading">{gettext('Linked Devices')}</h3>
</div>
<div className="cur-view-content">
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
</Fragment> </div>
); );
} }
} }

28
frontend/src/pages/share-admin/folders.js
View File

@ -1,8 +1,7 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants'; import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
class Content extends Component { class Content extends Component {
@ -282,25 +281,16 @@ class ShareAdminFolders extends Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-center">
<div className="main-panel-north"> <div className="cur-view-container" id="share-admin-libs">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <h3 className="sf-heading">{gettext("Folders")}</h3>
onShowSidePanel={this.props.onShowSidePanel} </div>
onSearchedClick={this.props.onSearchedClick} <div className="cur-view-content">
/> <Content data={this.state} />
</div>
<div className="main-panel-center">
<div className="cur-view-container" id="share-admin-libs">
<div className="cur-view-path">
<h3 className="sf-heading">{gettext("Folders")}</h3>
</div>
<div className="cur-view-content">
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
</Fragment> </div>
); );
} }
} }

28
frontend/src/pages/share-admin/libraries.js
View File

@ -1,8 +1,7 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants'; import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
class Content extends Component { class Content extends Component {
@ -289,25 +288,16 @@ class ShareAdminLibraries extends Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-center">
<div className="main-panel-north"> <div className="cur-view-container" id="share-admin-libs">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <h3 className="sf-heading">{gettext("Libraries")}</h3>
onShowSidePanel={this.props.onShowSidePanel} </div>
onSearchedClick={this.props.onSearchedClick} <div className="cur-view-content">
/> <Content data={this.state} />
</div>
<div className="main-panel-center">
<div className="cur-view-container" id="share-admin-libs">
<div className="cur-view-path">
<h3 className="sf-heading">{gettext("Libraries")}</h3>
</div>
<div className="cur-view-content">
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
</Fragment> </div>
); );
} }
} }

42
frontend/src/pages/share-admin/share-links.js
View File

@ -1,11 +1,10 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import { Link } from '@reach/router'; import { Link } from '@reach/router';
import moment from 'moment'; import moment from 'moment';
import { Modal, ModalHeader, ModalBody } from 'reactstrap'; import { Modal, ModalHeader, ModalBody } from 'reactstrap';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext, siteRoot, loginUrl, isPro, canGenerateUploadLink } from '../../utils/constants'; import { gettext, siteRoot, loginUrl, isPro, canGenerateUploadLink } from '../../utils/constants';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
class Content extends Component { class Content extends Component {
constructor(props) { constructor(props) {
@ -238,32 +237,23 @@ class ShareAdminShareLinks extends Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-cneter">
<div className="main-panel-north"> <div className="cur-view-container">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <ul className="nav">
onShowSidePanel={this.props.onShowSidePanel} <li className="nav-item">
onSearchedClick={this.props.onSearchedClick} <Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link>
/> </li>
</div> { canGenerateUploadLink ?
<div className="main-panel-cneter"> <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
<div className="cur-view-container"> : '' }
<div className="cur-view-path"> </ul>
<ul className="nav"> </div>
<li className="nav-item"> <div className="cur-view-content">
<Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link> <Content data={this.state} />
</li>
{ canGenerateUploadLink ?
<li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
: '' }
</ul>
</div>
<div className="cur-view-content">
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
</Fragment> </div>
); );
} }
} }

38
frontend/src/pages/share-admin/upload-links.js
View File

@ -1,11 +1,10 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import { Link } from '@reach/router'; import { Link } from '@reach/router';
import moment from 'moment'; import moment from 'moment';
import { Modal, ModalHeader, ModalBody } from 'reactstrap'; import { Modal, ModalHeader, ModalBody } from 'reactstrap';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext, siteRoot, loginUrl, isPro, canGenerateShareLink } from '../../utils/constants'; import { gettext, siteRoot, loginUrl, isPro, canGenerateShareLink } from '../../utils/constants';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
class Content extends Component { class Content extends Component {
constructor(props) { constructor(props) {
@ -227,30 +226,21 @@ class ShareAdminUploadLinks extends Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-center">
<div className="main-panel-north"> <div className="cur-view-container">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <ul className="nav">
onShowSidePanel={this.props.onShowSidePanel} { canGenerateShareLink ?
onSearchedClick={this.props.onSearchedClick} <li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
/> : '' }
</div> <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">{gettext('Upload Links')}</Link></li>
<div className="main-panel-center"> </ul>
<div className="cur-view-container"> </div>
<div className="cur-view-path"> <div className="cur-view-content">
<ul className="nav"> <Content data={this.state} />
{ canGenerateShareLink ?
<li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
: '' }
<li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">{gettext('Upload Links')}</Link></li>
</ul>
</div>
<div className="cur-view-content">
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
</Fragment> </div>
); );
} }
} }

28
frontend/src/pages/shared-libs/shared-libs.js
View File

@ -1,10 +1,9 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import moment from 'moment'; import moment from 'moment';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants'; import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
import Loading from '../../components/loading'; import Loading from '../../components/loading';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
class Content extends Component { class Content extends Component {
@ -252,25 +251,16 @@ class SharedLibraries extends Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-center">
<div className="main-panel-north"> <div className="cur-view-container">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <h3 className="sf-heading">{gettext("Shared with me")}</h3>
onShowSidePanel={this.props.onShowSidePanel} </div>
onSearchedClick={this.props.onSearchedClick} <div className="cur-view-content">
/> <Content data={this.state} />
</div>
<div className="main-panel-center">
<div className="cur-view-container">
<div className="cur-view-path">
<h3 className="sf-heading">{gettext("Shared with me")}</h3>
</div>
<div className="cur-view-content">
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
</Fragment> </div>
); );
} }
} }

28
frontend/src/pages/starred/starred.js
View File

@ -1,8 +1,7 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext, siteRoot, loginUrl } from '../../utils/constants'; import { gettext, siteRoot, loginUrl } from '../../utils/constants';
import GeneralToolbar from '../../components/toolbar/general-toolbar';
class Content extends Component { class Content extends Component {
@ -263,25 +262,16 @@ class Starred extends Component {
render() { render() {
return ( return (
<Fragment> <div className="main-panel-center">
<div className="main-panel-north"> <div className="cur-view-container" id="starred">
<GeneralToolbar <div className="cur-view-path">
searchPlaceholder={'Search Files'} <h3 className="sf-heading">{gettext('Favorites')}</h3>
onShowSidePanel={this.props.onShowSidePanel} </div>
onSearchedClick={this.props.onSearchedClick} <div className="cur-view-content">
/> <Content data={this.state} />
</div>
<div className="main-panel-center">
<div className="cur-view-container" id="starred">
<div className="cur-view-path">
<h3 className="sf-heading">{gettext('Favorites')}</h3>
</div>
<div className="cur-view-content">
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
</Fragment> </div>
); );
} }
} }