@fileverse-dev/fortune-react 1.2.64-patch-6 → 1.2.64-patch-7

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/ConditionFormat/ConditionRules.d.ts +1 -0
  2. package/es/components/ConditionFormat/ConditionRules.js +254 -126
  3. package/es/components/ConditionFormat/formating.css +103 -0
  4. package/es/components/ConditionFormat/index.css +62 -5
  5. package/es/components/ConditionFormat/index.js +2 -4
  6. package/es/components/Toolbar/index.d.ts +1 -1
  7. package/lib/components/ConditionFormat/ConditionRules.d.ts +1 -0
  8. package/lib/components/ConditionFormat/ConditionRules.js +252 -125
  9. package/lib/components/ConditionFormat/formating.css +103 -0
  10. package/lib/components/ConditionFormat/index.css +62 -5
  11. package/lib/components/ConditionFormat/index.js +1 -3
  12. package/lib/components/Toolbar/index.d.ts +1 -1
  13. package/package.json +2 -2
package/es/components/ConditionFormat/index.css CHANGED
@@ -115,7 +115,7 @@
115
115
  }
116
116
 
117
117
  .condition-rules-set-title {
118
- margin: 6px 0px;
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: hsl(var(--color-bg-default));
153
- width: 2.5rem;
154
- height: 1.5rem;
155
- border-radius: 4px;
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
+ }
package/es/components/ConditionFormat/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useCallback, useContext, useEffect, useRef } from "react";
2
2
  import "./index.css";
3
- import { locale, updateItem } from "@fileverse-dev/fortune-core";
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";
@@ -227,9 +227,7 @@ var ConditionalFormat = function ConditionalFormat(_a) {
227
227
  padding: "6px 10px"
228
228
  },
229
229
  onClick: function onClick() {
230
- setContext(function (ctx) {
231
- updateItem(ctx, "delSheet");
232
- });
230
+ setContext(function (ctx) {});
233
231
  },
234
232
  tabIndex: 0
235
233
  }, conditionformat[v]);
