@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/lib/components/SheetTab/SheetItem.js

@@ -0,0 +1,239 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+var _useAlert = require("../../hooks/useAlert");
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var SheetItem = function SheetItem(_a) {
+  var sheet = _a.sheet,
+    isDropPlaceholder = _a.isDropPlaceholder;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var _c = (0, _react.useState)(false),
+    editing = _c[0],
+    setEditing = _c[1];
+  var containerRef = (0, _react.useRef)(null);
+  var editable = (0, _react.useRef)(null);
+  var _d = (0, _react.useState)(false),
+    dragOver = _d[0],
+    setDragOver = _d[1];
+  var _e = (0, _react.useState)("#c3c3c3"),
+    svgColor = _e[0],
+    setSvgColor = _e[1];
+  var showAlert = (0, _useAlert.useAlert)().showAlert;
+  (0, _react.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]);
+  (0, _react.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 = (0, _react.useCallback)(function () {
+    setContext(function (draftCtx) {
+      try {
+        (0, _fortuneCore.editSheetName)(draftCtx, editable.current);
+      } catch (e) {
+        showAlert(e.message);
+      }
+    });
+    setEditing(false);
+  }, [setContext, showAlert]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var _a;
+    if (e.key === "Enter") {
+      (_a = editable.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    e.stopPropagation();
+  }, []);
+  var onDragStart = (0, _react.useCallback)(function (e) {
+    if (context.allowEdit === true) e.dataTransfer.setData("sheetId", "".concat(sheet.id));
+    e.stopPropagation();
+  }, [context.allowEdit, sheet.id]);
+  var onDrop = (0, _react.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;
+      _lodash.default.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;
+        _lodash.default.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.default.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;
+        (0, _fortuneCore.cancelActiveImgItem)(draftCtx, refs.globalCache);
+        (0, _fortuneCore.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.default.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.default.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.default.createElement(_SVGIcon.default, {
+    name: "downArrow",
+    width: 12,
+    style: {
+      fill: svgColor
+    }
+  })), !!sheet.color && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-sheets-item-color",
+    style: {
+      background: sheet.color
+    }
+  })));
+};
+var _default = exports.default = SheetItem;

package/lib/components/SheetTab/index.css

@@ -0,0 +1,278 @@
+.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;
+  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); */
+  /* 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/lib/components/SheetTab/index.d.ts

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