@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
115 lines • 6.61 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 { injectIntl } from 'react-intl';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { clearHoverSelection } from '../../../pm-plugins/commands';
import { getRowClassNames, getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
import { TableCssClassName as ClassName } from '../../../types';
import { tableControlsSpacing, tableToolbarSize } from '../../consts';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var RowControlsComponent = /*#__PURE__*/function (_Component) {
function RowControlsComponent() {
var _this;
_classCallCheck(this, RowControlsComponent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, RowControlsComponent, [].concat(args));
_defineProperty(_this, "clearHoverSelection", function () {
var _this$props$editorVie = _this.props.editorView,
state = _this$props$editorVie.state,
dispatch = _this$props$editorVie.dispatch;
clearHoverSelection()(state, dispatch);
});
return _this;
}
_inherits(RowControlsComponent, _Component);
return _createClass(RowControlsComponent, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
editorView = _this$props.editorView,
tableRef = _this$props.tableRef,
hoveredRows = _this$props.hoveredRows,
isInDanger = _this$props.isInDanger,
isResizing = _this$props.isResizing,
formatMessage = _this$props.intl.formatMessage,
selectionState = _this$props.selection;
if (!tableRef) {
return null;
}
var selection = editorView.state.selection;
var rowHeights = getRowHeights(tableRef);
var rowsParams = getRowsParams(rowHeights);
var firstRow = tableRef.querySelector('tr');
var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: ClassName.ROW_CONTROLS
}, /*#__PURE__*/React.createElement("div", {
className: ClassName.ROW_CONTROLS_INNER
}, rowsParams.map(function (_ref, index) {
var startIndex = _ref.startIndex,
endIndex = _ref.endIndex,
height = _ref.height;
// if previous row was header row, add its height to our margin
var marginTop = -1;
if (index === 1 && hasHeaderRow && _this2.props.stickyTop !== undefined) {
marginTop += rowHeights[index - 1] + tableToolbarSize;
}
var thisRowSticky = _this2.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat(getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
key: startIndex,
style: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
height: height,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
marginTop: "".concat(marginTop, "px"),
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: thisRowSticky ? "3px" : undefined,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
paddingTop: thisRowSticky ? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
"".concat(tableControlsSpacing - 2, "px") : undefined
}
}, /*#__PURE__*/React.createElement("button", {
"aria-label": formatMessage(messages.rowControl),
type: "button"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "".concat(ClassName.ROW_CONTROLS_BUTTON, " ").concat(ClassName.CONTROLS_BUTTON),
onClick: function onClick(event) {
return _this2.props.selectRow(startIndex, event.shiftKey);
},
onMouseOver: function onMouseOver() {
return _this2.props.hoverRows([startIndex]);
},
onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
return _this2.props.hoverRows([startIndex]);
} : undefined,
onMouseOut: _this2.clearHoverSelection,
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? _this2.clearHoverSelection : undefined,
"data-start-index": startIndex,
"data-end-index": endIndex
}), /*#__PURE__*/React.createElement("div", {
className: ClassName.CONTROLS_INSERT_MARKER
}));
})))
);
}
}]);
}(Component);
export var RowControls = injectIntl(RowControlsComponent);