@fileverse-dev/fortune-react 1.1.64 → 1.1.66-clear-formatting-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/es/components/ContextMenu/index.js +23 -1
  2. package/es/components/Sheet/use-smooth-scroll.js +83 -13
  3. package/es/components/SheetOverlay/index.css +1 -0
  4. package/es/components/SheetOverlay/index.js +1 -8
  5. package/es/components/Toolbar/index.css +10 -0
  6. package/es/components/Toolbar/index.js +28 -10
  7. package/lib/components/ContextMenu/index.js +22 -0
  8. package/lib/components/Sheet/use-smooth-scroll.js +83 -13
  9. package/lib/components/SheetOverlay/index.css +1 -0
  10. package/lib/components/SheetOverlay/index.js +0 -7
  11. package/lib/components/Toolbar/index.css +10 -0
  12. package/lib/components/Toolbar/index.js +28 -10
  13. package/package.json +2 -2
package/es/components/ContextMenu/index.js CHANGED
@@ -113,7 +113,7 @@ var __generator = this && this.__generator || function (thisArg, body) {
113
113
  };
114
114
  }
115
115
  };
116
- import { locale, handleCopy, handlePasteByClick, deleteRowCol, insertRowCol, removeActiveImage, deleteSelectedCellText, sortSelection, createFilter, showImgChooser, handleLink, hideSelected, showSelected, getSheetIndex, api, isAllowEdit, jfrefreshgrid, newComment, getFreezeState, toggleFreeze, clearFilter } from "@fileverse-dev/fortune-core";
116
+ import { locale, handleCopy, handlePasteByClick, deleteRowCol, insertRowCol, removeActiveImage, deleteSelectedCellText, sortSelection, createFilter, showImgChooser, handleLink, hideSelected, showSelected, getSheetIndex, api, isAllowEdit, jfrefreshgrid, newComment, getFreezeState, toggleFreeze, clearFilter, clearSelectedCellFormat, clearColumnsCellsFormat, clearRowsCellsFormat } from "@fileverse-dev/fortune-core";
117
117
  import _ from "lodash";
118
118
  import React, { useContext, useRef, useCallback, useLayoutEffect } from "react";
119
119
  import regeneratorRuntime from "regenerator-runtime";
@@ -996,6 +996,28 @@ var ContextMenu = function ContextMenu() {
996
996
  className: "color-text-secondary w-4 h-4"
997
997
  })))));
998
998
  }
999
+ if (name === "clear-format") {
1000
+ return /*#__PURE__*/React.createElement(Menu, {
1001
+ key: name,
1002
+ onClick: function onClick() {
1003
+ if (context.allowEdit === false) return;
1004
+ setContext(function (draftCtx) {
1005
+ draftCtx.contextMenu = {};
1006
+ if (draftCtx.contextMenu.headerMenu === "row") {
1007
+ clearRowsCellsFormat(draftCtx);
1008
+ } else if (draftCtx.contextMenu.headerMenu === true) {
1009
+ clearColumnsCellsFormat(draftCtx);
1010
+ } else if (!draftCtx.contextMenu.headerMenu) {
1011
+ clearSelectedCellFormat(draftCtx);
1012
+ }
1013
+ });
1014
+ }
1015
+ }, /*#__PURE__*/React.createElement("div", {
1016
+ className: "context-item"
1017
+ }, /*#__PURE__*/React.createElement(LucideIcon, {
1018
+ name: "RemoveFormatting"
1019
+ }), /*#__PURE__*/React.createElement("p", null, "Clear formatting")));
1020
+ }
999
1021
  return null;
1000
1022
  }, [context, setContext, refs.globalCache, rightclick, showAlert, showDialog, drag.noMulti, info.tipRowHeightLimit, info.tipColumnWidthLimit, generalDialog.partiallyError, generalDialog.readOnlyError, generalDialog.dataNullError]);
