@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/table/popover/table-size-popover/index.js

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../../../constants");
+var _tableTemplate = _interopRequireDefault(require("../table-template"));
+require("./index.css");
+var TableSizePopover = function TableSizePopover(_ref) {
+  var editor = _ref.editor,
+    target = _ref.target,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'legacy' : _ref$trigger,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    popperClassName = _ref.popperClassName,
+    createTable = _ref.createTable,
+    tableSizeRef = _ref.tableSizeRef,
+    handleClosePopover = _ref.handleClosePopover,
+    callback = _ref.callback;
+  var minSize = [5, 10];
+  var maxSize = [10, 10];
+  var _useState = (0, _react.useState)([5, 10]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    displaySize = _useState2[0],
+    setDisplaySize = _useState2[1];
+  var _useState3 = (0, _react.useState)([1, 1]),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedSize = _useState4[0],
+    setSelectedSize = _useState4[1];
+  var ref = (0, _react.useRef)(null);
+  var templateRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    ref.current['firstRender'] = true;
+  }, []);
+  var onHandleTableSize = (0, _react.useCallback)(function () {
+    var cellPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [1, 1];
+    var newDisplaySize = displaySize.slice(0);
+    var cellPositionX = cellPosition[0];
+    var cellPositionY = cellPosition[1];
+    newDisplaySize[0] = cellPositionX < minSize[0] ? minSize[0] : cellPositionX + 1;
+    newDisplaySize[1] = cellPositionY < minSize[1] ? minSize[1] : cellPositionY + 1;
+    if (newDisplaySize[0] > maxSize[0]) {
+      newDisplaySize[0] = maxSize[0];
+    }
+    if (newDisplaySize[1] > maxSize[1]) {
+      newDisplaySize[1] = maxSize[1];
+    }
+    setDisplaySize(newDisplaySize);
+    setSelectedSize(cellPosition);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displaySize, selectedSize, maxSize, minSize]);
+  var onCreateTable = (0, _react.useCallback)(function () {
+    createTable(selectedSize);
+    ref && ref.current && ref.current.toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSize, ref]);
+  var onTemplateItemSelectedStyle = (0, _react.useCallback)(function (color) {
+    var templateEl = document.getElementById('sdoc-table-template-review-btn');
+    templateEl.style['backgroundColor'] = color;
+  }, []);
+  var handleSizeDown = (0, _react.useCallback)(function (e) {
+    var keyCode = e.keyCode;
+    var UpArrow = _constants.KeyCodes.UpArrow,
+      DownArrow = _constants.KeyCodes.DownArrow,
+      Enter = _constants.KeyCodes.Enter,
+      RightArrow = _constants.KeyCodes.RightArrow,
+      LeftArrow = _constants.KeyCodes.LeftArrow;
+    var newSelectedSize = selectedSize.slice(0);
+    if (keyCode === Enter) {
+      e.preventDefault();
+      onCreateTable();
+    }
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (newSelectedSize[0] > 1) {
+        newSelectedSize[0] = newSelectedSize[0] - 1;
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      newSelectedSize[0] = newSelectedSize[0] + 1;
+    }
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      if (newSelectedSize[1] > 1) {
+        newSelectedSize[1] = newSelectedSize[1] - 1;
+      }
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      newSelectedSize[1] = newSelectedSize[1] + 1;
+    }
+    onHandleTableSize(newSelectedSize);
+  }, [onCreateTable, onHandleTableSize, selectedSize]);
+  var handleTableSizeKeyDown = (0, _react.useCallback)(function (e) {
+    if (document.getElementsByClassName('sdoc-table-template-popover')[0]) {
+      templateRef.current.handleTableTemplateKeyDown(e);
+      return;
+    }
+    var keyCode = e.keyCode;
+    var UpArrow = _constants.KeyCodes.UpArrow,
+      DownArrow = _constants.KeyCodes.DownArrow,
+      Enter = _constants.KeyCodes.Enter,
+      RightArrow = _constants.KeyCodes.RightArrow,
+      LeftArrow = _constants.KeyCodes.LeftArrow,
+      Esc = _constants.KeyCodes.Esc;
+    var isInitSize = selectedSize[0] === 1 && selectedSize[1] === 1;
+    var templateEl = document.getElementById('sdoc-table-template-review-btn');
+    // Currently focusing on the template menu item
+    if (templateEl.style['background-color']) {
+      if (keyCode === DownArrow) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+      }
+      // exit table size popover
+      if (keyCode === LeftArrow) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+        ref.current['firstRender'] = true;
+        ref.current.toggle();
+      }
+      if (keyCode === Enter) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+        templateRef.current.uncontrolledTemplatePopoverRef.current.toggle();
+      }
+      if (keyCode === Esc) {
+        e.preventDefault();
+        handleClosePopover();
+      }
+      return;
+    }
+
+    // left and right
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      handleSizeDown(e);
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      if (ref.current['firstRender']) {
+        ref.current['firstRender'] = false;
+        onTemplateItemSelectedStyle('#e3e3e3');
+        return;
+      }
+      handleSizeDown(e);
+    }
+
+    // up and down
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (isInitSize) {
+        onTemplateItemSelectedStyle('#e3e3e3');
+      } else {
+        handleSizeDown(e);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      onTemplateItemSelectedStyle('');
+      handleSizeDown(e);
+    }
+
+    // enter
+    if (keyCode === Enter) {
+      e.preventDefault();
+      handleSizeDown(e);
+    }
+    if (keyCode === Esc) {
+      e.preventDefault();
+      handleClosePopover();
+    }
+  }, [handleClosePopover, handleSizeDown, onTemplateItemSelectedStyle, selectedSize]);
+  (0, _react.useImperativeHandle)(tableSizeRef, function () {
+    return {
+      handleTableSizeKeyDown: handleTableSizeKeyDown,
+      uncontrolledPopoverRef: ref
+    };
+  });
+  var renderTableSize = (0, _react.useCallback)(function () {
+    var tableSize = [];
+    var _loop = function _loop(i) {
+      var children = [];
+      var _loop2 = function _loop2(j) {
+        var isSelectedChild = i <= selectedSize[0] && selectedSize[0] !== 0 && j <= selectedSize[1] && selectedSize[1] !== 0;
+        var child = /*#__PURE__*/_react["default"].createElement("div", {
+          key: "sdoc-table-size-cell-".concat(i, "-").concat(j),
+          className: (0, _classnames["default"])('sdoc-table-size-cell', {
+            'active': isSelectedChild
+          }),
+          onClick: onCreateTable,
+          onMouseEnter: function onMouseEnter() {
+            return onHandleTableSize([i, j]);
+          }
+        });
+        children.push(child);
+      };
+      for (var j = 1; j <= displaySize[1]; j++) {
+        _loop2(j);
+      }
+      tableSize.push(/*#__PURE__*/_react["default"].createElement("div", {
+        key: "sdoc-table-size-row-".concat(i),
+        className: "sdoc-table-size-row d-flex"
+      }, children));
+    };
+    for (var i = 1; i <= displaySize[0]; i++) {
+      _loop(i);
+    }
+    return tableSize;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displaySize, selectedSize]);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    target: target,
+    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
+    trigger: trigger,
+    placement: placement,
+    hideArrow: true,
+    fade: false,
+    ref: ref,
+    popperClassName: popperClassName
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-selected-table-tools-container"
+  }, /*#__PURE__*/_react["default"].createElement(MenuItem, {
+    id: "sdoc-table-template-review-btn",
+    text: "Table_template",
+    iconClassname: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-table-size-select"
+  }, renderTableSize()), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-selected-table-size-tip w-100 "
+  }, "".concat(selectedSize[0], " x ").concat(selectedSize[1])), /*#__PURE__*/_react["default"].createElement(_tableTemplate["default"], {
+    templateRef: templateRef,
+    editor: editor,
+    targetId: "sdoc-table-template-review-btn",
+    handleClosePopover: handleClosePopover,
+    callback: callback
+  })));
+};
+var _default = exports["default"] = TableSizePopover;
+var MenuItem = function MenuItem(_ref2) {
+  var id = _ref2.id,
+    className = _ref2.className,
+    text = _ref2.text,
+    iconClassname = _ref2.iconClassname;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: id,
+    className: (0, _classnames["default"])('sdoc-selected-table-size-custom', {
+      className: className
+    })
+  }, /*#__PURE__*/_react["default"].createElement("span", null, t(text)), /*#__PURE__*/_react["default"].createElement("i", {
+    className: iconClassname
+  }));
+};

