@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
73 lines • 4.53 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("react");
var Popup_1 = require("../Popup");
var CornerControls_1 = require("./CornerControls");
var ColumnControls_1 = require("./ColumnControls");
var RowControls_1 = require("./RowControls");
var TableFloatingControls = (function (_super) {
tslib_1.__extends(TableFloatingControls, _super);
function TableFloatingControls() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
tableSelected: false
};
_this.handleMouseDown = function () {
_this.props.pluginState.updateToolbarFocused(true);
};
_this.handleBlur = function () {
// hide toolbar if it's currently in focus and editor looses focus
if (!_this.props.pluginState.toolbarFocused) {
_this.props.pluginState.updateEditorFocused(false);
_this.props.pluginState.update(_this.props.editorView.docView, true);
}
_this.props.pluginState.updateToolbarFocused(false);
};
_this.handleKeyDown = function (event) {
var _a = _this.props, editorView = _a.editorView, pluginState = _a.pluginState;
var result = pluginState.keymapHandler(editorView, event.nativeEvent);
if (result) {
event.nativeEvent.preventDefault();
}
if (!pluginState.cellSelection) {
_this.setState({ tableSelected: false });
}
};
_this.handleCornerMouseOver = function () {
_this.setState({ tableSelected: true });
_this.props.pluginState.hoverTable();
};
_this.handleCornerMouseOut = function () {
_this.setState({ tableSelected: false });
_this.props.pluginState.resetHoverSelection();
};
_this.handlePluginStateChange = function (pluginState) {
var tableElement = pluginState.tableElement, tableActive = pluginState.tableActive, tableNode = pluginState.tableNode, cellSelection = pluginState.cellSelection;
_this.setState({ tableElement: tableElement, tableActive: tableActive, tableNode: tableNode, cellSelection: cellSelection });
};
return _this;
}
TableFloatingControls.prototype.componentDidMount = function () {
this.props.pluginState.subscribe(this.handlePluginStateChange);
};
TableFloatingControls.prototype.componentWillUnmount = function () {
this.props.pluginState.unsubscribe(this.handlePluginStateChange);
};
TableFloatingControls.prototype.render = function () {
var _a = this.state, tableActive = _a.tableActive, tableElement = _a.tableElement, tableSelected = _a.tableSelected;
var _b = this.props, pluginState = _b.pluginState, popupsBoundariesElement = _b.popupsBoundariesElement, popupsMountPoint = _b.popupsMountPoint;
if (!tableElement || !tableActive) {
return null;
}
return (React.createElement(Popup_1.default, { target: tableElement, boundariesElement: popupsBoundariesElement, mountTo: popupsMountPoint, alignY: "top" },
React.createElement("div", { onMouseDown: this.handleMouseDown, onBlur: this.handleBlur, className: tableSelected ? 'tableSelected' : '', onKeyDown: this.handleKeyDown },
React.createElement(CornerControls_1.default, { tableElement: tableElement, isSelected: pluginState.isTableSelected, selectTable: pluginState.selectTable, insertColumn: pluginState.insertColumn, insertRow: pluginState.insertRow, onMouseOver: this.handleCornerMouseOver, onMouseOut: this.handleCornerMouseOut }),
React.createElement(ColumnControls_1.default, { tableElement: tableElement, isSelected: pluginState.isColumnSelected, selectColumn: pluginState.selectColumn, insertColumn: pluginState.insertColumn, hoverColumn: pluginState.hoverColumn, resetHoverSelection: pluginState.resetHoverSelection }),
React.createElement(RowControls_1.default, { tableElement: tableElement, isSelected: pluginState.isRowSelected, selectRow: pluginState.selectRow, insertRow: pluginState.insertRow, hoverRow: pluginState.hoverRow, resetHoverSelection: pluginState.resetHoverSelection }))));
};
return TableFloatingControls;
}(react_1.PureComponent));
exports.default = TableFloatingControls;
//# sourceMappingURL=index.js.map