1001
1023
  useLayoutEffect(function () {
package/es/components/Sheet/use-smooth-scroll.js CHANGED
@@ -6,7 +6,7 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
6
6
  context = _a.context,
7
7
  refs = _a.refs,
8
8
  setContext = _a.setContext;
9
- function attachSmoothWheelScroll(scrollContainer, moveScrollBy, getPixelScale) {
9
+ function handleScroll(scrollContainer, moveScrollBy, getPixelScale) {
10
10
  if (getPixelScale === void 0) {
11
11
  getPixelScale = function getPixelScale() {
12
12
  return window.devicePixelRatio || 1;
@@ -29,6 +29,11 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
29
29
  queuedXPixels = 0;
30
30
  queuedYPixels = 0;
31
31
  }
32
+ function scrollHandler(x, y) {
33
+ queuedXPixels += x;
34
+ queuedYPixels += y;
35
+ if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
36
+ }
32
37
  function handleWheelEvent(event) {
33
38
  var _a, _b;
34
39
  event.preventDefault();
@@ -45,19 +50,75 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
45
50
  return;
46
51
  }
47
52
  var scaleFactor = getPixelScale();
48
- queuedXPixels += event.deltaX * scaleFactor;
49
- queuedYPixels += event.deltaY * scaleFactor;
50
- if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
53
+ scrollHandler(event.deltaX * scaleFactor, event.deltaY * scaleFactor);
51
54
  }
52
55
  scrollContainer.addEventListener("wheel", handleWheelEvent, {
53
56
  passive: false
54
57
  });
58
+ return {
59
+ scrollHandler: scrollHandler,
60
+ detach: function detach() {
61
+ scrollContainer.removeEventListener("wheel", handleWheelEvent);
62
+ if (animationFrameId) cancelAnimationFrame(animationFrameId);
63
+ }
64
+ };
65
+ }
66
+ function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
67
+ var isScrolling = false;
68
+ var gestureStartClientX = 0;
69
+ var gestureStartClientY = 0;
70
+ var lastPointerClientX = 0;
71
+ var lastPointerClientY = 0;
72
+ var PAN_DISTANCE_THRESHOLD_PX = 8;
73
+ function onPointerDown(pointerEvent) {
74
+ if (pointerEvent.pointerType !== "touch" && pointerEvent.pointerType !== "pen") return;
75
+ isScrolling = false;
76
+ gestureStartClientX = pointerEvent.clientX;
77
+ lastPointerClientX = pointerEvent.clientX;
78
+ gestureStartClientY = pointerEvent.clientY;
79
+ lastPointerClientY = pointerEvent.clientY;
80
+ containerEl.setPointerCapture(pointerEvent.pointerId);
81
+ }
82
+ function onPointerMove(pointerEvent) {
83
+ if (pointerEvent.pointerType !== "touch" && pointerEvent.pointerType !== "pen") return;
84
+ var deltaXSinceLastMove = pointerEvent.clientX - lastPointerClientX;
85
+ var deltaYSinceLastMove = pointerEvent.clientY - lastPointerClientY;
86
+ lastPointerClientX = pointerEvent.clientX;
87
+ lastPointerClientY = pointerEvent.clientY;
88
+ if (!isScrolling) {
89
+ var totalXFromGestureStart = lastPointerClientX - gestureStartClientX;
90
+ var totalYFromGestureStart = lastPointerClientY - gestureStartClientY;
91
+ if (totalXFromGestureStart * totalXFromGestureStart + totalYFromGestureStart * totalYFromGestureStart < PAN_DISTANCE_THRESHOLD_PX * PAN_DISTANCE_THRESHOLD_PX) {
92
+ return;
93
+ }
94
+ isScrolling = true;
95
+ }
96
+ pointerEvent.preventDefault();
97
+ var scale = getPixelScale();
98
+ scrollHandler(-deltaXSinceLastMove * scale, -deltaYSinceLastMove * scale);
99
+ }
100
+ function onPointerUp(e) {
101
+ try {
102
+ containerEl.releasePointerCapture(e.pointerId);
103
+ } catch (_a) {}
104
+ isScrolling = false;
105
+ }
106
+ containerEl.addEventListener("pointerdown", onPointerDown, {
107
+ passive: false
108
+ });
109
+ containerEl.addEventListener("pointermove", onPointerMove, {
110
+ passive: false
111
+ });
112
+ containerEl.addEventListener("pointerup", onPointerUp);
113
+ containerEl.addEventListener("pointercancel", onPointerUp);
55
114
  return function () {
56
- scrollContainer.removeEventListener("wheel", handleWheelEvent);
57
- if (animationFrameId) cancelAnimationFrame(animationFrameId);
115
+ containerEl.removeEventListener("pointerdown", onPointerDown);
116
+ containerEl.removeEventListener("pointermove", onPointerMove);
117
+ containerEl.removeEventListener("pointerup", onPointerUp);
118
+ containerEl.removeEventListener("pointercancel", onPointerUp);
58
119
  };
59
120
  }
60
- var makeScrollbarsMoveByPixels = function makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
121
+ var makeScrollableAreaMoveByPixels = function makeScrollableAreaMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
61
122
  return function (xPixels, yPixels) {
62
123
  var maxScrollLeft = horizontalScrollbarEl.scrollWidth - horizontalScrollbarEl.clientWidth;
63
124
  var maxScrollTop = verticalScrollbarEl.scrollHeight - verticalScrollbarEl.clientHeight;
@@ -73,18 +134,27 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
73
134
  }
74
135
  };
75
136
  };