package/dist/extension/plugins/table/popover/table-template/index.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _constants = require("../../../../../constants");
+var _constants2 = require("../../constants");
+var _helpers = require("../../helpers");
+var _sampleTable = _interopRequireDefault(require("./sample-table"));
+require("./index.css");
+require("../../render/alternate-color.css");
+var TableTemplate = function TableTemplate(_ref) {
+  var editor = _ref.editor,
+    targetId = _ref.targetId,
+    templateRef = _ref.templateRef,
+    handleClosePopover = _ref.handleClosePopover,
+    callback = _ref.callback;
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)([-1, -1]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var tableTemplatePreviewList = (0, _react.useMemo)(function () {
+    return Reflect.ownKeys(_constants2.TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP);
+  }, []);
+  var handleClickTemplate = (0, _react.useCallback)(function (alternateColor) {
+    callback && callback();
+    (0, _helpers.insertTableByTemplate)(editor, alternateColor);
+  }, [callback, editor]);
+  var handleTableTemplateKeyDown = (0, _react.useCallback)(function (e) {
+    var keyCode = e.keyCode;
+    var UpArrow = _constants.KeyCodes.UpArrow,
+      DownArrow = _constants.KeyCodes.DownArrow,
+      Enter = _constants.KeyCodes.Enter,
+      RightArrow = _constants.KeyCodes.RightArrow,
+      LeftArrow = _constants.KeyCodes.LeftArrow,
+      Esc = _constants.KeyCodes.Esc;
+    var position = ref.current.position;
+    var isInitPostion = position[0] === -1 && position[1] === -1;
+
+    // left and right
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      if (position[0] > 0) {
+        var newPosition = [position[0] - 1, position[1]];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      // Enter
+      if (isInitPostion) {
+        ref.current.position = [0, 0];
+        setPosition([0, 0]);
+        return;
+      }
+      if (position[0] < 1) {
+        var _newPosition = [position[0] + 1, position[1]];
+        ref.current.position = _newPosition;
+        setPosition(_newPosition);
+      }
+    }
+
+    // up and down
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      if (position[1] > 0) {
+        var _newPosition2 = [position[0], position[1] - 1];
+        ref.current.position = _newPosition2;
+        setPosition(_newPosition2);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      if (position[1] < 1) {
+        var _newPosition3 = [position[0], position[1] + 1];
+        ref.current.position = _newPosition3;
+        setPosition(_newPosition3);
+      }
+    }
+
+    // enter
+    if (keyCode === Enter) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      var key = JSON.stringify(position);
+      handleClickTemplate(_constants2.TABLE_TEMPLATE_POSITION_MAP[key]);
+      handleClosePopover();
+    }
+    if (keyCode === Esc) {
+      e.preventDefault();
+      handleClosePopover();
+    }
+  }, [handleClickTemplate, handleClosePopover]);
+  (0, _react.useImperativeHandle)(templateRef, function () {
+    return {
+      handleTableTemplateKeyDown: handleTableTemplateKeyDown,
+      uncontrolledTemplatePopoverRef: ref
+    };
+  });
+  (0, _react.useEffect)(function () {
+    ref.current.position = [-1, -1];
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    target: targetId,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    className: "sdoc-sub-dropdown-menu sdoc-table-template-popover",
+    innerClassName: "sdoc-table-template-inner-popover",
+    ref: ref
+  }, tableTemplatePreviewList.map(function (alternateColor, index) {
+    return /*#__PURE__*/_react["default"].createElement(_sampleTable["default"], {
+      key: alternateColor + index,
+      curPositon: position,
+      alternateColor: alternateColor,
+      onClickTemplate: handleClickTemplate
+    });
+  }));
+};
+var _default = exports["default"] = TableTemplate;

