@fileverse-dev/fortune-react 1.0.26-patch-1 → 1.1.0

package/es/components/SheetTab/SheetItem.js

@@ -1,230 +0,0 @@
-import { editSheetName, cancelNormalSelected, cancelActiveImgItem } from "@fileverse-dev/fortune-core";
-import _ from "lodash";
-import React, { useContext, useState, useEffect, useRef, useCallback } from "react";
-import WorkbookContext from "../../context";
-import { useAlert } from "../../hooks/useAlert";
-import SVGIcon from "../SVGIcon";
-var SheetItem = function SheetItem(_a) {
-  var sheet = _a.sheet,
-    isDropPlaceholder = _a.isDropPlaceholder;
-  var _b = useContext(WorkbookContext),
-    context = _b.context,
-    setContext = _b.setContext,
-    refs = _b.refs;
-  var _c = useState(false),
-    editing = _c[0],
-    setEditing = _c[1];
-  var containerRef = useRef(null);
-  var editable = useRef(null);
-  var _d = useState(false),
-    dragOver = _d[0],
-    setDragOver = _d[1];
-  var _e = useState("#c3c3c3"),
-    svgColor = _e[0],
-    setSvgColor = _e[1];
-  var showAlert = useAlert().showAlert;
-  useEffect(function () {
-    setContext(function (draftCtx) {
-      var _a, _b, _c, _d;
-      var r = context.sheetScrollRecord[draftCtx === null || draftCtx === void 0 ? void 0 : draftCtx.currentSheetId];
-      if (r) {
-        draftCtx.scrollLeft = (_a = r.scrollLeft) !== null && _a !== void 0 ? _a : 0;
-        draftCtx.scrollTop = (_b = r.scrollTop) !== null && _b !== void 0 ? _b : 0;
-        draftCtx.luckysheet_select_status = (_c = r.luckysheet_select_status) !== null && _c !== void 0 ? _c : false;
-        draftCtx.luckysheet_select_save = (_d = r.luckysheet_select_save) !== null && _d !== void 0 ? _d : undefined;
-      } else {
-        draftCtx.scrollLeft = 0;
-        draftCtx.scrollTop = 0;
-        draftCtx.luckysheet_select_status = false;
-        draftCtx.luckysheet_select_save = undefined;
-      }
-      draftCtx.luckysheet_selection_range = [];
-    });
-  }, [context.currentSheetId, context.sheetScrollRecord, setContext]);
-  useEffect(function () {
-    if (!editable.current) return;
-    if (editing) {
-      if (window.getSelection) {
-        var range = document.createRange();
-        range.selectNodeContents(editable.current);
-        if (range.startContainer && document.body.contains(range.startContainer)) {
-          var selection = window.getSelection();
-          selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
-          selection === null || selection === void 0 ? void 0 : selection.addRange(range);
-        }
-      } else if (document.selection) {
-        var range = document.body.createTextRange();
-        range.moveToElementText(editable.current);
-        range.select();
-      }
-    }
-    editable.current.dataset.oldText = editable.current.innerText;
-  }, [editing]);
-  var onBlur = useCallback(function () {
-    setContext(function (draftCtx) {
-      try {
-        editSheetName(draftCtx, editable.current);
-      } catch (e) {
-        showAlert(e.message);
-      }
-    });
-    setEditing(false);
-  }, [setContext, showAlert]);
-  var onKeyDown = useCallback(function (e) {
-    var _a;
-    if (e.key === "Enter") {
-      (_a = editable.current) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    e.stopPropagation();
-  }, []);
-  var onDragStart = useCallback(function (e) {
-    if (context.allowEdit === true) e.dataTransfer.setData("sheetId", "".concat(sheet.id));
-    e.stopPropagation();
-  }, [context.allowEdit, sheet.id]);
-  var onDrop = useCallback(function (e) {
-    if (context.allowEdit === false) return;
-    var draggingId = e.dataTransfer.getData("sheetId");
-    setContext(function (draftCtx) {
-      var droppingId = sheet.id;
-      var draggingSheet;
-      var droppingSheet;
-      _.sortBy(draftCtx.luckysheetfile, ["order"]).forEach(function (f, i) {
-        f.order = i;
-        if (f.id === draggingId) {
-          draggingSheet = f;
-        } else if (f.id === droppingId) {
-          droppingSheet = f;
-        }
-      });
-      if (draggingSheet && droppingSheet) {
-        draggingSheet.order = droppingSheet.order - 0.1;
-        _.sortBy(draftCtx.luckysheetfile, ["order"]).forEach(function (f, i) {
-          f.order = i;
-        });
-      } else if (draggingSheet && isDropPlaceholder) {
-        draggingSheet.order = draftCtx.luckysheetfile.length;
-      }
-    });
-    setDragOver(false);
-    e.stopPropagation();
-  }, [context.allowEdit, isDropPlaceholder, setContext, sheet.id]);
-  return /*#__PURE__*/React.createElement("div", {
-    onDragOver: function onDragOver(e) {
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    onDragEnter: function onDragEnter(e) {
-      setDragOver(true);
-      e.stopPropagation();
-    },
-    onDragLeave: function onDragLeave(e) {
-      setDragOver(false);
-      e.stopPropagation();
-    },
-    onDragEnd: function onDragEnd(e) {
-      setDragOver(false);
-      e.stopPropagation();
-    },
-    onDrop: onDrop,
-    onDragStart: onDragStart,
-    draggable: context.allowEdit && !editing,
-    key: sheet.id,
-    ref: containerRef,
-    className: isDropPlaceholder ? "fortune-sheettab-placeholder" : "luckysheet-sheets-item".concat(context.currentSheetId === sheet.id ? " luckysheet-sheets-item-active" : ""),
-    onClick: function onClick() {
-      if (isDropPlaceholder) return;
-      setContext(function (draftCtx) {
-        draftCtx.sheetScrollRecord[draftCtx.currentSheetId] = {
-          scrollLeft: draftCtx.scrollLeft,
-          scrollTop: draftCtx.scrollTop,
-          luckysheet_select_status: draftCtx.luckysheet_select_status,
-          luckysheet_select_save: draftCtx.luckysheet_select_save,
-          luckysheet_selection_range: draftCtx.luckysheet_selection_range
-        };
-        draftCtx.dataVerificationDropDownList = false;
-        draftCtx.currentSheetId = sheet.id;
-        draftCtx.zoomRatio = sheet.zoomRatio || 1;
-        cancelActiveImgItem(draftCtx, refs.globalCache);
-        cancelNormalSelected(draftCtx);
-      });
-    },
-    tabIndex: 0,
-    onContextMenu: function onContextMenu(e) {
-      if (context.isFlvReadOnly) return;
-      if (isDropPlaceholder) return;
-      var rect = refs.workbookContainer.current.getBoundingClientRect();
-      var pageX = e.pageX,
-        pageY = e.pageY;
-      setContext(function (ctx) {
-        ctx.dataVerificationDropDownList = false;
-        ctx.currentSheetId = sheet.id;
-        ctx.zoomRatio = sheet.zoomRatio || 1;
-        ctx.sheetTabContextMenu = {
-          x: pageX - rect.left - window.scrollX,
-          y: pageY - rect.top - window.scrollY,
-          sheet: sheet,
-          onRename: function onRename() {
-            return setEditing(true);
-          }
-        };
-      });
-    },
-    style: {
-      borderLeft: dragOver ? "2px solid #0188fb" : "",
-      display: sheet.hide === 1 ? "none" : ""
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "luckysheet-sheets-item-name",
-    spellCheck: "false",
-    suppressContentEditableWarning: true,
-    contentEditable: isDropPlaceholder ? false : editing,
-    onDoubleClick: function onDoubleClick() {
-      if (context.isFlvReadOnly) return;
-      setEditing(true);
-    },
-    onBlur: onBlur,
-    onKeyDown: onKeyDown,
-    ref: editable,
-    style: dragOver ? {
-      pointerEvents: "none"
-    } : {}
-  }, sheet.name), /*#__PURE__*/React.createElement("span", {
-    className: "luckysheet-sheets-item-function",
-    onMouseEnter: function onMouseEnter() {
-      return setSvgColor("#5c5c5c");
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setSvgColor("#c3c3c3");
-    },
-    onClick: function onClick(e) {
-      if (isDropPlaceholder || context.allowEdit === false) return;
-      var rect = refs.workbookContainer.current.getBoundingClientRect();
-      var pageX = e.pageX,
-        pageY = e.pageY;
-      setContext(function (ctx) {
-        ctx.currentSheetId = sheet.id;
-        ctx.sheetTabContextMenu = {
-          x: pageX - rect.left - window.scrollX,
-          y: pageY - rect.top - window.scrollY,
-          sheet: sheet,
-          onRename: function onRename() {
-            return setEditing(true);
-          }
-        };
-      });
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "downArrow",
-    width: 12,
-    style: {
-      fill: svgColor
-    }
-  })), !!sheet.color && (/*#__PURE__*/React.createElement("div", {
-    className: "luckysheet-sheets-item-color",
-    style: {
-      background: sheet.color
-    }
-  })));
-};
-export default SheetItem;

package/es/components/SheetTab/index.css

@@ -1,280 +0,0 @@
-.luckysheet-sheet-area {
-  width: 100%;
-  box-sizing: border-box;
-  background-color: #fafafc;
-  color: #444;
-  height: 31px;
-  padding: 0 30px 0 44px;
-  margin: 0;
-  -webkit-touch-callout: none;
-  cursor: default;
-  transition: 0.3s ease all;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-}
-
-#luckysheet-sheet-content {
-  width: 0;
-  flex: 3;
-  display: flex;
-  align-items: center;
-}
-
-#luckysheet-bottom-pager {
-  width: 0;
-  background-color: #fafafc;
-  z-index: 1;
-  flex: 2;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.luckysheet-sheet-area > div,
-.luckysheet-sheet-area .luckysheet-sheets-item {
-  display: inline-block;
-  /* margin-right: 6px;
-	margin-top: 1px;
-	padding: 1px 6px; */
-  /* padding: 6px 10px; */
-}
-
-.fortune-sheettab-container {
-  padding: 0px 0px;
-  margin-left: 0px;
-  position: relative;
-  max-width: 54%;
-  vertical-align: bottom;
-  display: inline-block;
-}
-
-.fortune-sheettab-container .boundary {
-  position: absolute;
-  top: 0;
-  width: 6px;
-  height: 100%;
-  z-index: 1;
-  background: rgb(255, 255, 255);
-}
-
-.fortune-sheettab-container .boundary-left {
-  left: 0;
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
-  --tw-gradient-from: #4445;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, #8880);
-}
-
-.fortune-sheettab-container .boundary-right {
-  right: 0;
-  background-image: linear-gradient(to left, var(--tw-gradient-stops));
-  --tw-gradient-from: #4445;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, #8880);
-}
-
-.fortune-sheettab-container .fortune-sheettab-container-c {
-  padding: 0px 0px;
-  margin-left: 0px;
-  overflow: hidden;
-  white-space: nowrap;
-  position: relative;
-  max-width: 100%;
-  vertical-align: bottom;
-  display: inline-block;
-}
-
-.luckysheet-sheet-container-menu-hide .luckysheet-sheets-item {
-  padding-right: 5px !important;
-}
-
-.luckysheet-sheet-container-menu-hide .luckysheet-sheets-item-menu {
-  display: none !important;
-}
-
-.luckysheet-sheet-area div.luckysheet-sheets-item {
-  padding: 2px 6px;
-  height: 29px;
-  line-height: 29px;
-  background-color: #fafafc;
-  color: #676464;
-  min-width: 30px;
-  top: 0px;
-  position: relative;
-  margin-right: -1px;
-  cursor: pointer;
-  transition: all 0.1s;
-  font-size: 13px;
-  padding: 2px 19px 0px 5px;
-  box-sizing: border-box;
-  border-left: 1px solid #e0e0e0;
-  border-right: 1px solid #e0e0e0;
-  vertical-align: middle;
-}
-
-.luckysheet-sheet-area div.luckysheet-sheets-item:last-child {
-  margin-right: 1px;
-}
-
-.luckysheet-sheet-area div.luckysheet-sheets-item:hover {
-  background-color: #efefef;
-  /* border-color: #a5a5a5; */
-  color: #490500;
-}
-
-.luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-menu {
-  margin-left: 2px;
-  display: inline-block;
-  top: -2px;
-  position: relative;
-  color: #a1a1a1;
-  position: absolute;
-  height: 100%;
-  width: 15px;
-  right: 0px;
-  text-align: center;
-}
-
-.luckysheet-sheet-area
-  div.luckysheet-sheets-item
-  .luckysheet-sheets-item-menu:hover {
-  color: #2a2a2a;
-  cursor: pointer;
-}
-
-.luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-name {
-  padding: 0px 3px;
-}
-
-.luckysheet-sheets-item-color {
-  width: 100%;
-  height: 10%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.luckysheet-sheet-area
-  div.luckysheet-sheets-item
-  .luckysheet-sheets-item-name[contenteditable="true"] {
-  border: 1px solid #d9d9d9;
-  display: inline-block;
-  height: 18px;
-  line-height: 18px;
-  min-width: 8px;
-  margin: -4px -1px;
-  -moz-user-modify: read-write-plaintext-only;
-  -webkit-user-modify: read-write-plaintext-only;
-  -moz-user-select: text !important;
-  -ms-user-select: text !important;
-  -webkit-user-select: text !important;
-}
-
-.luckysheet-sheet-area
-  div.luckysheet-sheets-item
-  .luckysheet-sheets-item-name[contenteditable="true"]:focus {
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-  border: 1px solid #4d90fe;
-  outline: none;
-}
-
-.luckysheet-sheet-area div.luckysheet-sheets-item-active {
-  /* padding: 2px 8px; */
-  height: 29px;
-  line-height: 29px;
-  background-color: #efefef;
-  /* border-color: #aaa; */
-  border-top-color: #fff;
-  color: #222;
-  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
-  cursor: default;
-  /* top: -2px; */
-  /* border-bottom: none; */
-  /* padding-right: 20px; */
-}
-
-.luckysheet-sheet-area div.luckysheet-sheets-item-active:hover {
-  background-color: #ececec;
-  /* border-color: #aaa; */
-  color: #222;
-}
-
-.fortune-sheettab-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 29px;
-  width: 29px;
-}
-
-.fortune-sheettab-button:hover {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 29px;
-  width: 29px;
-  background-color: #efefef;
-}
-
-.luckysheet-noselected-text {
-  -moz-user-select: -moz-test;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.fortune-sheettab-scroll {
-  display: flex;
-  align-items: center;
-  padding: 0 5px;
-  height: 29px;
-  cursor: pointer;
-}
-
-.fortune-sheettab-scroll:hover {
-  background-color: #e0e0e0;
-}
-
-.fortune-sheettab-placeholder {
-  display: inline-block;
-  width: 30px;
-  height: 29px;
-  line-height: 29px;
-  vertical-align: middle;
-}
-
-.sheet-list-container {
-  overflow: visible;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.luckysheet-sheet-selection-calInfo {
-  display: flex;
-  font-size: 12px;
-  align-content: center;
-  padding: 0 0 0 44px;
-  height: 22px;
-  align-self: flex-end;
-}
-
-.luckysheet-sheet-selection-calInfo div {
-  margin: auto 0;
-  white-space: nowrap;
-  margin-right: 7px;
-}
-
-.luckysheet-sheets-item-function {
-  width: 12px;
-  height: 24px;
-  position: absolute;
-  top: 4px;
-  right: 2px;
-}
-
-.fortune-sheet-area-right {
-  display: flex !important;
-}

package/es/components/SheetTab/index.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import "./index.css";
-declare const SheetTab: React.FC;
-export default SheetTab;

package/es/components/SheetTab/index.js

@@ -1,143 +0,0 @@
-import _ from "lodash";
-import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { updateCell, addSheet } from "@fileverse-dev/fortune-core";
-import WorkbookContext from "../../context";
-import SVGIcon from "../SVGIcon";
-import "./index.css";
-import SheetItem from "./SheetItem";
-import ZoomControl from "../ZoomControl";
-var SheetTab = function SheetTab() {
-  var _a = useContext(WorkbookContext),
-    context = _a.context,
-    setContext = _a.setContext,
-    settings = _a.settings,
-    refs = _a.refs;
-  var tabContainerRef = useRef(null);
-  var leftScrollRef = useRef(null);
-  var rightScrollRef = useRef(null);
-  var _b = useState(false),
-    isShowScrollBtn = _b[0],
-    setIsShowScrollBtn = _b[1];
-  var _c = useState(true),
-    isShowBoundary = _c[0],
-    setIsShowBoundary = _c[1];
-  var scrollDelta = 150;
-  var scrollBy = useCallback(function (amount) {
-    var _a;
-    if (tabContainerRef.current == null || tabContainerRef.current.scrollLeft == null) {
-      return;
-    }
-    var scrollLeft = tabContainerRef.current.scrollLeft;
-    if (scrollLeft + amount <= 0) setIsShowBoundary(true);else if (scrollLeft > 0) setIsShowBoundary(false);
-    (_a = tabContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
-      left: amount,
-      behavior: "smooth"
-    });
-  }, []);
-  useEffect(function () {
-    var tabCurrent = tabContainerRef.current;
-    if (!tabCurrent) return;
-    setIsShowScrollBtn(tabCurrent.scrollWidth - 2 > tabCurrent.clientWidth);
-  }, [context.luckysheetfile]);
-  var onAddSheetClick = useCallback(function () {
-    return setTimeout(function () {
-      setContext(function (draftCtx) {
-        if (draftCtx.luckysheetCellUpdate.length > 0) {
-          updateCell(draftCtx, draftCtx.luckysheetCellUpdate[0], draftCtx.luckysheetCellUpdate[1], refs.cellInput.current);
-        }
-        addSheet(draftCtx, settings);
-      }, {
-        addSheetOp: true
-      });
-      var tabCurrent = tabContainerRef.current;
-      setIsShowScrollBtn(tabCurrent.scrollWidth > tabCurrent.clientWidth);
-    });
-  }, [refs.cellInput, setContext, settings]);
-  useEffect(function () {
-    var _a;
-    (_a = settings.onSheetCountChange) === null || _a === void 0 ? void 0 : _a.call(settings, context.luckysheetfile.length);
-  }, [context.luckysheetfile.length]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "luckysheet-sheet-area luckysheet-noselected-text",
-    onContextMenu: function onContextMenu(e) {
-      return e.preventDefault();
-    },
-    id: "luckysheet-sheet-area"
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "luckysheet-sheet-content"
-  }, context.allowEdit && (/*#__PURE__*/React.createElement("div", {
-    className: "fortune-sheettab-button",
-    onClick: onAddSheetClick
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "plus",
-    width: 16,
-    height: 16
-  }))), context.allowEdit && (/*#__PURE__*/React.createElement("div", {
-    className: "sheet-list-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "all-sheets",
-    className: "fortune-sheettab-button",
-    ref: tabContainerRef,
-    onMouseDown: function onMouseDown(e) {
-      e.stopPropagation();
-      setContext(function (ctx) {
-        ctx.showSheetList = _.isUndefined(ctx.showSheetList) ? true : !ctx.showSheetList;
-        ctx.sheetTabContextMenu = {};
-      });
-    }
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "all-sheets",
-    width: 16,
-    height: 16
-  })))), /*#__PURE__*/React.createElement("div", {
-    id: "luckysheet-sheets-m",
-    className: "luckysheet-sheets-m lucky-button-custom"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "iconfont luckysheet-iconfont-caidan2"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sheettab-container",
-    id: "fortune-sheettab-container"
-  }, !isShowBoundary && /*#__PURE__*/React.createElement("div", {
-    className: "boundary boundary-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sheettab-container-c",
-    id: "fortune-sheettab-container-c",
-    ref: tabContainerRef
-  }, _.sortBy(context.luckysheetfile, function (s) {
-    return Number(s.order);
-  }).map(function (sheet) {
-    return /*#__PURE__*/React.createElement(SheetItem, {
-      key: sheet.id,
-      sheet: sheet
-    });
-  })), isShowBoundary && isShowScrollBtn && (/*#__PURE__*/React.createElement("div", {
-    className: "boundary boundary-right"
-  }))), isShowScrollBtn && (/*#__PURE__*/React.createElement("div", {
-    id: "fortune-sheettab-leftscroll",
-    className: "fortune-sheettab-scroll",
-    ref: leftScrollRef,
-    onClick: function onClick() {
-      scrollBy(-scrollDelta);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "arrow-doubleleft",
-    width: 12,
-    height: 12
-  }))), isShowScrollBtn && (/*#__PURE__*/React.createElement("div", {
-    id: "fortune-sheettab-rightscroll",
-    className: "fortune-sheettab-scroll",
-    ref: rightScrollRef,
-    onClick: function onClick() {
-      scrollBy(scrollDelta);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "arrow-doubleright",
-    width: 12,
-    height: 12
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sheet-area-right"
-  }, /*#__PURE__*/React.createElement(ZoomControl, null)));
-};
-export default SheetTab;