@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/esm/plugins/table/ui/FloatingInsertButton/getPopupOptions.js

@@ -0,0 +1,96 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { tableInsertColumnButtonOffset, tableInsertColumnButtonSize, tableToolbarSize } from '../consts';
+var HORIZONTAL_ALIGN_COLUMN_BUTTON = -(tableInsertColumnButtonSize / 2);
+var HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON = HORIZONTAL_ALIGN_COLUMN_BUTTON + akEditorTableNumberColumnWidth;
+var VERTICAL_ALIGN_COLUMN_BUTTON = tableToolbarSize + tableInsertColumnButtonOffset;
+var HORIZONTAL_ALIGN_ROW_BUTTON = -(tableToolbarSize + tableInsertColumnButtonOffset + tableInsertColumnButtonSize);
+var VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
+
+function getRowOptions(index) {
+  var defaultOptions = {
+    alignX: 'left',
+    alignY: 'bottom',
+    offset: [0, VERTICAL_ALIGN_ROW_BUTTON]
+  };
+
+  if (index === 0) {
+    defaultOptions = _objectSpread(_objectSpread({}, defaultOptions), {}, {
+      alignY: 'top',
+      // The offset is the inverse the original, because is align top nop bottom.
+      offset: [0, -VERTICAL_ALIGN_ROW_BUTTON]
+    });
+  }
+
+  return _objectSpread(_objectSpread({}, defaultOptions), {}, {
+    onPositionCalculated: function onPositionCalculated(position) {
+      return _objectSpread(_objectSpread({}, position), {}, {
+        // Left position should be always the offset (To place in the correct position even if the table has overflow).
+        left: HORIZONTAL_ALIGN_ROW_BUTTON
+      });
+    }
+  });
+}
+
+function getColumnOptions(index, tableContainer, hasNumberedColumns) {
+  var options = {
+    alignX: 'end',
+    alignY: 'top',
+    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, VERTICAL_ALIGN_COLUMN_BUTTON],
+    // :: (position: PopupPosition) -> PopupPosition
+    // Limit the InsertButton position to the table container
+    // if the left position starts before it
+    // we should always set the InsertButton on the start,
+    // considering the offset from the first column
+    onPositionCalculated: function onPositionCalculated(position) {
+      var left = position.left;
+
+      if (!left) {
+        // If not left, lest skip expensive next calculations.
+        return position;
+      }
+
+      if (index === 0) {
+        return _objectSpread(_objectSpread({}, position), {}, {
+          left: hasNumberedColumns ? HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON : HORIZONTAL_ALIGN_COLUMN_BUTTON
+        });
+      } // Check if current position is greater than the available container width
+
+
+      var rect = tableContainer ? tableContainer.getBoundingClientRect() : null;
+      return _objectSpread(_objectSpread({}, position), {}, {
+        left: rect && left > rect.width ? rect.width : left
+      });
+    }
+  }; // We need to change the popup position when
+  // the column index is zero
+
+  if (index === 0) {
+    return _objectSpread(_objectSpread({}, options), {}, {
+      alignX: 'left',
+      alignY: 'top'
+    });
+  }
+
+  return options;
+}
+
+function getPopupOptions(type, index, hasNumberedColumns, tableContainer) {
+  switch (type) {
+    case 'column':
+      return getColumnOptions(index, tableContainer, hasNumberedColumns);
+
+    case 'row':
+      return getRowOptions(index);
+
+    default:
+      return {};
+  }
+}
+
+export default getPopupOptions;

package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js

