@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
315 lines (310 loc) • 14.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { Popup } from '@atlaskit/editor-common/ui';
import { closestElement } from '@atlaskit/editor-common/utils';
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
import { getSelectionRect, isTableSelected } from '@atlaskit/editor-tables/utils';
import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';
import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
import { getColumnDeleteButtonParams, getColumnsWidths } from '../../pm-plugins/utils/column-controls';
import { getRowDeleteButtonParams, getRowHeights } from '../../pm-plugins/utils/row-controls';
import { TableCssClassName as ClassName } from '../../types';
import { stickyRowZIndex } from '../consts';
import DeleteButton from './DeleteButton';
import getPopupOptions from './getPopUpOptions';
function getSelectionType(selection) {
if (!isTableSelected(selection) && selection instanceof CellSelection) {
if (selection.isRowSelection()) {
return 'row';
}
if (selection.isColSelection()) {
return 'column';
}
}
return;
}
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
function FloatingDeleteButton(props) {
var _this;
_classCallCheck(this, FloatingDeleteButton);
_this = _callSuper(this, FloatingDeleteButton, [props]);
_defineProperty(_this, "wrapper", null);
_defineProperty(_this, "updateWrapper", function () {
var tableWrapper = closestElement(_this.props.tableRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
if (tableWrapper) {
_this.wrapper = tableWrapper;
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
_this.wrapper.addEventListener('scroll', _this.onWrapperScrolled);
_this.setState({
scrollLeft: tableWrapper.scrollLeft
});
} else {
if (_this.wrapper) {
// unsubscribe if we previously had one and it just went away
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
_this.wrapper.removeEventListener('scroll', _this.onWrapperScrolled);
// and reset scroll position
_this.setState({
scrollLeft: 0
});
}
_this.wrapper = null;
}
});
_defineProperty(_this, "onWrapperScrolled", function (e) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var wrapper = e.target;
_this.setState({
scrollLeft: wrapper.scrollLeft
});
});
_defineProperty(_this, "handleMouseEnter", function () {
var _this$props$editorVie = _this.props.editorView,
state = _this$props$editorVie.state,
dispatch = _this$props$editorVie.dispatch;
switch (_this.state.selectionType) {
case 'row':
{
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return hoverRows(_this.state.indexes, true)(state, dispatch, _this.props.editorView);
}
case 'column':
{
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return hoverColumns(_this.state.indexes, true)(state, dispatch, _this.props.editorView);
}
}
return false;
});
_defineProperty(_this, "handleMouseLeave", function () {
var _this$props$editorVie2 = _this.props.editorView,
state = _this$props$editorVie2.state,
dispatch = _this$props$editorVie2.dispatch;
return clearHoverSelection()(state, dispatch);
});
/**
*
*
* @private
* @memberof FloatingDeleteButton
*/
_defineProperty(_this, "handleClick", function (event) {
event.preventDefault();
var editorAnalyticsAPI = _this.props.editorAnalyticsAPI;
var _this$props$editorVie3 = _this.props.editorView,
state = _this$props$editorVie3.state,
dispatch = _this$props$editorVie3.dispatch;
var _getTablePluginState = getTablePluginState(state),
isHeaderRowRequired = _getTablePluginState.pluginConfig.isHeaderRowRequired;
var rect = getSelectionRect(state.selection);
if (rect) {
switch (_this.state.selectionType) {
case 'column':
{
deleteColumnsWithAnalytics(editorAnalyticsAPI, _this.props.api)(INPUT_METHOD.BUTTON, rect)(state, dispatch, _this.props.editorView);
return;
}
case 'row':
{
deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect, !!isHeaderRowRequired)(state, dispatch);
return;
}
}
}
var _this$props$editorVie4 = _this.props.editorView;
state = _this$props$editorVie4.state;
dispatch = _this$props$editorVie4.dispatch;
clearHoverSelection()(state, dispatch);
});
_this.state = {
selectionType: undefined,
top: 0,
left: 0,
indexes: [],
scrollLeft: 0
};
return _this;
}
_inherits(FloatingDeleteButton, _Component);
return _createClass(FloatingDeleteButton, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(_, nextState) {
return this.state.selectionType !== nextState.selectionType || this.state.left !== nextState.left || this.state.top !== nextState.top || this.state.scrollLeft !== nextState.scrollLeft;
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.updateWrapper();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.updateWrapper();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.wrapper) {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.wrapper.removeEventListener('scroll', this.onWrapperScrolled);
}
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
mountPoint = _this$props.mountPoint,
boundariesElement = _this$props.boundariesElement,
tableRef = _this$props.tableRef;
var selectionType = this.state.selectionType;
if (!selectionType || !tableRef) {
return null;
}
var tableContainerWrapper = closestElement(tableRef, ".".concat(ClassName.TABLE_CONTAINER));
var button = /*#__PURE__*/React.createElement(DeleteButton, {
removeLabel: selectionType === 'column' ? messages.removeColumns : messages.removeRows,
onClick: this.handleClick,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
});
var popupOpts = getPopupOptions({
left: this.state.left,
top: this.state.top,
selectionType: this.state.selectionType,
tableWrapper: this.wrapper
});
var mountTo = tableContainerWrapper || mountPoint;
if (this.state.position === 'sticky' && mountTo) {
var headerRow = tableRef.querySelector('tr.sticky');
if (headerRow) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var rect = headerRow.getBoundingClientRect();
var calculatePosition = popupOpts.onPositionCalculated || function (pos) {
return pos;
};
var pos = calculatePosition({
left: this.state.left,
top: this.state.top
});
return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
position: 'fixed',
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: pos.top,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
zIndex: stickyRowZIndex,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
left: rect.left + (pos.left || 0) - (this.state.selectionType === 'column' ? this.state.scrollLeft : 0) - (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
this.props.isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0)
}
}, button), mountTo);
}
}
return /*#__PURE__*/React.createElement(Popup, _extends({
target: tableRef,
mountTo: mountTo,
boundariesElement: tableContainerWrapper || boundariesElement,
scrollableElement: this.wrapper || undefined,
forcePlacement: true,
allowOutOfBounds: true
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, popupOpts), button);
}
}], [{
key: "getDerivedStateFromProps",
value:
/**
* We derivate the button state from the properties passed.
* We do this in here because we need this information in different places
* and this prevent to do multiple width calculations in the same component.
*/
function getDerivedStateFromProps(nextProps, prevState) {
var selectionType = getSelectionType(nextProps.selection);
var inStickyMode = nextProps.stickyHeaders && nextProps.stickyHeaders.sticky;
var rect = getSelectionRect(nextProps.selection);
// only tie row delete to sticky header if it's the only thing
// in the selection, otherwise the row delete will hover around
// the rest of the selection
var firstRowInSelection = rect && rect.top === 0 && rect.bottom === 1;
var shouldStickyButton = inStickyMode && firstRowInSelection;
var stickyTop = nextProps.stickyHeaders ? nextProps.stickyHeaders.top + nextProps.stickyHeaders.padding : 0;
if (selectionType) {
switch (selectionType) {
case 'column':
{
// Calculate the button position and indexes for columns
var columnsWidths = getColumnsWidths(nextProps.editorView);
var deleteBtnParams = getColumnDeleteButtonParams(columnsWidths, nextProps.editorView.state.selection);
if (deleteBtnParams) {
return _objectSpread(_objectSpread({}, deleteBtnParams), {}, {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
top: inStickyMode ? nextProps.stickyHeaders.top : 0,
position: inStickyMode ? 'sticky' : undefined,
selectionType: selectionType
});
}
return null;
}
case 'row':
{
// Calculate the button position and indexes for rows
if (nextProps.tableRef) {
var rowHeights = getRowHeights(nextProps.tableRef);
var offsetTop = inStickyMode ? -rowHeights[0] : 0;
var _deleteBtnParams = getRowDeleteButtonParams(rowHeights, nextProps.editorView.state.selection, shouldStickyButton ? stickyTop : offsetTop);
if (_deleteBtnParams) {
return _objectSpread(_objectSpread({}, _deleteBtnParams), {}, {
position: shouldStickyButton ? 'sticky' : undefined,
left: 0,
selectionType: selectionType
});
}
}
return null;
}
}
}
// Clean state if no type
if (prevState.selectionType !== selectionType) {
return {
selectionType: undefined,
top: 0,
left: 0,
indexes: []
};
}
// Do nothing if doesn't change anything
return null;
}
}]);
}(Component);
_defineProperty(FloatingDeleteButton, "displayName", 'FloatingDeleteButton');
export default FloatingDeleteButton;