poi-plugin-ship-info - npm Package Compare versions

Comparing version 3.0.0-beta.0 to 3.0.0-beta.1

package.json

 {
   "name": "poi-plugin-ship-info",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "description": "Show detailed information of all owned ship girls",
@@ -5,0 +5,0 @@ "main": "index.es",

views/ship-info-table-area/index.js

@@ -25,2 +25,4 @@ 'use strict';
 
+var _lodash = require('lodash');
+
 var _divider = require('../divider');
@@ -44,2 +46,4 @@
 
+const floor5 = num => (0, _lodash.floor)(num / 5) * 5;
+
 const TitleHeader = props => {
@@ -122,12 +126,38 @@ const { titles, types, sortable,
 
+    this.tableWidth = (0, _lodash.sum)(widths);
+
+    const width = document.body.clientWidth;
+
+    console.log(this.tableWidth, width);
+
+    this.updateWindowWidth = (0, _lodash.debounce)(this.updateWindowWidth, 500);
+
+    this.setRef = this.setRef.bind(this);
+
+    this.rowStopIndex = 0;
+    this.columnStopIndex = 0;
+
     this.state = {
       activeRow: -1,
-      activeColumn: -1
+      activeColumn: -1,
+      windowWidth: width
     };
   }
 
+  // handleScroll = (e) => {
+  //   const { scrollTop, scrollLeft } = e
+  //   const rowMove = floor((scrollTop - this.state.scrollTop) / 40)
+  //   const columnMove = floor((scrollLeft - this.state.scrollLeft) / 40)
+  //   this.setState({
+  //     scrollTop,
+  //     scrollLeft,
+  //     activeColumn: this.state.activeColumn + columnMove,
+  //     activeRow: this.state.activeRow + rowMove,
+  //   })
+  // }
+
   render() {
     // const showRows = this.props.rows
     const { rows, sortName, sortOrder, pagedLayout } = this.props;
-    const { activeRow, activeColumn } = this.state;
+    const { activeRow, activeColumn, windowWidth } = this.state;
     // const header =
@@ -173,12 +203,15 @@ //   (
           ({ width, height }) => _react2.default.createElement(_reactVirtualized.MultiGrid, {
+            ref: this.setRef,
             sortName: sortName,
             sortOrder: sortOrder,
             activeRow: activeRow,
+            windowWidth: windowWidth,
             activeColumn: activeColumn,
             columnCount: 18,
-            columnWidth: getColumnWidth,
+            columnWidth: this.getColumnWidth,
             estimatedRowSize: 100,
-            fixedColumnCount: 3,
+            fixedColumnCount: windowWidth > this.tableWidth ? 0 : 3,
             fixedRowCount: 1,
             height: height,
+            onSectionRendered: this.handleContentRendered,
             overscanColumnCount: 3,
@@ -200,3 +233,22 @@ overscanRowCount: 10,
 }, _initialiseProps = function () {
-  this.sortRules = (name, order) => {
+  this.componentDidMount = () => {
+    this.updateWindowWidth();
+    window.addEventListener('resize', this.updateWindowWidth);
+  };
+
+  this.componentWillUnmount = () => {
+    window.removeListener('resize', this.updateWindowWidth);
+  };
+
+  this.updateWindowWidth = () => {
+    this.setState({
+      windowWidth: document.body.clientWidth
+    });
+    if (this.grid) {
+      this.grid.recomputeGridSize();
+      this.grid.forceUpdateGrids();
+    }
+  };
+
+  this.saveSortRules = (name, order) => {
     config.set('plugin.ShipInfo.sortName', name);
@@ -230,2 +282,3 @@ config.set('plugin.ShipInfo.sortOrder', order);
     const { rows, sortName, sortOrder } = this.props;
+    const { windowWidth } = this.state;
     const setState = this.setState.bind(this);
@@ -261,2 +314,3 @@
       onMouseOver,
+      windowWidth,
       className: (0, _classnames2.default)({
@@ -273,5 +327,5 @@ 'ship-info-cell': true,
       const order = title === 'id' || title === 'type' || title === 'name' ? 1 : 0;
-      this.sortRules(title, order);
+      this.saveSortRules(title, order);
     } else {
-      this.sortRules(this.props.sortName, (this.props.sortOrder + 1) % 2);
+      this.saveSortRules(this.props.sortName, (this.props.sortOrder + 1) % 2);
     }
@@ -286,2 +340,23 @@ };
   };
+
+  this.handleContentRendered = e => {
+    const { rowStopIndex, columnStopIndex } = e;
+    if (this.activeColumn !== -1 && this.activeRow !== -1) {
+      this.setState({
+        activeColumn: this.state.activeColumn + columnStopIndex - this.columnStopIndex,
+        activeRow: this.state.activeRow + rowStopIndex - this.rowStopIndex
+      });
+    }
+    this.rowStopIndex = rowStopIndex;
+    this.columnStopIndex = columnStopIndex;
+  };
+
+  this.getColumnWidth = ({ index }) => {
+    const width = floor5((widths[index] || 40) * (this.state.windowWidth > this.tableWidth ? this.state.windowWidth / this.tableWidth : 1));
+    return width;
+  };
+
+  this.setRef = ref => {
+    this.grid = ref;
+  };
 }, _temp));
@@ -288,0 +363,0 @@

No alert changes

Improved metrics

Total package byte prevSize

259769

increased by2.63%

Lines of code

3404

increased by1.79%

No dependency changes