76
- function routeWheelScrollToScrollbars(sheetContext, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
77
- var moveScrollbarsByPixels = makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
78
- return attachSmoothWheelScroll(scrollContainerEl, moveScrollbarsByPixels, function () {
79
- return (window.devicePixelRatio || 1) * sheetContext.zoomRatio;
137
+ function mountScrollEventHandlers(scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
138
+ var moveScrollableAreaByPixels = makeScrollableAreaMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
139
+ var _a = handleScroll(scrollContainerEl, moveScrollableAreaByPixels, function () {
140
+ return (window.devicePixelRatio || 1) * context.zoomRatio;
141
+ }),
142
+ scrollHandler = _a.scrollHandler,
143
+ unmountScrollHandler = _a.detach;
144
+ var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
145
+ return (window.devicePixelRatio || 1) * context.zoomRatio;
80
146
  });
147
+ return function () {
148
+ unmountScrollHandler();
149
+ unmountMobileScrollHandler();
150
+ };
81
151
  }
82
152
  useEffect(function () {
83
153
  var scrollContainerEl = scrollContainerRef.current;
84
154
  var horizontalScrollbarEl = refs.scrollbarX.current;
85
155
  var verticalScrollbarEl = refs.scrollbarY.current;
86
156
  if (!scrollContainerEl || !horizontalScrollbarEl || !verticalScrollbarEl) return function () {};
87
- var unmountScrollHandler = routeWheelScrollToScrollbars(context, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
88
- return unmountScrollHandler;
157
+ var unmountScrollEventHandlers = mountScrollEventHandlers(scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
158
+ return unmountScrollEventHandlers;
89
159
  }, [context.zoomRatio]);
90
160
  };
package/es/components/SheetOverlay/index.css CHANGED
@@ -3,6 +3,7 @@
3
3
  width: 100%;
4
4
  height: 100%;
5
5
  outline-style: none;
6
+ touch-action: none;
6
7
  }
7
8
 
8
9
  .fortune-cell-area {
package/es/components/SheetOverlay/index.js CHANGED
@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
10
10
  };
11
11
  import React, { useContext, useCallback, useRef, useEffect, useLayoutEffect, useMemo } from "react";
12
12
  import "./index.css";
13
- import { locale, drawArrow, handleCellAreaDoubleClick, handleCellAreaMouseDown, handleContextMenu, handleOverlayMouseMove, handleOverlayMouseUp, selectAll, handleOverlayTouchEnd, handleOverlayTouchMove, handleOverlayTouchStart, createDropCellRange, getCellRowColumn, getCellHyperlink, showLinkCard, onCellsMoveStart, insertRowCol, getSheetIndex, fixRowStyleOverflowInFreeze, fixColumnStyleOverflowInFreeze, handleKeydownForZoom } from "@fileverse-dev/fortune-core";
13
+ import { locale, drawArrow, handleCellAreaDoubleClick, handleCellAreaMouseDown, handleContextMenu, handleOverlayMouseMove, handleOverlayMouseUp, selectAll, handleOverlayTouchEnd, handleOverlayTouchStart, createDropCellRange, getCellRowColumn, getCellHyperlink, showLinkCard, onCellsMoveStart, insertRowCol, getSheetIndex, fixRowStyleOverflowInFreeze, fixColumnStyleOverflowInFreeze, handleKeydownForZoom } from "@fileverse-dev/fortune-core";
14
14
  import _ from "lodash";
15
15
  import WorkbookContext from "../../context";
16
16
  import ColumnHeader from "./ColumnHeader";
@@ -131,12 +131,6 @@ var SheetOverlay = function SheetOverlay() {
131
131
  });
