@atlaskit/editor-plugin-table/dist/cjs/ui/FloatingInsertButton/InsertButton.js

Table plugin for the @atlaskit/editor

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DragAndDropInsertButton = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _reactIntlNext = require("react-intl-next");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _styles = require("@atlaskit/editor-common/styles");
var _utils = require("@atlaskit/editor-common/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _types = require("../../types");
var _consts = require("../consts");
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */

var getInsertLineHeight = function getInsertLineHeight(tableRef, hasStickyHeaders, isDragAndDropEnabled) {
  // The line gets height 100% from the table,
  // but since we have an overflow on the left,
  // we should add an offset to make up for it.
  var LINE_OFFSET = 3;
  var ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - _styles.tableMarginTop * (isDragAndDropEnabled ? 3 : 4) - LINE_OFFSET : _consts.tableToolbarSize + LINE_OFFSET;
  return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
};
var getToolbarSize = function getToolbarSize(tableRef) {
  var parent = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_CONTAINER));
  if (parent) {
    return parent.querySelector(".".concat(_types.TableCssClassName.NUMBERED_COLUMN)) ? _consts.tableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth - 1 : _consts.tableToolbarSize;
  }
  return _consts.tableToolbarSize;
};
var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDropEnabled) {
  var parent = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_CONTAINER));
  if (parent && isDragAndDropEnabled) {
    return parent.querySelector(".".concat(_types.TableCssClassName.NUMBERED_COLUMN)) ? _editorSharedStyles.akEditorTableNumberColumnWidth - 1 : 0;
  }
  return 0;
};
var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled, isChromelessEditor) {
  // The line gets width 100% from the table,
  // but since we have an overflow on the left,
  // we should add an offset to make up for it.
  var LINE_OFFSET = 4;
  var DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
  var parentElement = tableRef.parentElement,
    offsetWidth = tableRef.offsetWidth;
  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  var parentOffsetWidth = parentElement.offsetWidth;
  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  var _ref = parentElement,
    scrollLeft = _ref.scrollLeft;
  var diff = offsetWidth - parentOffsetWidth;
  var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
  var lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
};
var tooltipMessageByType = function tooltipMessageByType(type) {
  return type === 'row' ? _messages.tableMessages.insertRow : _messages.tableMessages.insertColumn;
};
var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref2) {
  var onMouseDown = _ref2.onMouseDown,
    tableRef = _ref2.tableRef,
    type = _ref2.type,
    formatMessage = _ref2.intl.formatMessage,
    hasStickyHeaders = _ref2.hasStickyHeaders,
    isChromelessEditor = _ref2.isChromelessEditor;
  var isRow = type === 'row';
  var content = /*#__PURE__*/_react.default.createElement(_tooltip.default, {
    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
      description: formatMessage(isRow ? _messages.tableMessages.insertRowDrag : _messages.tableMessages.insertColumnDrag),
      keymap: isRow ? _keymaps.addRowAfter : _keymaps.addColumnAfter
    }),
    position: "top"
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow && !isChromelessEditor), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, isRow && isChromelessEditor))
  }, /*#__PURE__*/_react.default.createElement("button", {
    type: "button"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON,
    onMouseDown: onMouseDown
  }, /*#__PURE__*/_react.default.createElement("svg", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: _types.TableCssClassName.CONTROLS_BUTTON_ICON,
    width: "16",
    height: "16",
    viewBox: "0 0 16 16",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/_react.default.createElement("path", {
    d: "M8 4C7.44771 4 7 4.44771 7 5V7H5C4.44771 7 4 7.44771 4 8C4 8.55229 4.44771 9 5 9H7V11C7 11.5523 7.44771 12 8 12C8.55229 12 9 11.5523 9 11V9H11C11.5523 9 12 8.55229 12 8C12 7.44771 11.5523 7 11 7H9V5C9 4.44771 8.55229 4 8 4Z",
    fill: "currentColor"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: _types.TableCssClassName.CONTROLS_INSERT_LINE
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: type === 'row' ? {
      width: getInsertLineWidth(tableRef, true, isChromelessEditor),
      left: "var(--ds-space-150, 12px)"
    } : {
      height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
      top: '-3px'
    }
  })));
  var floatingButtonClassName = isRow ? _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW : _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN;
  return (
    /*#__PURE__*/
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    _react.default.createElement("div", {
      className: floatingButtonClassName
    }, /*#__PURE__*/_react.default.createElement("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      className: "".concat(_types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP, " ").concat(_types.TableCssClassName.CONTROLS_INSERT_ROW)
    }, content))
  );
};
var DragAndDropInsertButton = exports.DragAndDropInsertButton = (0, _reactIntlNext.injectIntl)(InsertButtonForDragAndDrop);
var InsertButton = function InsertButton(_ref3) {
  var onMouseDown = _ref3.onMouseDown,
    tableRef = _ref3.tableRef,
    type = _ref3.type,
    formatMessage = _ref3.intl.formatMessage,
    hasStickyHeaders = _ref3.hasStickyHeaders;
  var content = /*#__PURE__*/_react.default.createElement(_tooltip.default, {
    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
      description: formatMessage(tooltipMessageByType(type)),
      keymap: type === 'row' ? _keymaps.addRowAfter : _keymaps.addColumnAfter
    }),
    position: "top"
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER
  }, /*#__PURE__*/_react.default.createElement("button", {
    type: "button"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: _types.TableCssClassName.CONTROLS_INSERT_BUTTON,
    onMouseDown: onMouseDown,
    "aria-label": (0, _expValEquals.expValEquals)('platform_editor_fix_button_name_violation_in_table', 'isEnabled', true) ? formatMessage(tooltipMessageByType(type)) : undefined
  }, /*#__PURE__*/_react.default.createElement("svg", {
    className: _types.TableCssClassName.CONTROLS_BUTTON_ICON
  }, /*#__PURE__*/_react.default.createElement("path", {
    d: "M10 4a1 1 0 0 1 1 1v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H5a1 1 0 1 1 0-2h4V5a1 1 0 0 1 1-1z",
    fill: "currentColor",
    fillRule: "evenodd"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: _types.TableCssClassName.CONTROLS_INSERT_LINE
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: type === 'row' ? {
      width: getInsertLineWidth(tableRef)
    } : {
      height: getInsertLineHeight(tableRef, hasStickyHeaders)
    }
  })));
  var floatingButtonClassName = type === 'column' ? _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN : _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW;
  return (
    /*#__PURE__*/
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    _react.default.createElement("div", {
      className: floatingButtonClassName
    }, /*#__PURE__*/_react.default.createElement("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      className: "".concat(_types.TableCssClassName.CONTROLS_INSERT_BUTTON_WRAP, " ").concat(_types.TableCssClassName.CONTROLS_INSERT_ROW)
    }, content))
  );
};
var _default = exports.default = (0, _reactIntlNext.injectIntl)(InsertButton);