@fileverse-dev/fortune-react 1.1.74 → 1.1.77

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 (15) hide show
  1. package/es/components/ContextMenu/index.js +74 -0
  2. package/es/components/SheetTab/SheetItem.js +1 -10
  3. package/es/components/SheetTab/index.css +13 -21
  4. package/es/components/SheetTab/index.js +35 -22
  5. package/es/components/Workbook/index.js +2 -25
  6. package/es/components/ZoomControl/index.css +5 -2
  7. package/es/components/ZoomControl/index.js +15 -17
  8. package/lib/components/ContextMenu/index.js +74 -0
  9. package/lib/components/SheetTab/SheetItem.js +1 -10
  10. package/lib/components/SheetTab/index.css +13 -21
  11. package/lib/components/SheetTab/index.js +34 -21
  12. package/lib/components/Workbook/index.js +1 -24
  13. package/lib/components/ZoomControl/index.css +5 -2
  14. package/lib/components/ZoomControl/index.js +15 -17
  15. package/package.json +2 -2
package/es/components/ContextMenu/index.js CHANGED
@@ -399,6 +399,43 @@ var ContextMenu = function ContextMenu() {
399
399
  }), /*#__PURE__*/React.createElement("div", null, "Insert column to the left")));
400
400
  });
401
401
  }
402
+ if (name === "insert-column-right") {
403
+ return (selection === null || selection === void 0 ? void 0 : selection.row_select) ? null : ["left"].map(function (dir) {
404
+ return /*#__PURE__*/React.createElement(Menu, {
405
+ key: "add-col-".concat(dir),
406
+ onClick: function onClick() {
407
+ var _a, _b, _c;
408
+ var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.column) === null || _c === void 0 ? void 0 : _c[0];
409
+ if (position == null) return;
410
+ var count = 1;
411
+ if (count < 1) return;
412
+ var direction = "rightbottom";
413
+ var insertRowColOp = {
414
+ type: "column",
415
+ index: position,
416
+ count: count,
417
+ direction: direction,
418
+ id: context.currentSheetId
419
+ };
420
+ setContext(function (draftCtx) {
421
+ try {
422
+ insertRowCol(draftCtx, insertRowColOp);
423
+ draftCtx.contextMenu = {};
424
+ } catch (err) {
425
+ if (err.message === "maxExceeded") showAlert(rightclick.columnOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnColumnReadOnly, "ok");
426
+ draftCtx.contextMenu = {};
427
+ }
428
+ }, {
429
+ insertRowColOp: insertRowColOp
430
+ });
431
+ }
432
+ }, /*#__PURE__*/React.createElement("div", {
433
+ className: "context-item"
434
+ }, /*#__PURE__*/React.createElement(LucideIcon, {
435
+ name: "Plus"
436
+ }), /*#__PURE__*/React.createElement("div", null, "Insert column to the right")));
437
+ });
438
+ }
402
439
  if (name === "insert-row") {
403
440
  return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
404
441
  return /*#__PURE__*/React.createElement(Menu, {
@@ -436,6 +473,43 @@ var ContextMenu = function ContextMenu() {
436
473
  }), /*#__PURE__*/React.createElement("div", null, "Insert row below")));
437
474
  });
438
475
  }
