@atlaskit/editor-plugin-table 5.3.0 → 5.3.2

package/dist/cjs/plugins/table/types.js

@@ -48,10 +48,13 @@ var TableDecorations = exports.TableDecorations = /*#__PURE__*/function (TableDe
   TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
   TableDecorations["COLUMN_RESIZING_HANDLE_WIDGET"] = "COLUMN_RESIZING_HANDLE_WIDGET";
   TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
+  TableDecorations["COLUMN_INSERT_LINE"] = "COLUMN_INSERT_LINE";
+  TableDecorations["ROW_INSERT_LINE"] = "ROW_INSERT_LINE";
   TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
   return TableDecorations;
 }({});
 var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread({}, _styles.TableSharedCssClassName), {}, {
+  /** Classic controls */
   COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls"),
   COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration"),
   COLUMN_SELECTED: "".concat(_adfSchema.tablePrefixSelector, "-column__selected"),
@@ -82,8 +85,13 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   CORNER_CONTROLS_INSERT_ROW_MARKER: "".concat(_adfSchema.tablePrefixSelector, "-corner-controls__insert-row-marker"),
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: "".concat(_adfSchema.tablePrefixSelector, "-corner-controls__insert-column-marker"),
   CONTROLS_CORNER_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-corner-button"),
+  /** Controls with drag handle */
+  COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration-with-drag"),
+  ROW_CONTROLS_WITH_DRAG: "".concat(_adfSchema.tablePrefixSelector, "-row-controls-with-drag"),
+  /** Other classes */
   NUMBERED_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column"),
   NUMBERED_COLUMN_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column__button"),
+  NUMBERED_COLUMN_BUTTON_DISABLED: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column__button-disabled"),
   HOVERED_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-hovered-column"),
   HOVERED_ROW: "".concat(_adfSchema.tablePrefixSelector, "-hovered-row"),
   HOVERED_TABLE: "".concat(_adfSchema.tablePrefixSelector, "-hovered-table"),
@@ -114,8 +122,13 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   TABLE_STICKY: "".concat(_adfSchema.tablePrefixSelector, "-sticky"),
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: "".concat(_adfSchema.tablePrefixSelector, "-last-item-in-cell"),
+  WITH_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-insert-line"),
+  WITH_FIRST_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-first-column-insert-line"),
+  WITH_LAST_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-last-column-insert-line"),
   WITH_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line"),
-  WITH_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line-last-column")
+  WITH_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line-last-column"),
+  WITH_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-row-insert-line"),
+  WITH_LAST_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-last-row-insert-line")
 });
 var ShadowEvent = exports.ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

package/dist/cjs/plugins/table/ui/DragHandle/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dragHandleButton = require("@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button");
+var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// TODO: use for now, in future replace with custom @atlaskit/icon/glyph/drag-handler
+// width is too large (24px), should be 16px
+var DragHandle = exports.DragHandle = function DragHandle(_ref) {
+  var tableLocalId = _ref.tableLocalId,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    indexes = _ref.indexes,
+    onClick = _ref.onClick,
+    onMouseOver = _ref.onMouseOver,
+    onMouseOut = _ref.onMouseOut;
+  var dragHandleDivRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var dragHandleDivRefCurrent = dragHandleDivRef.current;
+    if (dragHandleDivRefCurrent) {
+      return (0, _element.draggable)({
+        element: dragHandleDivRefCurrent,
+        getInitialData: function getInitialData() {
+          return {
+            localId: tableLocalId,
+            type: "table-".concat(direction),
+            indexes: indexes
+          };
+        }
+      });
+    }
+  }, [tableLocalId, direction, indexes]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: dragHandleDivRef,
+    style: {
+      backgroundColor: "var(--ds-surface, white)",
+      borderRadius: '4px',
+      border: "2px solid ".concat("var(--ds-surface, white)"),
+      transform: direction === 'column' ? 'rotate(90deg)' : 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_dragHandleButton.DragHandleButton, {
+    label: "blah"
+  }));
+};

