@fileverse-dev/fortune-react 1.2.68 → 1.2.69
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.
- package/es/components/ConditionFormat/ConditionRules.d.ts +3 -1
- package/es/components/ConditionFormat/ConditionRules.js +423 -80
- package/es/components/ConditionFormat/formating.css +103 -0
- package/es/components/ConditionFormat/index.css +62 -5
- package/es/components/ConditionFormat/index.js +2 -6
- package/es/components/ContextMenu/index.js +10 -41
- package/es/components/DataVerification/RangeDialog.js +0 -15
- package/es/components/SheetOverlay/helper.d.ts +1 -0
- package/es/components/SheetOverlay/helper.js +1 -1
- package/es/components/Toolbar/conditionalFormatPortal.d.ts +6 -0
- package/es/components/Toolbar/conditionalFormatPortal.js +13 -0
- package/es/components/Toolbar/index.d.ts +1 -1
- package/es/components/Toolbar/index.js +49 -28
- package/es/components/Workbook/api.d.ts +4 -0
- package/es/components/Workbook/api.js +4 -0
- package/es/components/Workbook/index.d.ts +4 -0
- package/lib/components/ConditionFormat/ConditionRules.d.ts +3 -1
- package/lib/components/ConditionFormat/ConditionRules.js +421 -78
- package/lib/components/ConditionFormat/formating.css +103 -0
- package/lib/components/ConditionFormat/index.css +62 -5
- package/lib/components/ConditionFormat/index.js +1 -5
- package/lib/components/ContextMenu/index.js +10 -41
- package/lib/components/DataVerification/RangeDialog.js +0 -15
- package/lib/components/SheetOverlay/helper.d.ts +1 -0
- package/lib/components/SheetOverlay/helper.js +1 -0
- package/lib/components/Toolbar/conditionalFormatPortal.d.ts +6 -0
- package/lib/components/Toolbar/conditionalFormatPortal.js +20 -0
- package/lib/components/Toolbar/index.d.ts +1 -1
- package/lib/components/Toolbar/index.js +49 -28
- package/lib/components/Workbook/api.d.ts +4 -0
- package/lib/components/Workbook/api.js +4 -0
- package/lib/components/Workbook/index.d.ts +4 -0
- package/package.json +2 -2
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
.toolbar-container {
|
|
2
|
+
width: 100%;
|
|
3
|
+
max-width: 896px;
|
|
4
|
+
background-color: white;
|
|
5
|
+
border-radius: 4px;
|
|
6
|
+
border: 1px solid hsl(var(--color-border-default, #E8EBEC));
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.toolbar-header {
|
|
11
|
+
background-color: #dcfce7;
|
|
12
|
+
padding: 4px 16px;
|
|
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));
|
|
16
|
+
}
|
|
17
|
+
|
|
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;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.toolbar-content {
|
|
28
|
+
padding: 4px;
|
|
29
|
+
display: flex;
|
|
30
|
+
gap: 16px;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.toolbar-button {
|
|
35
|
+
width: 48px;
|
|
36
|
+
height: 48px;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
background-color: white;
|
|
41
|
+
border: 1px solid #e5e7eb;
|
|
42
|
+
border-radius: 6px;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
transition: all 0.2s ease;
|
|
45
|
+
padding: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.toolbar-button:hover {
|
|
49
|
+
background-color: #f9fafb;
|
|
50
|
+
border-color: #d1d5db;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.toolbar-button:active {
|
|
54
|
+
transform: scale(0.95);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.button-text {
|
|
58
|
+
font-size: 24px;
|
|
59
|
+
color: #1f2937;
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.button-text.bold {
|
|
64
|
+
font-weight: 700;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.button-text.italic {
|
|
68
|
+
font-style: italic;
|
|
69
|
+
font-family: Georgia, serif;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.button-text.underline {
|
|
73
|
+
text-decoration: underline;
|
|
74
|
+
text-decoration-thickness: 2px;
|
|
75
|
+
text-underline-offset: 2px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.button-text.strikethrough {
|
|
79
|
+
text-decoration: line-through;
|
|
80
|
+
text-decoration-thickness: 2px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.button-text.color-button {
|
|
84
|
+
position: relative;
|
|
85
|
+
color: #16a34a;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.button-text.color-button::after {
|
|
89
|
+
content: "";
|
|
90
|
+
position: absolute;
|
|
91
|
+
bottom: -4px;
|
|
92
|
+
left: 0;
|
|
93
|
+
right: 0;
|
|
94
|
+
height: 3px;
|
|
95
|
+
background-color: #16a34a;
|
|
96
|
+
border-radius: 2px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.button-icon {
|
|
100
|
+
width: 24px;
|
|
101
|
+
height: 24px;
|
|
102
|
+
color: #1f2937;
|
|
103
|
+
}
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.condition-rules-set-title {
|
|
118
|
-
margin:
|
|
118
|
+
margin: 0px 0px 16px 0px;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
.condition-rules-setbox {
|
|
@@ -149,13 +149,23 @@
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
.condition-rules-select-color {
|
|
152
|
-
background:
|
|
153
|
-
width:
|
|
154
|
-
height:
|
|
155
|
-
border-radius:
|
|
152
|
+
background: transparent;
|
|
153
|
+
width: 16px;
|
|
154
|
+
height: 4px;
|
|
155
|
+
border-radius: 0px;
|
|
156
|
+
border: none;
|
|
156
157
|
padding: 0;
|
|
157
158
|
margin: 0;
|
|
158
159
|
cursor: pointer;
|
|
160
|
+
outline: none;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
input[type="color"]::-webkit-color-swatch-wrapper {
|
|
164
|
+
padding: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
input[type="color"]::-webkit-color-swatch {
|
|
168
|
+
border: 1px solid #d4d4d4;
|
|
159
169
|
}
|
|
160
170
|
|
|
161
171
|
.condition-rules-between-box {
|
|
@@ -210,3 +220,50 @@ input[type="number"].condition-rules-project-input::-webkit-inner-spin-button {
|
|
|
210
220
|
input[type="number"].condition-rules-project-input {
|
|
211
221
|
-moz-appearance: textfield;
|
|
212
222
|
}
|
|
223
|
+
|
|
224
|
+
.condition-list-parent {
|
|
225
|
+
padding: 12px 8px;
|
|
226
|
+
gap: 12px;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.condition-list-parent:hover {
|
|
230
|
+
background-color: hsl(var(--color-bg-default-hover));
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.condition-list-pill {
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: center;
|
|
236
|
+
justify-content: center;
|
|
237
|
+
width: 44px;
|
|
238
|
+
height: 56px;
|
|
239
|
+
padding: 4px 16px;
|
|
240
|
+
gap: 10px;
|
|
241
|
+
border-radius: 4px;
|
|
242
|
+
border: 1px solid #E8EBEC;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.condition-list-text {
|
|
246
|
+
font-family: "Helvetica Neue";
|
|
247
|
+
font-size: 14px;
|
|
248
|
+
font-style: normal;
|
|
249
|
+
font-weight: 500;
|
|
250
|
+
line-height: 20px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.condition-list-type {
|
|
254
|
+
color: hsl(var(--color-text-default, #363B3F));
|
|
255
|
+
font-family: "Helvetica Neue";
|
|
256
|
+
font-size: 14px;
|
|
257
|
+
font-style: normal;
|
|
258
|
+
font-weight: 500;
|
|
259
|
+
line-height: 20px;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.condition-list-range {
|
|
263
|
+
color: hsl(var(--color-text-secondary, #77818A));
|
|
264
|
+
font-family: "Helvetica Neue";
|
|
265
|
+
font-size: 12px;
|
|
266
|
+
font-style: normal;
|
|
267
|
+
font-weight: 400;
|
|
268
|
+
line-height: 16px;
|
|
269
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useCallback, useContext, useEffect, useRef } from "react";
|
|
2
2
|
import "./index.css";
|
|
3
|
-
import { locale
|
|
3
|
+
import { locale } from "@fileverse-dev/fortune-core";
|
|
4
4
|
import _ from "lodash";
|
|
5
5
|
import WorkbookContext from "../../context";
|
|
6
6
|
import Select, { Option } from "../Toolbar/Select";
|
|
@@ -226,11 +226,7 @@ var ConditionalFormat = function ConditionalFormat(_a) {
|
|
|
226
226
|
style: {
|
|
227
227
|
padding: "6px 10px"
|
|
228
228
|
},
|
|
229
|
-
onClick: function onClick() {
|
|
230
|
-
setContext(function (ctx) {
|
|
231
|
-
updateItem(ctx, "delSheet");
|
|
232
|
-
});
|
|
233
|
-
},
|
|
229
|
+
onClick: function onClick() {},
|
|
234
230
|
tabIndex: 0
|
|
235
231
|
}, conditionformat[v]);
|
|
236
232
|
}))));
|
|
@@ -128,7 +128,6 @@ import Divider from "./Divider";
|
|
|
128
128
|
import "./index.css";
|
|
129
129
|
import Menu from "./Menu";
|
|
130
130
|
import "tippy.js/dist/tippy.css";
|
|
131
|
-
import ConditionalFormat from "../ConditionFormat";
|
|
132
131
|
import SVGIcon from "../SVGIcon";
|
|
133
132
|
import { LucideIcon as LocalLucidIcon } from "../../components/SheetOverlay/LucideIcon";
|
|
134
133
|
var ContextMenu = function ContextMenu() {
|
|
@@ -986,50 +985,20 @@ var ContextMenu = function ContextMenu() {
|
|
|
986
985
|
}), /*#__PURE__*/React.createElement("p", null, rightclick.link)));
|
|
987
986
|
}
|
|
988
987
|
if (name === "conditionFormat") {
|
|
989
|
-
|
|
990
|
-
return setContext(function (ctx) {
|
|
991
|
-
ctx.contextMenu = {};
|
|
992
|
-
});
|
|
993
|
-
};
|
|
994
|
-
return /*#__PURE__*/React.createElement(Tippy, {
|
|
988
|
+
return /*#__PURE__*/React.createElement(Menu, {
|
|
995
989
|
key: name,
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
onShow: function onShow() {
|
|
1004
|
-
setActiveMenu("conditionFormat");
|
|
1005
|
-
},
|
|
1006
|
-
onHide: function onHide() {
|
|
1007
|
-
if (activeMenu === "conditionFormat") setActiveMenu("");
|
|
1008
|
-
},
|
|
1009
|
-
content: /*#__PURE__*/React.createElement("div", {
|
|
1010
|
-
style: {
|
|
1011
|
-
minWidth: 220
|
|
1012
|
-
}
|
|
1013
|
-
}, /*#__PURE__*/React.createElement(ConditionalFormat, {
|
|
1014
|
-
items: ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"],
|
|
1015
|
-
setOpen: closeContextMenu
|
|
1016
|
-
})),
|
|
1017
|
-
trigger: "mouseenter focus",
|
|
1018
|
-
hideOnClick: false
|
|
1019
|
-
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, {
|
|
1020
|
-
isActive: activeMenu === "conditionFormat"
|
|
1021
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
1022
|
-
className: "flex items-center justify-between w-full"
|
|
990
|
+
onClick: function onClick() {
|
|
991
|
+
if (context.allowEdit === false) return;
|
|
992
|
+
setContext(function (draftCtx) {
|
|
993
|
+
draftCtx.contextMenu = {};
|
|
994
|
+
});
|
|
995
|
+
window.conditionalFormatClick(context.luckysheet_select_save);
|
|
996
|
+
}
|
|
1023
997
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1024
|
-
className: "
|
|
998
|
+
className: "context-item"
|
|
1025
999
|
}, /*#__PURE__*/React.createElement(LucideIcon, {
|
|
1026
1000
|
name: "PaintbrushVertical"
|
|
1027
|
-
}), /*#__PURE__*/React.createElement("p", null,
|
|
1028
|
-
name: "ChevronRight",
|
|
1029
|
-
width: 16,
|
|
1030
|
-
height: 16,
|
|
1031
|
-
className: "color-text-secondary w-4 h-4"
|
|
1032
|
-
})))));
|
|
1001
|
+
}), /*#__PURE__*/React.createElement("p", null, "Conditional formatting")));
|
|
1033
1002
|
}
|
|
1034
1003
|
if (name === "clear-format") {
|
|
1035
1004
|
return /*#__PURE__*/React.createElement(Menu, {
|
|
@@ -3,7 +3,6 @@ import { Button, cn, IconButton, TextField } from "@fileverse/ui";
|
|
|
3
3
|
import React, { useCallback, useContext, useEffect, useState } from "react";
|
|
4
4
|
import WorkbookContext from "../../context";
|
|
5
5
|
import { useDialog } from "../../hooks/useDialog";
|
|
6
|
-
import ConditionRules from "../ConditionFormat/ConditionRules";
|
|
7
6
|
import "./index.css";
|
|
8
7
|
import { getDisplayedRangeTxt } from "./getDisplayedRangeTxt";
|
|
9
8
|
var RangeDialog = function RangeDialog() {
|
|
@@ -24,20 +23,6 @@ var RangeDialog = function RangeDialog() {
|
|
|
24
23
|
ctx.rangeDialog.singleSelect = false;
|
|
25
24
|
});
|
|
26
25
|
(_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
|
|
27
|
-
if (!context.rangeDialog) return;
|
|
28
|
-
var rangeDialogType = context.rangeDialog.type;
|
|
29
|
-
if (rangeDialogType.indexOf("between") >= 0) {
|
|
30
|
-
showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
|
|
31
|
-
type: "between"
|
|
32
|
-
}), undefined, locale(context).conditionformat.conditionformat_between);
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
if (rangeDialogType.indexOf("conditionRules") >= 0) {
|
|
36
|
-
var rulesType = rangeDialogType.substring("conditionRules".length, rangeDialogType.length);
|
|
37
|
-
showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
|
|
38
|
-
type: rulesType
|
|
39
|
-
}), undefined, locale(context).conditionformat["conditionformat_".concat(rulesType)]);
|
|
40
|
-
}
|
|
41
26
|
}, [setContext, showDialog, context]);
|
|
42
27
|
useEffect(function () {
|
|
43
28
|
setRangeTxt2(getDisplayedRangeTxt(context));
|
|
@@ -2,6 +2,7 @@ export declare function moveCursorToEnd(editableDiv: HTMLDivElement): void;
|
|
|
2
2
|
export declare function getCursorPosition(editableDiv: HTMLDivElement): number;
|
|
3
3
|
export declare function isLetterNumberPattern(str: string): boolean;
|
|
4
4
|
export declare function removeLastSpan(htmlString: string): string;
|
|
5
|
+
export declare function numberToColumn(colNumber: number): string;
|
|
5
6
|
export declare function incrementColumn(cell: string): string;
|
|
6
7
|
export declare function decrementColumn(cell: string): string;
|
|
7
8
|
export declare function incrementRow(cell: string): string;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { createPortal } from "react-dom";
|
|
3
|
+
import ConditionRules from "../ConditionFormat/ConditionRules";
|
|
4
|
+
var ConditionalFormatPortal = function ConditionalFormatPortal(_a) {
|
|
5
|
+
var visible = _a.visible,
|
|
6
|
+
context = _a.context;
|
|
7
|
+
var container = document.getElementById("placeholder-conditional-format");
|
|
8
|
+
if (!visible || !container) return null;
|
|
9
|
+
return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(ConditionRules, {
|
|
10
|
+
context: context
|
|
11
|
+
}), container);
|
|
12
|
+
};
|
|
13
|
+
export default ConditionalFormatPortal;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Cell } from "@fileverse-dev/fortune-core";
|
|
3
3
|
import "./index.css";
|
|
4
|
-
export declare const getLucideIcon: (title: string) => "Ethereum" | "DollarSign" | "" | "ChevronDown" | "
|
|
4
|
+
export declare const getLucideIcon: (title: string) => "Ethereum" | "DollarSign" | "" | "ChevronDown" | "Bold" | "Italic" | "Underline" | "Strikethrough" | "PaintBucket" | "Undo" | "Redo" | "PaintRoller" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "Border" | "MergeHorizontal" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis";
|
|
5
5
|
export declare const CurrencySelector: ({ cell, defaultTextFormat, toolTipText, }: {
|
|
6
6
|
cell: Cell | null | undefined;
|
|
7
7
|
defaultTextFormat: string;
|
|
@@ -127,6 +127,7 @@ import { toolbarItemClickHandler, handleTextBackground, handleTextColor, handleT
|
|
|
127
127
|
import _ from "lodash";
|
|
128
128
|
import { IconButton, LucideIcon, Tooltip, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@fileverse/ui";
|
|
129
129
|
import DataVerificationPortal from "./dataVerificationPortal";
|
|
130
|
+
import ConditionalFormatPortal from "./conditionalFormatPortal";
|
|
130
131
|
import WorkbookContext from "../../context";
|
|
131
132
|
import "./index.css";
|
|
132
133
|
import Button from "./Button";
|
|
@@ -138,7 +139,6 @@ import { useDialog } from "../../hooks/useDialog";
|
|
|
138
139
|
import { useAlert } from "../../hooks/useAlert";
|
|
139
140
|
import { SplitColumn } from "../SplitColumn";
|
|
140
141
|
import { LocationCondition } from "../LocationCondition";
|
|
141
|
-
import ConditionalFormat from "../ConditionFormat";
|
|
142
142
|
import CustomButton from "./CustomButton";
|
|
143
143
|
import { CustomColor } from "./CustomColor";
|
|
144
144
|
import { FormatSearch } from "../FormatSearch";
|
|
@@ -398,7 +398,6 @@ export var CurrencySelector = function CurrencySelector(_a) {
|
|
|
398
398
|
return __generator(this, function (_a) {
|
|
399
399
|
switch (_a.label) {
|
|
400
400
|
case 0:
|
|
401
|
-
console.log(opt, "kjbdnfgjbksndfjbkdnbksdfjkn");
|
|
402
401
|
if (!(opt.type === "crypto")) return [3, 2];
|
|
403
402
|
return [4, convertCellsToCrypto({
|
|
404
403
|
context: context,
|
|
@@ -601,6 +600,9 @@ var Toolbar = function Toolbar(_a) {
|
|
|
601
600
|
var _p = useState(false),
|
|
602
601
|
showDataValidation = _p[0],
|
|
603
602
|
setShowDataValidation = _p[1];
|
|
603
|
+
var _q = useState(false),
|
|
604
|
+
showConditionalFormat = _q[0],
|
|
605
|
+
setShowConditionalFormat = _q[1];
|
|
604
606
|
var dataVerificationClick = function dataVerificationClick(selectedCells) {
|
|
605
607
|
var _a;
|
|
606
608
|
var selection = api.getSelection(context);
|
|
@@ -619,8 +621,27 @@ var Toolbar = function Toolbar(_a) {
|
|
|
619
621
|
setShowDataValidation(true);
|
|
620
622
|
}, 100);
|
|
621
623
|
};
|
|
624
|
+
var conditionalFormatClick = function conditionalFormatClick(selectedCells) {
|
|
625
|
+
var _a;
|
|
626
|
+
var selection = api.getSelection(context);
|
|
627
|
+
if (!selection && !selectedCells) {
|
|
628
|
+
setContext(function (ctx) {
|
|
629
|
+
api.setSelection(ctx, [{
|
|
630
|
+
row: [0, 0],
|
|
631
|
+
column: [0, 0]
|
|
632
|
+
}], {
|
|
633
|
+
id: context.currentSheetId
|
|
634
|
+
});
|
|
635
|
+
});
|
|
636
|
+
}
|
|
637
|
+
(_a = document.getElementById("conditional-format-button")) === null || _a === void 0 ? void 0 : _a.click();
|
|
638
|
+
setTimeout(function () {
|
|
639
|
+
setShowConditionalFormat(true);
|
|
640
|
+
}, 100);
|
|
641
|
+
};
|
|
622
642
|
useEffect(function () {
|
|
623
643
|
window.dataVerificationClick = dataVerificationClick;
|
|
644
|
+
window.conditionalFormatClick = conditionalFormatClick;
|
|
624
645
|
}, []);
|
|
625
646
|
var getToolbarItem = useCallback(function (name, i) {
|
|
626
647
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -737,7 +758,6 @@ var Toolbar = function Toolbar(_a) {
|
|
|
737
758
|
return /*#__PURE__*/React.createElement(Option, {
|
|
738
759
|
key: value,
|
|
739
760
|
onClick: function onClick() {
|
|
740
|
-
console.log("format", value);
|
|
741
761
|
setOpen(false);
|
|
742
762
|
setContext(function (ctx) {
|
|
743
763
|
var d = getFlowdata(ctx);
|
|
@@ -1117,18 +1137,16 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1117
1137
|
});
|
|
1118
1138
|
}
|
|
1119
1139
|
if (name === "conditionFormat") {
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1140
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
1141
|
+
text: "Conditional Format",
|
|
1142
|
+
placement: "bottom"
|
|
1143
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1144
|
+
id: "conditionFormat",
|
|
1145
|
+
iconId: name,
|
|
1146
|
+
tooltip: tooltip,
|
|
1123
1147
|
key: name,
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
}, function (setOpen) {
|
|
1127
|
-
return /*#__PURE__*/React.createElement(ConditionalFormat, {
|
|
1128
|
-
items: items_4,
|
|
1129
|
-
setOpen: setOpen
|
|
1130
|
-
});
|
|
1131
|
-
});
|
|
1148
|
+
onClick: conditionalFormatClick
|
|
1149
|
+
}));
|
|
1132
1150
|
}
|
|
1133
1151
|
if (name === "image") {
|
|
1134
1152
|
return /*#__PURE__*/React.createElement(Button, {
|
|
@@ -1335,7 +1353,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1335
1353
|
});
|
|
1336
1354
|
}
|
|
1337
1355
|
if (name === "border") {
|
|
1338
|
-
var
|
|
1356
|
+
var items_4 = [{
|
|
1339
1357
|
text: border.borderTop,
|
|
1340
1358
|
value: "border-top",
|
|
1341
1359
|
icon: "BorderTop"
|
|
@@ -1390,7 +1408,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1390
1408
|
}, function (setOpen) {
|
|
1391
1409
|
return /*#__PURE__*/React.createElement("div", {
|
|
1392
1410
|
className: "fortune-toolbar-select fortune-border-grid"
|
|
1393
|
-
},
|
|
1411
|
+
}, items_4.map(function (_a) {
|
|
1394
1412
|
var value = _a.value,
|
|
1395
1413
|
icon = _a.icon;
|
|
1396
1414
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -1411,7 +1429,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1411
1429
|
});
|
|
1412
1430
|
}
|
|
1413
1431
|
if (name === "freeze") {
|
|
1414
|
-
var
|
|
1432
|
+
var items_5 = [{
|
|
1415
1433
|
text: freezen.freezenRowRange,
|
|
1416
1434
|
value: "freeze-row"
|
|
1417
1435
|
}, {
|
|
@@ -1435,7 +1453,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1435
1453
|
});
|
|
1436
1454
|
}
|
|
1437
1455
|
}, function (setOpen) {
|
|
1438
|
-
return /*#__PURE__*/React.createElement(Select, null,
|
|
1456
|
+
return /*#__PURE__*/React.createElement(Select, null, items_5.map(function (_a) {
|
|
1439
1457
|
var text = _a.text,
|
|
1440
1458
|
value = _a.value;
|
|
1441
1459
|
return /*#__PURE__*/React.createElement(Option, {
|
|
@@ -1457,7 +1475,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1457
1475
|
});
|
|
1458
1476
|
}
|
|
1459
1477
|
if (name === "text-wrap") {
|
|
1460
|
-
var
|
|
1478
|
+
var items_6 = [{
|
|
1461
1479
|
text: textWrap.clip,
|
|
1462
1480
|
iconId: "text-clip",
|
|
1463
1481
|
value: "clip"
|
|
@@ -1470,9 +1488,9 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1470
1488
|
iconId: "text-wrap",
|
|
1471
1489
|
value: "wrap"
|
|
1472
1490
|
}];
|
|
1473
|
-
var curr_3 =
|
|
1491
|
+
var curr_3 = items_6[0];
|
|
1474
1492
|
if ((cell === null || cell === void 0 ? void 0 : cell.tb) != null) {
|
|
1475
|
-
curr_3 = _.get(
|
|
1493
|
+
curr_3 = _.get(items_6, cell.tb);
|
|
1476
1494
|
}
|
|
1477
1495
|
return /*#__PURE__*/React.createElement(Combo, {
|
|
1478
1496
|
iconId: curr_3.iconId,
|
|
@@ -1489,7 +1507,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1489
1507
|
justifyContent: "center",
|
|
1490
1508
|
gap: 4
|
|
1491
1509
|
}
|
|
1492
|
-
},
|
|
1510
|
+
}, items_6.map(function (_a) {
|
|
1493
1511
|
var iconId = _a.iconId,
|
|
1494
1512
|
value = _a.value;
|
|
1495
1513
|
return /*#__PURE__*/React.createElement(IconButton, {
|
|
@@ -1520,7 +1538,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1520
1538
|
});
|
|
1521
1539
|
}
|
|
1522
1540
|
if (name === "text-rotation") {
|
|
1523
|
-
var
|
|
1541
|
+
var items_7 = [{
|
|
1524
1542
|
text: rotation.none,
|
|
1525
1543
|
iconId: "text-rotation-none",
|
|
1526
1544
|
value: "none"
|
|
@@ -1545,9 +1563,9 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1545
1563
|
iconId: "text-rotation-down",
|
|
1546
1564
|
value: "rotation-down"
|
|
1547
1565
|
}];
|
|
1548
|
-
var curr =
|
|
1566
|
+
var curr = items_7[0];
|
|
1549
1567
|
if ((cell === null || cell === void 0 ? void 0 : cell.tr) != null) {
|
|
1550
|
-
curr = _.get(
|
|
1568
|
+
curr = _.get(items_7, cell.tr);
|
|
1551
1569
|
}
|
|
1552
1570
|
return /*#__PURE__*/React.createElement(Combo, {
|
|
1553
1571
|
iconId: curr.iconId,
|
|
@@ -1555,7 +1573,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1555
1573
|
tooltip: toolbar.textRotate,
|
|
1556
1574
|
showArrow: false
|
|
1557
1575
|
}, function (setOpen) {
|
|
1558
|
-
return /*#__PURE__*/React.createElement(Select, null,
|
|
1576
|
+
return /*#__PURE__*/React.createElement(Select, null, items_7.map(function (_a) {
|
|
1559
1577
|
var text = _a.text,
|
|
1560
1578
|
iconId = _a.iconId,
|
|
1561
1579
|
value = _a.value;
|
|
@@ -1580,7 +1598,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1580
1598
|
});
|
|
1581
1599
|
}
|
|
1582
1600
|
if (name === "filter") {
|
|
1583
|
-
var
|
|
1601
|
+
var items_8 = [{
|
|
1584
1602
|
iconId: "sort-asc",
|
|
1585
1603
|
value: "sort-asc",
|
|
1586
1604
|
text: sort.asc,
|
|
@@ -1630,7 +1648,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1630
1648
|
style: {
|
|
1631
1649
|
minWidth: "11.25rem"
|
|
1632
1650
|
}
|
|
1633
|
-
},
|
|
1651
|
+
}, items_8.map(function (_a, index) {
|
|
1634
1652
|
var text = _a.text,
|
|
1635
1653
|
iconId = _a.iconId,
|
|
1636
1654
|
value = _a.value,
|
|
@@ -1685,6 +1703,9 @@ var Toolbar = function Toolbar(_a) {
|
|
|
1685
1703
|
"aria-label": toolbar.toolbar
|
|
1686
1704
|
}, /*#__PURE__*/React.createElement(DataVerificationPortal, {
|
|
1687
1705
|
visible: showDataValidation
|
|
1706
|
+
}), /*#__PURE__*/React.createElement(ConditionalFormatPortal, {
|
|
1707
|
+
visible: showConditionalFormat,
|
|
1708
|
+
context: context
|
|
1688
1709
|
}), /*#__PURE__*/React.createElement("input", {
|
|
1689
1710
|
id: "fortune-img-upload",
|
|
1690
1711
|
className: "test-fortune-img-upload",
|
|
@@ -1197,4 +1197,8 @@ export declare function generateAPIs(context: Context, setContext: (recipe: (ctx
|
|
|
1197
1197
|
getRefs: () => any;
|
|
1198
1198
|
getShowDialog: () => typeof useDialog;
|
|
1199
1199
|
getSplitColComponent: () => import("react").FC<{}>;
|
|
1200
|
+
getConditionalFormatComponent: () => import("react").FC<{
|
|
1201
|
+
type?: string | undefined;
|
|
1202
|
+
context?: any;
|
|
1203
|
+
}>;
|
|
1200
1204
|
};
|
|
@@ -14,6 +14,7 @@ import _ from "lodash";
|
|
|
14
14
|
import { getCryptoPrice } from "../../utils/cryptoApi";
|
|
15
15
|
import { useDialog } from "../../hooks/useDialog";
|
|
16
16
|
import { SplitColumn } from "../../components/SplitColumn";
|
|
17
|
+
import ConditionRules from "../ConditionFormat/ConditionRules";
|
|
17
18
|
export function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY, globalCache, refs) {
|
|
18
19
|
return {
|
|
19
20
|
applyOp: function applyOp(ops) {
|
|
@@ -452,6 +453,9 @@ export function generateAPIs(context, setContext, handleUndo, handleRedo, settin
|
|
|
452
453
|
},
|
|
453
454
|
getSplitColComponent: function getSplitColComponent() {
|
|
454
455
|
return SplitColumn;
|
|
456
|
+
},
|
|
457
|
+
getConditionalFormatComponent: function getConditionalFormatComponent() {
|
|
458
|
+
return ConditionRules;
|
|
455
459
|
}
|
|
456
460
|
};
|
|
457
461
|
}
|
|
@@ -1204,5 +1204,9 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
|
|
|
1204
1204
|
getRefs: () => any;
|
|
1205
1205
|
getShowDialog: () => typeof import("../../hooks/useDialog").useDialog;
|
|
1206
1206
|
getSplitColComponent: () => React.FC<{}>;
|
|
1207
|
+
getConditionalFormatComponent: () => React.FC<{
|
|
1208
|
+
type?: string | undefined;
|
|
1209
|
+
context?: any;
|
|
1210
|
+
}>;
|
|
1207
1211
|
}>>;
|
|
1208
1212
|
export default Workbook;
|