@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
116 lines • 5.97 kB
JavaScript
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 _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 classnames from 'classnames';
import { injectIntl } from 'react-intl';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { TableMap } from '@atlaskit/editor-tables/table-map';
import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { clearHoverSelection, hoverTable } from '../../../pm-plugins/commands';
import { TableCssClassName as ClassName } from '../../../types';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
var CornerControlComponent = /*#__PURE__*/function (_Component) {
function CornerControlComponent() {
var _this;
_classCallCheck(this, CornerControlComponent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, CornerControlComponent, [].concat(args));
_defineProperty(_this, "isActive", function () {
var _this$props = _this.props,
editorView = _this$props.editorView,
hoveredRows = _this$props.hoveredRows,
isResizing = _this$props.isResizing;
var selection = editorView.state.selection;
var table = findTable(selection);
if (!table) {
return false;
}
return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
});
_defineProperty(_this, "clearHoverSelection", function () {
var _this$props$editorVie = _this.props.editorView,
state = _this$props$editorVie.state,
dispatch = _this$props$editorVie.dispatch;
clearHoverSelection()(state, dispatch);
});
_defineProperty(_this, "selectTable", function () {
var _this$props$editorVie2 = _this.props.editorView,
state = _this$props$editorVie2.state,
dispatch = _this$props$editorVie2.dispatch;
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
});
_defineProperty(_this, "hoverTable", function () {
var _this$props$editorVie3 = _this.props.editorView,
state = _this$props$editorVie3.state,
dispatch = _this$props$editorVie3.dispatch;
hoverTable()(state, dispatch);
});
return _this;
}
_inherits(CornerControlComponent, _Component);
return _createClass(CornerControlComponent, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
isInDanger = _this$props2.isInDanger,
tableRef = _this$props2.tableRef,
isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
formatMessage = _this$props2.intl.formatMessage;
if (!tableRef) {
return null;
}
var isActive = this.isActive();
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: classnames(ClassName.CORNER_CONTROLS, {
active: isActive,
sticky: this.props.stickyTop !== undefined
}),
style: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: this.props.stickyTop !== undefined ? "0px" : undefined
},
contentEditable: false
}, /*#__PURE__*/React.createElement("button", {
"aria-label": formatMessage(messages.cornerControl),
type: "button"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
danger: isActive && isInDanger
}),
onClick: this.selectTable,
onMouseOver: this.hoverTable,
onMouseOut: this.clearHoverSelection,
onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.hoverTable : undefined,
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined
}), !isHeaderRowEnabled &&
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
}, /*#__PURE__*/React.createElement("div", {
className: ClassName.CONTROLS_INSERT_MARKER
})), !isHeaderColumnEnabled &&
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
}, /*#__PURE__*/React.createElement("div", {
className: ClassName.CONTROLS_INSERT_MARKER
})));
}
}]);
}(Component);
export var CornerControls = injectIntl(CornerControlComponent);