132
132
  e.stopPropagation();
133
133
  }, [refs.globalCache, setContext]);
134
- var onTouchMove = useCallback(function (e) {
135
- var nativeEvent = e.nativeEvent;
136
- setContext(function (draftCtx) {
137
- handleOverlayTouchMove(draftCtx, nativeEvent, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
138
- });
139
- }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
140
134
  var onTouchEnd = useCallback(function () {
141
135
  handleOverlayTouchEnd(refs.globalCache);
142
136
  }, [refs.globalCache]);
@@ -216,7 +210,6 @@ var SheetOverlay = function SheetOverlay() {
216
210
  className: "fortune-sheet-overlay",
217
211
  ref: containerRef,
218
212
  onTouchStart: onTouchStart,
219
- onTouchMove: onTouchMove,
220
213
  onTouchEnd: onTouchEnd,
221
214
  tabIndex: -1,
222
215
  style: {
package/es/components/Toolbar/index.css CHANGED
@@ -11,6 +11,16 @@
11
11
  justify-content: space-between;
12
12
  }
13
13
 
14
+ .scrollbar-hidden {
15
+ overflow: auto; /* enables scrolling */
16
+ -ms-overflow-style: none; /* IE and Edge */
17
+ scrollbar-width: none; /* Firefox */
18
+ }
19
+
20
+ .scrollbar-hidden::-webkit-scrollbar {
21
+ display: none; /* Chrome, Safari, Opera */
22
+ }
23
+
14
24
  .fortune-toolbar-divider {
15
25
  width: 1px;
16
26
  height: 20px;
package/es/components/Toolbar/index.js CHANGED
@@ -638,7 +638,7 @@ var Toolbar = function Toolbar(_a) {
638
638
  }));
639
639
  }
640
640
  if (name === "format") {
641
- var currentFmt = defaultFormat[0].text;
641
+ var currentFmt_1 = defaultFormat[0].text;
642
642
  if (cell) {
643
643
  var curr_2 = normalizedCellAttr(cell, "ct");
644
644
  var format = _.find(defaultFormat, function (v) {
@@ -646,16 +646,16 @@ var Toolbar = function Toolbar(_a) {
646
646
  });
647
647
  if ((curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) != null) {
648
648
  if (format != null) {
649
- currentFmt = format.text;
649
+ currentFmt_1 = format.text;
650
650
  } else if (((_a = curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) === null || _a === void 0 ? void 0 : _a.includes("#,##0")) || (curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) === "0" || (curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) === "0.00") {
651
- currentFmt = "Number";
651
+ currentFmt_1 = "Number";
652
652
  } else {
653
- currentFmt = defaultFormat[defaultFormat.length - 1].text;
653
+ currentFmt_1 = defaultFormat[defaultFormat.length - 1].text;
654
654
  }
655
655
  }
656
656
  }
657
657
  return /*#__PURE__*/React.createElement(Combo, {
658
- text: currentFmt,
658
+ text: currentFmt_1,
659
659
  key: name,
660
660
  tooltip: tooltip,
661
661
  showArrow: false
@@ -681,9 +681,17 @@ var Toolbar = function Toolbar(_a) {
681
681
  }
682
682
  }, /*#__PURE__*/React.createElement("div", {
683
683
  className: "fortune-toolbar-menu-line"
684
- }, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement("div", {
685
- className: "fortune-toolbar-subtext"
686
- }, example)));
684
+ }, /*#__PURE__*/React.createElement("div", {
685
+ className: "flex gap-2 items-center"
686
+ }, currentFmt_1 === text ? (/*#__PURE__*/React.createElement(LucideIcon, {
687
+ name: "Check",
688
+ className: "w-4 h-4"
689
+ })) : (/*#__PURE__*/React.createElement("span", {
690
+ className: "w-4 h-4"
691
+ })), /*#__PURE__*/React.createElement("div", null, text)), /*#__PURE__*/React.createElement(LucideIcon, {
692
+ name: "ChevronRight",
693
+ className: "w-4 h-4 color-icon-secondary"
694
+ })));
687
695
  }
