@leankylin-sheet/react/dist/index.js

LeankylinSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var core = require('@leankylin-sheet/core');
var React = require('react');
var produce = require('immer');
var _ = require('lodash');
var ahooks = require('ahooks');
var reactDom = require('react-dom');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);

function _iterableToArrayLimit(r, l) {
  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
  if (null != t) {
    var e,
      n,
      i,
      u,
      a = [],
      f = !0,
      o = !1;
    try {
      if (i = (t = t.call(r)).next, 0 === l) {
        if (Object(t) !== t) return;
        f = !1;
      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
    } catch (r) {
      o = !0, n = r;
    } finally {
      try {
        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
      } finally {
        if (o) throw n;
      }
    }
    return a;
  }
}
function ownKeys(e, r) {
  var t = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    r && (o = o.filter(function (r) {
      return Object.getOwnPropertyDescriptor(e, r).enumerable;
    })), t.push.apply(t, o);
  }
  return t;
}
function _objectSpread2(e) {
  for (var r = 1; r < arguments.length; r++) {
    var t = null != arguments[r] ? arguments[r] : {};
    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
      _defineProperty(e, r, t[r]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
    });
  }
  return e;
}
function _toPrimitive(t, r) {
  if ("object" != typeof t || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r || "default");
    if ("object" != typeof i) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == typeof i ? i : i + "";
}
function _defineProperty(obj, key, value) {
  key = _toPropertyKey(key);
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }
  return obj;
}
function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends.apply(this, arguments);
}
function _objectDestructuringEmpty(obj) {
  if (obj == null) throw new TypeError("Cannot destructure " + obj);
}
function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }
  return target;
}
function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};
  var target = _objectWithoutPropertiesLoose(source, excluded);
  var key, i;
  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }
  return target;
}
function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
  return arr2;
}
function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var defaultRefs = {
  globalCache: {
    undoList: [],
    redoList: []
  },
  cellInput: /*#__PURE__*/React__default['default'].createRef(),
  fxInput: /*#__PURE__*/React__default['default'].createRef(),
  canvas: /*#__PURE__*/React__default['default'].createRef(),
  cellArea: /*#__PURE__*/React__default['default'].createRef(),
  workbookContainer: /*#__PURE__*/React__default['default'].createRef()
};
var WorkbookContext = /*#__PURE__*/React__default['default'].createContext({
  context: core.defaultContext(defaultRefs),
  setContext: function setContext() {},
  settings: core.defaultSettings,
  handleUndo: function handleUndo() {},
  handleRedo: function handleRedo() {},
  refs: {
    globalCache: {
      undoList: [],
      redoList: []
    },
    cellInput: /*#__PURE__*/React__default['default'].createRef(),
    fxInput: /*#__PURE__*/React__default['default'].createRef(),
    canvas: /*#__PURE__*/React__default['default'].createRef(),
    scrollbarX: /*#__PURE__*/React__default['default'].createRef(),
    scrollbarY: /*#__PURE__*/React__default['default'].createRef(),
    cellArea: /*#__PURE__*/React__default['default'].createRef(),
    workbookContainer: /*#__PURE__*/React__default['default'].createRef()
  }
});

var SVGIcon = function SVGIcon(_ref) {
  var _ref$width = _ref.width,
    width = _ref$width === void 0 ? 24 : _ref$width,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? 24 : _ref$height,
    name = _ref.name,
    style = _ref.style;
  return /*#__PURE__*/React__default['default'].createElement("svg", {
    width: width,
    height: height,
    style: style
  }, /*#__PURE__*/React__default['default'].createElement("use", {
    xlinkHref: "#".concat(name)
  }));
};