package/es/components/Toolbar/index.d.ts CHANGED
@@ -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" | "Undo" | "Redo" | "PaintRoller" | "Bold" | "Italic" | "Strikethrough" | "Underline" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "PaintBucket" | "Border" | "MergeHorizontal" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis";
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;
package/lib/components/ConditionFormat/ConditionRules.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import "./index.css";
3
+ import "./formating.css";
3
4
  declare const ConditionRules: React.FC<{
4
5
  type?: string;
5
6
  context?: any;
package/lib/components/ConditionFormat/ConditionRules.js CHANGED
@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  require("./index.css");
10
+ var _ui = require("@fileverse/ui");
10
11
  var _fortuneCore = require("@fileverse-dev/fortune-core");
11
12
  var _helper = require("../SheetOverlay/helper");
13
+ require("./formating.css");
12
14
  var _immer = _interopRequireDefault(require("immer"));
13
- var _ui = require("@fileverse/ui");
14
15
  var _context = _interopRequireDefault(require("../../context"));
15
16
  var _useDialog = require("../../hooks/useDialog");
16
17
  var _getDisplayedRangeTxt = require("../DataVerification/getDisplayedRangeTxt");
@@ -27,6 +28,7 @@ var ConditionRules = function ConditionRules(_a) {
27
28
  var _c = (0, _react.useState)(false),
28
29
  create = _c[0],
29
30
  setCreate = _c[1];
31
+ var buttonClickCreateRef = (0, _react.useRef)(false);
30
32
  var _d = (0, _react.useState)([]),
31
33
  matchedConditionFormatKey = _d[0],
32
34
  setMatchedConditionFormatKey = _d[1];
@@ -46,27 +48,30 @@ var ConditionRules = function ConditionRules(_a) {
46
48
  }),
47
49
  colorRules = _g[0],
48
50
  setColorRules = _g[1];
51
+ var _h = (0, _react.useState)(false),
52
+ bold = _h[0],
53
+ setBold = _h[1];
54
+ var _j = (0, _react.useState)(false),
55
+ italic = _j[0],
56
+ setItalic = _j[1];
57
+ var _k = (0, _react.useState)(false),
58
+ underline = _k[0],
59
+ setUnderline = _k[1];
60
+ var _l = (0, _react.useState)(false),
61
+ strikethrough = _l[0],
62
+ setStrikethrough = _l[1];
49
63
  (0, _react.useEffect)(function () {
50
- console.log("c=======why", context);
51
- var index = (0, _fortuneCore.getSheetIndex)(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
52
- var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
53
- console.log("====whyallCondition", allCondition);
54
- }, [context]);
55
- (0, _react.useEffect)(function () {
56
- var _a, _b, _c, _d;
64
+ var _a, _b, _c;
57
65
  var index = (0, _fortuneCore.getSheetIndex)(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
58
66
  var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
59
67
  setAllConditionFormats(allCondition);
60
- console.log("allConditionFormats", allCondition, (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0], context);
61
- console.log("typed", context);
62
- var selectionColumn = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].column;
63
- var selectionRow = (_c = context.luckysheet_select_save) === null || _c === void 0 ? void 0 : _c[0].row;
68
+ var selectionColumn = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0].column;
69
+ var selectionRow = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].row;
64
70
  var matchedCondition = [];
65
71
  if (allCondition) {
66
72
  for (var key in allCondition) {
67
73
  var conditionFormat = allCondition[key];
68
- var range = (_d = conditionFormat.cellrange) === null || _d === void 0 ? void 0 : _d[0];
69
- console.log("rangeObj", conditionFormat, range);
74
+ var range = (_c = conditionFormat.cellrange) === null || _c === void 0 ? void 0 : _c[0];
70
75
  if (!range || !selectionColumn || !selectionRow) continue;
71
76
  var rangeColumns = range.column;
72
77
  var rangeRows = range.row;
@@ -78,9 +83,8 @@ var ConditionRules = function ConditionRules(_a) {
78
83
  }
79
84
  setMatchedConditionFormatKey(matchedCondition);
80
85
  }
81
- console.log("kkkkk", matchedConditionFormatKey, matchedCondition);
86
+ if (buttonClickCreateRef.current) return;
82
87
  if (matchedCondition.length === 0) {
83
- console.log('whyyyyyyy');
84
88
  setCreate(true);
85
89
  } else if (matchedCondition.length > 0) {
86
90
  setCreate(false);
@@ -99,15 +103,26 @@ var ConditionRules = function ConditionRules(_a) {
99
103
  }, [colorRules.cellColor, colorRules.textColor, hideDialog, setContext]);
100
104
  var close = (0, _react.useCallback)(function (closeType) {
101
105
  if (closeType === "confirm") {
106
+ buttonClickCreateRef.current = false;
107
+ setCreate(false);
102
108
  setContext(function (ctx) {
103
109
  ctx.conditionRules.textColor.color = colorRules.textColor;
104
110
  ctx.conditionRules.cellColor.color = colorRules.cellColor;
111
+ ctx.conditionRules.font = {
112
+ bold: bold,
113
+ italic: italic,
114
+ underline: underline,
115
+ strikethrough: strikethrough
116
+ };
105
117
  (0, _fortuneCore.setConditionRules)(ctx, protection, generalDialog, conditionformat, ctx.conditionRules);
106
118
  });
119
+ } else {
120
+ buttonClickCreateRef.current = true;
121
+ setCreate(false);
107
122
  }
108
123
  setContext(function (ctx) {
109
124
  ctx.conditionRules = {
110
- rulesType: "",
125
+ rulesType: "greaterThan",
111
126
  rulesValue: "",
112
127
  textColor: {
113
128
  check: true,
@@ -117,6 +132,12 @@ var ConditionRules = function ConditionRules(_a) {
117
132
  check: true,
118
133
  color: "#000000"
119
134
  },
135
+ font: {
136
+ bold: false,
137
+ italic: false,
138
+ underline: false,
139
+ strikethrough: false
140
+ },
120
141
  betweenValue: {
121
142
  value1: "",
122
143
  value2: ""
@@ -127,16 +148,7 @@ var ConditionRules = function ConditionRules(_a) {
127
148
  };
128
149
  });
129
150
  hideDialog();
130
- }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext]);
131
- (0, _react.useEffect)(function () {
132
- console.log("add mouseDown listener", window);
133
- window.addEventListener("mouseDown", function (e) {
134
- var _a, _b;
135
- var selectionColumn = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0].column;
136
- var selectionRow = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].row;
137
- console.log("mouseDown", selectionColumn, selectionRow, context);
138
- });
139
- }, [type]);
151
+ }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext, bold, italic, underline, strikethrough]);
140
152
  (0, _react.useEffect)(function () {
141
153
  setContext(function (ctx) {
142
154
  ctx.conditionRules.rulesType = type;
@@ -161,6 +173,12 @@ var ConditionRules = function ConditionRules(_a) {
161
173
  check: true,
162
174
  color: "#000000"
163
175
  },
176
+ font: {
177
+ bold: false,
178
+ italic: false,
179
+ underline: false,
180
+ strikethrough: false
181
+ },
164
182
  betweenValue: {
165
183
  value1: "",
166
184
  value2: ""
@@ -237,46 +255,123 @@ var ConditionRules = function ConditionRules(_a) {
237
255
  var titleType = type === "top10_percent" ? "top10" : type === "last10_percent" ? "last10" : type;
238
256
  return /*#__PURE__*/_react.default.createElement("div", {
239
257
  className: "condition-rules"
240
- }, !create ? (/*#__PURE__*/_react.default.createElement("div", null, matchedConditionFormatKey.map(function (key) {
258
+ }, !create ? (/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
259
+ style: {
260
+ marginBottom: "16px"
261
+ }
262
+ }, matchedConditionFormatKey.map(function (key) {
241
263
  var _a, _b;
242
264
  return /*#__PURE__*/_react.default.createElement("div", {
243
- className: "flex items-center gap-6 py-6 border-b border-gray-200 last:border-b-0",
265
+ className: "group flex items-center border-b border-gray-200 last:border-b-0 condition-list-parent",
244
266
  key: key
245
267
  }, /*#__PURE__*/_react.default.createElement("div", {
246
- className: "flex items-center justify-center !w-40 !h-40 rounded-3xl !bg-[".concat(allConditionFormats[key].format.cellColor || "", "]"),
268
+ className: "condition-list-pill",
247
269
  style: {
248
- backgroundColor: allConditionFormats[key].format.cellColor || "",
249
- width: '44px',
250
- height: '56px'
270
+ backgroundColor: allConditionFormats[key].format.cellColor || ""
251
271
  }
252
272
  }, /*#__PURE__*/_react.default.createElement("span", {
253
- className: "text-6xl font-bold !text-[".concat(allConditionFormats[key].format.textColor || "", "] pb-1")
273
+ className: "condition-list-text",
274
+ style: {
275
+ color: allConditionFormats[key].format.textColor || ""
276
+ }
254
277
  }, "123")), /*#__PURE__*/_react.default.createElement("div", {
255
- className: "flex flex-col"
278
+ className: "flex flex-col",
279
+ style: {
280
+ width: '200px',
281
+ padding: '8px 0px'
282
+ }
256
283
  }, /*#__PURE__*/_react.default.createElement("h3", {
257
- className: "text-4xl font-normal text-gray-900 mb-2"
284
+ className: "condition-list-type"
258
285
  }, conditionformat[allConditionFormats[key].conditionName], ' ', (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/_react.default.createElement("p", {
259
- className: "text-3xl text-gray-400"
286
+ className: "condition-list-range"
260
287
  }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
261
288
  var startCol = (0, _helper.numberToColumn)(range.column[0] + 1);
262
289
  var endCol = (0, _helper.numberToColumn)(range.column[1] + 1);
263
290
  var startRow = range.row[0] + 1;
264
291
  var endRow = range.row[1] + 1;
265
292
  return "".concat(startCol).concat(startRow, ":").concat(endCol).concat(endRow);
266
- }).join(", "))));
267
- }), /*#__PURE__*/_react.default.createElement(_ui.Button, {
293
+ }).join(", "))), /*#__PURE__*/_react.default.createElement("div", {
294
+ className: "opacity-0 group-hover:opacity-100 transition-opacity"
295
+ }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
296
+ elevation: 1,
297
+ icon: "Trash2",
298
+ size: "md",
299
+ variant: "secondary",
300
+ style: {
301
+ border: '0px',
302
+ boxShadow: 'none',
303
+ color: 'hsl(var(--color-icon-secondary))'
304
+ },
305
+ onClick: function onClick() {
306
+ setContext(function (ctx) {
307
+ var index = (0, _fortuneCore.getSheetIndex)(ctx, ctx.currentSheetId);
308
+ var ruleArr = ctx.luckysheetfile[index].luckysheet_conditionformat_save || [];
309
+ ruleArr.splice(ruleArr.findIndex(function (item) {
310
+ return item.type === key;
311
+ }), 1);
312
+ ctx.luckysheetfile[index].luckysheet_conditionformat_save = ruleArr;
313
+ return ctx;
314
+ });
315
+ }
316
+ })));
317
+ })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
268
318
  size: "md",
269
319
  variant: "secondary",
270
320
  onClick: function onClick() {
271
321
  setCreate(true);
322
+ buttonClickCreateRef.current = true;
272
323
  }
273
- }, "Create New Condition Format"))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/_react.default.createElement("div", {
324
+ }, "Create New Condition Format"))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
274
325
  className: "flex flex-col"