688
696
  return /*#__PURE__*/React.createElement(Option, {
689
697
  key: value,
@@ -696,8 +704,18 @@ var Toolbar = function Toolbar(_a) {
696
704
  });
697
705
  }
698
706
  }, /*#__PURE__*/React.createElement("div", {
699
- className: "fortune-toolbar-menu-line"
700
- }, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement("div", {
707
+ style: {
708
+ overflowX: "scroll"
709
+ },
710
+ className: "fortune-toolbar-menu-line scrollbar-hidden w-full"
711
+ }, /*#__PURE__*/React.createElement("div", {
712
+ className: "flex gap-2 items-center"
713
+ }, currentFmt_1 === text ? (/*#__PURE__*/React.createElement(LucideIcon, {
714
+ name: "Check",
715
+ className: "w-4 h-4"
716
+ })) : (/*#__PURE__*/React.createElement("span", {
717
+ className: "w-4 h-4"
718
+ })), /*#__PURE__*/React.createElement("div", null, text)), /*#__PURE__*/React.createElement("div", {
701
719
  className: "fortune-toolbar-subtext"
702
720
  }, example)));
703
721
  }));
package/lib/components/ContextMenu/index.js CHANGED
@@ -1005,6 +1005,28 @@ var ContextMenu = function ContextMenu() {
1005
1005
  className: "color-text-secondary w-4 h-4"
1006
1006
  })))));
1007
1007
  }
1008
+ if (name === "clear-format") {
1009
+ return /*#__PURE__*/_react.default.createElement(_Menu.default, {
1010
+ key: name,
1011
+ onClick: function onClick() {
1012
+ if (context.allowEdit === false) return;
1013
+ setContext(function (draftCtx) {
1014
+ draftCtx.contextMenu = {};
1015
+ if (draftCtx.contextMenu.headerMenu === "row") {
1016
+ (0, _fortuneCore.clearRowsCellsFormat)(draftCtx);
1017
+ } else if (draftCtx.contextMenu.headerMenu === true) {
1018
+ (0, _fortuneCore.clearColumnsCellsFormat)(draftCtx);
1019
+ } else if (!draftCtx.contextMenu.headerMenu) {
1020
+ (0, _fortuneCore.clearSelectedCellFormat)(draftCtx);
1021
+ }
1022
+ });
1023
+ }
1024
+ }, /*#__PURE__*/_react.default.createElement("div", {
1025
+ className: "context-item"
1026
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
1027
+ name: "RemoveFormatting"
1028
+ }), /*#__PURE__*/_react.default.createElement("p", null, "Clear formatting")));
1029
+ }
1008
1030
  return null;
1009
1031
  }, [context, setContext, refs.globalCache, rightclick, showAlert, showDialog, drag.noMulti, info.tipRowHeightLimit, info.tipColumnWidthLimit, generalDialog.partiallyError, generalDialog.readOnlyError, generalDialog.dataNullError]);
