wip

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

@@ -18,46 +18,8 @@ export default class HandsontableModal extends React.Component {
     this.state = {
       show: false,
       markdownTableOnInit: HandsontableModal.getDefaultMarkdownTable(),
-      markdownTable: HandsontableModal.getDefaultMarkdownTable()
-    };
-
-    this.settings = {
-      height: 300,
-      rowHeaders: true,
-      colHeaders: true,
-      contextMenu: {
-        items: {
-          'row_above': {}, 'row_below': {}, 'col_left': {}, 'col_right': {},
-          'separator1': Handsontable.plugins.ContextMenu.SEPARATOR,
-          'remove_row': {}, 'remove_col': {},
-          'separator2': Handsontable.plugins.ContextMenu.SEPARATOR,
-          'custom_alignment': {
-            name: 'Align columns',
-            key: 'align_columns',
-            submenu: {
-              items: [{
-                name: 'Left',
-                key: 'align_columns:1',
-                callback: function(key, selection) {
-                  HandsontableModal.alignColumns(this, selection[0].start.col, selection[0].end.col, 'htLeft');
-                }}, {
-                name: 'Center',
-                key: 'align_columns:2',
-                callback: function(key, selection) {
-                  HandsontableModal.alignColumns(this, selection[0].start.col, selection[0].end.col, 'htCenter');
-                }}, {
-                name: 'Right',
-                key: 'align_columns:3',
-                callback: function(key, selection) {
-                  HandsontableModal.alignColumns(this, selection[0].start.col, selection[0].end.col, 'htRight');
-                }}
-              ]
-            }
-          }
-        }
-      },
-      stretchH: 'all',
-      selectionMode: 'multiple',
+      markdownTable: HandsontableModal.getDefaultMarkdownTable(),
+      handsontableSetting: HandsontableModal.getDefaultHandsotableSetting()
     };
 
     this.init = this.init.bind(this);
@@ -68,8 +30,25 @@ export default class HandsontableModal extends React.Component {
 
   init(markdownTable) {
     const initMarkdownTable = markdownTable || HandsontableModal.getDefaultMarkdownTable();
-    this.setState({ markdownTableOnInit: initMarkdownTable });
-    this.setState({ markdownTable: initMarkdownTable.clone() });
+    const initCallback = function() {
+      const align = initMarkdownTable.options.align;
+      for (let i = 0; i < align.length; i++) {
+        const mapping = {
+          'r': 'htRight',
+          'c': 'htCenter',
+          'l': 'htLeft',
+          '': ''
+        };
+        HandsontableModal.alignColumns(this, i, i, mapping[align[i]]);
+      }
+    };
+    this.setState(
+      {
+        markdownTableOnInit: initMarkdownTable,
+        markdownTable: initMarkdownTable.clone(),
+        handsontableSetting: Object.assign({}, this.state.handsontableSetting, { init: initCallback })
+      }
+    );
   }
 
   show(markdownTable) {
@@ -89,6 +68,9 @@ export default class HandsontableModal extends React.Component {
     if (this.props.onSave != null) {
       this.props.onSave(this.state.markdownTable);
     }
+    // console.log(this.refs.hotTable.hotInstance.getCellMetaAtRow(0));
+    // console.log(this.refs.hotTable.hotInstance.getCellMeta(0, 0));
+    console.log(this.state.handsontableSetting);
     this.setState({ show: false });
   }
 
@@ -109,7 +91,7 @@ export default class HandsontableModal extends React.Component {
             </Navbar.Form>
           </Navbar>
           <div className="p-4">
-            <HotTable data={this.state.markdownTable.table} settings={this.settings} />
+            <HotTable ref='hotTable' data={this.state.markdownTable.table} settings={this.state.handsontableSetting} />
           </div>
         </Modal.Body>
         <Modal.Footer>
@@ -126,11 +108,57 @@ export default class HandsontableModal extends React.Component {
   }
 
   static getDefaultMarkdownTable() {
-    return new MarkdownTable([
-      ['col1', 'col2', 'col3'],
-      ['', '', ''],
-      ['', '', ''],
-    ]);
+    return new MarkdownTable(
+      [
+        ['col1', 'col2', 'col3'],
+        ['', '', ''],
+        ['', '', ''],
+      ],
+      {
+        align: ['', '', '']
+      }
+    );
+  }
+
+  static getDefaultHandsotableSetting() {
+    return {
+      height: 300,
+      rowHeaders: true,
+      colHeaders: true,
+      contextMenu: {
+        items: {
+          'row_above': {}, 'row_below': {}, 'col_left': {}, 'col_right': {},
+          'separator1': Handsontable.plugins.ContextMenu.SEPARATOR,
+          'remove_row': {}, 'remove_col': {},
+          'separator2': Handsontable.plugins.ContextMenu.SEPARATOR,
+          'custom_alignment': {
+            name: 'Align columns',
+            key: 'align_columns',
+            submenu: {
+              items: [{
+                name: 'Left',
+                key: 'align_columns:1',
+                callback: function(key, selection) {
+                  HandsontableModal.alignColumns(this, selection[0].start.col, selection[0].end.col, 'htLeft');
+                }}, {
+                name: 'Center',
+                key: 'align_columns:2',
+                callback: function(key, selection) {
+                  HandsontableModal.alignColumns(this, selection[0].start.col, selection[0].end.col, 'htCenter');
+                }}, {
+                name: 'Right',
+                key: 'align_columns:3',
+                callback: function(key, selection) {
+                  HandsontableModal.alignColumns(this, selection[0].start.col, selection[0].end.col, 'htRight');
+                }}
+              ]
+            }
+          }
+        }
+      },
+      stretchH: 'all',
+      selectionMode: 'multiple'
+    };
   }
 
   static alignColumns(core, startCol, endCol, className) {