var ColumnHeader = function ColumnHeader() {
  var _refs$globalCache$fre2, _settings$renderFreez;
  var _useContext = React.useContext(WorkbookContext),
    context = _useContext.context,
    setContext = _useContext.setContext,
    settings = _useContext.settings,
    refs = _useContext.refs;
  var containerRef = React.useRef(null);
  var colChangeSizeRef = React.useRef(null);
  var _useState = React.useState({
      col: -1,
      col_pre: -1,
      col_index: -1
    }),
    _useState2 = _slicedToArray(_useState, 2),
    hoverLocation = _useState2[0],
    setHoverLocation = _useState2[1];
  var _useState3 = React.useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    hoverInFreeze = _useState4[0],
    setHoverInFreeze = _useState4[1];
  var _useState5 = React.useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    selectedLocation = _useState6[0],
    setSelectedLocation = _useState6[1];
  var allowEditRef = React.useRef(true);
  var sheetIndex = core.getSheetIndex(context, context.currentSheetId);
  var sheet = sheetIndex == null ? null : context.luckysheetfile[sheetIndex];
  var freezeHandleLeft = React.useMemo(function () {
    var _sheet$frozen, _sheet$frozen2, _sheet$frozen3, _sheet$frozen4;
    if ((sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen = sheet.frozen) === null || _sheet$frozen === void 0 ? void 0 : _sheet$frozen.type) === "column" || (sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen2 = sheet.frozen) === null || _sheet$frozen2 === void 0 ? void 0 : _sheet$frozen2.type) === "rangeColumn" || (sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen3 = sheet.frozen) === null || _sheet$frozen3 === void 0 ? void 0 : _sheet$frozen3.type) === "rangeBoth" || (sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen4 = sheet.frozen) === null || _sheet$frozen4 === void 0 ? void 0 : _sheet$frozen4.type) === "both") {
      var _sheet$frozen5, _sheet$frozen5$range;
      return core.colLocationByIndex((sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen5 = sheet.frozen) === null || _sheet$frozen5 === void 0 ? void 0 : (_sheet$frozen5$range = _sheet$frozen5.range) === null || _sheet$frozen5$range === void 0 ? void 0 : _sheet$frozen5$range.column_focus) || 0, context.visibledatacolumn)[1];
    }
    return 0;
  }, [context.visibledatacolumn, sheet === null || sheet === void 0 ? void 0 : sheet.frozen]);
  var onMouseMove = React.useCallback(function (e) {
    var _refs$globalCache$fre;
    if (context.luckysheet_cols_change_size) {
      return;
    }
    var mouseX = e.pageX - containerRef.current.getBoundingClientRect().left - window.scrollX;
    var _x = mouseX + containerRef.current.scrollLeft;
    var freeze = (_refs$globalCache$fre = refs.globalCache.freezen) === null || _refs$globalCache$fre === void 0 ? void 0 : _refs$globalCache$fre[context.currentSheetId];
    var _fixPositionOnFrozenC = core.fixPositionOnFrozenCells(freeze, _x, 0, mouseX, 0),
      x = _fixPositionOnFrozenC.x,
      inVerticalFreeze = _fixPositionOnFrozenC.inVerticalFreeze;
    var col_location = core.colLocation(x, context.visibledatacolumn);
    var _col_location = _slicedToArray(col_location, 3),
      col_pre = _col_location[0],
      col = _col_location[1],
      col_index = _col_location[2];
    if (col_index !== hoverLocation.col_index) {
      setHoverLocation({
        col_pre: col_pre,
        col: col,
        col_index: col_index
      });
      setHoverInFreeze(inVerticalFreeze);
    }
    var flowdata = core.getFlowdata(context);
    if (!___default['default'].isNil(flowdata)) allowEditRef.current = core.isAllowEdit(context) && core.isAllowEdit(context, [{
      row: [0, flowdata.length - 1],
      column: col_location
    }]);
  }, [context, hoverLocation.col_index, refs.globalCache.freezen]);
  var onMouseDown = React.useCallback(function (e) {
    var nativeEvent = e.nativeEvent;
    setContext(function (draftCtx) {
      core.handleColumnHeaderMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.cellInput.current, refs.fxInput.current);
    });
  }, [refs.globalCache, refs.cellInput, refs.fxInput, setContext]);
  var onMouseLeave = React.useCallback(function () {
    if (context.luckysheet_cols_change_size) {
      return;
    }
    setHoverLocation({
      col: -1,
      col_pre: -1,
      col_index: -1
    });
  }, [context.luckysheet_cols_change_size]);
  var onColSizeHandleMouseDown = React.useCallback(function (e) {
    var nativeEvent = e.nativeEvent;
    setContext(function (draftCtx) {
      core.handleColSizeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
    });
    e.stopPropagation();
  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
  var freezeCanDrag = React.useMemo(function () {
    return context.scrollLeft <= 10;
  }, [context.scrollLeft]);
  var onColFreezeHandleMouseDown = React.useCallback(function (e) {
    if (!freezeCanDrag) {
      return;
    }
    var nativeEvent = e.nativeEvent;
    setContext(function (draftCtx) {
      core.handleColFreezeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
    });
    e.stopPropagation();
  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext, freezeCanDrag]);
  var onContextMenu = React.useCallback(function (e) {
    var nativeEvent = e.nativeEvent;
    setContext(function (draftCtx) {
      core.handleContextMenu(draftCtx, settings, nativeEvent, refs.workbookContainer.current, refs.cellArea.current, "columnHeader");
    });
  }, [refs.workbookContainer, setContext, settings, refs.cellArea]);
  React.useEffect(function () {
    var s = context.luckysheet_select_save;
    if (___default['default'].isNil(s)) return;
    var columnTitleMap = {};
    for (var i = 0; i < s.length; i += 1) {
      var c1 = s[i].column[0];
      var c2 = s[i].column[1];
      columnTitleMap = core.selectTitlesMap(columnTitleMap, c1, c2);
    }
    var columnTitleRange = core.selectTitlesRange(columnTitleMap);
    var selects = [];
    for (var j = 0; j < columnTitleRange.length; j += 1) {
      var _c = columnTitleRange[j][0];
      var _c2 = columnTitleRange[j][columnTitleRange[j].length - 1];
      var col = core.colLocationByIndex(_c2, context.visibledatacolumn)[1];
      var col_pre = core.colLocationByIndex(_c, context.visibledatacolumn)[0];
      if (___default['default'].isNumber(col) && ___default['default'].isNumber(col_pre)) {
        selects.push({
          col: col,
          col_pre: col_pre,
          c1: _c,
          c2: _c2
        });
      }
    }
    setSelectedLocation(selects);
  }, [context.luckysheet_select_save, context.visibledatacolumn]);
  React.useEffect(function () {
    containerRef.current.scrollLeft = context.scrollLeft;
  }, [context.scrollLeft]);
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
    ref: containerRef,
    className: "leankylin-col-header",
    style: {
      height: context.columnHeaderHeight - 1.5
    },
    onMouseMove: onMouseMove,
    onMouseDown: onMouseDown,
    onMouseLeave: onMouseLeave,
    onContextMenu: onContextMenu
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-cols-change-size",
    ref: colChangeSizeRef,
    id: "leankylin-cols-change-size",
    onMouseDown: onColSizeHandleMouseDown,
    style: {
      left: hoverLocation.col - 5 + (hoverInFreeze ? context.scrollLeft : 0),
      opacity: context.luckysheet_cols_change_size ? 1 : 0
    }
  }), !context.luckysheet_cols_change_size && hoverLocation.col_index >= 0 ? ( /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-col-header-hover",
    style: ___default['default'].assign({
      left: hoverLocation.col_pre,
      width: hoverLocation.col - hoverLocation.col_pre - 1,
      display: "block"
    }, core.fixColumnStyleOverflowInFreeze(context, hoverLocation.col_index, hoverLocation.col_index, (_refs$globalCache$fre2 = refs.globalCache.freezen) === null || _refs$globalCache$fre2 === void 0 ? void 0 : _refs$globalCache$fre2[context.currentSheetId]))
  }, allowEditRef.current && ( /*#__PURE__*/React__default['default'].createElement("span", {
    className: "header-arrow",
    onClick: function onClick(e) {
      setContext(function (ctx) {
        ctx.contextMenu = {
          x: e.pageX,
          y: 90,
          headerMenu: true
        };
      });
    }
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
    name: "headDownArrow",
    width: 12
  }))))) : null, selectedLocation.map(function (_ref, i) {
    var _refs$globalCache$fre3;
    var col = _ref.col,
      col_pre = _ref.col_pre,
      c1 = _ref.c1,
      c2 = _ref.c2;
    return /*#__PURE__*/React__default['default'].createElement("div", {
      className: "leankylin-col-header-selected",
      key: i,
      style: ___default['default'].assign({
        left: col_pre,
        width: col - col_pre - 1,
        display: "block",
        backgroundColor: "rgba(76, 76, 76, 0.1)"
      }, core.fixColumnStyleOverflowInFreeze(context, c1, c2, (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]))
    });
  }), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-cols-h-cells luckysheetsheetchange",
    id: "luckysheet-cols-h-cells_0",
    style: {
      width: context.ch_width,
      height: 1
    }
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-cols-h-cells-c"
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-grdblkpush"
  })))), /*#__PURE__*/React__default['default'].createElement("div", {
    style: {
      left: 46,
      position: "absolute",
      pointerEvents: "none",
      height: 20
    }
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-cols-freeze-handle ".concat(freezeCanDrag ? "" : "leankylin-cols-freeze-handle-disabled"),
    onMouseDown: onColFreezeHandleMouseDown,
    style: {
      left: freezeHandleLeft,
      pointerEvents: "all"
    }
  }, settings === null || settings === void 0 ? void 0 : (_settings$renderFreez = settings.renderFreezeCol) === null || _settings$renderFreez === void 0 ? void 0 : _settings$renderFreez.call(settings, freezeCanDrag))));
};