@@ -0,0 +1,214 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React from 'react';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { injectIntl } from 'react-intl-next';
+import { Popup } from '@atlaskit/editor-common/ui'; // import { closestElement } from '../../../../utils/dom';
+
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
+import { TableCssClassName as ClassName } from '../../types';
+import { checkIfNumberColumnEnabled } from '../../utils';
+import getPopupOptions from './getPopupOptions';
+import InsertButton from './InsertButton';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
+export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
+  _inherits(FloatingInsertButton, _React$Component);
+
+  var _super = _createSuper(FloatingInsertButton);
+
+  function FloatingInsertButton(props) {
+    var _this;
+
+    _classCallCheck(this, FloatingInsertButton);
+
+    _this = _super.call(this, props);
+    _this.insertColumn = _this.insertColumn.bind(_assertThisInitialized(_this));
+    _this.insertRow = _this.insertRow.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(FloatingInsertButton, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          tableNode = _this$props.tableNode,
+          editorView = _this$props.editorView,
+          insertColumnButtonIndex = _this$props.insertColumnButtonIndex,
+          insertRowButtonIndex = _this$props.insertRowButtonIndex,
+          tableRef = _this$props.tableRef,
+          mountPoint = _this$props.mountPoint,
+          boundariesElement = _this$props.boundariesElement,
+          isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
+          isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
+          dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
+      var type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
+
+      if (!tableNode || !tableRef || !type) {
+        return null;
+      } // We can’t display the insert button for row|colum index 0
+      // when the header row|colum is enabled, this feature will be change on the future
+
+
+      if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
+        return null;
+      }
+
+      var tr = editorView.state.tr;
+
+      if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
+        return null;
+      }
+
+      var cellPosition = this.getCellPosition(type);
+
+      if (!cellPosition) {
+        return null;
+      }
+
+      var tablePos = findTable(editorView.state.selection);
+
+      if (!tablePos) {
+        return null;
+      }
+
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var pos = cellPosition + tablePos.start + 1;
+      var target;
+
+      try {
+        target = findDomRefAtPos(pos, domAtPos);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn(error);
+
+        if (dispatchAnalyticsEvent) {
+          var payload = {
+            action: ACTION.ERRORED,
+            actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
+            eventType: EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              component: CONTENT_COMPONENT.FLOATING_INSERT_BUTTON,
+              selection: editorView.state.selection.toJSON(),
+              position: pos,
+              docSize: editorView.state.doc.nodeSize,
+              error: error === null || error === void 0 ? void 0 : error.toString(),
+              errorStack: error.stack || undefined
+            }
+          };
+          dispatchAnalyticsEvent(payload);
+        }
+      }
+
+      if (!target || !(target instanceof HTMLElement)) {
+        return null;
+      }
+
+      var targetCellRef = type === 'row' ? closestElement(target, 'tr') : closestElement(target, 'td, th');
+
+      if (!targetCellRef) {
+        return null;
+      }
+
+      var tableContainerWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_CONTAINER));
+      var tableWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
+      var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
+      var hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
+      return /*#__PURE__*/React.createElement(Popup, _extends({
+        target: targetCellRef,
+        mountTo: tableContainerWrapper || mountPoint,
+        boundariesElement: tableContainerWrapper || boundariesElement,
+        scrollableElement: tableWrapper,
+        forcePlacement: true,
+        allowOutOfBounds: true
+      }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper)), /*#__PURE__*/React.createElement(InsertButton, {
+        type: type,
+        tableRef: tableRef,
+        onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
+        hasStickyHeaders: this.props.hasStickyHeaders || false
+      }));
+    }
+  }, {
+    key: "getCellPosition",
+    value: function getCellPosition(type) {
+      var _this$props2 = this.props,
+          tableNode = _this$props2.tableNode,
+          insertColumnButtonIndex = _this$props2.insertColumnButtonIndex,
+          insertRowButtonIndex = _this$props2.insertRowButtonIndex;
+      var tableMap = TableMap.get(tableNode);
+
+      if (type === 'column') {
+        var columnIndex = insertColumnButtonIndex === 0 ? 0 : insertColumnButtonIndex - 1;
+
+        if (columnIndex > tableMap.width - 1) {
+          return null;
+        }
+
+        return tableMap.positionAt(0, columnIndex, tableNode);
+      } else {
+        var rowIndex = insertRowButtonIndex === 0 ? 0 : insertRowButtonIndex - 1;
+
+        if (rowIndex > tableMap.height - 1) {
+          return null;
+        }
+
+        return tableMap.positionAt(rowIndex, 0, tableNode);
+      }
+    }
+  }, {
+    key: "insertRow",
+    value: function insertRow(event) {
+      var _this$props3 = this.props,
+          editorView = _this$props3.editorView,
+          insertRowButtonIndex = _this$props3.insertRowButtonIndex,
+          editorAnalyticsAPI = _this$props3.editorAnalyticsAPI;
+
+      if (typeof insertRowButtonIndex !== 'undefined') {
+        event.preventDefault();
+        var state = editorView.state,
+            dispatch = editorView.dispatch;
+        insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, {
+          index: insertRowButtonIndex,
+          moveCursorToInsertedRow: true
+        })(state, dispatch);
+      }
+    }
+  }, {
+    key: "insertColumn",
+    value: function insertColumn(event) {
+      var _this$props4 = this.props,
+          editorView = _this$props4.editorView,
+          insertColumnButtonIndex = _this$props4.insertColumnButtonIndex,
+          editorAnalyticsAPI = _this$props4.editorAnalyticsAPI,
+          getEditorContainerWidth = _this$props4.getEditorContainerWidth;
+
+      if (typeof insertColumnButtonIndex !== 'undefined') {
+        event.preventDefault();
+        var state = editorView.state,
+            dispatch = editorView.dispatch;
+        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+      }
+    }
+  }]);
+
+  return FloatingInsertButton;
+}(React.Component);
+
+_defineProperty(FloatingInsertButton, "displayName", 'FloatingInsertButton');
+
+export default injectIntl(FloatingInsertButton);