package/dist/cjs/plugins/table/ui/TableFloatingControls/NumberColumn/index.js

@@ -14,11 +14,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../commands");
+var _pluginFactory = require("../../../pm-plugins/plugin-factory");
 var _types = require("../../../types");
 var _utils2 = require("../../../utils");
+var _consts = require("../../consts");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -69,14 +72,42 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         (0, _commands.clearHoverSelection)()(state, dispatch);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getClassNames", function (index) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateDragHandleLocation", function (rowIndex) {
       var _this$props3 = _this.props,
-        hoveredRows = _this$props3.hoveredRows,
         editorView = _this$props3.editorView,
-        isInDanger = _this$props3.isInDanger,
-        isResizing = _this$props3.isResizing;
+        tableActive = _this$props3.tableActive;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        hoveredCell = _getPluginState.hoveredCell;
+      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
+        (0, _commands.hoverCell)(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCellStyles", function (index, rowHeight) {
+      var _this$props4 = _this.props,
+        stickyTop = _this$props4.stickyTop,
+        hasHeaderRow = _this$props4.hasHeaderRow;
+      if (stickyTop && hasHeaderRow && index === 0) {
+        return {
+          height: rowHeight,
+          top: "".concat(stickyTop, "px")
+        };
+      }
+      return {
+        height: rowHeight
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getClassNames", function (index) {
+      var _classnames;
+      var isButtonDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var _this$props5 = _this.props,
+        hoveredRows = _this$props5.hoveredRows,
+        editorView = _this$props5.editorView,
+        isInDanger = _this$props5.isInDanger,
+        isResizing = _this$props5.isResizing;
       var isActive = (0, _utils.isRowSelected)(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
-      return [_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, isActive ? _types.TableCssClassName.HOVERED_CELL_ACTIVE : '', isActive && isInDanger ? _types.TableCssClassName.HOVERED_CELL_IN_DANGER : ''].join(' ');
+      return (0, _classnames2.default)(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, isActive && isInDanger), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.HOVERED_CELL_ACTIVE, isActive), _classnames));
     });
     return _this;
   }