var RowHeader = function RowHeader() {
  var _refs$globalCache$fre2, _settings$renderFreez;
  var _useContext = React.useContext(WorkbookContext),
    context = _useContext.context,
    setContext = _useContext.setContext,
    settings = _useContext.settings,
    refs = _useContext.refs;
  var rowChangeSizeRef = React.useRef(null);
  var containerRef = React.useRef(null);
  var _useState = React.useState({
      row: -1,
      row_pre: -1,
      row_index: -1
    }),
    _useState2 = _slicedToArray(_useState, 2),
    hoverLocation = _useState2[0],
    setHoverLocation = _useState2[1];
  var _useState3 = React.useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    hoverInFreeze = _useState4[0],
    setHoverInFreeze = _useState4[1];
  var _useState5 = React.useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    selectedLocation = _useState6[0],
    setSelectedLocation = _useState6[1];
  var sheetIndex = core.getSheetIndex(context, context.currentSheetId);
  var sheet = sheetIndex == null ? null : context.luckysheetfile[sheetIndex];
  var freezeHandleTop = React.useMemo(function () {
    var _sheet$frozen, _sheet$frozen2, _sheet$frozen3, _sheet$frozen4;
    if ((sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen = sheet.frozen) === null || _sheet$frozen === void 0 ? void 0 : _sheet$frozen.type) === "row" || (sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen2 = sheet.frozen) === null || _sheet$frozen2 === void 0 ? void 0 : _sheet$frozen2.type) === "rangeRow" || (sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen3 = sheet.frozen) === null || _sheet$frozen3 === void 0 ? void 0 : _sheet$frozen3.type) === "rangeBoth" || (sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen4 = sheet.frozen) === null || _sheet$frozen4 === void 0 ? void 0 : _sheet$frozen4.type) === "both") {
      var _sheet$frozen5, _sheet$frozen5$range;
      return core.rowLocationByIndex((sheet === null || sheet === void 0 ? void 0 : (_sheet$frozen5 = sheet.frozen) === null || _sheet$frozen5 === void 0 ? void 0 : (_sheet$frozen5$range = _sheet$frozen5.range) === null || _sheet$frozen5$range === void 0 ? void 0 : _sheet$frozen5$range.row_focus) || 0, context.visibledatarow)[1];
    }
    return 0;
  }, [context.visibledatarow, sheet === null || sheet === void 0 ? void 0 : sheet.frozen]);
  var onMouseMove = React.useCallback(function (e) {
    var _refs$globalCache$fre;
    if (context.luckysheet_rows_change_size) {
      return;
    }
    var mouseY = e.pageY - containerRef.current.getBoundingClientRect().top - window.scrollY;
    var _y = mouseY + containerRef.current.scrollTop;
    var freeze = (_refs$globalCache$fre = refs.globalCache.freezen) === null || _refs$globalCache$fre === void 0 ? void 0 : _refs$globalCache$fre[context.currentSheetId];
    var _fixPositionOnFrozenC = core.fixPositionOnFrozenCells(freeze, 0, _y, 0, mouseY),
      y = _fixPositionOnFrozenC.y,
      inHorizontalFreeze = _fixPositionOnFrozenC.inHorizontalFreeze;
    var row_location = core.rowLocation(y, context.visibledatarow);
    var _row_location = _slicedToArray(row_location, 3),
      row_pre = _row_location[0],
      row = _row_location[1],
      row_index = _row_location[2];
    if (row_pre !== hoverLocation.row_pre || row !== hoverLocation.row) {
      setHoverLocation({
        row_pre: row_pre,
        row: row,
        row_index: row_index
      });
      setHoverInFreeze(inHorizontalFreeze);
    }
  }, [context.luckysheet_rows_change_size, context.visibledatarow, hoverLocation.row, hoverLocation.row_pre, refs.globalCache.freezen, context.currentSheetId]);
  var onMouseDown = React.useCallback(function (e) {
    var nativeEvent = e.nativeEvent;
    setContext(function (draftCtx) {
      core.handleRowHeaderMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.cellInput.current, refs.fxInput.current);
    });
  }, [refs.globalCache, refs.cellInput, refs.fxInput, setContext]);
  var onMouseLeave = React.useCallback(function () {
    if (context.luckysheet_rows_change_size) {
      return;
    }
    setHoverLocation({
      row: -1,
      row_pre: -1,
      row_index: -1
    });
  }, [context.luckysheet_rows_change_size]);
  var onRowSizeHandleMouseDown = React.useCallback(function (e) {
    var nativeEvent = e.nativeEvent;
    setContext(function (draftCtx) {
      core.handleRowSizeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
    });
    e.stopPropagation();
  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
  var freezeCanDrag = React.useMemo(function () {
    return context.scrollTop <= 10;
  }, [context.scrollTop]);
  var onRowFreezeHandleMouseDown = React.useCallback(function (e) {
    if (!freezeCanDrag) {
      return;
    }
    var nativeEvent = e.nativeEvent;
    setContext(function (draftCtx) {
      core.handleRowFreezeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
    });
    e.stopPropagation();
  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext, freezeCanDrag]);
  var onContextMenu = React.useCallback(function (e) {
    var nativeEvent = e.nativeEvent;
    setContext(function (draftCtx) {
      core.handleContextMenu(draftCtx, settings, nativeEvent, refs.workbookContainer.current, refs.cellArea.current, "rowHeader");
    });
  }, [refs.workbookContainer, setContext, settings, refs.cellArea]);
  React.useEffect(function () {
    var s = context.luckysheet_select_save || [];
    var rowTitleMap = {};
    for (var i = 0; i < s.length; i += 1) {
      var r1 = s[i].row[0];
      var r2 = s[i].row[1];
      rowTitleMap = core.selectTitlesMap(rowTitleMap, r1, r2);
    }
    var rowTitleRange = core.selectTitlesRange(rowTitleMap);
    var selects = [];
    for (var _i = 0; _i < rowTitleRange.length; _i += 1) {
      var _r = rowTitleRange[_i][0];
      var _r2 = rowTitleRange[_i][rowTitleRange[_i].length - 1];
      var row = core.rowLocationByIndex(_r2, context.visibledatarow)[1];
      var row_pre = core.rowLocationByIndex(_r, context.visibledatarow)[0];
      if (___default['default'].isNumber(row_pre) && ___default['default'].isNumber(row)) {
        selects.push({
          row: row,
          row_pre: row_pre,
          r1: _r,
          r2: _r2
        });
      }
    }
    setSelectedLocation(selects);
  }, [context.luckysheet_select_save, context.visibledatarow]);
  React.useEffect(function () {
    containerRef.current.scrollTop = context.scrollTop;
  }, [context.scrollTop]);
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
    ref: containerRef,
    className: "leankylin-row-header",
    style: {
      width: context.rowHeaderWidth - 1.5,
      height: context.cellmainHeight
    },
    onMouseMove: onMouseMove,
    onMouseDown: onMouseDown,
    onMouseLeave: onMouseLeave,
    onContextMenu: onContextMenu
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-rows-change-size",
    ref: rowChangeSizeRef,
    onMouseDown: onRowSizeHandleMouseDown,
    style: {
      top: hoverLocation.row - 3 + (hoverInFreeze ? context.scrollTop : 0),
      opacity: context.luckysheet_rows_change_size ? 1 : 0
    }
  }), !context.luckysheet_rows_change_size && hoverLocation.row_index >= 0 ? ( /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-row-header-hover",
    style: ___default['default'].assign({
      top: hoverLocation.row_pre,
      height: hoverLocation.row - hoverLocation.row_pre - 1,
      display: "block"
    }, core.fixRowStyleOverflowInFreeze(context, hoverLocation.row_index, hoverLocation.row_index, (_refs$globalCache$fre2 = refs.globalCache.freezen) === null || _refs$globalCache$fre2 === void 0 ? void 0 : _refs$globalCache$fre2[context.currentSheetId]))
  })) : null, selectedLocation.map(function (_ref, i) {
    var _refs$globalCache$fre3;
    var row = _ref.row,
      row_pre = _ref.row_pre,
      r1 = _ref.r1,
      r2 = _ref.r2;
    return /*#__PURE__*/React__default['default'].createElement("div", {
      className: "leankylin-row-header-selected",
      key: i,
      style: ___default['default'].assign({
        top: row_pre,
        height: row - row_pre - 1,
        display: "block",
        backgroundColor: "rgba(76, 76, 76, 0.1)"
      }, core.fixRowStyleOverflowInFreeze(context, r1, r2, (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]))
    });
  }), /*#__PURE__*/React__default['default'].createElement("div", {
    style: {
      height: context.rh_height,
      width: 1
    },
    id: "luckysheetrowHeader_0",
    className: "luckysheetsheetchange"
  })), /*#__PURE__*/React__default['default'].createElement("div", {
    style: {
      top: 20,
      position: "absolute",
      pointerEvents: "none",
      width: 46
    }
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-rows-freeze-handle ".concat(freezeCanDrag ? "" : "leankylin-rows-freeze-handle-disabled"),
    onMouseDown: onRowFreezeHandleMouseDown,
    style: {
      top: freezeHandleTop,
      pointerEvents: "all"
    }
  }, settings === null || settings === void 0 ? void 0 : (_settings$renderFreez = settings.renderFreezeRow) === null || _settings$renderFreez === void 0 ? void 0 : _settings$renderFreez.call(settings, freezeCanDrag))));
};