1010
1032
  (0, _react.useLayoutEffect)(function () {
package/lib/components/Sheet/use-smooth-scroll.js CHANGED
@@ -13,7 +13,7 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
13
13
  context = _a.context,
14
14
  refs = _a.refs,
15
15
  setContext = _a.setContext;
16
- function attachSmoothWheelScroll(scrollContainer, moveScrollBy, getPixelScale) {
16
+ function handleScroll(scrollContainer, moveScrollBy, getPixelScale) {
17
17
  if (getPixelScale === void 0) {
18
18
  getPixelScale = function getPixelScale() {
19
19
  return window.devicePixelRatio || 1;
@@ -36,6 +36,11 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
36
36
  queuedXPixels = 0;
37
37
  queuedYPixels = 0;
38
38
  }
39
+ function scrollHandler(x, y) {
40
+ queuedXPixels += x;
41
+ queuedYPixels += y;
42
+ if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
43
+ }
39
44
  function handleWheelEvent(event) {
40
45
  var _a, _b;
41
46
  event.preventDefault();
@@ -52,19 +57,75 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
52
57
  return;
53
58
  }
54
59
  var scaleFactor = getPixelScale();
55
- queuedXPixels += event.deltaX * scaleFactor;
56
- queuedYPixels += event.deltaY * scaleFactor;
57
- if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
60
+ scrollHandler(event.deltaX * scaleFactor, event.deltaY * scaleFactor);
58
61
  }
59
62
  scrollContainer.addEventListener("wheel", handleWheelEvent, {
60
63
  passive: false
61
64
  });
65
+ return {
66
+ scrollHandler: scrollHandler,
67
+ detach: function detach() {
68
+ scrollContainer.removeEventListener("wheel", handleWheelEvent);
69
+ if (animationFrameId) cancelAnimationFrame(animationFrameId);
70
+ }
71
+ };
72
+ }
73
+ function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
74
+ var isScrolling = false;
75
+ var gestureStartClientX = 0;
76
+ var gestureStartClientY = 0;
77
+ var lastPointerClientX = 0;
78
+ var lastPointerClientY = 0;
79
+ var PAN_DISTANCE_THRESHOLD_PX = 8;
80
+ function onPointerDown(pointerEvent) {
81
+ if (pointerEvent.pointerType !== "touch" && pointerEvent.pointerType !== "pen") return;
82
+ isScrolling = false;
83
+ gestureStartClientX = pointerEvent.clientX;
84
+ lastPointerClientX = pointerEvent.clientX;
85
+ gestureStartClientY = pointerEvent.clientY;
86
+ lastPointerClientY = pointerEvent.clientY;
87
+ containerEl.setPointerCapture(pointerEvent.pointerId);
88
+ }
89
+ function onPointerMove(pointerEvent) {
90
+ if (pointerEvent.pointerType !== "touch" && pointerEvent.pointerType !== "pen") return;
91
+ var deltaXSinceLastMove = pointerEvent.clientX - lastPointerClientX;
92
+ var deltaYSinceLastMove = pointerEvent.clientY - lastPointerClientY;
93
+ lastPointerClientX = pointerEvent.clientX;
94
+ lastPointerClientY = pointerEvent.clientY;
95
+ if (!isScrolling) {
96
+ var totalXFromGestureStart = lastPointerClientX - gestureStartClientX;
97
+ var totalYFromGestureStart = lastPointerClientY - gestureStartClientY;
98
+ if (totalXFromGestureStart * totalXFromGestureStart + totalYFromGestureStart * totalYFromGestureStart < PAN_DISTANCE_THRESHOLD_PX * PAN_DISTANCE_THRESHOLD_PX) {
99
+ return;
100
+ }
101
+ isScrolling = true;
102
+ }
103
+ pointerEvent.preventDefault();
104
+ var scale = getPixelScale();
105
+ scrollHandler(-deltaXSinceLastMove * scale, -deltaYSinceLastMove * scale);
106
+ }
107
+ function onPointerUp(e) {
108
+ try {
109
+ containerEl.releasePointerCapture(e.pointerId);
110
+ } catch (_a) {}
111
+ isScrolling = false;
112
+ }
113
+ containerEl.addEventListener("pointerdown", onPointerDown, {
114
+ passive: false
115
+ });
116
+ containerEl.addEventListener("pointermove", onPointerMove, {
117
+ passive: false
118
+ });
119
+ containerEl.addEventListener("pointerup", onPointerUp);
120
+ containerEl.addEventListener("pointercancel", onPointerUp);
62
121
  return function () {
63
- scrollContainer.removeEventListener("wheel", handleWheelEvent);
64
- if (animationFrameId) cancelAnimationFrame(animationFrameId);
122
+ containerEl.removeEventListener("pointerdown", onPointerDown);
123
+ containerEl.removeEventListener("pointermove", onPointerMove);
124
+ containerEl.removeEventListener("pointerup", onPointerUp);
125
+ containerEl.removeEventListener("pointercancel", onPointerUp);
65
126
  };
66
127
  }
67
- var makeScrollbarsMoveByPixels = function makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
128
+ var makeScrollableAreaMoveByPixels = function makeScrollableAreaMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
68
129
  return function (xPixels, yPixels) {
69
130
  var maxScrollLeft = horizontalScrollbarEl.scrollWidth - horizontalScrollbarEl.clientWidth;
70
131
  var maxScrollTop = verticalScrollbarEl.scrollHeight - verticalScrollbarEl.clientHeight;
@@ -80,18 +141,27 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
80
141
  }
81
142
  };
82
143
  };
