@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
117 lines • 6.65 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 { isSSR } from '@atlaskit/editor-common/core-utils';
import { isRowSelected } from '@atlaskit/editor-tables/utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
import { TableCssClassName as ClassName } from '../../../types';
import { tableBorderColor } from '../../consts';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
var NumberColumn = /*#__PURE__*/function (_Component) {
function NumberColumn() {
var _this;
_classCallCheck(this, NumberColumn);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, NumberColumn, [].concat(args));
_defineProperty(_this, "getCellStyles", function (index, rowHeight) {
var _this$props = _this.props,
stickyTop = _this$props.stickyTop,
hasHeaderRow = _this$props.hasHeaderRow;
if (stickyTop && hasHeaderRow && index === 0) {
var topOffset = 0;
return {
height: rowHeight,
top: "".concat(topOffset, "px")
};
}
return {
height: rowHeight
};
});
_defineProperty(_this, "getClassNames", function (index) {
var isButtonDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var _this$props2 = _this.props,
hoveredRows = _this$props2.hoveredRows,
editorView = _this$props2.editorView,
isInDanger = _this$props2.isInDanger,
isResizing = _this$props2.isResizing,
tableActive = _this$props2.tableActive;
var isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
return classnames(ClassName.NUMBERED_COLUMN_BUTTON, _defineProperty(_defineProperty(_defineProperty({}, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), ClassName.HOVERED_CELL_IN_DANGER, tableActive && isActive && isInDanger), ClassName.HOVERED_CELL_ACTIVE, tableActive && isActive));
});
return _this;
}
_inherits(NumberColumn, _Component);
return _createClass(NumberColumn, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props3 = this.props,
tableRef = _this$props3.tableRef,
hasHeaderRow = _this$props3.hasHeaderRow,
isDragAndDropEnabled = _this$props3.isDragAndDropEnabled,
tableActive = _this$props3.tableActive,
updateCellHoverLocation = _this$props3.updateCellHoverLocation;
var rowHeights = getRowHeights(tableRef);
if (isSSR()) {
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: ClassName.NUMBERED_COLUMN,
style: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
"1px solid ".concat(tableBorderColor) : undefined,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
visibility: 'hidden' // Ensure the column is not visible during SSR
},
contentEditable: false
});
}
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: ClassName.NUMBERED_COLUMN,
style: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
"1px solid ".concat(tableBorderColor) : undefined,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
visibility: 'visible'
},
contentEditable: false
}, rowHeights.map(function (rowHeight, index) {
return /*#__PURE__*/React.createElement("div", {
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
key: "wrapper-".concat(index)
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: _this2.getClassNames(index, true),
"data-index": index
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: _this2.getCellStyles(index, rowHeight),
onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
return updateCellHoverLocation(index);
} : undefined,
onMouseOver: function onMouseOver() {
return updateCellHoverLocation(index);
}
}, hasHeaderRow ? index > 0 ? index : null : index + 1);
}));
}
}]);
}(Component);
export { NumberColumn as default };