@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
124 lines (123 loc) • 7.99 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RowControls = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntlNext = require("react-intl-next");
var _messages = require("@atlaskit/editor-common/messages");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _commands = require("../../../pm-plugins/commands");
var _rowControls = require("../../../pm-plugins/utils/row-controls");
var _types = require("../../../types");
var _consts = require("../../consts");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var RowControlsComponent = /*#__PURE__*/function (_Component) {
function RowControlsComponent() {
var _this;
(0, _classCallCheck2.default)(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));
(0, _defineProperty2.default)(_this, "clearHoverSelection", function () {
var _this$props$editorVie = _this.props.editorView,
state = _this$props$editorVie.state,
dispatch = _this$props$editorVie.dispatch;
(0, _commands.clearHoverSelection)()(state, dispatch);
});
return _this;
}
(0, _inherits2.default)(RowControlsComponent, _Component);
return (0, _createClass2.default)(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 = (0, _rowControls.getRowHeights)(tableRef);
var rowsParams = (0, _rowControls.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.default.createElement("div", {
className: _types.TableCssClassName.ROW_CONTROLS
}, /*#__PURE__*/_react.default.createElement("div", {
className: _types.TableCssClassName.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] + _consts.tableToolbarSize;
}
var thisRowSticky = _this2.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
return /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat((0, _rowControls.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(_consts.tableControlsSpacing - 2, "px") : undefined
}
}, /*#__PURE__*/_react.default.createElement("button", {
"aria-label": formatMessage(_messages.tableMessages.rowControl),
type: "button"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON, " ").concat(_types.TableCssClassName.CONTROLS_BUTTON),
onClick: function onClick(event) {
return _this2.props.selectRow(startIndex, event.shiftKey);
},
onMouseOver: function onMouseOver() {
return _this2.props.hoverRows([startIndex]);
},
onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
return _this2.props.hoverRows([startIndex]);
} : undefined,
onMouseOut: _this2.clearHoverSelection,
onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? _this2.clearHoverSelection : undefined,
"data-start-index": startIndex,
"data-end-index": endIndex
}), /*#__PURE__*/_react.default.createElement("div", {
className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
}));
})))
);
}
}]);
}(_react.Component);
var RowControls = exports.RowControls = (0, _reactIntlNext.injectIntl)(RowControlsComponent);