@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
126 lines (125 loc) • 7.29 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CornerControls = 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 _classnames = _interopRequireDefault(require("classnames"));
var _reactIntlNext = require("react-intl-next");
var _messages = require("@atlaskit/editor-common/messages");
var _tableMap = require("@atlaskit/editor-tables/table-map");
var _utils = require("@atlaskit/editor-tables/utils");
var _commands = require("../../../pm-plugins/commands");
var _types = require("../../../types");
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 CornerControlComponent = /*#__PURE__*/function (_Component) {
function CornerControlComponent() {
var _this;
(0, _classCallCheck2.default)(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));
(0, _defineProperty2.default)(_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 = (0, _utils.findTable)(selection);
if (!table) {
return false;
}
return (0, _utils.isTableSelected)(selection) || hoveredRows && hoveredRows.length === _tableMap.TableMap.get(table.node).height && !isResizing;
});
(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);
});
(0, _defineProperty2.default)(_this, "selectTable", function () {
var _this$props$editorVie2 = _this.props.editorView,
state = _this$props$editorVie2.state,
dispatch = _this$props$editorVie2.dispatch;
dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
});
(0, _defineProperty2.default)(_this, "hoverTable", function () {
var _this$props$editorVie3 = _this.props.editorView,
state = _this$props$editorVie3.state,
dispatch = _this$props$editorVie3.dispatch;
(0, _commands.hoverTable)()(state, dispatch);
});
return _this;
}
(0, _inherits2.default)(CornerControlComponent, _Component);
return (0, _createClass2.default)(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.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: (0, _classnames.default)(_types.TableCssClassName.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.default.createElement("button", {
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
type: "button"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {
danger: isActive && isInDanger
}),
onClick: this.selectTable
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
,
onMouseOver: this.hoverTable
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
,
onMouseOut: this.clearHoverSelection
}), !isHeaderRowEnabled &&
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
_react.default.createElement("div", {
className: _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
}, /*#__PURE__*/_react.default.createElement("div", {
className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
})), !isHeaderColumnEnabled &&
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
_react.default.createElement("div", {
className: _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
}, /*#__PURE__*/_react.default.createElement("div", {
className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
})));
}
}]);
}(_react.Component);
var CornerControls = exports.CornerControls = (0, _reactIntlNext.injectIntl)(CornerControlComponent);