275
326
  }, /*#__PURE__*/_react.default.createElement("div", {
276
327
  className: "condition-rules-value text-heading-xsm"
277
- }, conditionformat["conditionformat_".concat(titleType, "_title")]), (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/_react.default.createElement("div", {
328
+ }, conditionformat.applyRange, " range"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
329
+ rightIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
330
+ name: "Grid2x2",
331
+ size: "sm",
332
+ onClick: function onClick() {
333
+ dataSelectRange("conditionRules".concat(type));
334
+ }
335
+ }),
336
+ "aria-hidden": "true",
337
+ readOnly: true,
338
+ placeholder: conditionformat.selectRange,
339
+ value: (0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context),
340
+ onClick: function onClick() {
341
+ dataSelectRange("conditionRules".concat(type));
342
+ }
343
+ })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
344
+ className: "condition-rules-value text-heading-xsm"
345
+ }, "Format cells if"), /*#__PURE__*/_react.default.createElement(_ui.Select, {
346
+ value: type,
347
+ onValueChange: function onValueChange(value) {
348
+ setType(value);
349
+ }
350
+ }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, null, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null, /*#__PURE__*/_react.default.createElement("div", {
351
+ className: "flex items-center gap-2"
352
+ }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[type])))), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, {
353
+ position: "popper",
354
+ side: "bottom",
355
+ align: "start",
356
+ sideOffset: 4,
357
+ className: "z-[100]",
358
+ "data-dropdown-content": "true"
359
+ }, conditionList.map(function (option) {
360
+ return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
361
+ key: option.value,
362
+ value: option.text
363
+ }, /*#__PURE__*/_react.default.createElement("div", {
364
+ className: "flex items-center gap-2"
365
+ }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[option.text])));
366
+ })))), !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/_react.default.createElement("div", {
367
+ className: "flex flex-col"
368
+ }, (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/_react.default.createElement("div", {
278
369
  className: "w-full"
279
370
  }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
371
+ placeholder: "Value",
372
+ onKeyDown: function onKeyDown(e) {
373
+ e.stopPropagation();
374
+ },
280
375
  value: context.conditionRules.rulesValue,
281
376
  onChange: function onChange(e) {
282
377
  var value = e.target.value;
@@ -289,6 +384,9 @@ var ConditionRules = function ConditionRules(_a) {
289
384
  }, /*#__PURE__*/_react.default.createElement("div", {
290
385
  className: "w-full"
291
386
  }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
387
+ onKeyDown: function onKeyDown(e) {
388
+ e.stopPropagation();
389
+ },
292
390
  placeholder: "From",
293
391
  value: context.conditionRules.betweenValue.value1,
294
392
  onChange: function onChange(e) {
@@ -300,6 +398,9 @@ var ConditionRules = function ConditionRules(_a) {
300
398
  })), /*#__PURE__*/_react.default.createElement("div", {
301
399
  className: "w-full"
302
400
  }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
401
+ onKeyDown: function onKeyDown(e) {
402
+ e.stopPropagation();
403
+ },
303
404
  placeholder: "To",
304
405
  value: context.conditionRules.betweenValue.value2,
305
406
  onChange: function onChange(e) {
@@ -351,6 +452,10 @@ var ConditionRules = function ConditionRules(_a) {
351
452
  });
352
453
  }
353
454
  }), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
455
+ placeholder: "Value",
456
+ onKeyDown: function onKeyDown(e) {
457
+ e.stopPropagation();
458
+ },
354
459
  className: "condition-rules-project-input pr-0",
355
460
  type: "number",
356
461
  min: 1,
@@ -378,74 +483,99 @@ var ConditionRules = function ConditionRules(_a) {
378
483
  ctx.conditionRules.projectValue = String(current + 1);
379
484
  });
380
485
  }
