|
|
@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
|
|
|
|
|
|
import Modal from 'react-bootstrap/es/Modal';
|
|
|
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';
|
|
|
@@ -10,21 +14,32 @@ 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);
|
|
|
|
|
|
this.state = {
|
|
|
show: false,
|
|
|
+ isWindowExpanded: false,
|
|
|
markdownTableOnInit: HandsontableModal.getDefaultMarkdownTable(),
|
|
|
markdownTable: HandsontableModal.getDefaultMarkdownTable(),
|
|
|
- handsontableSetting: HandsontableModal.getDefaultHandsotableSetting()
|
|
|
+ handsontableHeight: DEFAULT_HOT_HEIGHT,
|
|
|
+ handsontableSetting: HandsontableModal.getDefaultHandsontableSetting()
|
|
|
};
|
|
|
|
|
|
this.init = this.init.bind(this);
|
|
|
this.reset = this.reset.bind(this);
|
|
|
this.cancel = this.cancel.bind(this);
|
|
|
this.save = this.save.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) {
|
|
|
@@ -34,8 +49,14 @@ export default class HandsontableModal extends React.Component {
|
|
|
markdownTableOnInit: initMarkdownTable,
|
|
|
markdownTable: initMarkdownTable.clone(),
|
|
|
handsontableSetting: Object.assign({}, this.state.handsontableSetting, {
|
|
|
- afterUpdateSettings: HandsontableUtil.createHandlerToSynchronizeHandontableAlignWith(initMarkdownTable.options.align),
|
|
|
- loadData: HandsontableUtil.createHandlerToSynchronizeHandontableAlignWith(initMarkdownTable.options.align)
|
|
|
+ /*
|
|
|
+ * The afterUpdateSettings hook is called when this component state changes.
|
|
|
+ *
|
|
|
+ * In detail, when this component state changes, React will re-render HotTable because it is passed some state values of this component.
|
|
|
+ * HotTable#shouldComponentUpdate is called in this process and it call the updateSettings method for the Handsontable instance.
|
|
|
+ * After updateSetting is executed, Handsontable calls a AfterUpdateSetting hook.
|
|
|
+ */
|
|
|
+ afterUpdateSettings: HandsontableUtil.createHandlerToSynchronizeHandontableAlignWith(initMarkdownTable.options.align)
|
|
|
})
|
|
|
}
|
|
|
);
|
|
|
@@ -65,15 +86,84 @@ export default class HandsontableModal extends React.Component {
|
|
|
this.setState({ show: false });
|
|
|
}
|
|
|
|
|
|
+ setClassNameToColumns(className) {
|
|
|
+ const selectedRange = this.refs.hotTable.hotInstance.getSelectedRange();
|
|
|
+ if (selectedRange == null) return;
|
|
|
+
|
|
|
+ let startCol;
|
|
|
+ let endCol;
|
|
|
+
|
|
|
+ if (selectedRange[0].from.col < selectedRange[0].to.col) {
|
|
|
+ startCol = selectedRange[0].from.col;
|
|
|
+ endCol = selectedRange[0].to.col;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ startCol = selectedRange[0].to.col;
|
|
|
+ endCol = selectedRange[0].from.col;
|
|
|
+ }
|
|
|
+
|
|
|
+ HandsontableUtil.setClassNameToColumns(this.refs.hotTable.hotInstance, startCol, endCol, className);
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ renderExpandOrContractButton() {
|
|
|
+ const iconClassName = this.state.isWindowExpanded ? 'icon-size-actual' : 'icon-size-fullscreen';
|
|
|
+ return (
|
|
|
+ <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>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
+ const dialogClassNames = ['handsontable-modal'];
|
|
|
+ if (this.state.isWindowExpanded) {
|
|
|
+ dialogClassNames.push('handsontable-modal-expanded');
|
|
|
+ }
|
|
|
+
|
|
|
+ const dialogClassName = dialogClassNames.join(' ');
|
|
|
+
|
|
|
return (
|
|
|
- <Modal show={this.state.show} onHide={this.cancel} bsSize="large">
|
|
|
+ <Modal show={this.state.show} onHide={this.cancel} bsSize="large" dialogClassName={dialogClassName}>
|
|
|
<Modal.Header closeButton>
|
|
|
+ { this.renderExpandOrContractButton() }
|
|
|
<Modal.Title>Edit Table</Modal.Title>
|
|
|
</Modal.Header>
|
|
|
- <Modal.Body className="p-0">
|
|
|
- <div className="p-4">
|
|
|
- <HotTable ref='hotTable' data={this.state.markdownTable.table} settings={this.state.handsontableSetting} />
|
|
|
+ <Modal.Body className="p-0 d-flex flex-column">
|
|
|
+ <Navbar>
|
|
|
+ <Navbar.Form>
|
|
|
+ <ButtonGroup>
|
|
|
+ <Button onClick={() => { this.setClassNameToColumns('htLeft') }}><i className="ti-align-left"></i></Button>
|
|
|
+ <Button onClick={() => { this.setClassNameToColumns('htCenter') }}><i className="ti-align-center"></i></Button>
|
|
|
+ <Button onClick={() => { this.setClassNameToColumns('htRight') }}><i className="ti-align-right"></i></Button>
|
|
|
+ </ButtonGroup>
|
|
|
+ </Navbar.Form>
|
|
|
+ </Navbar>
|
|
|
+ <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>
|
|
|
@@ -102,11 +192,21 @@ export default class HandsontableModal extends React.Component {
|
|
|
);
|
|
|
}
|
|
|
|
|
|
- static getDefaultHandsotableSetting() {
|
|
|
+ static getDefaultHandsontableSetting() {
|
|
|
return {
|
|
|
- height: 300,
|
|
|
rowHeaders: true,
|
|
|
colHeaders: true,
|
|
|
+ manualRowMove: true,
|
|
|
+ manualRowResize: true,
|
|
|
+ manualColumnMove: true,
|
|
|
+ manualColumnResize: true,
|
|
|
+ selectionMode: 'multiple',
|
|
|
+ outsideClickDeselects: false,
|
|
|
+
|
|
|
+ modifyColWidth: function(width) {
|
|
|
+ return Math.max(80, Math.min(400, width));
|
|
|
+ },
|
|
|
+
|
|
|
contextMenu: {
|
|
|
items: {
|
|
|
'row_above': {}, 'row_below': {}, 'col_left': {}, 'col_right': {},
|
|
|
@@ -137,9 +237,8 @@ export default class HandsontableModal extends React.Component {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- stretchH: 'all',
|
|
|
- selectionMode: 'multiple'
|
|
|
+ }
|
|
|
+
|
|
|
};
|
|
|
}
|
|
|
}
|
Yuki Takei