package/dist/esm/plugins/table/ui/LayoutButton/index.js

@@ -0,0 +1,227 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { createRef } from 'react';
+import classnames from 'classnames';
+import { injectIntl } from 'react-intl-next';
+import { Popup } from '@atlaskit/editor-common/ui';
+import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
+import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
+import commonMessages from '@atlaskit/editor-common/messages';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { toggleTableLayoutWithAnalytics } from '../../commands-with-analytics';
+import { TableCssClassName as ClassName } from '../../types';
+import { findDomRefAtPos } from 'prosemirror-utils';
+
+var addPopupOffset = function addPopupOffset(pos) {
+  return _objectSpread(_objectSpread({}, pos), {}, {
+    // add 12 pixels to align y position with
+    //the columns controls
+    top: pos.top ? pos.top + 12 : undefined
+  });
+};
+
+var getMessage = function getMessage(layout) {
+  switch (layout) {
+    case 'default':
+      return commonMessages.layoutWide;
+
+    case 'wide':
+      return commonMessages.layoutFullWidth;
+
+    default:
+      return commonMessages.layoutFixedWidth;
+  }
+};
+
+var LayoutButton = /*#__PURE__*/function (_React$Component) {
+  _inherits(LayoutButton, _React$Component);
+
+  var _super = _createSuper(LayoutButton);
+
+  function LayoutButton() {
+    var _this;
+
+    _classCallCheck(this, LayoutButton);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "stickyButtonRef", /*#__PURE__*/createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "resizeObserver", new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var resizeButton = _this.stickyButtonRef.current;
+        var tableWrapper = _this.props.targetRef;
+
+        if (resizeButton && tableWrapper) {
+          var clientRect = tableWrapper.getBoundingClientRect();
+          resizeButton.style.left = "".concat(clientRect.right, "px");
+        }
+      });
+    }));
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+      var _this$props$editorVie = _this.props.editorView,
+          state = _this$props$editorVie.state,
+          dispatch = _this$props$editorVie.dispatch;
+      toggleTableLayoutWithAnalytics(_this.props.editorAnalyticsAPI)(state, dispatch);
+    });
+
+    return _this;
+  }
+
+  _createClass(LayoutButton, [{
+    key: "getTitle",
+    value: function getTitle() {
+      var _this$props = this.props,
+          formatMessage = _this$props.intl.formatMessage,
+          _this$props$layout = _this$props.layout,
+          layout = _this$props$layout === void 0 ? 'default' : _this$props$layout;
+      return formatMessage(getMessage(layout));
+    }
+  }, {
+    key: "toolbarButton",
+    value: function toolbarButton() {
+      var _this$props2 = this.props,
+          isResizing = _this$props2.isResizing,
+          _this$props2$layout = _this$props2.layout,
+          layout = _this$props2$layout === void 0 ? 'default' : _this$props2$layout;
+      var title = this.getTitle();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(ClassName.LAYOUT_BUTTON, _defineProperty({}, ClassName.IS_RESIZING, isResizing))
+      }, /*#__PURE__*/React.createElement(ToolbarButton, {
+        title: title,
+        onClick: this.handleClick,
+        iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
+          label: title
+        }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+          label: title
+        })
+      }));
+    }
+  }, {
+    key: "getStickyTargetRef",
+    value: function getStickyTargetRef(pos) {
+      var editorView = this.props.editorView;
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var node = findDomRefAtPos(pos, domAtPos);
+      return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
+    }
+  }, {
+    key: "renderSticky",
+    value: function renderSticky(button, targetRef, tableRef) {
+      // const title = this.getTitle();
+      var title = 'TODO MISSING TITLE';
+
+      if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
+        return null;
+      }
+
+      var pos = targetRef.getBoundingClientRect();
+      var tablePos = tableRef.getBoundingClientRect();
+      return /*#__PURE__*/React.createElement("div", {
+        ref: this.stickyButtonRef,
+        "aria-label": title,
+        style: {
+          position: 'fixed',
+          top: pos.top + 22,
+          left: tablePos.right
+        }
+      }, button);
+    }
+  }, {
+    key: "renderPopup",
+    value: function renderPopup(button) {
+      var _this$props3 = this.props,
+          mountPoint = _this$props3.mountPoint,
+          boundariesElement = _this$props3.boundariesElement,
+          scrollableElement = _this$props3.scrollableElement,
+          targetRef = _this$props3.targetRef;
+
+      if (!targetRef) {
+        return null;
+      } // const title = this.getTitle();
+
+
+      var title = 'TODO MISSING TITLE';
+      return /*#__PURE__*/React.createElement(Popup, {
+        ariaLabel: title,
+        target: targetRef,
+        alignY: "start",
+        alignX: "end",
+        onPositionCalculated: addPopupOffset,
+        stick: true,
+        mountTo: mountPoint,
+        boundariesElement: boundariesElement,
+        scrollableElement: scrollableElement,
+        forcePlacement: true
+      }, button);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var stickyHeader = this.props.stickyHeader;
+      var button = this.toolbarButton();
+      var stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
+
+      if (stickyTargetRef && this.props.targetRef) {
+        return this.renderSticky(button, stickyTargetRef, this.props.targetRef);
+      } else {
+        return this.renderPopup(button);
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var dom = this.props.editorView.dom;
+      var scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
+
+      if (scrollPanel instanceof HTMLElement) {
+        this.resizeObserver.observe(scrollPanel);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var dom = this.props.editorView.dom;
+      var scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
+
+      if (scrollPanel instanceof HTMLElement) {
+        this.resizeObserver.unobserve(scrollPanel);
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      var _this$props4 = this.props,
+          targetRef = _this$props4.targetRef,
+          layout = _this$props4.layout,
+          isResizing = _this$props4.isResizing,
+          stickyHeader = _this$props4.stickyHeader;
+      return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing;
+    }
+  }]);
+
+  return LayoutButton;
+}(React.Component);
+
+_defineProperty(LayoutButton, "displayName", 'LayoutButton');
+
+export default injectIntl(LayoutButton);