package/dist/extension/plugins/table/popover/table-template/sample-table.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+require("./index.css");
+var SampleTable = function SampleTable(_ref) {
+  var alternateColor = _ref.alternateColor,
+    onClickTemplate = _ref.onClickTemplate,
+    curPositon = _ref.curPositon;
+  // generate table
+  var renderTableRow = (0, _react.useCallback)(function (row, column) {
+    return new Array(row).fill(null).map(function (_, index) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-table-template-row table-row ".concat((0, _helpers.getCellHighlightClassName)(alternateColor, index)),
+        key: "sdoc-template-table-row-".concat(index),
+        onClick: function onClick() {
+          onClickTemplate(alternateColor);
+        }
+      }, new Array(column).fill(null).map(function (_, index) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "sdoc-table-template-cell",
+          key: "sdoc-template-table-cell-".concat(index)
+        });
+      }));
+    });
+  }, [onClickTemplate, alternateColor]);
+  var key = JSON.stringify(curPositon);
+  var isActive = _constants.TABLE_TEMPLATE_POSITION_MAP[key] === alternateColor;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sdoc-table-template-view-table', {
+      'active': isActive
+    })
+  }, renderTableRow(4, 4));
+};
+SampleTable.protoTypes = {
+  alternateColor: _propTypes["default"].string.isRequired,
+  onClickTemplate: _propTypes["default"].func.isRequired
+};
+var _default = exports["default"] = SampleTable;