381
- })))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
382
- className: "condition-rules-value text-heading-xsm"
383
- }, "Cell(s) format if"), /*#__PURE__*/_react.default.createElement(_ui.Select, {
384
- value: type,
385
- onValueChange: function onValueChange(value) {
386
- console.log(value);
387
- setType(value);
388
- }
389
- }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, null, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null, /*#__PURE__*/_react.default.createElement("div", {
390
- className: "flex items-center gap-2"
391
- }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[type])))), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, {
392
- position: "popper",
393
- side: "bottom",
394
- align: "start",
395
- sideOffset: 4,
396
- className: "z-[100]",
397
- "data-dropdown-content": "true"
398
- }, conditionList.map(function (option) {
399
- return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
400
- key: option.value,
401
- value: option.text
402
- }, /*#__PURE__*/_react.default.createElement("div", {
403
- className: "flex items-center gap-2"
404
- }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[option.text])));
405
- })))), /*#__PURE__*/_react.default.createElement("div", {
406
- className: "flex flex-col"
407
- }, /*#__PURE__*/_react.default.createElement("div", {
408
- className: "condition-rules-value text-heading-xsm"
409
- }, conditionformat.applyRange), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
410
- rightIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
411
- name: "Grid2x2",
412
- size: "sm",
413
- onClick: function onClick() {
414
- dataSelectRange("conditionRules".concat(type));
415
- }
416
- }),
417
- "aria-hidden": "true",
418
- readOnly: true,
419
- placeholder: conditionformat.selectRange,
420
- value: (0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context),
421
- onClick: function onClick() {
422
- dataSelectRange("conditionRules".concat(type));
423
- }
424
- })), /*#__PURE__*/_react.default.createElement("div", {
486
+ })))))), /*#__PURE__*/_react.default.createElement("div", {
425
487
  className: "flex flex-col"
426
488
  }, /*#__PURE__*/_react.default.createElement("div", {
427
489
  className: "condition-rules-set-title text-heading-xsm"
428
- }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/_react.default.createElement("div", {
429
- className: "condition-rules-setbox"
490
+ }, "Formatting styles"), /*#__PURE__*/_react.default.createElement("div", {
491
+ className: "toolbar-container"
430
492
  }, /*#__PURE__*/_react.default.createElement("div", {
431
- className: "condition-rules-set"
493
+ className: "toolbar-header"
494
+ }, /*#__PURE__*/_react.default.createElement("h2", {
495
+ className: "toolbar-title"
496
+ }, "Formatting styles preview")), /*#__PURE__*/_react.default.createElement("div", {
497
+ className: "toolbar-content"
498
+ }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
499
+ variant: "ghost",
500
+ onClick: function onClick() {
501
+ return setBold(!bold);
502
+ },
503
+ className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
504
+ style: {
505
+ width: 30,
506
+ height: 30,
507
+ backgroundColor: bold ? "hsl(var(--color-bg-default-selected))" : ""
508
+ }
509
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
510
+ name: "Bold"
511
+ })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
512
+ variant: "ghost",
513
+ onClick: function onClick() {
514
+ return setItalic(!italic);
515
+ },
516
+ className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
517
+ style: {
518
+ width: 30,
519
+ height: 30
520
+ }
521
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
522
+ name: "Italic"
523
+ })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
524
+ variant: "ghost",
525
+ onClick: function onClick() {
526
+ return setUnderline(!underline);
527
+ },
528
+ className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
529
+ style: {
530
+ width: 30,
531
+ height: 30
532
+ }
533
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
534
+ name: "Underline"
535
+ })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
536
+ variant: "ghost",
537
+ onClick: function onClick() {
538
+ return setStrikethrough(!strikethrough);
539
+ },
540
+ className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
541
+ style: {
542
+ width: 30,
543
+ height: 30
544
+ }
545
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
546
+ name: "Strikethrough"
547
+ })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
548
+ variant: "ghost",
549
+ className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
550
+ style: {
551
+ width: 30,
552
+ height: 30
553
+ }
432
554
  }, /*#__PURE__*/_react.default.createElement("div", {
433
- className: "condition-rules-color"
434
- }, /*#__PURE__*/_react.default.createElement("span", {
435
- id: "checkTextColor"
436
- }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
437
- className: "border-2",
438
- checked: context.conditionRules.textColor.check,
439
- onCheckedChange: function onCheckedChange(e) {
440
- var checked = e.target.checked;
441
- setContext(function (ctx) {
442
- ctx.conditionRules.textColor.check = checked;
443
- });
555
+ style: {
556
+ display: 'flex',
557
+ flexDirection: 'column',
558
+ alignItems: 'center'
444
559
  }
445
- })), /*#__PURE__*/_react.default.createElement("label", {
446
- htmlFor: "checkTextColor",
447
- className: "condition-rules-label"
448
- }, conditionformat.textColor), /*#__PURE__*/_react.default.createElement("input", {
560
+ }, /*#__PURE__*/_react.default.createElement("svg", {
561
+ xmlns: "http://www.w3.org/2000/svg",
562
+ width: "24",
563
+ height: "24",
564
+ viewBox: "0 0 24 24",
565
+ fill: "none",
566
+ stroke: "currentColor",
567
+ "stroke-width": "2",
568
+ "stroke-linecap": "round",
569
+ "stroke-linejoin": "round",
570
+ className: "lucide lucide-spell-check2-icon lucide-spell-check-2"
571
+ }, /*#__PURE__*/_react.default.createElement("path", {
572
+ d: "m5 18 6-12 6 12"
573
+ }), /*#__PURE__*/_react.default.createElement("path", {
574
+ d: "M7 14h8"
575
+ })), /*#__PURE__*/_react.default.createElement("input", {
576
+ style: {
577
+ marginBottom: "4px"
578
+ },
449
579
  type: "color",
450
580
  className: "condition-rules-select-color",
451
581
  value: colorRules.textColor,
@@ -455,25 +585,21 @@ var ConditionRules = function ConditionRules(_a) {
455
585
  draft.textColor = value;
456
586
  }));
457
587
  }