476
+ if (name === "insert-row-above") {
477
+ return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
478
+ return /*#__PURE__*/React.createElement(Menu, {
479
+ key: "add-row-".concat(dir),
480
+ onClick: function onClick() {
481
+ var _a, _b, _c;
482
+ var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.row) === null || _c === void 0 ? void 0 : _c[0];
483
+ if (position == null) return;
484
+ var count = 1;
485
+ if (count < 1) return;
486
+ var direction = "lefttop";
487
+ var insertRowColOp = {
488
+ type: "row",
489
+ index: position,
490
+ count: count,
491
+ direction: direction,
492
+ id: context.currentSheetId
493
+ };
494
+ setContext(function (draftCtx) {
495
+ try {
496
+ insertRowCol(draftCtx, insertRowColOp);
497
+ draftCtx.contextMenu = {};
498
+ } catch (err) {
499
+ if (err.message === "maxExceeded") showAlert(rightclick.rowOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnRowReadOnly, "ok");
500
+ draftCtx.contextMenu = {};
501
+ }
502
+ }, {
503
+ insertRowColOp: insertRowColOp
504
+ });
505
+ }
506
+ }, /*#__PURE__*/React.createElement("div", {
507
+ className: "context-item"
508
+ }, /*#__PURE__*/React.createElement(LucideIcon, {
509
+ name: "Plus"
510
+ }), /*#__PURE__*/React.createElement("div", null, "Insert row above")));
511
+ });
512
+ }
439
513
  if (name === "delete-column") {
440
514
  return (selection === null || selection === void 0 ? void 0 : selection.column_select) && (/*#__PURE__*/React.createElement(Menu, {
441
515
  key: "delete-col",
package/es/components/SheetTab/SheetItem.js CHANGED
@@ -19,9 +19,6 @@ var SheetItem = function SheetItem(_a) {
19
19
  var _d = useState(false),
20
20
  dragOver = _d[0],
21
21
  setDragOver = _d[1];
22
- var _e = useState("#c3c3c3"),
23
- svgColor = _e[0],
24
- setSvgColor = _e[1];
25
22
  var showAlert = useAlert().showAlert;
26
23
  useEffect(function () {
27
24
  setContext(function (draftCtx) {
@@ -190,12 +187,6 @@ var SheetItem = function SheetItem(_a) {
190
187
  } : {}
191
188
  }, sheet.name), /*#__PURE__*/React.createElement("span", {
192
189
  className: "luckysheet-sheets-item-function",
193
- onMouseEnter: function onMouseEnter() {
194
- return setSvgColor("#5c5c5c");
195
- },
196
- onMouseLeave: function onMouseLeave() {
197
- return setSvgColor("#c3c3c3");
198
- },
199
190
  onClick: function onClick(e) {
200
191
  if (isDropPlaceholder || context.allowEdit === false) return;
201
192
  var rect = refs.workbookContainer.current.getBoundingClientRect();
@@ -218,7 +209,7 @@ var SheetItem = function SheetItem(_a) {
218
209
  name: "downArrow",
219
210
  width: 12,
220
211
  style: {
221
- fill: svgColor
212
+ fill: "var(--color-icon-default)"
222
213
  }
223
214
  })), !!sheet.color && (/*#__PURE__*/React.createElement("div", {
224
215
  className: "luckysheet-sheets-item-color",
package/es/components/SheetTab/index.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .luckysheet-sheet-area {
2
2
  width: 100%;
3
3
  box-sizing: border-box;
4
- background-color: #fafafc;
4
+ /* background-color: #fafafc; */
5
5
  color: #444;
6
- height: 31px;
6
+ height: 36px;
7
7
  padding: 0 30px 0 44px;
8
8
  margin: 0;
9
9
  -webkit-touch-callout: none;
@@ -19,6 +19,7 @@
19
19
  flex: 3;
20
20
  display: flex;
21
21
  align-items: center;
22
+ gap: 8px;
22
23
  }
23
24
 
24
25
  #luckysheet-bottom-pager {
@@ -92,21 +93,19 @@
92
93
 
93
94
  .luckysheet-sheet-area div.luckysheet-sheets-item {
94
95
  padding: 2px 6px;
95
- height: 29px;
96
+ height: 34px;
96
97
  line-height: 29px;
97
98
  background-color: #fafafc;
98
- color: #676464;
99
+ color: var(--color-text-default);
99
100
  min-width: 30px;
100
101
  top: 0px;
101
102
  position: relative;
102
103
  margin-right: -1px;
103
104
  cursor: pointer;
104
105
  transition: all 0.1s;
105
- font-size: 13px;
106
+ font-size: 14px;
106
107
  padding: 2px 19px 0px 5px;
107
108
  box-sizing: border-box;
108
- border-left: 1px solid #e0e0e0;
109
- border-right: 1px solid #e0e0e0;
110
109
  vertical-align: middle;
111
110
  }
112
111
 
@@ -115,9 +114,8 @@
115
114
  }
116
115
 
117
116
  .luckysheet-sheet-area div.luckysheet-sheets-item:hover {
118
- background-color: #efefef;
117
+ background-color: hsl(var(--color-button-secondary-hover));
119
118
  /* border-color: #a5a5a5; */
120
- color: #490500;
121
119
  }
122
120
 
123
121
  .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-menu {
@@ -155,7 +153,7 @@
155
153
  .luckysheet-sheet-area
156
154
  div.luckysheet-sheets-item
157
155
  .luckysheet-sheets-item-name[contenteditable="true"] {
158
- border: 1px solid #d9d9d9;
156
+ border-bottom: 1px solid #d9d9d9;
159
157
  display: inline-block;
160
158
  height: 18px;
161
159
  line-height: 18px;
@@ -180,30 +178,24 @@
180
178
 
181
179
  .luckysheet-sheet-area div.luckysheet-sheets-item-active {
182
180
  /* padding: 2px 8px; */
183
- height: 29px;
181
+ height: 34px;
184
182
  line-height: 29px;
185
- background-color: #efefef;
186
183
  /* border-color: #aaa; */
187
- border-top-color: #fff;
188
- color: #222;
184
+ border-bottom: 5px solid #EFC703;
185
+ color: hsl(var(--color-text-default));
189
186
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
190
187
  /* top: -2px; */
191
188
  /* border-bottom: none; */
192
189
  /* padding-right: 20px; */
193
190
  }
194
191
 
195
- .luckysheet-sheet-area div.luckysheet-sheets-item-active:hover {
196
- background-color: #ececec;
197
- /* border-color: #aaa; */
198
- color: #222;
199
- }
200
-
201
192
  .fortune-sheettab-button {
202
193
  display: flex;
203
194
  align-items: center;
204
195
  justify-content: center;
205
196
  height: 29px;
206
197
  width: 29px;
198
+ background-color: var(--color-bg-secondary);
207
199
  }
208
200
 
209
201
  .fortune-sheettab-button:hover {
@@ -212,7 +204,7 @@
212
204
  justify-content: center;
213
205
  height: 29px;
214
206
  width: 29px;
215
- background-color: #efefef;
207
+ background-color: hsl(var(--color-button-secondary-hover));
216
208
  }
217
209
 
218
210
  .luckysheet-noselected-text {
package/es/components/SheetTab/index.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import _ from "lodash";
2
2
  import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
3
- import { Popover, PopoverTrigger, PopoverContent, LucideIcon, Button } from "@fileverse/ui";
3
+ import { Popover, PopoverTrigger, PopoverContent, LucideIcon, Button, IconButton } from "@fileverse/ui";
4
4
  import { useMediaQuery } from "usehooks-ts";
5
5
  import { updateCell, addSheet, calcSelectionInfo } from "@fileverse-dev/fortune-core";
6
6
  import WorkbookContext from "../../context";
7
- import SVGIcon from "../SVGIcon";
8
7
  import "./index.css";
9
8
  import SheetItem from "./SheetItem";
10
9
  import ZoomControl from "../ZoomControl";
@@ -82,7 +81,7 @@ var SheetTab = function SheetTab() {
82
81
  useEffect(function () {
83
82
  var selection = context.luckysheet_select_save;
84
83
  if (selection) {
85
- var re = calcSelectionInfo(context, "en");
84
+ var re = calcSelectionInfo(context);
86
85
  setCalInfo(re);
87
86
  }
88
87
  }, [context.luckysheet_select_save]);
@@ -159,21 +158,21 @@ var SheetTab = function SheetTab() {
159
158
  },
160
159
  onClick: handleCloseDisclaimer
161
160
  }, "Close"))))), /*#__PURE__*/React.createElement("div", {
162
- className: "luckysheet-sheet-area luckysheet-noselected-text",
161
+ className: "luckysheet-sheet-area luckysheet-noselected-text border-t color-border-default color-bg-secondary",
163
162
  onContextMenu: function onContextMenu(e) {
164
163
  return e.preventDefault();
165
164
  },
166
165
  id: "luckysheet-sheet-area"
167
166
  }, /*#__PURE__*/React.createElement("div", {
168
167
  id: "luckysheet-sheet-content"
169
- }, context.allowEdit && (/*#__PURE__*/React.createElement("div", {
170
- className: "fortune-sheettab-button",
171
- onClick: onAddSheetClick
172
- }, /*#__PURE__*/React.createElement(SVGIcon, {
173
- name: "plus",
174
- width: 16,
175
- height: 16
176
- }))), context.allowEdit && (/*#__PURE__*/React.createElement("div", {
168
+ }, context.allowEdit && (/*#__PURE__*/React.createElement(IconButton, {
169
+ className: "fortune-sheettab-button border-none shadow-none",
170
+ onClick: onAddSheetClick,
171
+ elevation: 1,
172
+ icon: "Plus",
173
+ size: "md",
174
+ variant: "secondary"
175
+ })), context.allowEdit && (/*#__PURE__*/React.createElement("div", {
177
176
  className: "sheet-list-container"
178
177
  }, /*#__PURE__*/React.createElement("div", {
179
178
  id: "all-sheets",
@@ -186,10 +185,12 @@ var SheetTab = function SheetTab() {
186
185
  ctx.sheetTabContextMenu = {};
187
186
  });
188
187
  }
189
- }, /*#__PURE__*/React.createElement(SVGIcon, {
190
- name: "all-sheets",
191
- width: 16,
192
- height: 16
188
+ }, /*#__PURE__*/React.createElement(IconButton, {
189
+ className: "fortune-sheettab-button border-none shadow-none",
190
+ elevation: 1,
191
+ icon: "Menu",
192
+ size: "md",
193
+ variant: "secondary"
193
194
  })))), /*#__PURE__*/React.createElement("div", {
194
195
  id: "luckysheet-sheets-m",
195
196
  className: "luckysheet-sheets-m lucky-button-custom"
@@ -221,10 +222,16 @@ var SheetTab = function SheetTab() {
221
222
  scrollBy(-scrollDelta);
222
223
  },
223
224
  tabIndex: 0
224
- }, /*#__PURE__*/React.createElement(SVGIcon, {
225
+ }, /*#__PURE__*/React.createElement(IconButton, {
225
226
  name: "arrow-doubleleft",
226
- width: 12,
227
- height: 12
227
+ className: "fortune-sheettab-button border-none shadow-none",
228
+ onClick: function onClick() {
229
+ scrollBy(-scrollDelta);
230
+ },
231
+ elevation: 1,
232
+ icon: "ChevronLeft",
233
+ size: "md",
234
+ variant: "secondary"
228
235
  }))), isShowScrollBtn && (/*#__PURE__*/React.createElement("div", {
229
236
  id: "fortune-sheettab-rightscroll",
230
237
  className: "fortune-sheettab-scroll",
@@ -233,10 +240,16 @@ var SheetTab = function SheetTab() {
233
240
  scrollBy(scrollDelta);
234
241
  },
235
242
  tabIndex: 0
236
- }, /*#__PURE__*/React.createElement(SVGIcon, {
243
+ }, /*#__PURE__*/React.createElement(IconButton, {
237
244
  name: "arrow-doubleright",
238
- width: 12,
239
- height: 12
245
+ className: "fortune-sheettab-button border-none shadow-none",
246
+ onClick: function onClick() {
247
+ scrollBy(scrollDelta);
248
+ },
249
+ elevation: 1,
250
+ icon: "ChevronRight",
251
+ size: "md",
252
+ variant: "secondary"
240
253
  })))), /*#__PURE__*/React.createElement("div", {
241
254
  className: "fortune-sheet-area-right"
242
255
  }, statsFilter.length === 6 && (/*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(PopoverTrigger, {
package/es/components/Workbook/index.js CHANGED
@@ -15,7 +15,7 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
15
15
  }
16
16
  return to.concat(ar || Array.prototype.slice.call(from));
17
17
  };
18
- import { defaultContext, defaultSettings, initSheetIndex, handleGlobalKeyDown, getSheetIndex, handlePaste, filterPatch, patchToOp, inverseRowColOptions, ensureSheetIndex, insertRowCol, deleteRowCol, locale, calcSelectionInfo, groupValuesRefresh, insertDuneChart, getFlowdata, api, handlePasteByClick } from "@fileverse-dev/fortune-core";
18
+ import { defaultContext, defaultSettings, initSheetIndex, handleGlobalKeyDown, getSheetIndex, handlePaste, filterPatch, patchToOp, inverseRowColOptions, ensureSheetIndex, insertRowCol, deleteRowCol, groupValuesRefresh, insertDuneChart, getFlowdata, api, handlePasteByClick } from "@fileverse-dev/fortune-core";
19
19
  import React, { useMemo, useState, useCallback, useEffect, useRef, useImperativeHandle } from "react";
20
20
  import "./index.css";
21
21
  import produce, { applyPatches, enablePatches, produceWithPatches } from "immer";
@@ -84,31 +84,12 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
84
84
  var _c = useState(defaultContext(refs)),
85
85
  context = _c[0],
86
86
  setContext = _c[1];
87
- var formula = locale(context).formula;
88
87
  var _d = useState(null),
89
88
  moreToolbarItems = _d[0],
90
89
  setMoreToolbarItems = _d[1];
91
- var _e = useState({
92
- numberC: 0,
93
- count: 0,
94
- sum: 0,
95
- max: 0,
96
- min: 0,
97
- average: ""
98
- }),
99
- calInfo = _e[0],
100
- setCalInfo = _e[1];
101
90
  var mergedSettings = useMemo(function () {
102
91
  return _.assign(_.cloneDeep(defaultSettings), props);
103
92
  }, __spreadArray([], _.values(props), true));
104
- useEffect(function () {
105
- var selection = context.luckysheet_select_save;
106
- var lang = props.lang;
107
- if (selection) {
108
- var re = calcSelectionInfo(context, lang);
109
- setCalInfo(re);
110
- }
111
- }, [context.luckysheet_select_save]);
112
93
  var initSheetData = useCallback(function (draftCtx, newData, index) {
113
94
  var _a, _b;
114
95
  var celldata = newData.celldata,
@@ -727,11 +708,7 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
727
708
  className: "fortune-stat-area"
728
709
  }, /*#__PURE__*/React.createElement("div", {
729
710
  className: "luckysheet-sheet-selection-calInfo"
730
- }, !!calInfo.count && (/*#__PURE__*/React.createElement("div", {
731
- style: {
732
- width: "60px"
733
- }
734
- }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/React.createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/React.createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/React.createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/React.createElement("div", null, formula.min, ": ", calInfo.min)))), context.showDunePreview && (/*#__PURE__*/React.createElement(DunePreview, {
711
+ })), context.showDunePreview && (/*#__PURE__*/React.createElement(DunePreview, {
735
712
  url: context.showDunePreview.url,
736
713
  position: context.showDunePreview.position,
737
714
  onKeepAsLink: function onKeepAsLink() {
package/es/components/ZoomControl/index.css CHANGED
@@ -12,11 +12,14 @@
12
12
  align-items: center;
13
13
  justify-content: center;
14
14
  width: 24px;
15
- height: 24px;
15
+ height: 28px;
16
+ border-radius: 3px;
17
+ color: var(--color-text-default);
18
+ font-size: 14px;
16
19
  }
17
20
 
18
21
  .fortune-zoom-button:hover {
19
- background: #efefef;
22
+ background-color: hsl(var(--color-button-secondary-hover));
20
23
  }
21
24
 
22
25
  .fortune-zoom-ratio {
package/es/components/ZoomControl/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useCallback, useContext, useRef, useState, useEffect } from "react";
2
2
  import { MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, getSheetIndex } from "@fileverse-dev/fortune-core";
3
+ import { IconButton } from "@fileverse/ui";
3
4
  import WorkbookContext from "../../context";
4
- import SVGIcon from "../SVGIcon";
5
5
  import { useOutsideClick } from "../../hooks/useOutsideClick";
6
6
  import "./index.css";
7
7
  var presets = [{
@@ -76,18 +76,17 @@ var ZoomControl = function ZoomControl() {
76
76
  }, [context.zoomRatio]);
77
77
  return /*#__PURE__*/React.createElement("div", {
78
78
  className: "fortune-zoom-container"
79
- }, /*#__PURE__*/React.createElement("div", {
80
- className: "fortune-zoom-button",
79
+ }, /*#__PURE__*/React.createElement(IconButton, {
80
+ className: "fortune-sheettab-button border-none shadow-none",
81
81
  onClick: function onClick(e) {
82
82
  zoomTo(context.zoomRatio - 0.1);
83
83
  e.stopPropagation();
84
84
  },
85
- tabIndex: 0
86
- }, /*#__PURE__*/React.createElement(SVGIcon, {
87
- name: "minus",
88
- width: 16,
89
- height: 16
90
- })), /*#__PURE__*/React.createElement("div", {
85
+ elevation: 1,
86
+ icon: "Minus",
87
+ size: "md",
88
+ variant: "secondary"
89
+ }), /*#__PURE__*/React.createElement("div", {
91
90
  className: "fortune-zoom-ratio"
92
91
  }, /*#__PURE__*/React.createElement("div", {
93
92
  className: "fortune-zoom-ratio-current fortune-zoom-button",
@@ -110,17 +109,16 @@ var ZoomControl = function ZoomControl() {
110
109
  }, /*#__PURE__*/React.createElement("div", {
111
110
  className: "fortune-zoom-ratio-text"
112
111
  }, v.text));
113
- })))), /*#__PURE__*/React.createElement("div", {
114
- className: "fortune-zoom-button",
112
+ })))), /*#__PURE__*/React.createElement(IconButton, {
113
+ className: "fortune-sheettab-button border-none shadow-none",
115
114
  onClick: function onClick(e) {
116
115
  zoomTo(context.zoomRatio + 0.1);
117
116
  e.stopPropagation();
118
117
  },
119
- tabIndex: 0
120
- }, /*#__PURE__*/React.createElement(SVGIcon, {
121
- name: "plus",
122
- width: 16,
123
- height: 16
124
- })));
118
+ elevation: 1,
119
+ icon: "Plus",
120
+ size: "md",
121
+ variant: "secondary"
122
+ }));
125
123
  };
126
124
  export default ZoomControl;
package/lib/components/ContextMenu/index.js CHANGED
@@ -408,6 +408,43 @@ var ContextMenu = function ContextMenu() {
408
408
  }), /*#__PURE__*/_react.default.createElement("div", null, "Insert column to the left")));
409
409
  });
410
410
  }
411
+ if (name === "insert-column-right") {
412
+ return (selection === null || selection === void 0 ? void 0 : selection.row_select) ? null : ["left"].map(function (dir) {
413
+ return /*#__PURE__*/_react.default.createElement(_Menu.default, {
414
+ key: "add-col-".concat(dir),
415
+ onClick: function onClick() {
416
+ var _a, _b, _c;
417
+ var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.column) === null || _c === void 0 ? void 0 : _c[0];
418
+ if (position == null) return;
419
+ var count = 1;
420
+ if (count < 1) return;
421
+ var direction = "rightbottom";
422
+ var insertRowColOp = {
423
+ type: "column",
424
+ index: position,
425
+ count: count,
426
+ direction: direction,
427
+ id: context.currentSheetId
428
+ };
429
+ setContext(function (draftCtx) {
430
+ try {
431
+ (0, _fortuneCore.insertRowCol)(draftCtx, insertRowColOp);
432
+ draftCtx.contextMenu = {};
433
+ } catch (err) {
434
+ if (err.message === "maxExceeded") showAlert(rightclick.columnOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnColumnReadOnly, "ok");
435
+ draftCtx.contextMenu = {};
436
+ }
437
+ }, {
438
+ insertRowColOp: insertRowColOp
439
+ });
440
+ }
441
+ }, /*#__PURE__*/_react.default.createElement("div", {
442
+ className: "context-item"
443
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
444
+ name: "Plus"
445
+ }), /*#__PURE__*/_react.default.createElement("div", null, "Insert column to the right")));
446
+ });
447
+ }
411
448
  if (name === "insert-row") {
412
449
  return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
413
450
  return /*#__PURE__*/_react.default.createElement(_Menu.default, {
@@ -445,6 +482,43 @@ var ContextMenu = function ContextMenu() {
445
482
  }), /*#__PURE__*/_react.default.createElement("div", null, "Insert row below")));