var ContentEditable = function ContentEditable(_ref) {
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  var lastHtml = React.useRef("");
  var root = React.useRef(null);
  var autoFocus = props.autoFocus,
    initialContent = props.initialContent,
    onChange = props.onChange;
  React.useEffect(function () {
    if (autoFocus) {
      var _root$current;
      (_root$current = root.current) === null || _root$current === void 0 ? void 0 : _root$current.focus();
    }
  }, [autoFocus]);
  React.useEffect(function () {
    if (initialContent && root.current != null) {
      root.current.innerHTML = initialContent;
    }
  }, [initialContent]);
  var fnEmitChange = React.useCallback(function (__, isBlur) {
    var html;
    if (root.current != null) {
      html = root.current.innerHTML;
    }
    if (onChange && html !== lastHtml.current) {
      onChange(html || "", isBlur);
    }
    lastHtml.current = html || "";
  }, [root, onChange]);
  var innerRef = props.innerRef,
    _onBlur = props.onBlur;
  var allowEdit = props.allowEdit;
  if (___default['default'].isNil(allowEdit)) allowEdit = true;
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({
    onDoubleClick: function onDoubleClick(e) {
      return e.stopPropagation();
    },
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, ___default['default'].omit(props, "innerRef", "onChange", "html", "onBlur", "autoFocus", "allowEdit", "initialContent")), {}, {
    ref: function ref(e) {
      root.current = e;
      innerRef === null || innerRef === void 0 ? void 0 : innerRef(e);
    },
    tabIndex: 0,
    onInput: fnEmitChange,
    onBlur: function onBlur(e) {
      fnEmitChange(null, true);
      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
    },
    contentEditable: allowEdit
  }));
};