83
- function routeWheelScrollToScrollbars(sheetContext, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
84
- var moveScrollbarsByPixels = makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
85
- return attachSmoothWheelScroll(scrollContainerEl, moveScrollbarsByPixels, function () {
86
- return (window.devicePixelRatio || 1) * sheetContext.zoomRatio;
144
+ function mountScrollEventHandlers(scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
145
+ var moveScrollableAreaByPixels = makeScrollableAreaMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
146
+ var _a = handleScroll(scrollContainerEl, moveScrollableAreaByPixels, function () {
147
+ return (window.devicePixelRatio || 1) * context.zoomRatio;
148
+ }),
149
+ scrollHandler = _a.scrollHandler,
150
+ unmountScrollHandler = _a.detach;
151
+ var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
152
+ return (window.devicePixelRatio || 1) * context.zoomRatio;
87
153
  });
154
+ return function () {
155
+ unmountScrollHandler();
156
+ unmountMobileScrollHandler();
157
+ };
88
158
  }
89
159
  (0, _react.useEffect)(function () {
90
160
  var scrollContainerEl = scrollContainerRef.current;
91
161
  var horizontalScrollbarEl = refs.scrollbarX.current;
92
162
  var verticalScrollbarEl = refs.scrollbarY.current;
93
163
  if (!scrollContainerEl || !horizontalScrollbarEl || !verticalScrollbarEl) return function () {};
94
- var unmountScrollHandler = routeWheelScrollToScrollbars(context, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
95
- return unmountScrollHandler;
164
+ var unmountScrollEventHandlers = mountScrollEventHandlers(scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
165
+ return unmountScrollEventHandlers;
96
166
  }, [context.zoomRatio]);
97
167
  };
package/lib/components/SheetOverlay/index.css CHANGED
@@ -3,6 +3,7 @@
3
3
  width: 100%;
4
4
  height: 100%;
5
5
  outline-style: none;
6
+ touch-action: none;
6
7
  }
7
8
 
8
9
  .fortune-cell-area {
package/lib/components/SheetOverlay/index.js CHANGED
@@ -140,12 +140,6 @@ var SheetOverlay = function SheetOverlay() {
140
140
  });
141
141
  e.stopPropagation();
142
142
  }, [refs.globalCache, setContext]);
