@fileverse-dev/fortune-react 1.2.79 → 1.2.80

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 (5) hide show
  1. package/es/components/ConditionFormat/ConditionRules.js +48 -15
  2. package/es/components/ConditionFormat/formating.css +10 -11
  3. package/lib/components/ConditionFormat/ConditionRules.js +47 -14
  4. package/lib/components/ConditionFormat/formating.css +10 -11
  5. package/package.json +2 -2
package/es/components/ConditionFormat/ConditionRules.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useRef, useCallback, useContext, useEffect, useState } from "react";
2
2
  import "./index.css";
3
- import { cn, Button, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
3
+ import { cn, Button, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, TextField } from "@fileverse/ui";
4
4
  import { locale, setConditionRules, getSheetIndex } from "@fileverse-dev/fortune-core";
5
5
  import produce from "immer";
6
6
  import { numberToColumn } from "../SheetOverlay/helper";
@@ -27,6 +27,7 @@ var ConditionRules = function ConditionRules(_a) {
27
27
  editConditionFormatKey = _d[0],
28
28
  setEditConditionFormatKey = _d[1];
29
29
  var editKeyRef = useRef(null);
30
+ var firstRenderRef = useRef(true);
30
31
  var _e = useState(""),
31
32
  editConditionRange = _e[0],
32
33
  setEditConditionRange = _e[1];
@@ -47,8 +48,8 @@ var ConditionRules = function ConditionRules(_a) {
47
48
  protection = _j.protection,
48
49
  generalDialog = _j.generalDialog;
49
50
  var _k = useState({
50
- textColor: "#FFFFFF",
51
- cellColor: "#D82E2A"
51
+ textColor: "#177E23",
52
+ cellColor: "#DDFBDF"
52
53
  }),
53
54
  colorRules = _k[0],
54
55
  setColorRules = _k[1];
@@ -66,6 +67,7 @@ var ConditionRules = function ConditionRules(_a) {
66
67
  setStrikethrough = _p[1];
67
68
  useEffect(function () {
68
69
  var _a, _b;
70
+ if (create) return;
69
71
  var index = getSheetIndex(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
70
72
  var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
71
73
  setAllConditionFormats(allCondition);
@@ -89,11 +91,13 @@ var ConditionRules = function ConditionRules(_a) {
89
91
  setMatchedConditionFormatKey(matchedCondition);
90
92
  }
91
93
  if (buttonClickCreateRef.current) return;
92
- if (matchedCondition.length === 0) {
93
- setCreate(true);
94
- } else if (matchedCondition.length > 0) {
94
+ if (matchedCondition.length >= 0) {
95
95
  setCreate(false);
96
96
  }
97
+ if (firstRenderRef.current && matchedCondition.length <= 0) {
98
+ setCreate(true);
99
+ firstRenderRef.current = false;
100
+ }
97
101
  }, [context]);
98
102
  var updateCacheRules = function updateCacheRules() {
99
103
  setContext(function (ctx) {
@@ -146,7 +150,6 @@ var ConditionRules = function ConditionRules(_a) {
146
150
  buttonClickCreateRef.current = false;
147
151
  setCreate(false);
148
152
  setContext(function (ctx) {
149
- console.log("whole rule", ctx.conditionRules);
150
153
  ctx.conditionRules.textColor.color = colorRules.textColor;
151
154
  ctx.conditionRules.cellColor.color = colorRules.cellColor;
152
155
  ctx.conditionRules.font = {
@@ -203,6 +206,14 @@ var ConditionRules = function ConditionRules(_a) {
203
206
  projectValue: "10"
204
207
  };
205
208
  });
209
+ setBold(false);
210
+ setItalic(false);
211
+ setUnderline(false);
212
+ setStrikethrough(false);
213
+ setColorRules({
214
+ textColor: "#177E23",
215
+ cellColor: "#DDFBDF"
216
+ });
206
217
  updateCacheRules();
207
218
  setEditConditionFormatKey(null);
208
219
  setContext(function (ctx) {
@@ -257,7 +268,7 @@ var ConditionRules = function ConditionRules(_a) {
257
268
  ctx.rangeDialog.rangeTxt = "";
258
269
  });
259
270
  }, [type]);
260
- var conditionList = [{
271
+ var cellHighlightConditionList = [{
261
272
  text: "greaterThan",
262
273
  value: ">",
263
274
  label: "Greater Than"
@@ -293,7 +304,8 @@ var ConditionRules = function ConditionRules(_a) {
293
304
  text: "duplicateValue",
294
305
  value: "##",
295
306
  label: "Duplicate Value"
296
- }, {
307
+ }];
308
+ var itemSelectionConditionList = [{
297
309
  text: "top10",
298
310
  value: conditionformat.top10
299
311
  }, {
@@ -459,19 +471,28 @@ var ConditionRules = function ConditionRules(_a) {
459
471
  sideOffset: 4,
460
472
  className: "z-[100]",
461
473
  "data-dropdown-content": "true"
462
- }, conditionList.map(function (option) {
474
+ }, /*#__PURE__*/React.createElement(SelectGroup, null, /*#__PURE__*/React.createElement(SelectLabel, null, "Cell highlight rules"), cellHighlightConditionList.map(function (option) {
463
475
  return /*#__PURE__*/React.createElement(SelectItem, {
464
476
  key: option.value,
465
477
  value: option.text
466
478
  }, /*#__PURE__*/React.createElement("div", {
467
479
  className: "flex items-center gap-2"
468
480
  }, /*#__PURE__*/React.createElement("span", null, conditionformat[option.text])));
469
- })))), !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
481
+ })), /*#__PURE__*/React.createElement(SelectGroup, null, /*#__PURE__*/React.createElement(SelectLabel, null, "Item selections rules"), itemSelectionConditionList.map(function (option) {
482
+ return /*#__PURE__*/React.createElement(SelectItem, {
483
+ key: option.value,
484
+ value: option.text
485
+ }, /*#__PURE__*/React.createElement("div", {
486
+ className: "flex items-center gap-2"
487
+ }, /*#__PURE__*/React.createElement("span", null, conditionformat[option.text])));
488
+ }))))), !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
470
489
  className: "flex flex-col"
471
490
  }, (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/React.createElement("div", {
472
491
  className: "w-full"
473
492
  }, /*#__PURE__*/React.createElement(TextField, {
474
- placeholder: "Value",
493
+ label: "Value for condition",
494
+ required: true,
495
+ placeholder: "Value is required",
475
496
  onKeyDown: function onKeyDown(e) {
476
497
  e.stopPropagation();
477
498
  },
@@ -595,9 +616,19 @@ var ConditionRules = function ConditionRules(_a) {
595
616
  }, "Formatting styles"), /*#__PURE__*/React.createElement("div", {
596
617
  className: "toolbar-container"
597
618
  }, /*#__PURE__*/React.createElement("div", {
598
- className: "toolbar-header"
619
+ className: "toolbar-header",
620
+ style: {
621
+ backgroundColor: colorRules.cellColor,
622
+ color: colorRules.textColor,
623
+ textDecoration: underline ? "underline" : "",
624
+ textDecorationLine: strikethrough ? "line-through" : ""
625
+ }
599
626
  }, /*#__PURE__*/React.createElement("h2", {
600
- className: "toolbar-title"
627
+ className: "toolbar-title",
628
+ style: {
629
+ fontWeight: bold ? "bold" : "",
630
+ fontStyle: italic ? "italic" : ""
631
+ }
601
632
  }, "Formatting styles preview")), /*#__PURE__*/React.createElement("div", {
602
633
  className: "toolbar-content"
603
634
  }, /*#__PURE__*/React.createElement(Button, {
@@ -766,6 +797,7 @@ var ConditionRules = function ConditionRules(_a) {
766
797
  },
767
798
  tabIndex: 0
768
799
  }, button.cancel), editConditionFormatKey !== null ? (/*#__PURE__*/React.createElement(Button, {
800
+ disabled: context.conditionRules.rulesValue === "",
769
801
  variant: "default",
770
802
  style: {
771
803
  minWidth: "80px"
@@ -774,7 +806,8 @@ var ConditionRules = function ConditionRules(_a) {
774
806
  close("edit");
775
807
  },
776
808
  tabIndex: 0
777
- }, "Edit rule")) : (/*#__PURE__*/React.createElement(Button, {
809
+ }, "Update rule")) : (/*#__PURE__*/React.createElement(Button, {
810
+ disabled: context.conditionRules.rulesValue === "",
778
811
  variant: "default",
779
812
  style: {
780
813
  minWidth: "80px"
package/es/components/ConditionFormat/formating.css CHANGED
@@ -8,26 +8,25 @@
8
8
  }
9
9
 
10
10
  .toolbar-header {
11
- background-color: #dcfce7;
11
+ height: 36px;
12
12
  padding: 4px 16px;
13
13
  border-radius: var(--border-radius-sm, 4px) var(--border-radius-sm, 4px) var(--border-radius-none, 0) var(--border-radius-none, 0);
14
- border-bottom: 1px solid hsl(var(--color-border-default, #E8EBEC));
15
- background: hsl(var(--color-bg-success-light, #DDFBDF));
14
+ border-bottom: 1px solid hsl(var(--color-border-default, #E8EBEC));
15
+ background: hsl(var(--color-bg-success-light, #DDFBDF));
16
16
  }
17
17
 
18
18
  .toolbar-title {
19
- color: hsl(var(--color-text-success, #177E23));
20
- font-family: "Helvetica Neue";
21
- font-size: 14px;
22
- font-style: normal;
23
- font-weight: 400;
24
- line-height: 20px;
19
+ font-family: "Helvetica Neue";
20
+ font-size: 14px;
21
+ font-style: normal;
22
+ font-weight: 400;
23
+ line-height: 20px;
25
24
  }
26
25
 
27
26
  .toolbar-content {
28
27
  padding: 4px;
29
28
  display: flex;
30
- gap: 16px;
29
+ gap: 12px;
31
30
  align-items: center;
32
31
  }
33
32
 
@@ -100,4 +99,4 @@ line-height: 20px;
100
99
  width: 24px;
101
100
  height: 24px;
102
101
  color: #1f2937;
103
- }
102
+ }
package/lib/components/ConditionFormat/ConditionRules.js CHANGED
@@ -36,6 +36,7 @@ var ConditionRules = function ConditionRules(_a) {
36
36
  editConditionFormatKey = _d[0],
37
37
  setEditConditionFormatKey = _d[1];
38
38
  var editKeyRef = (0, _react.useRef)(null);
39
+ var firstRenderRef = (0, _react.useRef)(true);
39
40
  var _e = (0, _react.useState)(""),
40
41
  editConditionRange = _e[0],
41
42
  setEditConditionRange = _e[1];
@@ -56,8 +57,8 @@ var ConditionRules = function ConditionRules(_a) {
56
57
  protection = _j.protection,
57
58
  generalDialog = _j.generalDialog;
58
59
  var _k = (0, _react.useState)({
59
- textColor: "#FFFFFF",
60
- cellColor: "#D82E2A"
60
+ textColor: "#177E23",
61
+ cellColor: "#DDFBDF"
61
62
  }),
62
63
  colorRules = _k[0],
63
64
  setColorRules = _k[1];
@@ -75,6 +76,7 @@ var ConditionRules = function ConditionRules(_a) {
75
76
  setStrikethrough = _p[1];
76
77
  (0, _react.useEffect)(function () {
77
78
  var _a, _b;
79
+ if (create) return;
78
80
  var index = (0, _fortuneCore.getSheetIndex)(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
79
81
  var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
80
82
  setAllConditionFormats(allCondition);
@@ -98,11 +100,13 @@ var ConditionRules = function ConditionRules(_a) {
98
100
  setMatchedConditionFormatKey(matchedCondition);
99
101
  }
100
102
  if (buttonClickCreateRef.current) return;
101
- if (matchedCondition.length === 0) {
102
- setCreate(true);
103
- } else if (matchedCondition.length > 0) {
103
+ if (matchedCondition.length >= 0) {
104
104
  setCreate(false);
105
105
  }
106
+ if (firstRenderRef.current && matchedCondition.length <= 0) {
107
+ setCreate(true);
108
+ firstRenderRef.current = false;
109
+ }
106
110
  }, [context]);
107
111
  var updateCacheRules = function updateCacheRules() {
108
112
  setContext(function (ctx) {
@@ -155,7 +159,6 @@ var ConditionRules = function ConditionRules(_a) {
155
159
  buttonClickCreateRef.current = false;
156
160
  setCreate(false);
157
161
  setContext(function (ctx) {
158
- console.log("whole rule", ctx.conditionRules);
159
162
  ctx.conditionRules.textColor.color = colorRules.textColor;
160
163
  ctx.conditionRules.cellColor.color = colorRules.cellColor;
161
164
  ctx.conditionRules.font = {
@@ -212,6 +215,14 @@ var ConditionRules = function ConditionRules(_a) {
212
215
  projectValue: "10"
213
216
  };
214
217
  });
218
+ setBold(false);
219
+ setItalic(false);
220
+ setUnderline(false);
221
+ setStrikethrough(false);
222
+ setColorRules({
223
+ textColor: "#177E23",
224
+ cellColor: "#DDFBDF"
225
+ });
215
226
  updateCacheRules();
216
227
  setEditConditionFormatKey(null);
217
228
  setContext(function (ctx) {
@@ -266,7 +277,7 @@ var ConditionRules = function ConditionRules(_a) {
266
277
  ctx.rangeDialog.rangeTxt = "";
267
278
  });
268
279
  }, [type]);
269
- var conditionList = [{
280
+ var cellHighlightConditionList = [{
270
281
  text: "greaterThan",
271
282
  value: ">",
272
283
  label: "Greater Than"
@@ -302,7 +313,8 @@ var ConditionRules = function ConditionRules(_a) {
302
313
  text: "duplicateValue",
303
314
  value: "##",
304
315
  label: "Duplicate Value"
305
- }, {
316
+ }];
317
+ var itemSelectionConditionList = [{
306
318
  text: "top10",
307
319
  value: conditionformat.top10
308
320
  }, {
@@ -468,19 +480,28 @@ var ConditionRules = function ConditionRules(_a) {
468
480
  sideOffset: 4,
469
481
  className: "z-[100]",
470
482
  "data-dropdown-content": "true"
471
- }, conditionList.map(function (option) {
483
+ }, /*#__PURE__*/_react.default.createElement(_ui.SelectGroup, null, /*#__PURE__*/_react.default.createElement(_ui.SelectLabel, null, "Cell highlight rules"), cellHighlightConditionList.map(function (option) {
472
484
  return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
473
485
  key: option.value,
474
486
  value: option.text
475
487
  }, /*#__PURE__*/_react.default.createElement("div", {
476
488
  className: "flex items-center gap-2"
477
489
  }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[option.text])));
478
- })))), !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/_react.default.createElement("div", {
490
+ })), /*#__PURE__*/_react.default.createElement(_ui.SelectGroup, null, /*#__PURE__*/_react.default.createElement(_ui.SelectLabel, null, "Item selections rules"), itemSelectionConditionList.map(function (option) {
491
+ return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
492
+ key: option.value,
493
+ value: option.text
494
+ }, /*#__PURE__*/_react.default.createElement("div", {
495
+ className: "flex items-center gap-2"
496
+ }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[option.text])));
497
+ }))))), !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/_react.default.createElement("div", {
479
498
  className: "flex flex-col"
480
499
  }, (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/_react.default.createElement("div", {
481
500
  className: "w-full"
482
501
  }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
483
- placeholder: "Value",
502
+ label: "Value for condition",
503
+ required: true,
504
+ placeholder: "Value is required",
484
505
  onKeyDown: function onKeyDown(e) {
485
506
  e.stopPropagation();
486
507
  },
@@ -604,9 +625,19 @@ var ConditionRules = function ConditionRules(_a) {
604
625
  }, "Formatting styles"), /*#__PURE__*/_react.default.createElement("div", {
605
626
  className: "toolbar-container"
606
627
  }, /*#__PURE__*/_react.default.createElement("div", {
607
- className: "toolbar-header"
628
+ className: "toolbar-header",
629
+ style: {
630
+ backgroundColor: colorRules.cellColor,
631
+ color: colorRules.textColor,
632
+ textDecoration: underline ? "underline" : "",
633
+ textDecorationLine: strikethrough ? "line-through" : ""
634
+ }
608
635
  }, /*#__PURE__*/_react.default.createElement("h2", {
609
- className: "toolbar-title"
636
+ className: "toolbar-title",
637
+ style: {
638
+ fontWeight: bold ? "bold" : "",
639
+ fontStyle: italic ? "italic" : ""
640
+ }
610
641
  }, "Formatting styles preview")), /*#__PURE__*/_react.default.createElement("div", {
611
642
  className: "toolbar-content"
612
643
  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
@@ -775,6 +806,7 @@ var ConditionRules = function ConditionRules(_a) {
775
806
  },
776
807
  tabIndex: 0
777
808
  }, button.cancel), editConditionFormatKey !== null ? (/*#__PURE__*/_react.default.createElement(_ui.Button, {
809
+ disabled: context.conditionRules.rulesValue === "",
778
810
  variant: "default",
779
811
  style: {
780
812
  minWidth: "80px"
@@ -783,7 +815,8 @@ var ConditionRules = function ConditionRules(_a) {
783
815
  close("edit");
784
816
  },
785
817
  tabIndex: 0
786
- }, "Edit rule")) : (/*#__PURE__*/_react.default.createElement(_ui.Button, {
818
+ }, "Update rule")) : (/*#__PURE__*/_react.default.createElement(_ui.Button, {
819
+ disabled: context.conditionRules.rulesValue === "",
787
820
  variant: "default",
788
821
  style: {
789
822
  minWidth: "80px"
package/lib/components/ConditionFormat/formating.css CHANGED
@@ -8,26 +8,25 @@
8
8
  }
9
9
 
10
10
  .toolbar-header {
11
- background-color: #dcfce7;
11
+ height: 36px;
12
12
  padding: 4px 16px;
13
13
  border-radius: var(--border-radius-sm, 4px) var(--border-radius-sm, 4px) var(--border-radius-none, 0) var(--border-radius-none, 0);
14
- border-bottom: 1px solid hsl(var(--color-border-default, #E8EBEC));
15
- background: hsl(var(--color-bg-success-light, #DDFBDF));
14
+ border-bottom: 1px solid hsl(var(--color-border-default, #E8EBEC));
15
+ background: hsl(var(--color-bg-success-light, #DDFBDF));
16
16
  }
17
17
 
18
18
  .toolbar-title {
19
- color: hsl(var(--color-text-success, #177E23));
20
- font-family: "Helvetica Neue";
21
- font-size: 14px;
22
- font-style: normal;
23
- font-weight: 400;
24
- line-height: 20px;
19
+ font-family: "Helvetica Neue";
20
+ font-size: 14px;
21
+ font-style: normal;
22
+ font-weight: 400;
23
+ line-height: 20px;
25
24
  }
26
25
 
27
26
  .toolbar-content {
28
27
  padding: 4px;
29
28
  display: flex;
30
- gap: 16px;
29
+ gap: 12px;
31
30
  align-items: center;
32
31
  }
33
32
 
@@ -100,4 +99,4 @@ line-height: 20px;
100
99
  width: 24px;
101
100
  height: 24px;
102
101
  color: #1f2937;
103
- }
102
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.2.79",
3
+ "version": "1.2.80",
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.2.79",
19
+ "@fileverse-dev/fortune-core": "1.2.80",
20
20
  "@fileverse/ui": "^4.1.7-patch-40",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",