var FormulaSearch = function FormulaSearch(props) {
  var _useContext = React.useContext(WorkbookContext),
    context = _useContext.context,
    refs = _useContext.refs,
    settings = _useContext.settings;
  if (___default['default'].isEmpty(context.functionCandidates)) return null;
  function moveCursorToEnd(editor) {
    var leftParen = editor.querySelector(".luckysheet-formula-text-lpar");
    var rightParen = editor.querySelector(".luckysheet-formula-text-rpar");
    var range = document.createRange();
    var selection = window.getSelection();
    range.setStartAfter(leftParen);
    range.setEndBefore(rightParen);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  if (settings.renderFormulaSearch) {
    return settings.renderFormulaSearch(context.functionCandidates, core.functionHTMLGenerate, refs.cellInput.current);
  }
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
    id: "luckysheet-formula-search-c",
    className: "luckysheet-formula-search-c"
  }), context.functionCandidates.map(function (v) {
    return /*#__PURE__*/React__default['default'].createElement("div", {
      onClick: function onClick() {
        var _refs$cellInput$curre;
        refs.cellInput.current.innerHTML = core.functionHTMLGenerate("=".concat(v.n, "()"));
        (_refs$cellInput$curre = refs.cellInput.current) === null || _refs$cellInput$curre === void 0 ? void 0 : _refs$cellInput$curre.focus();
        moveCursorToEnd(refs.cellInput.current);
      },
      key: v.n,
      "data-func": v.n,
      className: "luckysheet-formula-search-item"
    }, /*#__PURE__*/React__default['default'].createElement("div", {
      className: "luckysheet-formula-search-func"
    }, v.n), /*#__PURE__*/React__default['default'].createElement("div", {
      className: "luckysheet-formula-search-detail"
    }, v.d));
  }));
};

