New file history (#2359)

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import NodeMenuControl from '../menu-component/node-menu-control';
+
+moment.locale(window.app.config.lang);
+const propTypes = {
+  isItemFrezeed: PropTypes.bool.isRequired,
+  isFirstItem: PropTypes.bool.isRequired,
+  item: PropTypes.object.isRequired,
+  currentItem: PropTypes.object.isRequired,
+  onMenuControlClick: PropTypes.func.isRequired,
+  onHistoryItemClick: PropTypes.func.isRequired,
+};
+
+class HistoryListItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowOperationIcon: false
+    };
+  }
+
+  onMouseEnter = () => {
+    if (!this.props.isItemFrezeed) {
+      this.setState({isShowOperationIcon: true});
+    }
+  }
+  
+  onMouseLeave = () => {
+    if (!this.props.isItemFrezeed) {
+      this.setState({isShowOperationIcon: false});
+    }
+  }
+
+  onItemClick = () => {
+    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);
+  }
+
+  onMenuControlClick = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.props.onMenuControlClick(e, this.props.item , this.props.isFirstItem);
+  }
+
+  render() {
+    let item = this.props.item;
+    let time = moment(item.ctime).format('MMMDo Ah:mm');
+    let isHigtlightItem = false;
+    if (this.props.item && this.props.currentItem) {
+      isHigtlightItem = this.props.item.commit_id === this.props.currentItem.commit_id;
+    }
+    return (
+      <li 
+        className={`history-list-item ${isHigtlightItem ? 'item-active' : ''}`} 
+        onMouseEnter={this.onMouseEnter} 
+        onMouseLeave={this.onMouseLeave}
+        onClick={this.onItemClick}
+      >
+        <div className="history-info">
+          <div className="time">{time}</div>
+          <div className="owner">
+            <span className="squire-icon"></span>
+            <span>{item.creator_name}</span>
+          </div>
+        </div>
+        <div className="history-operation">
+          <NodeMenuControl
+            isShow={this.state.isShowOperationIcon || isHigtlightItem}
+            onClick={this.onMenuControlClick}
+          />
+        </div>
+      </li>
+    );
+  }
+}
+
+HistoryListItem.propTypes = propTypes;
+
+export default HistoryListItem;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext, filePath } from '../constance';
+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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HisotyListItem from './history-list-item';
+import Loading from '../loading';
+
+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,
+};
+
+class HistoryListView extends React.Component {
+
+  onScrollHandler = (event) => {
+    const clientHeight = event.target.clientHeight;
+    const scrollHeight = event.target.scrollHeight;
+    const scrollTop    = event.target.scrollTop;
+    const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
+    let hasMore = this.props.hasMore;
+    if (isBottom && hasMore) {
+      this.props.reloadMore();
+    }
+  }
+
+  render() {
+    return (
+      <ul className="history-list-container" onScroll={this.onScrollHandler}>
+        {this.props.historyList.map((item, index) => {
+          return (
+            <HisotyListItem
+              key={index} 
+              item={item}
+              isFirstItem={index === 0}
+              currentItem={this.props.currentItem}
+              isItemFrezeed={this.props.isItemFrezeed}
+              onMenuControlClick={this.props.onMenuControlClick}
+              onHistoryItemClick={this.props.onHistoryItemClick}
+            />
+          );
+        })}
+        {this.props.isReloadingData && <li><Loading /></li>}
+      </ul>
+    );
+  }
+}
+
+HistoryListView.propTypes = propTypes;
+
+export default HistoryListView;