package/dist/extension/plugins/table/render/drag-handlers/column-drag-handler.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("../../render/index.css");
+var ColumnDragHandler = function ColumnDragHandler(_ref) {
+  var left = _ref.left;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table-cell-width-just position-absolute resizing",
+    contentEditable: false,
+    style: {
+      left: left
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table-cell-width-just-color-tip"
+  }));
+};
+var _default = exports["default"] = ColumnDragHandler;

package/dist/extension/plugins/table/render/drag-handlers/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../../utils/event-bus"));
+var _constants2 = require("../../constants");
+var _columnDragHandler = _interopRequireDefault(require("./column-drag-handler"));
+var _rowDragHandler = _interopRequireDefault(require("./row-drag-handler"));
+var DragHandlers = function DragHandlers(_ref) {
+  var table = _ref.table;
+  var _useState = (0, _react.useState)({
+      top: 0,
+      left: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    linePosition = _useState2[0],
+    setLinePosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    displayType = _useState4[0],
+    setDisplayType = _useState4[1];
+  var tableID = table.id;
+  var handleShowDragHandler = (0, _react.useCallback)(function (_ref2) {
+    var displayType = _ref2.displayType,
+      left = _ref2.left,
+      top = _ref2.top,
+      tableId = _ref2.tableId;
+    if (tableId !== tableID) return;
+    var maskOffset = 2;
+    setLinePosition({
+      top: top,
+      left: left - maskOffset
+    });
+    setDisplayType(displayType);
+  }, [tableID]);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.TABLE_SHOW_DRAG_HANDLER, handleShowDragHandler);
+    return function () {
+      unsubscribe();
+    };
+  }, [handleShowDragHandler]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, displayType === _constants2.DRAG_HANDLER_ROW && /*#__PURE__*/_react["default"].createElement(_rowDragHandler["default"], {
+    top: linePosition.top
+  }), displayType === _constants2.DRAG_HANDLER_COLUMN && /*#__PURE__*/_react["default"].createElement(_columnDragHandler["default"], {
+    left: linePosition.left
+  }));
+};
+var _default = exports["default"] = DragHandlers;