var FormulaHint = function FormulaHint(props) {
  var _useContext = React.useContext(WorkbookContext),
    context = _useContext.context,
    settings = _useContext.settings;
  var _locale = core.locale(context),
    formulaMore = _locale.formulaMore;
  if (!context.functionHint) return null;
  var fn = context.formulaCache.functionlistMap[context.functionHint];
  if (!fn) return null;
  if (settings.renderFormulaHint) {
    return settings.renderFormulaHint(fn);
  }
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
    id: "luckysheet-formula-help-c",
    className: "luckysheet-formula-help-c"
  }), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-close",
    title: "\u5173\u95ED"
  }, /*#__PURE__*/React__default['default'].createElement("i", {
    className: "fa fa-times",
    "aria-hidden": "true"
  })), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-collapse",
    title: "\u6536\u8D77"
  }, /*#__PURE__*/React__default['default'].createElement("i", {
    className: "fa fa-angle-up",
    "aria-hidden": "true"
  })), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-title"
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-title-formula"
  }, /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-help-function-name"
  }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-paren"
  }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-parameter-holder"
  }, fn.p.map(function (param, i) {
    var name = param.name;
    if (param.repeat === "y") {
      name += ", ...";
    }
    if (param.require === "o") {
      name = "[".concat(name, "]");
    }
    return /*#__PURE__*/React__default['default'].createElement("span", {
      className: "luckysheet-arguments-help-parameter",
      dir: "auto",
      key: name
    }, name, i !== fn.p.length - 1 && ", ");
  })), /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-paren"
  }, ")"))), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-content"
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-content-example"
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-arguments-help-section-title"
  }, formulaMore.helpExample), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-arguments-help-formula"
  }, /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-help-function-name"
  }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-paren"
  }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-parameter-holder"
  }, fn.p.map(function (param, i) {
    return /*#__PURE__*/React__default['default'].createElement("span", {
      key: param.name,
      className: "luckysheet-arguments-help-parameter",
      dir: "auto"
    }, param.example, i !== fn.p.length - 1 && ", ");
  })), /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-paren"
  }, ")"))), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-content-detail"
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-arguments-help-section"
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-arguments-help-section-title luckysheet-arguments-help-parameter-name"
  }, formulaMore.helpAbstract), /*#__PURE__*/React__default['default'].createElement("span", {
    className: "luckysheet-arguments-help-parameter-content"
  }, fn.d))), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-content-param"
  }, fn.p.map(function (param) {
    return /*#__PURE__*/React__default['default'].createElement("div", {
      className: "luckysheet-arguments-help-section",
      key: param.name
    }, /*#__PURE__*/React__default['default'].createElement("div", {
      className: "luckysheet-arguments-help-section-title"
    }, param.name, param.repeat === "y" && ( /*#__PURE__*/React__default['default'].createElement("span", {
      className: "luckysheet-arguments-help-argument-info"
    }, "...-", formulaMore.allowRepeatText)), param.require === "o" && ( /*#__PURE__*/React__default['default'].createElement("span", {
      className: "luckysheet-arguments-help-argument-info"
    }, "-[", formulaMore.allowOptionText, "]"))), /*#__PURE__*/React__default['default'].createElement("span", {
      className: "luckysheet-arguments-help-parameter-content"
    }, param.detail));
  }))), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-formula-help-foot"
  }));
};

function usePrevious(value) {
  var ref = React.useRef();
  React.useEffect(function () {
    ref.current = value;
  }, [value]);
  return ref.current;
}

