show HandsontableModal from OptionsSelector

src/client/js/app.js

@@ -19,6 +19,7 @@ import SearchPage       from './components/SearchPage';
 import PageEditor       from './components/PageEditor';
 import OptionsSelector  from './components/PageEditor/OptionsSelector';
 import { EditorOptions, PreviewOptions } from './components/PageEditor/OptionsSelector';
+import HandsontableModal from './components/PageEditor/HandsontableModal';
 import SavePageControls from './components/SavePageControls';
 import PageEditorByHackmd from './components/PageEditorByHackmd';
 import Page             from './components/Page';
@@ -402,11 +403,30 @@ if (pageEditorOptionsSelectorElem) {
           // save
           crowi.saveEditorOptions(newEditorOptions);
           crowi.savePreviewOptions(newPreviewOptions);
-        }} />,
+        }}
+        onClickHandsontableButton={() => {
+          const handsontableModal = componentInstances.handsontableModal;
+          if (handsontableModal != null) {
+            handsontableModal.show(null, null);
+          }
+        }}
+      />,
     pageEditorOptionsSelectorElem
   );
 }
 
+// render HandsontableModal
+let handsontableModal;
+const handsontableModalElem = document.getElementById('handsontable-modal');
+if (handsontableModalElem) {
+  handsontableModal = ReactDOM.render(
+    <HandsontableModal
+      />,
+    handsontableModalElem
+  );
+  componentInstances.handsontableModal = handsontableModal;
+}
+
 // render PageStatusAlert
 let pageStatusAlert = null;
 const pageStatusAlertElem = document.getElementById('page-status-alert');

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import Modal from 'react-bootstrap/es/Modal';
+
+import { HotTable } from '@handsontable/react';
+
+export default class HandsontableModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      show: false,
+    };
+
+    this.data = [
+      ['', 'Ford', 'Volvo', 'Toyota', 'Honda'],
+      ['2016', 10, 11, 12, 13],
+      ['2017', 20, 11, 14, 13],
+      ['2018', 30, 15, 12, 13]
+    ];
+
+    this.cancel = this.cancel.bind(this);
+  }
+
+  show(data, doneHandler) {
+    this.setState({ show: true });
+  }
+
+  cancel() {
+    this.setState({ show: false });
+  }
+
+  render() {
+    return (
+      <Modal show={this.state.show} onHide={this.cancel}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <HotTable data={this.data} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}

src/client/js/components/PageEditor/OptionsSelector.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import Button from 'react-bootstrap/es/Button';
 import FormGroup from 'react-bootstrap/es/FormGroup';
 import FormControl from 'react-bootstrap/es/FormControl';
 import ControlLabel from 'react-bootstrap/es/ControlLabel';
@@ -38,6 +39,8 @@ export default class OptionsSelector extends React.Component {
     this.onClickStyleActiveLine = this.onClickStyleActiveLine.bind(this);
     this.onClickRenderMathJaxInRealtime = this.onClickRenderMathJaxInRealtime.bind(this);
     this.onToggleConfigurationDropdown = this.onToggleConfigurationDropdown.bind(this);
+
+    this.dispatchOnClickHandsontableButton = this.dispatchOnClickHandsontableButton.bind(this);
   }
 
   componentDidMount() {
@@ -104,13 +107,24 @@ export default class OptionsSelector extends React.Component {
     }
   }
 
+  /**
+   * dispatch onClickHandsontableButton event
+   */
+  dispatchOnClickHandsontableButton() {
+    this.props.onClickHandsontableButton();
+  }
+
   /**
    * dispatch onChange event
    */
   dispatchOnChange() {
-    if (this.props.onChange != null) {
-      this.props.onChange(this.state.editorOptions, this.state.previewOptions);
-    }
+    this.props.onChange(this.state.editorOptions, this.state.previewOptions);
+  }
+
+  renderHandsontableModalButton() {
+    return (
+      <Button bsSize="small" onClick={this.dispatchOnClickHandsontableButton}><i className="icon-grid"></i></Button>
+    );
   }
 
   renderThemeSelector() {
@@ -228,6 +242,7 @@ export default class OptionsSelector extends React.Component {
 
   render() {
     return <div className="d-flex flex-row">
+      <span className="m-l-5">{this.renderHandsontableModalButton()}</span>
       <span className="m-l-5">{this.renderThemeSelector()}</span>
       <span className="m-l-5">{this.renderKeymapModeSelector()}</span>
       <span className="m-l-5">{this.renderConfigurationDropdown()}</span>
@@ -255,7 +270,8 @@ export class PreviewOptions {
 
 OptionsSelector.propTypes = {
   crowi: PropTypes.object.isRequired,
-  editorOptions: PropTypes.instanceOf(EditorOptions),
-  previewOptions: PropTypes.instanceOf(PreviewOptions),
-  onChange: PropTypes.func,
+  editorOptions: PropTypes.instanceOf(EditorOptions).isRequired,
+  previewOptions: PropTypes.instanceOf(PreviewOptions).isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClickHandsontableButton: PropTypes.func.isRequired,
 };

src/server/views/widget/page_modals.html

@@ -3,3 +3,4 @@
 {% include '../modal/create_template.html' %}
 {% include '../modal/duplicate.html' %}
 {% include '../modal/put_back.html' %}
+<div id="handsontable-modal" />