@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
188 lines (187 loc) • 10.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = 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 _classnames2 = _interopRequireDefault(require("classnames"));
var _coreUtils = require("@atlaskit/editor-common/core-utils");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-tables/utils");
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, @typescript-eslint/no-explicit-any
var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
function NumberColumn() {
var _this;
(0, _classCallCheck2.default)(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));
(0, _defineProperty2.default)(_this, "hoverRows", function (index) {
return _this.props.tableActive ? _this.props.hoverRows([index]) : null;
});
(0, _defineProperty2.default)(_this, "selectRow", function (index, event) {
var _this$props = _this.props,
tableActive = _this$props.tableActive,
editorView = _this$props.editorView,
selectRow = _this$props.selectRow;
// If selection is outside the table then first reset the selection inside table
if (!tableActive && event.target && event.target instanceof Node) {
var _editorView$state = editorView.state,
doc = _editorView$state.doc,
selection = _editorView$state.selection,
tr = _editorView$state.tr;
var pos = editorView.posAtDOM(event.target, 1);
var $pos = doc.resolve(pos);
var newPos = selection.head > pos ?
// Selection is after table
// nodeSize - 3 will move the position inside last table cell
_state.Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1) :
// Selection is before table
_state.Selection.near($pos);
editorView.dispatch(tr.setSelection(newPos));
}
selectRow(index, event.shiftKey);
});
(0, _defineProperty2.default)(_this, "clearHoverSelection", function () {
var _this$props2 = _this.props,
tableActive = _this$props2.tableActive,
editorView = _this$props2.editorView;
if (tableActive) {
var state = editorView.state,
dispatch = editorView.dispatch;
(0, _commands.clearHoverSelection)()(state, dispatch);
}
});
(0, _defineProperty2.default)(_this, "getCellStyles", function (index, rowHeight) {
var _this$props3 = _this.props,
stickyTop = _this$props3.stickyTop,
hasHeaderRow = _this$props3.hasHeaderRow;
if (stickyTop && hasHeaderRow && index === 0) {
var topOffset = 0;
return {
height: rowHeight,
top: "".concat(topOffset, "px")
};
}
return {
height: rowHeight
};
});
(0, _defineProperty2.default)(_this, "getClassNames", function (index) {
var isButtonDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var _this$props4 = _this.props,
hoveredRows = _this$props4.hoveredRows,
editorView = _this$props4.editorView,
isInDanger = _this$props4.isInDanger,
isResizing = _this$props4.isResizing,
tableActive = _this$props4.tableActive;
var isActive = (0, _utils.isRowSelected)(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
return (0, _classnames2.default)(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableActive && isActive && isInDanger), _types.TableCssClassName.HOVERED_CELL_ACTIVE, tableActive && isActive));
});
return _this;
}
(0, _inherits2.default)(NumberColumn, _Component);
return (0, _createClass2.default)(NumberColumn, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props5 = this.props,
tableRef = _this$props5.tableRef,
hasHeaderRow = _this$props5.hasHeaderRow,
isDragAndDropEnabled = _this$props5.isDragAndDropEnabled,
tableActive = _this$props5.tableActive,
updateCellHoverLocation = _this$props5.updateCellHoverLocation;
var rowHeights = (0, _rowControls.getRowHeights)(tableRef);
if ((0, _coreUtils.isSSR)()) {
return /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _types.TableCssClassName.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:
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
isDragAndDropEnabled && tableActive ? "1px solid ".concat(_consts.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.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _types.TableCssClassName.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:
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
isDragAndDropEnabled && tableActive ? "1px solid ".concat(_consts.tableBorderColor) : undefined,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
visibility: 'visible'
},
contentEditable: false
}, rowHeights.map(function (rowHeight, index) {
return isDragAndDropEnabled ? /*#__PURE__*/_react.default.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)
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
,
onMouseOver: function onMouseOver() {
return updateCellHoverLocation(index);
}
}, hasHeaderRow ? index > 0 ? index : null : index + 1) :
/*#__PURE__*/
// eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
_react.default.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),
"data-index": index
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: _this2.getCellStyles(index, rowHeight),
onClick: function onClick(event) {
return _this2.selectRow(index, event);
}
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
,
onMouseOver: function onMouseOver() {
return _this2.hoverRows(index);
}
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
,
onMouseOut: _this2.clearHoverSelection
}, hasHeaderRow ? index > 0 ? index : null : index + 1);
}));
}
}]);
}(_react.Component);