@@ -84,25 +115,33 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props4 = this.props,
-        tableRef = _this$props4.tableRef,
-        hasHeaderRow = _this$props4.hasHeaderRow;
+      var _this$props6 = this.props,
+        tableRef = _this$props6.tableRef,
+        hasHeaderRow = _this$props6.hasHeaderRow,
+        isDragAndDropEnabled = _this$props6.isDragAndDropEnabled,
+        tableActive = _this$props6.tableActive;
       var rowHeights = (0, _utils2.getRowHeights)(tableRef);
       return /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.NUMBERED_COLUMN,
         style: {
-          marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined
+          marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
+          borderLeft: isDragAndDropEnabled && tableActive ? "1px solid ".concat((0, _consts.tableBorderColor)()) : undefined
         },
         contentEditable: false
       }, rowHeights.map(function (rowHeight, index) {
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement("div", {
+          key: "wrapper-".concat(index),
+          className: _this2.getClassNames(index, true),
+          "data-index": index,
+          style: _this2.getCellStyles(index, rowHeight),
+          onMouseOver: function onMouseOver() {
+            return _this2.updateDragHandleLocation(index);
+          }
+        }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/_react.default.createElement("div", {
           key: "wrapper-".concat(index),
           className: _this2.getClassNames(index),
           "data-index": index,
-          style: {
-            height: rowHeight,
-            top: _this2.props.stickyTop !== undefined && hasHeaderRow && index === 0 ? "".concat(_this2.props.stickyTop, "px") : undefined
-          },
+          style: _this2.getCellStyles(index, rowHeight),
           onClick: function onClick(event) {
             return _this2.selectRow(index, event);
           },

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -0,0 +1,114 @@
+"use strict";
+
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _commands = require("../../../commands");
+var _types = require("../../../types");
+var _utils = require("../../../utils");
+var _consts = require("../../consts");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var messages = (0, _reactIntlNext.defineMessages)({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
+  }
+});
+var RowControlsComponent = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(RowControlsComponent, _Component);
+  var _super = _createSuper(RowControlsComponent);
+  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 = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.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, _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;
+      if (!tableRef) {
+        return null;
+      }
+      var selection = editorView.state.selection;
+      var rowHeights = (0, _utils.getRowHeights)(tableRef);
+      var rowsParams = (0, _utils.getRowsParams)(rowHeights);
+      var firstRow = tableRef.querySelector('tr');
+      var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
+      return /*#__PURE__*/_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", {
+          className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat((0, _utils.getRowClassNames)(startIndex, selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
+          key: startIndex,
+          style: {
+            height: height,
+            marginTop: "".concat(marginTop, "px"),
+            top: thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : undefined,
+            paddingTop: thisRowSticky ? "".concat(_consts.tableControlsSpacing, "px") : undefined
+          }
+        }, /*#__PURE__*/_react.default.createElement("button", {
+          "aria-label": formatMessage(messages.rowControl),
+          type: "button",
+          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]);
+          },
+          onMouseOut: _this2.clearHoverSelection,
+          "data-start-index": startIndex,
+          "data-end-index": endIndex
+        }), /*#__PURE__*/_react.default.createElement("div", {
+          className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
+        }));
+      })));
+    }
+  }]);
+  return RowControlsComponent;
+}(_react.Component);
+var RowControls = exports.RowControls = (0, _reactIntlNext.injectIntl)(RowControlsComponent);

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragControls = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _types = require("../../../types");
+var _utils2 = require("../../../utils");
+var _DragHandle = require("../../DragHandle");
+var DragControlsComponent = function DragControlsComponent(_ref) {
+  var tableRef = _ref.tableRef,
+    hoveredCell = _ref.hoveredCell,
+    hoverRows = _ref.hoverRows,
+    selectRow = _ref.selectRow,
+    tableActive = _ref.tableActive,
+    editorView = _ref.editorView;
+  var rowHeights = (0, _utils2.getRowHeights)(tableRef);
+  var heights = rowHeights.map(function (height) {
+    return "".concat(height - 1, "px");
+  }).join(' ');
+  var _onClick = function onClick(index, event) {};
+  var onMouseOver = function onMouseOver() {};
+  var onMouseOut = function onMouseOut() {};
+  var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
+  var getLocalId = function getLocalId() {
+    var _tableNode$node;
+    var tableNode = (0, _utils.findTable)(editorView.state.selection);
+    return (tableNode === null || tableNode === void 0 || (_tableNode$node = tableNode.node) === null || _tableNode$node === void 0 || (_tableNode$node = _tableNode$node.attrs) === null || _tableNode$node === void 0 ? void 0 : _tableNode$node.localId) || '';
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _types.TableCssClassName.ROW_CONTROLS_WITH_DRAG,
+    style: {
+      gridTemplateRows: heights
+    }
+  }, Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gridRow: "".concat(rowIndex + 1, " / span 1")
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+    onClick: function onClick(event) {
+      return _onClick(rowIndex, event);
+    },
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    tableLocalId: getLocalId(),
+    indexes: []
+  })));
+};
+var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -1,114 +1,19 @@
 "use strict";
 