var InputBox = function InputBox() {
  var _context$luckysheet_s, _context$rangeDialog;
  var _useContext = React.useContext(WorkbookContext),
    context = _useContext.context,
    setContext = _useContext.setContext,
    refs = _useContext.refs;
  var inputRef = React.useRef(null);
  var lastKeyDownEventRef = React.useRef();
  var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
  var prevSheetId = usePrevious(context.currentSheetId);
  var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isHidenRC = _useState2[0],
    setIsHidenRC = _useState2[1];
  var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
  var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
  var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
  var preText = React.useRef("");
  var inputBoxStyle = React.useMemo(function () {
    if (firstSelection && context.luckysheetCellUpdate.length > 0) {
      var flowdata = core.getFlowdata(context);
      if (!flowdata) return {};
      return core.getStyleByCell(context, flowdata, firstSelection.row_focus, firstSelection.column_focus);
    }
    return {};
  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, firstSelection]);
  React.useLayoutEffect(function () {
    if (!context.allowEdit) {
      setContext(function (ctx) {
        var flowdata = core.getFlowdata(ctx);
        if (!___default['default'].isNil(flowdata) && ctx.forceFormulaRef) {
          var value = core.getCellValue(row_index, col_index, flowdata, "f");
          core.createRangeHightlight(ctx, value);
        }
      });
    }
    if (firstSelection && context.luckysheetCellUpdate.length > 0) {
      var _flowdata$row_index;
      if (refs.globalCache.doNotUpdateCell) {
        delete refs.globalCache.doNotUpdateCell;
        return;
      }
      if (___default['default'].isEqual(prevCellUpdate, context.luckysheetCellUpdate) && prevSheetId === context.currentSheetId) {
        return;
      }
      var flowdata = core.getFlowdata(context);
      var cell = flowdata === null || flowdata === void 0 ? void 0 : (_flowdata$row_index = flowdata[row_index]) === null || _flowdata$row_index === void 0 ? void 0 : _flowdata$row_index[col_index];
      var value = "";
      if (cell && !refs.globalCache.overwriteCell) {
        if (core.isInlineStringCell(cell)) {
          value = core.getInlineStringHTML(row_index, col_index, flowdata);
        } else if (cell.f) {
          value = core.getCellValue(row_index, col_index, flowdata, "f");
          setContext(function (ctx) {
            core.createRangeHightlight(ctx, value);
          });
        } else {
          value = core.valueShowEs(row_index, col_index, flowdata);
          if (Number(cell.qp) === 1) {
            value = value ? "".concat(value) : value;
          }
        }
      }
      refs.globalCache.overwriteCell = false;
      if (!refs.globalCache.ignoreWriteCell) inputRef.current.innerHTML = core.escapeHTMLTag(core.escapeScriptTag(value));
      refs.globalCache.ignoreWriteCell = false;
      if (!refs.globalCache.doNotFocus) {
        setTimeout(function () {
          core.moveToEnd(inputRef.current);
        });
      }
      delete refs.globalCache.doNotFocus;
    }
  }, [context.luckysheetCellUpdate, context.luckysheetfile, context.currentSheetId, firstSelection]);
  React.useEffect(function () {
    if (___default['default'].isEmpty(context.luckysheetCellUpdate)) {
      if (inputRef.current) {
        inputRef.current.innerHTML = "";
      }
    }
  }, [context.luckysheetCellUpdate]);
  React.useEffect(function () {
    setIsHidenRC(core.isShowHidenCR(context));
  }, [context.luckysheet_select_save]);
  var onKeyDown = React.useCallback(function (e) {
    lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
    preText.current = inputRef.current.innerText;
    if (e.key === "Escape" && context.luckysheetCellUpdate.length > 0) {
      setContext(function (draftCtx) {
        core.cancelNormalSelected(draftCtx);
        core.moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
      });
      e.preventDefault();
    } else if (e.key === "Enter" && context.luckysheetCellUpdate.length > 0) {
      if (e.altKey || e.metaKey) {
        document.execCommand("insertHTML", false, "\n ");
        document.execCommand("delete", false);
        e.stopPropagation();
      }
    } else if (e.key === "Tab" && context.luckysheetCellUpdate.length > 0) {
      setContext(function (draftCtx) {
        core.updateCell(draftCtx, draftCtx.luckysheetCellUpdate[0], draftCtx.luckysheetCellUpdate[1], refs.cellInput.current);
        core.moveHighlightCell(draftCtx, "right", 1, "rangeOfSelect");
      });
      e.preventDefault();
      e.stopPropagation();
    } else if (e.key === "F4" && context.luckysheetCellUpdate.length > 0) {
      e.preventDefault();
    }
  }, [context.luckysheetCellUpdate.length, refs.cellInput, setContext]);
  var onChange = React.useCallback(function (__, isBlur) {
    var e = lastKeyDownEventRef.current;
    if (!e) return;
    var kcode = e.keyCode;
    if (!kcode) return;
    if (!(kcode >= 112 && kcode <= 123 || kcode <= 46 || kcode === 144 || kcode === 108 || e.ctrlKey || e.altKey || e.shiftKey && (kcode === 37 || kcode === 38 || kcode === 39 || kcode === 40)) || kcode === 8 || kcode === 32 || kcode === 46 || e.ctrlKey && kcode === 86) {
      setContext(function (draftCtx) {
        if ((draftCtx.formulaCache.rangestart || draftCtx.formulaCache.rangedrag_column_start || draftCtx.formulaCache.rangedrag_row_start || core.israngeseleciton(draftCtx)) && isBlur) return;
        if (!core.isAllowEdit(draftCtx, draftCtx.luckysheet_select_save)) ;
        core.handleFormulaInput(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode, preText.current);
      });
    }
  }, [refs.cellInput, refs.fxInput, setContext]);
  var onPaste = React.useCallback(function (e) {
    if (___default['default'].isEmpty(context.luckysheetCellUpdate)) {
      e.preventDefault();
    }
  }, [context.luckysheetCellUpdate]);
  var cfg = context.config || {};
  var rowReadOnly = cfg.rowReadOnly || {};
  var colReadOnly = cfg.colReadOnly || {};
  var edit = !((colReadOnly[col_index] || rowReadOnly[row_index]) && context.allowEdit === true);
  return /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-input-box",
    style: firstSelection && !((_context$rangeDialog = context.rangeDialog) === null || _context$rangeDialog === void 0 ? void 0 : _context$rangeDialog.show) ? {
      left: firstSelection.left,
      top: firstSelection.top,
      zIndex: ___default['default'].isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
      display: "block"
    } : {
      left: -10000,
      top: -10000,
      display: "block"
    },
    onMouseDown: function onMouseDown(e) {
      return e.stopPropagation();
    },
    onMouseUp: function onMouseUp(e) {
      return e.stopPropagation();
    }
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "luckysheet-input-box-inner",
    style: firstSelection ? _objectSpread2({
      minWidth: firstSelection.width,
      minHeight: firstSelection.height
    }, inputBoxStyle) : {}
  }, /*#__PURE__*/React__default['default'].createElement(ContentEditable, {
    innerRef: function innerRef(e) {
      inputRef.current = e;
      refs.cellInput.current = e;
    },
    className: "luckysheet-cell-input",
    id: "luckysheet-rich-text-editor",
    style: {
      transform: "scale(".concat(context.zoomRatio, ")"),
      transformOrigin: "left top",
      width: "".concat(100 / context.zoomRatio, "%"),
      height: "".concat(100 / context.zoomRatio, "%")
    },
    "aria-autocomplete": "list",
    onChange: onChange,
    onKeyDown: onKeyDown,
    onPaste: onPaste,
    allowEdit: edit ? !isHidenRC : edit
  })), document.activeElement === inputRef.current && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(FormulaSearch, {
    style: {
      top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
    }
  }), /*#__PURE__*/React__default['default'].createElement(FormulaHint, {
    style: {
      top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
    }
  }))));
};