package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -0,0 +1,120 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+
+var CornerControls = /*#__PURE__*/function (_Component) {
+  _inherits(CornerControls, _Component);
+
+  var _super = _createSuper(CornerControls);
+
+  function CornerControls() {
+    var _this;
+
+    _classCallCheck(this, CornerControls);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_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 = findTable(selection);
+
+      if (!table) {
+        return false;
+      }
+
+      return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
+      var _this$props$editorVie = _this.props.editorView,
+          state = _this$props$editorVie.state,
+          dispatch = _this$props$editorVie.dispatch;
+      clearHoverSelection()(state, dispatch);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "selectTable", function () {
+      var _this$props$editorVie2 = _this.props.editorView,
+          state = _this$props$editorVie2.state,
+          dispatch = _this$props$editorVie2.dispatch;
+      dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hoverTable", function () {
+      var _this$props$editorVie3 = _this.props.editorView,
+          state = _this$props$editorVie3.state,
+          dispatch = _this$props$editorVie3.dispatch;
+      hoverTable()(state, dispatch);
+    });
+
+    return _this;
+  }
+
+  _createClass(CornerControls, [{
+    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;
+
+      if (!tableRef) {
+        return null;
+      }
+
+      var isActive = this.isActive();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(ClassName.CORNER_CONTROLS, {
+          active: isActive,
+          sticky: this.props.stickyTop !== undefined
+        }),
+        style: {
+          top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
+        }
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
+          danger: isActive && isInDanger
+        }),
+        onClick: this.selectTable,
+        onMouseOver: this.hoverTable,
+        onMouseOut: this.clearHoverSelection
+      }), !isHeaderRowEnabled && /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CONTROLS_INSERT_MARKER
+      })), !isHeaderColumnEnabled && /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CONTROLS_INSERT_MARKER
+      })));
+    }
+  }]);
+
+  return CornerControls;
+}(Component);
+
+export { CornerControls as default };