react-grid-data interaction improvement

frontend/src/pages/data-grid/app-header.js

@@ -11,10 +11,11 @@ const { fileName } = window.app.pageOptions;
 class AddHeader extends React.Component {
 
   render() {
+    let {isContentChanged} = this.props;
     return (
       <div id="header">
         <div className="sf-font">{fileName}</div>
-        <Button color="primary" onClick={this.props.onSave}>保存</Button>
+        <Button color="primary" onClick={this.props.onSave} disabled={!isContentChanged}>保存</Button>
       </div>
     );
   }

frontend/src/pages/data-grid/app-main.js

@@ -7,6 +7,7 @@ import GridHeaderContextMenu from './grid-header-contextmenu';
 import GridContentContextMenu from './grid-content-contextmenu';
 import ModalPortal from '../../components/modal-portal';
 import NewColumnDialog from './new-column-dialog';
+import isHotkey from 'is-hotkey';
 
 const propTypes = {
   initData: PropTypes.object.isRequired,
@@ -35,11 +36,24 @@ class AppMain extends React.Component {
     };
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.onHotKey);
+  }
+
   componentWillReceiveProps(nextProps) {
+
+    if (nextProps.isContentChanged) {
+      return;
+    }
+
     let data = nextProps.initData;
     this.deseralizeGridData(data);
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onHotKey);
+  }
+
   createRows = (numberOfRows) => {
     let rows = [];
     for (let i = 0; i < numberOfRows; i++) {
@@ -67,6 +81,7 @@ class AppMain extends React.Component {
     }
 
     this.setState({ rows });
+    this.props.onContentChanged();
   };
 
   handleAddRow = ({ newRowIndex }) => {
@@ -77,6 +92,7 @@ class AppMain extends React.Component {
     let rows = this.state.rows.slice();
     rows = update(rows, {$push: [newRow]});
     this.setState({ rows });
+    this.props.onContentChanged();
   };
 
   getRowAt = (index) => {
@@ -94,10 +110,19 @@ class AppMain extends React.Component {
   onInsertRow = () => {
     let newRowIndex = this.getSize();
     this.handleAddRow({ newRowIndex });
+    this.props.onContentChanged();
   }
 
   onInsertColumn = () => {
     this.setState({isNewColumnDialogShow: true});
+    this.props.onContentChanged();
+  }
+
+  onColumnResize = (index, width) => {
+    let columns = this.state.columns.slice();
+    columns[index - 1].width = width;
+    this.setState({columns: columns});
+    this.props.onContentChanged();
   }
 
   onNewColumn = (columnName, columnType) => {
@@ -115,10 +140,12 @@ class AppMain extends React.Component {
     columns.push(newColumn);
     this.setState({columns: columns});
     this.onNewColumnCancel();
+    this.props.onContentChanged();
   }
 
   onNewColumnCancel = () => {
     this.setState({isNewColumnDialogShow: false});
+    this.props.onContentChanged();
   }
 
   onRowDelete = (e, data) => {
@@ -126,6 +153,7 @@ class AppMain extends React.Component {
     let newRows = this.state.rows.slice(0); // copy array;
     newRows.splice(rowIdx, 1);
     this.setState({rows: newRows});
+    this.props.onContentChanged();
   }
 
   onColumnDelete = (e, data) => {
@@ -140,6 +168,7 @@ class AppMain extends React.Component {
       columns: columns,
       rows: rows
     });
+    this.props.onContentChanged();
   }
 
   serializeGridData = () => {
@@ -186,6 +215,14 @@ class AppMain extends React.Component {
     return editor;
   }
 
+  onHotKey = (event) => {
+    if (isHotkey('mod+s', event)) {
+      event.preventDefault();
+      this.props.onSave();
+      return true;
+    }
+  }
+  
   render() {
     let columns = this.getColumns();
     return (
@@ -208,6 +245,7 @@ class AppMain extends React.Component {
           RowsContainer={Menu.ContextMenuTrigger}
           headerContextMenu={<GridHeaderContextMenu id="grid-header-contxtmenu" onColumnDelete={this.onColumnDelete} />}
           contextMenu={<GridContentContextMenu id="grid-content-contxtmenu" onRowDelete={this.onRowDelete} />}
+          onColumnResize={this.onColumnResize}
         />
         {this.state.isNewColumnDialogShow && (
           <ModalPortal>

frontend/src/view-file-ctable.js

@@ -22,6 +22,7 @@ class ViewFileSDB extends React.Component {
         columns: [],
         rows: [],
       },
+      isContentChanged: false,
     };
 
   }
@@ -40,6 +41,11 @@ class ViewFileSDB extends React.Component {
 
   onSave = () => {
     let data = this.refs.data_grid.serializeGridData();
+    this.setState({
+      initData: data,
+      isContentChanged: false
+    })
+    
     let dirPath = Utils.getDirName(filePath);
     seafileAPI.getUpdateLink(repoID, dirPath).then(res => {
       let updateLink = res.data;
@@ -52,11 +58,24 @@ class ViewFileSDB extends React.Component {
     });
   }
 
+  onContentChanged = () => {
+    this.setState({isContentChanged: true});
+  }
+
   render() {
     return (
       <Fragment>
-        <AppHeader onSave={this.onSave}/>
-        <AppMain initData={this.state.initData} ref="data_grid"/>
+        <AppHeader 
+          onSave={this.onSave} 
+          isContentChanged={this.state.isContentChanged}
+        />
+        <AppMain 
+          initData={this.state.initData} 
+          ref="data_grid" 
+          onContentChanged={this.onContentChanged} 
+          isContentChanged={this.state.isContentChanged}
+          onSave={this.onSave}
+        />
       </Fragment>
     );
   }