458
- }))), /*#__PURE__*/_react.default.createElement("div", {
459
- className: "condition-rules-set"
588
+ })))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
589
+ variant: "ghost",
590
+ className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
591
+ style: {
592
+ width: 30,
593
+ height: 30
594
+ }
460
595
  }, /*#__PURE__*/_react.default.createElement("div", {
461
- className: "condition-rules-color"
462
- }, /*#__PURE__*/_react.default.createElement("span", {
463
- id: "checkCellColor"
464
- }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
465
- className: "border-2",
466
- checked: context.conditionRules.cellColor.check,
467
- onCheckedChange: function onCheckedChange(e) {
468
- var checked = e.target.checked;
469
- setContext(function (ctx) {
470
- ctx.conditionRules.cellColor.check = checked;
471
- });
596
+ style: {
597
+ display: 'flex',
598
+ flexDirection: 'column'
472
599
  }
473
- })), /*#__PURE__*/_react.default.createElement("label", {
474
- htmlFor: "checkCellColor",
475
- className: "condition-rules-label"
476
- }, conditionformat.cellColor), /*#__PURE__*/_react.default.createElement("input", {
600
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
601
+ name: "PaintBucket"
602
+ }), /*#__PURE__*/_react.default.createElement("input", {
477
603
  type: "color",
478
604
  className: "condition-rules-select-color",
479
605
  value: colorRules.cellColor,
@@ -483,10 +609,11 @@ var ConditionRules = function ConditionRules(_a) {
483
609
  draft.cellColor = value;
484
610
  }));
485
611
  }
486
- }))))), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
487
- className: "w-full border-t-[1px]"
488
- }), /*#__PURE__*/_react.default.createElement("div", {
489
- className: "flex gap-2 justify-end"
612
+ }))))))), /*#__PURE__*/_react.default.createElement("div", {
613
+ className: "flex gap-2 justify-end",
614
+ style: {
615
+ marginTop: "8px"
616
+ }
490
617
  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
491
618
  variant: "secondary",
492
619
  style: {
@@ -505,6 +632,6 @@ var ConditionRules = function ConditionRules(_a) {
505
632
  close("confirm");
506
633
  },
507
634
  tabIndex: 0
508
- }, button.apply)))));
635
+ }, "Create rule")))));
509
636
  };
510
637
  var _default = exports.default = ConditionRules;