[dir view] added 'sort' for mobile (#4032)

frontend/src/components/cur-dir-path/index.js

@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Utils } from '../../utils/utils';
+import SortOptionsDialog from '../../components/dialog/sort-options';
 import DirPath from './dir-path';
 import DirTool from './dir-tool';
 
@@ -19,7 +21,21 @@ const propTypes = {
 
 class CurDirPath extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSortOptionsDialogOpen: false
+    };
+  }
+
+  toggleSortOptionsDialog = () => {
+    this.setState({
+      isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen
+    });
+  }
+
   render() {
+    const isDesktop = Utils.isDesktop();
     return (
       <Fragment>
         <DirPath 
@@ -32,6 +48,7 @@ class CurDirPath extends React.Component {
           isViewFile={this.props.isViewFile}
           fileTags={this.props.fileTags}
         />
+        {isDesktop &&
         <DirTool 
           repoID={this.props.repoID}
           repoName={this.props.repoName} 
@@ -39,7 +56,17 @@ class CurDirPath extends React.Component {
           currentPath={this.props.currentPath} 
           updateUsedRepoTags={this.props.updateUsedRepoTags}
           onDeleteRepoTag={this.props.onDeleteRepoTag}
+        />}
+        {!isDesktop && this.props.direntList.length > 0 &&
+        <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
+        {this.state.isSortOptionsDialogOpen &&
+        <SortOptionsDialog
+          toggleDialog={this.toggleSortOptionsDialog}
+          sortBy={this.props.sortBy}
+          sortOrder={this.props.sortOrder}
+          sortItems={this.props.sortItems}
         />
+        }
       </Fragment>
     );
   }