package/dist/extension/plugins/table/render/drag-handlers/row-drag-handler.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("../../render/index.css");
+var RowDragHandler = function RowDragHandler(_ref) {
+  var top = _ref.top;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table-row-height-just position-absolute resizing",
+    contentEditable: false,
+    style: {
+      top: top
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table-row-height-just-color-tip"
+  }));
+};
+var _default = exports["default"] = RowDragHandler;

package/dist/extension/plugins/table/render/hooks.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableSelectedRangeContext = exports.useTableRootScrollLeftContext = exports.useTableRootContext = exports.useSettingSelectRangeContext = exports.useResizeHandlersContext = exports.useContextMenu = exports.TableSelectedRangeContext = exports.TableRootScrollLeftContext = exports.TableRootContext = exports.SettingSelectRangeContext = exports.ResizeHandlersContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = require("react");
+var _useScrollContext = require("../../../../hooks/use-scroll-context");
+var TableRootContext = exports.TableRootContext = /*#__PURE__*/(0, _react.createContext)();
+var useTableRootContext = exports.useTableRootContext = function useTableRootContext() {
+  return (0, _react.useContext)(TableRootContext);
+};
+var TableSelectedRangeContext = exports.TableSelectedRangeContext = /*#__PURE__*/(0, _react.createContext)();
+var useTableSelectedRangeContext = exports.useTableSelectedRangeContext = function useTableSelectedRangeContext() {
+  return (0, _react.useContext)(TableSelectedRangeContext);
+};
+var ResizeHandlersContext = exports.ResizeHandlersContext = /*#__PURE__*/(0, _react.createContext)();
+var useResizeHandlersContext = exports.useResizeHandlersContext = function useResizeHandlersContext() {
+  return (0, _react.useContext)(ResizeHandlersContext);
+};
+var SettingSelectRangeContext = exports.SettingSelectRangeContext = /*#__PURE__*/(0, _react.createContext)();
+var useSettingSelectRangeContext = exports.useSettingSelectRangeContext = function useSettingSelectRangeContext() {
+  return (0, _react.useContext)(SettingSelectRangeContext);
+};
+var TableRootScrollLeftContext = exports.TableRootScrollLeftContext = /*#__PURE__*/(0, _react.createContext)();
+var useTableRootScrollLeftContext = exports.useTableRootScrollLeftContext = function useTableRootScrollLeftContext() {
+  return (0, _react.useContext)(TableRootScrollLeftContext);
+};
+var useContextMenu = exports.useContextMenu = function useContextMenu(tableScrollWrapper) {
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowContextMenu = _useState2[0],
+    setShowContextMenu = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    menuPosition = _useState4[0],
+    setMenuPosition = _useState4[1];
+  var onContextMenu = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    var menuPosition = {
+      left: event.clientX,
+      top: event.clientY
+    };
+    setShowContextMenu(true);
+    setMenuPosition(menuPosition);
+  }, []);
+  var hideContextMenu = (0, _react.useCallback)(function (e) {
+    if (isShowContextMenu) {
+      setShowContextMenu(false);
+    }
+  }, [isShowContextMenu]);
+  var hideByContextmenuEvent = (0, _react.useCallback)(function (e) {
+    var table = tableScrollWrapper.current;
+    var clickIsInCurrentTable = table && table.contains(e.target) && table !== e.target;
+    if (!clickIsInCurrentTable) {
+      setShowContextMenu(false);
+    }
+  }, [tableScrollWrapper]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mousedown', hideContextMenu);
+    document.addEventListener('contextmenu', hideByContextmenuEvent, true);
+    scrollRef.current && scrollRef.current.addEventListener('scroll', hideContextMenu);
+    return function () {
+      document.removeEventListener('mousedown', hideContextMenu);
+      document.removeEventListener('contextmenu', hideByContextmenuEvent, true);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', hideContextMenu);
+    };
+  }, [hideContextMenu, hideByContextmenuEvent, scrollRef]);
+  return {
+    isShowContextMenu: isShowContextMenu,
+    menuPosition: menuPosition,
+    onContextMenu: onContextMenu
+  };
+};