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

fix share TabPane (#4287)

Browse Source
This commit is contained in:
sniper-py
2019-11-22 14:36:37 +08:00
committed by Daniel Pan
parent ae14afe04e
commit 04c4ba55c4
1 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/src/components/dialog/share-dialog.js
View File

@@ -1,6 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import { gettext, username, canGenerateShareLink, canGenerateUploadLink, canInvitePeople } from '../../utils/constants'; import { gettext, username, canGenerateShareLink, canGenerateUploadLink, canInvitePeople } from '../../utils/constants';
import ShareToUser from './share-to-user'; import ShareToUser from './share-to-user';
import ShareToGroup from './share-to-group'; import ShareToGroup from './share-to-group';
@@ -51,7 +51,7 @@ class ShareDialog extends React.Component {
} }
getInitialActiveTab = () => { getInitialActiveTab = () => {
const {repoEncrypted, userPerm, enableDirPrivateShare} = this.props; const { repoEncrypted, userPerm, enableDirPrivateShare } = this.props;
const enableShareLink = !repoEncrypted && canGenerateShareLink; const enableShareLink = !repoEncrypted && canGenerateShareLink;
const enableUploadLink = !repoEncrypted && canGenerateUploadLink && userPerm == 'rw'; const enableUploadLink = !repoEncrypted && canGenerateUploadLink && userPerm == 'rw';
@@ -66,7 +66,7 @@ class ShareDialog extends React.Component {
toggle = (tab) => { toggle = (tab) => {
if (this.state.activeTab !== tab) { if (this.state.activeTab !== tab) {
this.setState({activeTab: tab}); this.setState({ activeTab: tab });
} }
} }
@@ -77,7 +77,7 @@ class ShareDialog extends React.Component {
} }
let activeTab = this.state.activeTab; let activeTab = this.state.activeTab;
const {repoEncrypted, userPerm, enableDirPrivateShare, itemType} = this.props; const { repoEncrypted, userPerm, enableDirPrivateShare, itemType } = this.props;
const enableShareLink = !repoEncrypted && canGenerateShareLink; const enableShareLink = !repoEncrypted && canGenerateShareLink;
const enableUploadLink = !repoEncrypted && canGenerateUploadLink && userPerm == 'rw'; const enableUploadLink = !repoEncrypted && canGenerateUploadLink && userPerm == 'rw';
@@ -99,7 +99,7 @@ class ShareDialog extends React.Component {
</NavLink> </NavLink>
</NavItem> </NavItem>
} }
{itemType === 'dir' && {itemType === 'dir' &&
<NavItem> <NavItem>
<NavLink className={activeTab === 'internalLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'internalLink')}> <NavLink className={activeTab === 'internalLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'internalLink')}>
{gettext('Internal Link')} {gettext('Internal Link')}
@@ -119,11 +119,11 @@ class ShareDialog extends React.Component {
</NavLink> </NavLink>
</NavItem> </NavItem>
{canInvitePeople && {canInvitePeople &&
<NavItem> <NavItem>
<NavLink className={activeTab === 'invitePeople' ? 'active' : ''} onClick={this.toggle.bind(this, 'invitePeople')}> <NavLink className={activeTab === 'invitePeople' ? 'active' : ''} onClick={this.toggle.bind(this, 'invitePeople')}>
{gettext('Invite People')} {gettext('Invite People')}
</NavLink> </NavLink>
</NavItem> </NavItem>
} }
</Fragment> </Fragment>
} }
@@ -131,45 +131,49 @@ class ShareDialog extends React.Component {
</div> </div>
<div className="share-dialog-main"> <div className="share-dialog-main">
<TabContent activeTab={this.state.activeTab}> <TabContent activeTab={this.state.activeTab}>
{enableShareLink && {(enableShareLink && activeTab === 'shareLink') &&
<TabPane tabId="shareLink"> <TabPane tabId="shareLink">
<GenerateShareLink <GenerateShareLink
itemPath={this.props.itemPath} itemPath={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
closeShareDialog={this.props.toggleDialog} closeShareDialog={this.props.toggleDialog}
itemType={itemType} itemType={itemType}
/> />
</TabPane> </TabPane>
} }
{enableUploadLink && {(enableUploadLink && activeTab === 'uploadLink') &&
<TabPane tabId="uploadLink"> <TabPane tabId="uploadLink">
<GenerateUploadLink <GenerateUploadLink
itemPath={this.props.itemPath} itemPath={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
closeShareDialog={this.props.toggleDialog} closeShareDialog={this.props.toggleDialog}
/> />
</TabPane> </TabPane>
} }
{itemType === 'dir' && activeTab === 'internalLink' && {(itemType === 'dir' && activeTab === 'internalLink') &&
<InternalLink <InternalLink
path={this.props.itemPath} path={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
direntType={itemType} direntType={itemType}
/> />
} }
{enableDirPrivateShare && {enableDirPrivateShare &&
<Fragment> <Fragment>
<TabPane tabId="shareToUser"> {activeTab === 'shareToUser' &&
<ShareToUser itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner}/> <TabPane tabId="shareToUser">
</TabPane> <ShareToUser itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner} />
{canInvitePeople && </TabPane>
<TabPane tabId="invitePeople"> }
<ShareToInvitePeople itemPath={this.props.itemPath} repoID={this.props.repoID}/> {activeTab === 'shareToGroup' &&
</TabPane> <TabPane tabId="shareToGroup">
<ShareToGroup itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner} />
</TabPane>
}
{(canInvitePeople && activeTab === 'invitePeople') &&
<TabPane tabId="invitePeople">
<ShareToInvitePeople itemPath={this.props.itemPath} repoID={this.props.repoID} />
</TabPane>
} }
<TabPane tabId="shareToGroup">
<ShareToGroup itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner}/>
</TabPane>
</Fragment> </Fragment>
} }
</TabContent> </TabContent>
@@ -200,18 +204,20 @@ class ShareDialog extends React.Component {
</div> </div>
<div className="share-dialog-main"> <div className="share-dialog-main">
<TabContent activeTab={this.state.activeTab}> <TabContent activeTab={this.state.activeTab}>
<TabPane tabId="shareLink"> {activeTab === 'shareLink' &&
<GenerateShareLink <TabPane tabId="shareLink">
itemPath={this.props.itemPath} <GenerateShareLink
repoID={this.props.repoID} itemPath={this.props.itemPath}
closeShareDialog={this.props.toggleDialog} repoID={this.props.repoID}
itemType={itemType} closeShareDialog={this.props.toggleDialog}
/> itemType={itemType}
</TabPane> />
</TabPane>
}
{activeTab === 'internalLink' && {activeTab === 'internalLink' &&
<InternalLink <InternalLink
path={this.props.itemPath} path={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
/> />
} }
</TabContent> </TabContent>
@@ -225,7 +231,7 @@ class ShareDialog extends React.Component {
const enableShareLink = !repoEncrypted && canGenerateShareLink; const enableShareLink = !repoEncrypted && canGenerateShareLink;
return ( return (
<div> <div>
<Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog" toggle={this.props.toggleDialog}> <Modal isOpen={true} style={{ maxWidth: '720px' }} className="share-dialog" toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></ModalHeader> <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></ModalHeader>
<ModalBody className="share-dialog-content"> <ModalBody className="share-dialog-content">
{(itemType === 'library' || itemType === 'dir') && this.renderDirContent()} {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}