@fileverse-dev/fortune-react 1.0.5 → 1.0.7

package/es/components/SheetTab/SheetItem.js

@@ -0,0 +1,228 @@
+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 (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() {
+      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

@@ -0,0 +1,280 @@
+.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/{dist/packages/react/src → es}/components/SheetTab/index.d.ts

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

package/es/components/SheetTab/index.js

@@ -0,0 +1,143 @@
+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;