Mobile visit item (#4779)

* [mobile] my libs: improved 'visit repo'

* [mobile] dir view: improved 'visit dirent'

* [mobile] shared with me: improved 'visit repo'

* [mobile] group, groups, shared with all: improved 'visit repo'

* [mobile] starred: improved 'visit item'

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -171,8 +171,10 @@ class DirentListItem extends React.Component {
 
   onItemClick = (e) => {
     e.preventDefault();
-
     const dirent = this.props.dirent;
+    if (this.state.isRenameing) {
+      return;
+    }
     if (Utils.imageCheck(dirent.name)) {
       this.props.showImagePopup(dirent);
     } else {
@@ -664,19 +666,19 @@ class DirentListItem extends React.Component {
     ); 
     const mobileItem = (
       <tr>
-        <td>
+        <td onClick={this.onItemClick}>
           <div className="dir-icon">
             {dirent.encoded_thumbnail_src ?
-              <img src={`${siteRoot}${dirent.encoded_thumbnail_src}`} className="thumbnail cursor-pointer" onClick={this.onItemClick} alt="" /> :
+              <img src={`${siteRoot}${dirent.encoded_thumbnail_src}`} className="thumbnail cursor-pointer" alt="" /> :
               <img src={iconUrl} width="24" alt="" />
             }
             {dirent.is_locked && <img className="locked" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={lockedInfo}/>}
           </div>
         </td>
-        <td>
+        <td onClick={this.onItemClick}>
           {this.state.isRenameing ?
             <Rename hasSuffix={dirent.type !== 'dir'} name={dirent.name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
-            <a href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemClick}>{dirent.name}</a>
+            <a href={dirent.type === 'dir' ? dirHref : fileHref}>{dirent.name}</a>
           }
           <br />
           {dirent.size && <span className="item-meta-info">{dirent.size}</span>}

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { Link } from '@reach/router';
+import { Link, navigate } from '@reach/router';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
 import ModalPortal from '../../components/modal-portal';
@@ -478,15 +478,22 @@ class SharedRepoListItem extends React.Component {
       </Fragment>
     );
   }
+
+  visitRepo = () => {
+    if (!this.state.isRenaming) {
+      navigate(this.repoURL);
+    }
+  }
   
   renderMobileUI = () => {
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
     let { repo } = this.props;
+    this.repoURL = libPath;
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-          <td><img src={iconUrl} title={iconTitle} width="24" alt={iconTitle}/></td>
+          <td onClick={this.visitRepo}><img src={iconUrl} title={iconTitle} width="24" alt={iconTitle}/></td>
-          <td>
+          <td onClick={this.visitRepo}>
             {this.state.isRenaming ? 
               <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
               <Link to={libPath}>{repo.repo_name}</Link>  

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
 import moment from 'moment';
-import { Link } from '@reach/router';
+import { Link, navigate } from '@reach/router';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, storages } from '../../utils/constants';
@@ -116,6 +116,12 @@ class MylibRepoListItem extends React.Component {
     }
   }
 
+  visitRepo = () => {
+    if (!this.state.isRenaming && this.props.repo.repo_name) {
+      navigate(this.repoURL);
+    }
+  }
+
   onRepoClick = () => {
     this.props.onRepoClick(this.props.repo);
   }
@@ -308,12 +314,12 @@ class MylibRepoListItem extends React.Component {
     let repo = this.props.repo;
     let iconUrl = Utils.getLibIconUrl(repo);
     let iconTitle = Utils.getLibIconTitle(repo);
-    let repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
+    let repoURL = this.repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
 
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.onRepoClick}>
-        <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+        <td onClick={this.visitRepo}><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
-        <td>
+        <td onClick={this.visitRepo}>
           {this.state.isRenaming && (
             <Rename
               name={repo.repo_name}

frontend/src/pages/shared-libs/shared-libs.js

@@ -3,7 +3,7 @@ import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import cookie from 'react-cookies';
-import { Link } from '@reach/router';
+import { Link, navigate } from '@reach/router';
 import { gettext, siteRoot, isPro } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -194,6 +194,10 @@ class Item extends Component {
     }
   }
 
+  visitRepo = () => {
+    navigate(this.repoURL);
+  }
+
   render() {
     if (this.state.unshared) {
       return null;
@@ -208,7 +212,7 @@ class Item extends Component {
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let shareIconClassName = 'op-icon sf2-icon-share repo-share-btn' + iconVisibility;
     let leaveShareIconClassName = 'op-icon sf2-icon-x3' + iconVisibility;
-    let shareRepoUrl =`${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}/`;
+    let shareRepoUrl = this.repoURL = `${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}/`;
     const desktopItem = (
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
@@ -249,8 +253,8 @@ class Item extends Component {
     const mobileItem = (
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td onClick={this.visitRepo}><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-          <td>
+          <td onClick={this.visitRepo}>
             <Link to={shareRepoUrl}>{data.repo_name}</Link><br />
             <span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
             <span className="item-meta-info">{data.size}</span>

frontend/src/pages/starred/starred.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
-import { Link } from '@reach/router';
+import { Link, navigate } from '@reach/router';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -170,6 +170,15 @@ class Item extends Component {
     });
   }
 
+  visitItem = () => {
+    const data = this.props.data;
+    if (data.is_dir) {
+      navigate(data.dirent_view_url);
+    } else {
+      window.open(data.dirent_view_url);
+    }
+  }
+
   render() {
 
     if (this.state.unstarred) {
@@ -206,14 +215,14 @@ class Item extends Component {
 
     const mobileItem = (
       <tr>
-        <td className="text-center">
+        <td className="text-center" onClick={this.visitItem}>
           {
             data.thumbnail_url ?
               <img className="thumbnail" src={data.thumbnail_url} alt="" /> :
               <img src={data.item_icon_url} alt={gettext('icon')} width="24" />
           }
         </td>
-        <td>
+        <td onClick={this.visitItem}>
           { data.is_dir ?
             <Link to={data.dirent_view_url}>{data.obj_name}</Link> :
             <a className="normal" href={data.dirent_view_url} target="_blank">{data.obj_name}</a>