-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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
-var _commands = require("../../../commands");
-var _types = require("../../../types");
-var _utils = require("../../../utils");
-var _consts = require("../../consts");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var messages = (0, _reactIntlNext.defineMessages)({
-  rowControl: {
-    id: 'fabric.editor.rowControl',
-    defaultMessage: 'Highlight row',
-    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
+Object.defineProperty(exports, "DragControls", {
+  enumerable: true,
+  get: function get() {
+    return _DragControls.DragControls;
   }
 });
-var RowControlsComponent = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(RowControlsComponent, _Component);
-  var _super = _createSuper(RowControlsComponent);
-  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 = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.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;
+Object.defineProperty(exports, "RowControls", {
+  enumerable: true,
+  get: function get() {
+    return _ClassicControls.RowControls;
   }
-  (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;
-      if (!tableRef) {
-        return null;
-      }
-      var selection = editorView.state.selection;
-      var rowHeights = (0, _utils.getRowHeights)(tableRef);
-      var rowsParams = (0, _utils.getRowsParams)(rowHeights);
-      var firstRow = tableRef.querySelector('tr');
-      var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
-      return /*#__PURE__*/_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", {
-          className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat((0, _utils.getRowClassNames)(startIndex, selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
-          key: startIndex,
-          style: {
-            height: height,
-            marginTop: "".concat(marginTop, "px"),
-            top: thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : undefined,
-            paddingTop: thisRowSticky ? "".concat(_consts.tableControlsSpacing, "px") : undefined
-          }
-        }, /*#__PURE__*/_react.default.createElement("button", {
-          "aria-label": formatMessage(messages.rowControl),
-          type: "button",
-          className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON, "\n                  ").concat(_types.TableCssClassName.CONTROLS_BUTTON, "\n                "),
-          onClick: function onClick(event) {
-            return _this2.props.selectRow(startIndex, event.shiftKey);
-          },
-          onMouseOver: function onMouseOver() {
-            return _this2.props.hoverRows([startIndex]);
-          },
-          onMouseOut: _this2.clearHoverSelection,
-          "data-start-index": startIndex,
-          "data-end-index": endIndex
-        }), /*#__PURE__*/_react.default.createElement("div", {
-          className: _types.TableCssClassName.CONTROLS_INSERT_MARKER
-        }));
-      })));
-    }
-  }]);
-  return RowControlsComponent;
-}(_react.Component);
-var RowControls = exports.RowControls = (0, _reactIntlNext.injectIntl)(RowControlsComponent);
+});
+var _ClassicControls = require("./ClassicControls");
+var _DragControls = require("./DragControls");

package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js

@@ -111,10 +111,11 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
         ordering = _this$props.ordering,
         headerRowHeight = _this$props.headerRowHeight,
-        stickyHeader = _this$props.stickyHeader;
+        stickyHeader = _this$props.stickyHeader,
+        hoveredCell = _this$props.hoveredCell;
       var tableHeight = (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight;
       var nextTableHeight = nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight;
-      return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
+      return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
     }
   }, {
     key: "componentWillUnmount",
@@ -137,7 +138,9 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         tableActive = _this$props2.tableActive,
         hasHeaderRow = _this$props2.hasHeaderRow,
         hoveredRows = _this$props2.hoveredRows,
-        stickyHeader = _this$props2.stickyHeader;
+        stickyHeader = _this$props2.stickyHeader,
+        isDragAndDropEnabled = _this$props2.isDragAndDropEnabled,
+        hoveredCell = _this$props2.hoveredCell;
       if (!tableRef) {
         return null;
       }
@@ -156,8 +159,15 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         isInDanger: isInDanger,
         isResizing: isResizing,
         selectRow: this.selectRow,
-        stickyTop: stickyTop
-      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
+        stickyTop: stickyTop,
+        isDragAndDropEnabled: isDragAndDropEnabled
+      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
+        tableRef: tableRef,
+        hoveredCell: hoveredCell,
+        editorView: editorView,
+        hoverRows: this.hoverRows,
+        selectRow: this.selectRow
+      }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
         editorView: editorView,
         tableRef: tableRef,
         isInDanger: isInDanger,
@@ -175,7 +185,7 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         isResizing: isResizing,
         selectRow: this.selectRow,
         stickyTop: tableActive ? stickyTop : undefined
-      })));
+      }))));
     }
   }]);
   return TableFloatingControls;