446
483
  });
447
484
  }
485
+ if (name === "insert-row-above") {
486
+ return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
487
+ return /*#__PURE__*/_react.default.createElement(_Menu.default, {
488
+ key: "add-row-".concat(dir),
489
+ onClick: function onClick() {
490
+ var _a, _b, _c;
491
+ var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.row) === null || _c === void 0 ? void 0 : _c[0];
492
+ if (position == null) return;
493
+ var count = 1;
494
+ if (count < 1) return;
495
+ var direction = "lefttop";
496
+ var insertRowColOp = {
497
+ type: "row",
498
+ index: position,
499
+ count: count,
500
+ direction: direction,
501
+ id: context.currentSheetId
502
+ };
503
+ setContext(function (draftCtx) {
504
+ try {
505
+ (0, _fortuneCore.insertRowCol)(draftCtx, insertRowColOp);
506
+ draftCtx.contextMenu = {};
507
+ } catch (err) {
508
+ if (err.message === "maxExceeded") showAlert(rightclick.rowOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnRowReadOnly, "ok");
509
+ draftCtx.contextMenu = {};
510
+ }
511
+ }, {
512
+ insertRowColOp: insertRowColOp
513
+ });
514
+ }
515
+ }, /*#__PURE__*/_react.default.createElement("div", {
516
+ className: "context-item"
517
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
518
+ name: "Plus"
519
+ }), /*#__PURE__*/_react.default.createElement("div", null, "Insert row above")));
520
+ });
521
+ }
448
522
  if (name === "delete-column") {
449
523
  return (selection === null || selection === void 0 ? void 0 : selection.column_select) && (/*#__PURE__*/_react.default.createElement(_Menu.default, {
450
524
  key: "delete-col",
package/lib/components/SheetTab/SheetItem.js CHANGED
@@ -28,9 +28,6 @@ var SheetItem = function SheetItem(_a) {
28
28
  var _d = (0, _react.useState)(false),
29
29
  dragOver = _d[0],
30
30
  setDragOver = _d[1];
31
- var _e = (0, _react.useState)("#c3c3c3"),
32
- svgColor = _e[0],
33
- setSvgColor = _e[1];
34
31
  var showAlert = (0, _useAlert.useAlert)().showAlert;
35
32
  (0, _react.useEffect)(function () {
36
33
  setContext(function (draftCtx) {
@@ -199,12 +196,6 @@ var SheetItem = function SheetItem(_a) {
199
196
  } : {}
200
197
  }, sheet.name), /*#__PURE__*/_react.default.createElement("span", {
201
198
  className: "luckysheet-sheets-item-function",
202
- onMouseEnter: function onMouseEnter() {
203
- return setSvgColor("#5c5c5c");
204
- },
205
- onMouseLeave: function onMouseLeave() {
206
- return setSvgColor("#c3c3c3");
207
- },
208
199
  onClick: function onClick(e) {
209
200
  if (isDropPlaceholder || context.allowEdit === false) return;
210
201
  var rect = refs.workbookContainer.current.getBoundingClientRect();
@@ -227,7 +218,7 @@ var SheetItem = function SheetItem(_a) {
227
218
  name: "downArrow",
228
219
  width: 12,
229
220
  style: {
230
- fill: svgColor
221
+ fill: "var(--color-icon-default)"
231
222
  }
232
223
  })), !!sheet.color && (/*#__PURE__*/_react.default.createElement("div", {
233
224
  className: "luckysheet-sheets-item-color",
package/lib/components/SheetTab/index.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .luckysheet-sheet-area {
2
2
  width: 100%;
3
3
  box-sizing: border-box;
4
- background-color: #fafafc;
4
+ /* background-color: #fafafc; */
5
5
  color: #444;
6
- height: 31px;
6
+ height: 36px;
7
7
  padding: 0 30px 0 44px;
8
8
  margin: 0;
9
9
  -webkit-touch-callout: none;
@@ -19,6 +19,7 @@
19
19
  flex: 3;
20
20
  display: flex;
21
21
  align-items: center;
22
+ gap: 8px;
22
23
  }
23
24
 
24
25
  #luckysheet-bottom-pager {
@@ -92,21 +93,19 @@
92
93
 
93
94
  .luckysheet-sheet-area div.luckysheet-sheets-item {
94
95
  padding: 2px 6px;
95
- height: 29px;
96
+ height: 34px;
96
97
  line-height: 29px;
97
98
  background-color: #fafafc;
98
- color: #676464;
99
+ color: var(--color-text-default);
99
100
  min-width: 30px;
100
101
  top: 0px;
101
102
  position: relative;
102
103
  margin-right: -1px;
103
104
  cursor: pointer;
104
105
  transition: all 0.1s;
105
- font-size: 13px;
106
+ font-size: 14px;
106
107
  padding: 2px 19px 0px 5px;
107
108
  box-sizing: border-box;
108
- border-left: 1px solid #e0e0e0;
109
- border-right: 1px solid #e0e0e0;
110
109
  vertical-align: middle;
111
110
  }
112
111
 
@@ -115,9 +114,8 @@
115
114
  }
116
115
 
117
116
  .luckysheet-sheet-area div.luckysheet-sheets-item:hover {
118
- background-color: #efefef;
117
+ background-color: hsl(var(--color-button-secondary-hover));
119
118
  /* border-color: #a5a5a5; */
120
- color: #490500;
121
119
  }
122
120
 
123
121
  .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-menu {
@@ -155,7 +153,7 @@
155
153
  .luckysheet-sheet-area
156
154
  div.luckysheet-sheets-item
157
155
  .luckysheet-sheets-item-name[contenteditable="true"] {
158
- border: 1px solid #d9d9d9;
156
+ border-bottom: 1px solid #d9d9d9;
159
157
  display: inline-block;
160
158
  height: 18px;
161
159
  line-height: 18px;
@@ -180,30 +178,24 @@
180
178
 
181
179
  .luckysheet-sheet-area div.luckysheet-sheets-item-active {
182
180
  /* padding: 2px 8px; */
183
- height: 29px;
181
+ height: 34px;
184
182
  line-height: 29px;
185
- background-color: #efefef;
186
183
  /* border-color: #aaa; */
187
- border-top-color: #fff;
188
- color: #222;
184
+ border-bottom: 5px solid #EFC703;
185
+ color: hsl(var(--color-text-default));
189
186
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
190
187
  /* top: -2px; */
191
188
  /* border-bottom: none; */
192
189
  /* padding-right: 20px; */
193
190
  }
194
191
 
195
- .luckysheet-sheet-area div.luckysheet-sheets-item-active:hover {
196
- background-color: #ececec;
197
- /* border-color: #aaa; */
198
- color: #222;
199
- }
200
-
201
192
  .fortune-sheettab-button {
202
193
  display: flex;
203
194
  align-items: center;
204
195
  justify-content: center;
205
196
  height: 29px;
206
197
  width: 29px;
198
+ background-color: var(--color-bg-secondary);
207
199
  }
208
200
 
209
201
  .fortune-sheettab-button:hover {
@@ -212,7 +204,7 @@
212
204
  justify-content: center;
213
205
  height: 29px;
214
206
  width: 29px;
215
- background-color: #efefef;
207
+ background-color: hsl(var(--color-button-secondary-hover));
216
208
  }
217
209
 
218
210
  .luckysheet-noselected-text {
package/lib/components/SheetTab/index.js CHANGED
@@ -11,7 +11,6 @@ var _ui = require("@fileverse/ui");
11
11
  var _usehooksTs = require("usehooks-ts");
12
12
  var _fortuneCore = require("@fileverse-dev/fortune-core");
13
13
  var _context = _interopRequireDefault(require("../../context"));
14
- var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
15
14
  require("./index.css");
16
15
  var _SheetItem = _interopRequireDefault(require("./SheetItem"));
17
16
  var _ZoomControl = _interopRequireDefault(require("../ZoomControl"));
@@ -91,7 +90,7 @@ var SheetTab = function SheetTab() {
91
90
  (0, _react.useEffect)(function () {
92
91
  var selection = context.luckysheet_select_save;
93
92
  if (selection) {
94
- var re = (0, _fortuneCore.calcSelectionInfo)(context, "en");
93
+ var re = (0, _fortuneCore.calcSelectionInfo)(context);
95
94
  setCalInfo(re);
96
95
  }
97
96
  }, [context.luckysheet_select_save]);
@@ -168,21 +167,21 @@ var SheetTab = function SheetTab() {
168
167
  },
169
168
  onClick: handleCloseDisclaimer
170
169
  }, "Close"))))), /*#__PURE__*/_react.default.createElement("div", {
171
- className: "luckysheet-sheet-area luckysheet-noselected-text",
170
+ className: "luckysheet-sheet-area luckysheet-noselected-text border-t color-border-default color-bg-secondary",
172
171
  onContextMenu: function onContextMenu(e) {
173
172
  return e.preventDefault();
174
173
  },
175
174
  id: "luckysheet-sheet-area"
176
175
  }, /*#__PURE__*/_react.default.createElement("div", {
177
176
  id: "luckysheet-sheet-content"
178
- }, context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
179
- className: "fortune-sheettab-button",
180
- onClick: onAddSheetClick
181
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
182
- name: "plus",
183
- width: 16,
184
- height: 16
185
- }))), context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
177
+ }, context.allowEdit && (/*#__PURE__*/_react.default.createElement(_ui.IconButton, {
178
+ className: "fortune-sheettab-button border-none shadow-none",
179
+ onClick: onAddSheetClick,
180
+ elevation: 1,
181
+ icon: "Plus",
182
+ size: "md",
183
+ variant: "secondary"
184
+ })), context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
186
185
  className: "sheet-list-container"
187
186
  }, /*#__PURE__*/_react.default.createElement("div", {
188
187
  id: "all-sheets",
@@ -195,10 +194,12 @@ var SheetTab = function SheetTab() {
195
194
  ctx.sheetTabContextMenu = {};
196
195
  });
197
196
  }
198
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
199
- name: "all-sheets",
200
- width: 16,
201
- height: 16
197
+ }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
198
+ className: "fortune-sheettab-button border-none shadow-none",
199
+ elevation: 1,
200
+ icon: "Menu",
201
+ size: "md",
202
+ variant: "secondary"
202
203
  })))), /*#__PURE__*/_react.default.createElement("div", {
203
204
  id: "luckysheet-sheets-m",
204
205
  className: "luckysheet-sheets-m lucky-button-custom"
@@ -230,10 +231,16 @@ var SheetTab = function SheetTab() {
230
231
  scrollBy(-scrollDelta);
231
232
  },
232
233
  tabIndex: 0
233
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
234
+ }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
234
235
  name: "arrow-doubleleft",
235
- width: 12,
236
- height: 12
236
+ className: "fortune-sheettab-button border-none shadow-none",
237
+ onClick: function onClick() {
238
+ scrollBy(-scrollDelta);
239
+ },
240
+ elevation: 1,
241
+ icon: "ChevronLeft",
242
+ size: "md",
243
+ variant: "secondary"
237
244
  }))), isShowScrollBtn && (/*#__PURE__*/_react.default.createElement("div", {
238
245
  id: "fortune-sheettab-rightscroll",
239
246
  className: "fortune-sheettab-scroll",
@@ -242,10 +249,16 @@ var SheetTab = function SheetTab() {
242
249
  scrollBy(scrollDelta);
243
250
  },
244
251
  tabIndex: 0
245
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
252
+ }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
246
253
  name: "arrow-doubleright",
247
- width: 12,
248
- height: 12
254
+ className: "fortune-sheettab-button border-none shadow-none",
255
+ onClick: function onClick() {
256
+ scrollBy(scrollDelta);
257
+ },
258
+ elevation: 1,
259
+ icon: "ChevronRight",
260
+ size: "md",
261
+ variant: "secondary"
249
262
  })))), /*#__PURE__*/_react.default.createElement("div", {
250
263
  className: "fortune-sheet-area-right"
251
264
  }, statsFilter.length === 6 && (/*#__PURE__*/_react.default.createElement(_ui.Popover, null, /*#__PURE__*/_react.default.createElement(_ui.PopoverTrigger, {
package/lib/components/Workbook/index.js CHANGED
@@ -93,31 +93,12 @@ var Workbook = /*#__PURE__*/_react.default.forwardRef(function (_a, ref) {
93
93
  var _c = (0, _react.useState)((0, _fortuneCore.defaultContext)(refs)),
94
94
  context = _c[0],
95
95
  setContext = _c[1];
96
- var formula = (0, _fortuneCore.locale)(context).formula;
97
96
  var _d = (0, _react.useState)(null),
98
97
  moreToolbarItems = _d[0],
99
98
  setMoreToolbarItems = _d[1];
100
- var _e = (0, _react.useState)({
101
- numberC: 0,
102
- count: 0,
103
- sum: 0,
104
- max: 0,
105
- min: 0,
106
- average: ""
107
- }),
108
- calInfo = _e[0],
109
- setCalInfo = _e[1];
110
99
  var mergedSettings = (0, _react.useMemo)(function () {
111
100
  return _lodash.default.assign(_lodash.default.cloneDeep(_fortuneCore.defaultSettings), props);
112
101
  }, __spreadArray([], _lodash.default.values(props), true));
113
- (0, _react.useEffect)(function () {
114
- var selection = context.luckysheet_select_save;
115
- var lang = props.lang;
116
- if (selection) {
117
- var re = (0, _fortuneCore.calcSelectionInfo)(context, lang);
118
- setCalInfo(re);
119
- }
120
- }, [context.luckysheet_select_save]);
121
102
  var initSheetData = (0, _react.useCallback)(function (draftCtx, newData, index) {
122
103
  var _a, _b;
123
104
  var celldata = newData.celldata,
@@ -736,11 +717,7 @@ var Workbook = /*#__PURE__*/_react.default.forwardRef(function (_a, ref) {
736
717
  className: "fortune-stat-area"
737
718
  }, /*#__PURE__*/_react.default.createElement("div", {
738
719
  className: "luckysheet-sheet-selection-calInfo"
739
- }, !!calInfo.count && (/*#__PURE__*/_react.default.createElement("div", {
740
- style: {
741
- width: "60px"
742
- }
743
- }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/_react.default.createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/_react.default.createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/_react.default.createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/_react.default.createElement("div", null, formula.min, ": ", calInfo.min)))), context.showDunePreview && (/*#__PURE__*/_react.default.createElement(_DunePreview.default, {
720
+ })), context.showDunePreview && (/*#__PURE__*/_react.default.createElement(_DunePreview.default, {
744
721
  url: context.showDunePreview.url,
745
722
  position: context.showDunePreview.position,
746
723
  onKeepAsLink: function onKeepAsLink() {
package/lib/components/ZoomControl/index.css CHANGED
@@ -12,11 +12,14 @@
12
12
  align-items: center;
13
13
  justify-content: center;
14
14
  width: 24px;
15
- height: 24px;
15
+ height: 28px;
16
+ border-radius: 3px;
17
+ color: var(--color-text-default);
18
+ font-size: 14px;
16
19
  }
17
20
 
18
21
  .fortune-zoom-button:hover {
19
- background: #efefef;
22
+ background-color: hsl(var(--color-button-secondary-hover));
20
23
  }
21
24
 
22
25
  .fortune-zoom-ratio {
package/lib/components/ZoomControl/index.js CHANGED
@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _fortuneCore = require("@fileverse-dev/fortune-core");
10
+ var _ui = require("@fileverse/ui");
10
11
  var _context = _interopRequireDefault(require("../../context"));
11
- var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
12
12
  var _useOutsideClick = require("../../hooks/useOutsideClick");
13
13
  require("./index.css");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -85,18 +85,17 @@ var ZoomControl = function ZoomControl() {
85
85
  }, [context.zoomRatio]);
86
86
  return /*#__PURE__*/_react.default.createElement("div", {
87
87
  className: "fortune-zoom-container"
88
- }, /*#__PURE__*/_react.default.createElement("div", {
89
- className: "fortune-zoom-button",
88
+ }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
89
+ className: "fortune-sheettab-button border-none shadow-none",
90
90
  onClick: function onClick(e) {
91
91
  zoomTo(context.zoomRatio - 0.1);
92
92
  e.stopPropagation();
93
93
  },
94
- tabIndex: 0
95
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
96
- name: "minus",
97
- width: 16,
98
- height: 16
99
- })), /*#__PURE__*/_react.default.createElement("div", {
94
+ elevation: 1,
95
+ icon: "Minus",
96
+ size: "md",
97
+ variant: "secondary"
98
+ }), /*#__PURE__*/_react.default.createElement("div", {
100
99
  className: "fortune-zoom-ratio"
101
100
  }, /*#__PURE__*/_react.default.createElement("div", {
102
101
  className: "fortune-zoom-ratio-current fortune-zoom-button",
@@ -119,17 +118,16 @@ var ZoomControl = function ZoomControl() {
119
118
  }, /*#__PURE__*/_react.default.createElement("div", {
120
119
  className: "fortune-zoom-ratio-text"
121
120
  }, v.text));
122
- })))), /*#__PURE__*/_react.default.createElement("div", {
123
- className: "fortune-zoom-button",
121
+ })))), /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
122
+ className: "fortune-sheettab-button border-none shadow-none",
124
123
  onClick: function onClick(e) {
125
124
  zoomTo(context.zoomRatio + 0.1);
126
125
  e.stopPropagation();
127
126
  },
128
- tabIndex: 0
129
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
130
- name: "plus",
131
- width: 16,
132
- height: 16
133
- })));
127
+ elevation: 1,
128
+ icon: "Plus",
129
+ size: "md",
130
+ variant: "secondary"
131
+ }));
134
132
  };
135
133
  var _default = exports.default = ZoomControl;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.1.74",
3
+ "version": "1.1.77",
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.74",
19
+ "@fileverse-dev/fortune-core": "1.1.77",
20
20
  "@fileverse/ui": "^4.1.7-patch-21",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",