mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-03 16:10:26 +00:00
optimized code
This commit is contained in:
shanshuirenjia
@@ -0,0 +1,232 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import moment from 'moment';
|
||||
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { gettext, siteRoot, isPro, username, folderPermEnabled } from '../../utils/constants';
|
||||
|
||||
const propTypes = {
|
||||
currentGroup: PropTypes.object,
|
||||
repo: PropTypes.object.isRequired,
|
||||
isItemFreezed: PropTypes.bool.isRequired,
|
||||
isShowRepoOwner: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
class RepoListItem extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
highlight: false,
|
||||
isOperationShow: false,
|
||||
isItemMenuShow: false,
|
||||
};
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
this.setState({
|
||||
highlight: true,
|
||||
isOperationShow: true,
|
||||
});
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
this.setState({
|
||||
highlight: false,
|
||||
isOperationShow: false,
|
||||
});
|
||||
}
|
||||
|
||||
toggleOperationMenu = () => {
|
||||
this.setState({
|
||||
isItemMenuShow: !this.state.isItemMenuShow
|
||||
});
|
||||
}
|
||||
|
||||
getRepoComputeParams = () => {
|
||||
let repo = this.props.repo;
|
||||
let currentGroup = this.props.currentGroup; //todo--change to libray
|
||||
let isReadyOnly = false;
|
||||
if ( repo.permission === 'r' || repo.permission === 'preview') {
|
||||
isReadyOnly = true;
|
||||
}
|
||||
let iconUrl = Utils.getLibIconUrl({
|
||||
is_encryted: repo.encrypted,
|
||||
is_readyonly: isReadyOnly,
|
||||
size: Utils.isHiDPI() ? 48 : 24
|
||||
});
|
||||
let iconTitle = Utils.getLibIconTitle({
|
||||
'encrypted': repo.encrypted,
|
||||
'is_admin': repo.is_admin,
|
||||
'permission': repo.permission
|
||||
});
|
||||
|
||||
//todo change to library; div-view is not compatibility
|
||||
let libPath = `${siteRoot}#group/${currentGroup.id}/lib/${this.props.repo.repo_id}/`;
|
||||
|
||||
return { iconUrl, iconTitle, libPath };
|
||||
}
|
||||
|
||||
generatorOperations = () => {
|
||||
let { repo, currentGroup } = this.props;
|
||||
let isStaff = currentGroup.admins.indexOf(username) > -1; //for group repolist;
|
||||
let isRepoOwner = repo.owner_email === username;
|
||||
let isAdmin = repo.is_admin;
|
||||
|
||||
let iconVisibility = this.state.isOperationShow ? '' : ' invisible';
|
||||
let shareIconClassName = 'sf2-icon-share sf2-x repo-share-btn op-icon' + iconVisibility;
|
||||
let unshareIconClassName = 'sf2-icon-x3 sf2-x op-icon' + iconVisibility;
|
||||
let deleteIconClassName = 'sf2-icon-delete sf2-x op-icon' + iconVisibility;
|
||||
let operationMenuToggleIconClassName = 'sf2-icon-caret-down item-operation-menu-toggle-icon op-icon';
|
||||
if (window.innerWidth >= 768) {
|
||||
operationMenuToggleIconClassName += iconVisibility;
|
||||
}
|
||||
|
||||
const commonToggle = (
|
||||
<DropdownToggle
|
||||
tag="a"
|
||||
href="#"
|
||||
className={operationMenuToggleIconClassName}
|
||||
title={gettext('More Operations')}
|
||||
onClick={this.clickOperationMenuToggle}
|
||||
data-toggle="dropdown"
|
||||
aria-expanded={this.state.isItemMenuShow}
|
||||
>
|
||||
</DropdownToggle>
|
||||
);
|
||||
|
||||
const commonOperationsInMenu = (
|
||||
<React.Fragment>
|
||||
<DropdownItem onClick={this.rename}>{gettext('Rename')}</DropdownItem>
|
||||
{folderPermEnabled ? <DropdownItem onClick={this.folderPerm}>{gettext('Folder Permission')}</DropdownItem> : null}
|
||||
<DropdownItem onClick={this.showDetails}>{gettext('Details')}</DropdownItem>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
let desktopOperations;
|
||||
let mobileOperationMenu;
|
||||
|
||||
const share = <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>;
|
||||
const unshare = <a href="#" className={unshareIconClassName} title={gettext("Unshare")} onClick={this.unshare}></a>
|
||||
const deleteOperation = <a href="#" className={deleteIconClassName} title={gettext('Delete')} onClick={this.deleteItem}></a>;
|
||||
|
||||
const shareDropdownItem = <DropdownItem onClick={this.share}>{gettext('Share')}</DropdownItem>;
|
||||
const unshareDropdownItem = <DropdownItem onClick={this.unshare}>{gettext('Unshare')}</DropdownItem>;
|
||||
if (isPro) {
|
||||
if (repo.owner_email.indexOf('@seafile_group') != -1) { // group owned repo
|
||||
if (isStaff) {
|
||||
if (repo.owner_email == currentGroup.id + '@seafile_group') { // this repo belongs to the current group
|
||||
desktopOperations = (
|
||||
<Fragment>
|
||||
{share}
|
||||
{deleteOperation}
|
||||
<Dropdown isOpen={this.state.isOperationShow} toggle={this.toggleOperationMenu}>
|
||||
{commonToggle}
|
||||
<DropdownMenu>
|
||||
{commonOperationsInMenu}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Fragment>
|
||||
);
|
||||
mobileOperationMenu = (
|
||||
<Fragment>
|
||||
{shareDropdownItem}
|
||||
<DropdownItem onClick={this.deleteItem}>{gettext('Delete')}</DropdownItem>
|
||||
{commonOperationsInMenu}
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
desktopOperations = unshare;
|
||||
mobileOperationMenu = unshareDropdownItem;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
desktopOperations = (
|
||||
<Fragment>
|
||||
{isRepoOwner || isAdmin ? share : null}
|
||||
{isStaff || isRepoOwner || isAdmin ? unshare : null}
|
||||
</Fragment>
|
||||
);
|
||||
mobileOperationMenu = (
|
||||
<Fragment>
|
||||
{isRepoOwner || isAdmin ? shareDropdownItem : null}
|
||||
{isStaff || isRepoOwner || isAdmin ? unshareDropdownItem : null}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
desktopOperations = (
|
||||
<Fragment>
|
||||
{isRepoOwner ? share : null}
|
||||
{isStaff || isRepoOwner ? unshare : null}
|
||||
</Fragment>
|
||||
);
|
||||
mobileOperationMenu = (
|
||||
<Fragment>
|
||||
{isRepoOwner ? shareDropdownItem : null}
|
||||
{isStaff || isRepoOwner ? unshareDropdownItem : null}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
const mobileOperations = (
|
||||
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
|
||||
{commonToggle}
|
||||
<div className={`${this.state.isItemMenuShow?'':'d-none'}`} onClick={this.toggleOperationMenu}>
|
||||
<div className="mobile-operation-menu-bg-layer"></div>
|
||||
<div className="mobile-operation-menu">
|
||||
{mobileOperationMenu}
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
return { desktopOperations, mobileOperations }
|
||||
}
|
||||
|
||||
renderPCUI = () => {
|
||||
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
|
||||
let { repo, isShowRepoOwner } = this.props;
|
||||
let { desktopOperations } = this.generatorOperations();
|
||||
return (
|
||||
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
|
||||
<td><a href={libPath}>{repo.repo_name}</a></td>
|
||||
<td>{desktopOperations}</td>
|
||||
<td>{repo.size}</td>
|
||||
<td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
|
||||
{isShowRepoOwner && <td title={repo.owner_contact_email}>{repo.owner_name}</td>}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
renderMobileUI = () => {
|
||||
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
|
||||
let { repo, isShowRepoOwner } = this.props;
|
||||
let { mobileOperations } = this.generatorOperations();
|
||||
return (
|
||||
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
|
||||
<td>
|
||||
<a href={libPath}>{repo.repo_name}</a><br />
|
||||
{isShowRepoOwner ? <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span> : null}
|
||||
<span className="item-meta-info">{repo.size}</span>
|
||||
<span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
|
||||
</td>
|
||||
<td>{mobileOperations}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (window.innerWidth >= 768) {
|
||||
return this.renderPCUI();
|
||||
} else {
|
||||
return this.renderMobileUI();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RepoListItem.propTypes = propTypes;
|
||||
|
||||
export default RepoListItem;
|
||||
@@ -0,0 +1,105 @@
|
||||
import React, {Fragment} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import SharedRepoListItem from './shared-repo-list-item';
|
||||
|
||||
const propTypes = {
|
||||
currentGroup: PropTypes.object,
|
||||
repoList: PropTypes.array.isRequired,
|
||||
isShowRepoOwner: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
class SharedRepoListView extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isItemFreezed: false,
|
||||
};
|
||||
}
|
||||
|
||||
renderPCUI = () => {
|
||||
let isShowRepoOwner = this.props.isShowRepoOwner;
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
|
||||
<th width="40%">{gettext("Name")}
|
||||
<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a>
|
||||
</th>
|
||||
<th width="12%"><span className="sr-only">{gettext("Actions")}</span></th>
|
||||
<th width={isShowRepoOwner ? '14%' : '22%'}>{gettext("Size")}</th>
|
||||
<th width={isShowRepoOwner ? '14%' : '22%'}>{gettext("Last Update")}
|
||||
<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a>
|
||||
</th>
|
||||
{isShowRepoOwner && <th width="16%">{gettext("Owner")}</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.props.repoList.map(repo => {
|
||||
return (
|
||||
<SharedRepoListItem
|
||||
key={repo.repo_id}
|
||||
repo={repo}
|
||||
isShowRepoOwner={this.props.isShowRepoOwner}
|
||||
isItemFreezed={this.state.isItemFreezed}
|
||||
currentGroup={this.props.currentGroup}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
renderMobileUI = () => {
|
||||
let isShowRepoOwner = this.props.isShowRepoOwner;
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
|
||||
<th width="68%">
|
||||
{isShowRepoOwner ? (
|
||||
<Fragment>
|
||||
{gettext("Sort:")} {/* TODO: sort */}
|
||||
{gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
|
||||
{gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
|
||||
</Fragment>
|
||||
) :
|
||||
(gettext('name'))
|
||||
}
|
||||
</th>
|
||||
<th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.props.repoList.map(repo => {
|
||||
return (
|
||||
<SharedRepoListItem
|
||||
key={repo.repo_id}
|
||||
repo={repo}
|
||||
isShowRepoOwner={this.props.isShowRepoOwner}
|
||||
isItemFreezed={this.state.isItemFreezed}
|
||||
currentGroup={this.props.currentGroup}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (window.innerWidth >= 768) {
|
||||
return this.renderPCUI();
|
||||
} else {
|
||||
return this.renderMobileUI();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SharedRepoListView.propTypes = propTypes;
|
||||
|
||||
export default SharedRepoListView;
|
||||
Reference in New Issue
Block a user