impl expand/contract HandsontableModal

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -6,6 +6,7 @@ import Button from 'react-bootstrap/es/Button';
 import Navbar from 'react-bootstrap/es/Navbar';
 import ButtonGroup from 'react-bootstrap/es/ButtonGroup';
 
+import { debounce } from 'throttle-debounce';
 
 import Handsontable from 'handsontable';
 import { HotTable } from '@handsontable/react';
@@ -13,7 +14,11 @@ import { HotTable } from '@handsontable/react';
 import MarkdownTable from '../../models/MarkdownTable';
 import HandsontableUtil from './HandsontableUtil';
 
+const DEFAULT_HOT_HEIGHT = 300;
+
 export default class HandsontableModal extends React.Component {
+
+
   constructor(props) {
     super(props);
 
@@ -22,6 +27,7 @@ export default class HandsontableModal extends React.Component {
       isWindowExpanded: false,
       markdownTableOnInit: HandsontableModal.getDefaultMarkdownTable(),
       markdownTable: HandsontableModal.getDefaultMarkdownTable(),
+      handsontableHeight: DEFAULT_HOT_HEIGHT,
       handsontableSetting: HandsontableModal.getDefaultHandsontableSetting()
     };
 
@@ -29,7 +35,11 @@ export default class HandsontableModal extends React.Component {
     this.reset = this.reset.bind(this);
     this.cancel = this.cancel.bind(this);
     this.save = this.save.bind(this);
-    this.toggleWindowExpanded = this.toggleWindowExpanded.bind(this);
+    this.expandWindow = this.expandWindow.bind(this);
+    this.contractWindow = this.contractWindow.bind(this);
+
+    // create debounced method for expanding HotTable
+    this.expandHotTableHeightWithDebounce = debounce(100, this.expandHotTableHeight);
   }
 
   init(markdownTable) {
@@ -95,14 +105,34 @@ export default class HandsontableModal extends React.Component {
     HandsontableUtil.setClassNameToColumns(this.refs.hotTable.hotInstance, startCol, endCol, className);
   }
 
-  toggleWindowExpanded() {
-    this.setState({ isWindowExpanded: !this.state.isWindowExpanded });
+  expandWindow() {
+    this.setState({ isWindowExpanded: true });
+
+    // invoke updateHotTableHeight method with delay
+    // cz. Resizing this.refs.hotTableContainer is completeted after a little delay after 'isWindowExpanded' set with 'true'
+    this.expandHotTableHeightWithDebounce();
+  }
+
+  contractWindow() {
+    this.setState({ isWindowExpanded: false, handsontableHeight: DEFAULT_HOT_HEIGHT });
+  }
+
+  /**
+   * Expand the height of the Handsontable
+   *  by updating 'handsontableHeight' state
+   *  according to the height of this.refs.hotTableContainer
+   */
+  expandHotTableHeight() {
+    if (this.state.isWindowExpanded && this.refs.hotTableContainer != null) {
+      const height = this.refs.hotTableContainer.getBoundingClientRect().height;
+      this.setState({ handsontableHeight: height });
+    }
   }
 
-  renderExpandOrShrinkButton() {
+  renderExpandOrContractButton() {
     const iconClassName = this.state.isWindowExpanded ? 'icon-size-actual' : 'icon-size-fullscreen';
     return (
-      <button className="close mr-3" onClick={this.toggleWindowExpanded}>
+      <button className="close mr-3" onClick={this.state.isWindowExpanded ? this.contractWindow : this.expandWindow}>
         <i className={iconClassName} style={{ fontSize: '0.8em' }} aria-hidden="true"></i>
       </button>
     );
@@ -119,10 +149,10 @@ export default class HandsontableModal extends React.Component {
     return (
       <Modal show={this.state.show} onHide={this.cancel} bsSize="large" dialogClassName={dialogClassName}>
         <Modal.Header closeButton>
-          { this.renderExpandOrShrinkButton() }
+          { this.renderExpandOrContractButton() }
           <Modal.Title>Edit Table</Modal.Title>
         </Modal.Header>
-        <Modal.Body className="p-0">
+        <Modal.Body className="p-0 d-flex flex-column">
           <Navbar>
             <Navbar.Form>
               <ButtonGroup>
@@ -132,8 +162,8 @@ export default class HandsontableModal extends React.Component {
               </ButtonGroup>
             </Navbar.Form>
           </Navbar>
-          <div className="p-4">
-            <HotTable ref='hotTable' data={this.state.markdownTable.table} settings={this.state.handsontableSetting} />
+          <div ref="hotTableContainer" className="m-4 hot-table-container">
+            <HotTable ref='hotTable' data={this.state.markdownTable.table} settings={this.state.handsontableSetting} height={this.state.handsontableHeight} />
           </div>
         </Modal.Body>
         <Modal.Footer>
@@ -164,7 +194,6 @@ export default class HandsontableModal extends React.Component {
 
   static getDefaultHandsontableSetting() {
     return {
-      height: 300,
       rowHeaders: true,
       colHeaders: true,
       manualRowMove: true,

src/client/styles/scss/_handsontable.scss

@@ -8,9 +8,28 @@
   }
 }
 
-// .handsontable-modal.modal-lg {
-//   width: 90%;
-// }
+// expanded window layout
+.handsontable-modal.handsontable-modal-expanded {
+  // full-screen modal
+  width: 97%;
+  height: 95%;
+  .modal-content {
+    height: 95%;
+  }
+
+  // expand .modal-body (with calculating height)
+  .modal-body {
+    $modal-header: 54px;
+    $modal-footer: 46px;
+    $margin: $modal-header + $modal-footer;
+    height: calc(100% - #{$margin});
+
+    // expand .hot-table-container (with flexbox)
+    .hot-table-container {
+      flex: 1;
+    }
+  }
+}
 
 // Prevent handsontable/handsontable #2937 (Manual column resize does not work when handsontable is loaded inside Bootstrap 3.0 Modal)
 // see https://github.com/handsontable/handsontable/issues/2937#issuecomment-287390111