143
- var onTouchMove = (0, _react.useCallback)(function (e) {
144
- var nativeEvent = e.nativeEvent;
145
- setContext(function (draftCtx) {
146
- (0, _fortuneCore.handleOverlayTouchMove)(draftCtx, nativeEvent, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
147
- });
148
- }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
149
143
  var onTouchEnd = (0, _react.useCallback)(function () {
150
144
  (0, _fortuneCore.handleOverlayTouchEnd)(refs.globalCache);
151
145
  }, [refs.globalCache]);
@@ -225,7 +219,6 @@ var SheetOverlay = function SheetOverlay() {
225
219
  className: "fortune-sheet-overlay",
226
220
  ref: containerRef,
227
221
  onTouchStart: onTouchStart,
228
- onTouchMove: onTouchMove,
229
222
  onTouchEnd: onTouchEnd,
230
223
  tabIndex: -1,
231
224
  style: {
package/lib/components/Toolbar/index.css CHANGED
@@ -11,6 +11,16 @@
11
11
  justify-content: space-between;
12
12
  }
13
13
 
14
+ .scrollbar-hidden {
15
+ overflow: auto; /* enables scrolling */
16
+ -ms-overflow-style: none; /* IE and Edge */
17
+ scrollbar-width: none; /* Firefox */
18
+ }
19
+
20
+ .scrollbar-hidden::-webkit-scrollbar {
21
+ display: none; /* Chrome, Safari, Opera */
22
+ }
23
+
14
24
  .fortune-toolbar-divider {
15
25
  width: 1px;
16
26
  height: 20px;
package/lib/components/Toolbar/index.js CHANGED
@@ -647,7 +647,7 @@ var Toolbar = function Toolbar(_a) {
647
647
  }));
648
648
  }
649
649
  if (name === "format") {
650
- var currentFmt = defaultFormat[0].text;
650
+ var currentFmt_1 = defaultFormat[0].text;
651
651
  if (cell) {
652
652
  var curr_2 = (0, _fortuneCore.normalizedCellAttr)(cell, "ct");
653
653
  var format = _lodash.default.find(defaultFormat, function (v) {
@@ -655,16 +655,16 @@ var Toolbar = function Toolbar(_a) {
655
655
  });
656
656
  if ((curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) != null) {
657
657
  if (format != null) {
658
- currentFmt = format.text;
658
+ currentFmt_1 = format.text;
659
659
  } else if (((_a = curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) === null || _a === void 0 ? void 0 : _a.includes("#,##0")) || (curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) === "0" || (curr_2 === null || curr_2 === void 0 ? void 0 : curr_2.fa) === "0.00") {
660
- currentFmt = "Number";
660
+ currentFmt_1 = "Number";
661
661
  } else {
662
- currentFmt = defaultFormat[defaultFormat.length - 1].text;
662
+ currentFmt_1 = defaultFormat[defaultFormat.length - 1].text;
663
663
  }
664
664
  }
665
665
  }
666
666
  return /*#__PURE__*/_react.default.createElement(_Combo.default, {
667
- text: currentFmt,
667
+ text: currentFmt_1,
668
668
  key: name,
669
669
  tooltip: tooltip,
670
670
  showArrow: false
@@ -690,9 +690,17 @@ var Toolbar = function Toolbar(_a) {
690
690
  }
691
691
  }, /*#__PURE__*/_react.default.createElement("div", {
692
692
  className: "fortune-toolbar-menu-line"
693
- }, /*#__PURE__*/_react.default.createElement("div", null, text), /*#__PURE__*/_react.default.createElement("div", {
694
- className: "fortune-toolbar-subtext"
695
- }, example)));
693
+ }, /*#__PURE__*/_react.default.createElement("div", {
694
+ className: "flex gap-2 items-center"
695
+ }, currentFmt_1 === text ? (/*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
696
+ name: "Check",
697
+ className: "w-4 h-4"
698
+ })) : (/*#__PURE__*/_react.default.createElement("span", {
699
+ className: "w-4 h-4"
700
+ })), /*#__PURE__*/_react.default.createElement("div", null, text)), /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
701
+ name: "ChevronRight",
702
+ className: "w-4 h-4 color-icon-secondary"
703
+ })));
696
704
  }
697
705
  return /*#__PURE__*/_react.default.createElement(_Select.Option, {
698
706
  key: value,
@@ -705,8 +713,18 @@ var Toolbar = function Toolbar(_a) {
705
713
  });
706
714
  }
707
715
  }, /*#__PURE__*/_react.default.createElement("div", {
708
- className: "fortune-toolbar-menu-line"
709
- }, /*#__PURE__*/_react.default.createElement("div", null, text), /*#__PURE__*/_react.default.createElement("div", {
716
+ style: {
717
+ overflowX: "scroll"
718
+ },
719
+ className: "fortune-toolbar-menu-line scrollbar-hidden w-full"
720
+ }, /*#__PURE__*/_react.default.createElement("div", {
721
+ className: "flex gap-2 items-center"
722
+ }, currentFmt_1 === text ? (/*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
723
+ name: "Check",
724
+ className: "w-4 h-4"
725
+ })) : (/*#__PURE__*/_react.default.createElement("span", {
726
+ className: "w-4 h-4"
727
+ })), /*#__PURE__*/_react.default.createElement("div", null, text)), /*#__PURE__*/_react.default.createElement("div", {
710
728
  className: "fortune-toolbar-subtext"
711
729
  }, example)));
712
730
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.1.64",
3
+ "version": "1.1.66-clear-formatting-1",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "module": "es/index.js",
@@ -16,7 +16,7 @@
16
16
  "tsc": "tsc"
17
17
  },
18
18
  "dependencies": {
19
- "@fileverse-dev/fortune-core": "1.1.64",
19
+ "@fileverse-dev/fortune-core": "1.1.66-clear-formatting-1",
20
20
  "@fileverse/ui": "^4.1.7-patch-21",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",