File history improve (#2707)

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

@@ -1,17 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import MenuControl from '../menu-control';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
+import { gettext, filePath } from '../../utils/constants';
+import URLDecorator from '../../utils/url-decorator';
 
 moment.locale(window.app.config.lang);
+
 const propTypes = {
-  isItemFrezeed: PropTypes.bool.isRequired,
-  isFirstItem: PropTypes.bool.isRequired,
-  preCommitID: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   item: PropTypes.object.isRequired,
-  currentItem: PropTypes.object.isRequired,
-  onMenuControlClick: PropTypes.func.isRequired,
-  onHistoryItemClick: PropTypes.func.isRequired,
+  currentItem: PropTypes.object,
+  isItemFreezed: PropTypes.bool.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onItemRestore: PropTypes.func.isRequired,
+  onFreezedItemToggle: PropTypes.func.isRequired,
 };
 
 class HistoryListItem extends React.Component {
@@ -19,42 +22,57 @@ class HistoryListItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isShowOperationIcon: false
+      isShowOperationIcon: false,
+      isMenuShow: false,
     };
   }
 
   onMouseEnter = () => {
-    if (!this.props.isItemFrezeed) {
+    if (!this.props.isItemFreezed) {
       this.setState({isShowOperationIcon: true});
     }
   }
   
   onMouseLeave = () => {
-    if (!this.props.isItemFrezeed) {
+    if (!this.props.isItemFreezed) {
       this.setState({isShowOperationIcon: false});
     }
   }
 
+  onToggleClick = (e) => {
+    this.setState({isMenuShow: !this.state.isMenuShow});
+    this.props.onFreezedItemToggle();
+  }
+
   onItemClick = () => {
+    this.setState({isShowOperationIcon: false});  //restore to default state
     if (this.props.item.commit_id === this.props.currentItem.commit_id) {
       return;
     }
-    this.setState({isShowOperationIcon: false});  //restore to default state
-    this.props.onHistoryItemClick(this.props.item, this.props.preCommitID);
+    let currentIndex = this.props.index;
+    this.props.onItemClick(this.props.item, currentIndex);
   }
 
-  onMenuControlClick = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    this.props.onMenuControlClick(e, this.props.item , this.props.isFirstItem);
+  onItemRestore = () => {
+    this.props.onItemRestore(this.props.currentItem);
+  }
+
+  onItemDownload = () => {
+    // nothing todo
   }
 
   render() {
+    if (!this.props.currentItem) {
+      return '';
+    }
     let item = this.props.item;
-    let time = moment.parseZone(item.ctime).format('YYYY-MM-DD HH:mm');
+    let time = moment(item.ctime).format('YYYY-MM-DD HH:mm');
     let isHigtlightItem = false;
     if (this.props.item && this.props.currentItem) {
       isHigtlightItem = this.props.item.commit_id === this.props.currentItem.commit_id;
     }
+    let objID = this.props.currentItem.rev_file_id;
+    let url = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: objID});
     return (
       <li 
         className={`history-list-item ${isHigtlightItem ? 'item-active' : ''}`} 
@@ -70,10 +88,19 @@ class HistoryListItem extends React.Component {
           </div>
         </div>
         <div className="history-operation">
-          <MenuControl
-            isShow={this.state.isShowOperationIcon || isHigtlightItem}
-            onClick={this.onMenuControlClick}
-          />
+          <Dropdown isOpen={this.state.isMenuShow} toggle={this.onToggleClick}>
+            <DropdownToggle 
+              tag='a' 
+              className={`fas fa-ellipsis-v ${(this.state.isShowOperationIcon || isHigtlightItem) ? '' : 'invisible'}`}
+              data-toggle="dropdown" 
+              aria-expanded={this.state.isMenuShow} 
+              alt={gettext('More Operations')}
+            />
+            <DropdownMenu>
+              {(this.props.index !== 0) && <DropdownItem onClick={this.onItemRestore}>{gettext('Restore')}</DropdownItem>}
+              <DropdownItem tag='a' href={url} onClick={this.onItemDownLoad}>{gettext('Download')}</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         </div>
       </li>
     );

frontend/src/components/history-list-view/history-list-menu.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext, filePath } from '../../utils/constants';
-import URLDecorator from '../../utils/url-decorator';
-
-const propTypes = {
-  isFirstItem: PropTypes.bool.isRequired,
-  isListMenuShow: PropTypes.bool.isRequired,
-  menuPosition: PropTypes.object.isRequired,
-  currentItem: PropTypes.object,
-  onDownloadFile: PropTypes.func.isRequired,
-  onRestoreFile: PropTypes.func.isRequired,
-};
-
-class HistoryListMenu extends React.Component {
-
-  onDownloadFile = () => {
-    this.props.onDownloadFile();
-  }
-
-  onRestoreFile = () => {
-    this.props.onRestoreFile();
-  }
-
-  render() {
-    let style = {};
-    let position = this.props.menuPosition;
-    if (this.props.isListMenuShow) {
-      style = {position: 'fixed',left: position.left + 'px',top: position.top + 'px',display: 'block'};
-    }
-    
-    if (!this.props.currentItem) {
-      return '';
-    }
-
-    let objID = this.props.currentItem.rev_file_id;
-    let url = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: objID});
-    
-    if (this.props.isFirstItem) {
-      return ( 
-        <ul className="dropdown-menu" style={style}>
-          <li className="dropdown-item" onClick={this.onDownloadFile}>
-            <a href={url}>{gettext('Download')}</a>
-          </li>
-        </ul>
-      );
-    }
-
-    return (
-      <ul className="dropdown-menu" style={style}>
-        <li className="dropdown-item" onClick={this.onRestoreFile}>{gettext('Restore')}</li>
-        <li className="dropdown-item" onClick={this.onDownloadFile}>
-          <a href={url}>{gettext('Download')}</a>
-        </li>
-      </ul>
-    );
-  }
-    
-}
-
-HistoryListMenu.propTypes = propTypes;
-
-export default HistoryListMenu;