var ScrollBar = function ScrollBar(_ref) {
  var axis = _ref.axis;
  var _useContext = React.useContext(WorkbookContext),
    context = _useContext.context,
    refs = _useContext.refs,
    setContext = _useContext.setContext;
  React.useEffect(function () {
    if (axis === "x") {
      refs.scrollbarX.current.scrollLeft = context.scrollLeft;
    } else {
      refs.scrollbarY.current.scrollTop = context.scrollTop;
    }
  }, [axis === "x" ? context.scrollLeft : context.scrollTop]);
  var getHidden = function getHidden() {
    var _refs$scrollbarY$curr;
    if (axis === "x") {
      return refs.scrollbarX.current ? refs.scrollbarX.current.offsetWidth >= context.ch_width : false;
    }
    return refs.scrollbarY.current ? ((_refs$scrollbarY$curr = refs.scrollbarY.current) === null || _refs$scrollbarY$curr === void 0 ? void 0 : _refs$scrollbarY$curr.offsetHeight) >= context.rh_height : false;
  };
  var hidden = getHidden();
  return /*#__PURE__*/React__default['default'].createElement("div", {
    ref: axis === "x" ? refs.scrollbarX : refs.scrollbarY,
    style: axis === "x" ? {
      left: context.rowHeaderWidth,
      width: "calc(100% - ".concat(context.rowHeaderWidth, "px)"),
      pointerEvents: hidden ? "none" : "auto"
    } : {
      height: "100%",
      pointerEvents: hidden ? "none" : "auto"
    },
    className: "luckysheet-scrollbars luckysheet-scrollbar-ltr luckysheet-scrollbar-".concat(axis),
    onScroll: function onScroll() {
      if (axis === "x") {
        setContext(function (draftCtx) {
          draftCtx.scrollLeft = refs.scrollbarX.current.scrollLeft;
        });
      } else {
        setContext(function (draftCtx) {
          draftCtx.scrollTop = refs.scrollbarY.current.scrollTop;
        });
      }
    }
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    style: axis === "x" ? {
      width: context.ch_width,
      height: 10
    } : {
      width: 10,
      height: context.rh_height
    }
  }));
};

var Dialog = function Dialog(_ref) {
  var type = _ref.type,
    onOk = _ref.onOk,
    onCancel = _ref.onCancel,
    children = _ref.children,
    containerStyle = _ref.containerStyle,
    contentStyle = _ref.contentStyle;
  var _useContext = React.useContext(WorkbookContext),
    context = _useContext.context;
  var _locale = core.locale(context),
    button = _locale.button;
  return /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-dialog",
    style: containerStyle
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-modal-dialog-header"
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-modal-dialog-icon-close",
    onClick: onCancel
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
    name: "close",
    style: {
      padding: 7,
      cursor: "pointer"
    }
  }))), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-dialog-box-content",
    style: contentStyle
  }, children), type != null && ( /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-dialog-box-button-container"
  }, type === "ok" ? ( /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-message-box-button button-default",
    onClick: onOk
  }, button.confirm)) : ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-message-box-button button-primary",
    onClick: onOk
  }, button.confirm), /*#__PURE__*/React__default['default'].createElement("div", {
    className: "leankylin-message-box-button button-default",
    onClick: onCancel
  }, button.cancel))))));
};

var MessageBox = function MessageBox(_ref) {
  var _ref$type = _ref.type,
    type = _ref$type === void 0 ? "yesno" : _ref$type,
    onOk = _ref.onOk,
    onCancel = _ref.onCancel,
    children = _ref.children;
  return /*#__PURE__*/React__default['default'].createElement(Dialog, {
    type: type,
    onOk: onOk,
    onCancel: onCancel,
    contentStyle: {
      width: 300,
      paddingTop: 20,
      p