frontend/src/components/history-list-view/history-list-view.js

@@ -2,25 +2,41 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import HisotyListItem from './history-list-item';
 import Loading from '../loading';
-import axios from 'axios';
-import editUtilties from '../../utils/editor-utilties';
-import URLDecorator from '../../utils/url-decorator';
-import { filePath } from '../../utils/constants';
 
 const propTypes = {
   hasMore: PropTypes.bool.isRequired,
   isReloadingData: PropTypes.bool.isRequired,
-  isItemFrezeed: PropTypes.bool.isRequired,
   historyList: PropTypes.array.isRequired,
-  currentItem: PropTypes.object,
   reloadMore: PropTypes.func.isRequired,
-  onMenuControlClick: PropTypes.func.isRequired,
-  onHistoryItemClick: PropTypes.func.isRequired,
-  setDiffContent: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func.isRequired,
 };
 
 class HistoryListView extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false,
+      currentItem: null,
+    };
+  }
+
+  componentDidMount = () => {
+    let historyList = this.props.historyList;
+    if (historyList.length > 0) {
+      this.setState({currentItem: historyList[0]});
+      if (historyList === 1) {
+        this.props.onItemClick(historyList[0]);
+      } else {
+        this.props.onItemClick(historyList[0], historyList[1]);
+      }
+    }
+  }
+
+  onFreezedItemToggle = () => {
+    this.setState({isItemFreezed: !this.state.isItemFreezed});
+  }
+
   onScrollHandler = (event) => {
     const clientHeight = event.target.clientHeight;
     const scrollHeight = event.target.scrollHeight;
@@ -32,46 +48,30 @@ class HistoryListView extends React.Component {
     }
   }
 
-  componentDidMount() {
-    let historyList = this.props.historyList;
-    if (historyList.length > 1) {
-      let downLoadURL = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: historyList[0].rev_file_id});
-      let downLoadURL1 = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: historyList[1].rev_file_id});
-      axios.all([
-        editUtilties.getFileContent(downLoadURL),
-        editUtilties.getFileContent(downLoadURL1)
-      ]).then(axios.spread((res1, res2) => {
-        this.props.setDiffContent(res1.data, res2.data);
-      }));
+  onItemClick = (item, currentIndex) => {
+    this.setState({currentItem: item});
+    if (currentIndex !== this.props.historyList.length) {
+      let preItem = this.props.historyList[currentIndex + 1];
+      this.props.onItemClick(item, preItem);
     } else {
-      let downLoadURL = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: historyList[0].rev_file_id});
-      axios.all([
-        editUtilties.getFileContent(downLoadURL),
-      ]).then(axios.spread((res1) => {
-        this.props.setDiffContent(res1.data, '');
-      }));
+      this.props.onItemClick(item);
     }
-   
   }
 
   render() {
     return (
       <ul className="history-list-container" onScroll={this.onScrollHandler}>
-        {this.props.historyList.map((item, index, historyList) => {
-          let preItemIndex = index + 1;
-          if (preItemIndex === historyList.length) {
-            preItemIndex = index;
-          }
+        {this.props.historyList.map((item, index) => {
           return (
             <HisotyListItem
               key={index} 
               item={item}
-              isFirstItem={index === 0}
-              preCommitID={historyList[preItemIndex].rev_file_id}
-              currentItem={this.props.currentItem}
-              isItemFrezeed={this.props.isItemFrezeed}
-              onMenuControlClick={this.props.onMenuControlClick}
-              onHistoryItemClick={this.props.onHistoryItemClick}
+              index={index}
+              currentItem={this.state.currentItem}
+              isItemFreezed={this.state.isItemFreezed}
+              onItemClick={this.onItemClick}
+              onItemRestore={this.props.onItemRestore}
+              onFreezedItemToggle={this.onFreezedItemToggle}
             />
           );
         })}