@fileverse-dev/fortune-react 1.2.64-patch-5 → 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 -127
  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 -126
  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,28 +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);
64
+ var _a, _b, _c;
51
65
  var index = (0, _fortuneCore.getSheetIndex)(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
52
66
  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;
57
- var index = (0, _fortuneCore.getSheetIndex)(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
58
- var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
59
- if (allCondition && (allCondition === null || allCondition === void 0 ? void 0 : allCondition.length) === (allConditionFormats === null || allConditionFormats === void 0 ? void 0 : allConditionFormats.length)) return;
60
67
  setAllConditionFormats(allCondition);
61
- console.log("allConditionFormats", allCondition, (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0], context);
62
- console.log("typed", context);
63
- var selectionColumn = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].column;
64
- 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;
65
70
  var matchedCondition = [];
66
71
  if (allCondition) {
67
72
  for (var key in allCondition) {
68
73
  var conditionFormat = allCondition[key];
69
- var range = (_d = conditionFormat.cellrange) === null || _d === void 0 ? void 0 : _d[0];
70
- console.log("rangeObj", conditionFormat, range);
74
+ var range = (_c = conditionFormat.cellrange) === null || _c === void 0 ? void 0 : _c[0];
71
75
  if (!range || !selectionColumn || !selectionRow) continue;
72
76
  var rangeColumns = range.column;
73
77
  var rangeRows = range.row;
@@ -79,9 +83,8 @@ var ConditionRules = function ConditionRules(_a) {
79
83
  }
80
84
  setMatchedConditionFormatKey(matchedCondition);
81
85
  }
82
- console.log("kkkkk", matchedConditionFormatKey, matchedCondition);
86
+ if (buttonClickCreateRef.current) return;
83
87
  if (matchedCondition.length === 0) {
84
- console.log('whyyyyyyy');
85
88
  setCreate(true);
86
89
  } else if (matchedCondition.length > 0) {
87
90
  setCreate(false);
@@ -100,15 +103,26 @@ var ConditionRules = function ConditionRules(_a) {
100
103
  }, [colorRules.cellColor, colorRules.textColor, hideDialog, setContext]);
101
104
  var close = (0, _react.useCallback)(function (closeType) {
102
105
  if (closeType === "confirm") {
106
+ buttonClickCreateRef.current = false;
107
+ setCreate(false);
103
108
  setContext(function (ctx) {
104
109
  ctx.conditionRules.textColor.color = colorRules.textColor;
105
110
  ctx.conditionRules.cellColor.color = colorRules.cellColor;
111
+ ctx.conditionRules.font = {
112
+ bold: bold,
113
+ italic: italic,
114
+ underline: underline,
115
+ strikethrough: strikethrough
116
+ };
106
117
  (0, _fortuneCore.setConditionRules)(ctx, protection, generalDialog, conditionformat, ctx.conditionRules);
107
118
  });
119
+ } else {
120
+ buttonClickCreateRef.current = true;
121
+ setCreate(false);
108
122
  }
109
123
  setContext(function (ctx) {
110
124
  ctx.conditionRules = {
111
- rulesType: "",
125
+ rulesType: "greaterThan",
112
126
  rulesValue: "",
113
127
  textColor: {
114
128
  check: true,
@@ -118,6 +132,12 @@ var ConditionRules = function ConditionRules(_a) {
118
132
  check: true,
119
133
  color: "#000000"
120
134
  },
135
+ font: {
136
+ bold: false,
137
+ italic: false,
138
+ underline: false,
139
+ strikethrough: false
140
+ },
121
141
  betweenValue: {
122
142
  value1: "",
123
143
  value2: ""
@@ -128,16 +148,7 @@ var ConditionRules = function ConditionRules(_a) {
128
148
  };
129
149
  });
130
150
  hideDialog();
131
- }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext]);
132
- (0, _react.useEffect)(function () {
133
- console.log("add mouseDown listener", window);
134
- window.addEventListener("mouseDown", function (e) {
135
- var _a, _b;
136
- var selectionColumn = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0].column;
137
- var selectionRow = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].row;
138
- console.log("mouseDown", selectionColumn, selectionRow, context);
139
- });
140
- }, [type]);
151
+ }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext, bold, italic, underline, strikethrough]);
141
152
  (0, _react.useEffect)(function () {
142
153
  setContext(function (ctx) {
143
154
  ctx.conditionRules.rulesType = type;
@@ -162,6 +173,12 @@ var ConditionRules = function ConditionRules(_a) {
162
173
  check: true,
163
174
  color: "#000000"
164
175
  },
176
+ font: {
177
+ bold: false,
178
+ italic: false,
179
+ underline: false,
180
+ strikethrough: false
181
+ },
165
182
  betweenValue: {
166
183
  value1: "",
167
184
  value2: ""
@@ -238,46 +255,123 @@ var ConditionRules = function ConditionRules(_a) {
238
255
  var titleType = type === "top10_percent" ? "top10" : type === "last10_percent" ? "last10" : type;
239
256
  return /*#__PURE__*/_react.default.createElement("div", {
240
257
  className: "condition-rules"
241
- }, !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) {
242
263
  var _a, _b;
243
264
  return /*#__PURE__*/_react.default.createElement("div", {
244
- 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",
245
266
  key: key
246
267
  }, /*#__PURE__*/_react.default.createElement("div", {
247
- className: "flex items-center justify-center !w-40 !h-40 rounded-3xl !bg-[".concat(allConditionFormats[key].format.cellColor || "", "]"),
268
+ className: "condition-list-pill",
248
269
  style: {
249
- backgroundColor: allConditionFormats[key].format.cellColor || "",
250
- width: '44px',
251
- height: '56px'
270
+ backgroundColor: allConditionFormats[key].format.cellColor || ""
252
271
  }
253
272
  }, /*#__PURE__*/_react.default.createElement("span", {
254
- 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
+ }
255
277
  }, "123")), /*#__PURE__*/_react.default.createElement("div", {
256
- className: "flex flex-col"
278
+ className: "flex flex-col",
279
+ style: {
280
+ width: '200px',
281
+ padding: '8px 0px'
282
+ }
257
283
  }, /*#__PURE__*/_react.default.createElement("h3", {
258
- className: "text-4xl font-normal text-gray-900 mb-2"
284
+ className: "condition-list-type"
259
285
  }, conditionformat[allConditionFormats[key].conditionName], ' ', (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/_react.default.createElement("p", {
260
- className: "text-3xl text-gray-400"
286
+ className: "condition-list-range"
261
287
  }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
262
288
  var startCol = (0, _helper.numberToColumn)(range.column[0] + 1);
263
289
  var endCol = (0, _helper.numberToColumn)(range.column[1] + 1);
264
290
  var startRow = range.row[0] + 1;
265
291
  var endRow = range.row[1] + 1;
266
292
  return "".concat(startCol).concat(startRow, ":").concat(endCol).concat(endRow);
267
- }).join(", "))));
268
- }), /*#__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, {
269
318
  size: "md",
270
319
  variant: "secondary",
271
320
  onClick: function onClick() {
272
321
  setCreate(true);
322
+ buttonClickCreateRef.current = true;
273
323
  }
274
- }, "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", {
275
325
  className: "flex flex-col"
276
326
  }, /*#__PURE__*/_react.default.createElement("div", {
277
327
  className: "condition-rules-value text-heading-xsm"
278
- }, 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", {
279
369
  className: "w-full"
280
370
  }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
371
+ placeholder: "Value",
372
+ onKeyDown: function onKeyDown(e) {
373
+ e.stopPropagation();
374
+ },
281
375
  value: context.conditionRules.rulesValue,
282
376
  onChange: function onChange(e) {
283
377
  var value = e.target.value;
@@ -290,6 +384,9 @@ var ConditionRules = function ConditionRules(_a) {
290
384
  }, /*#__PURE__*/_react.default.createElement("div", {
291
385
  className: "w-full"
292
386
  }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
387
+ onKeyDown: function onKeyDown(e) {
388
+ e.stopPropagation();
389
+ },
293
390
  placeholder: "From",
294
391
  value: context.conditionRules.betweenValue.value1,
295
392
  onChange: function onChange(e) {
@@ -301,6 +398,9 @@ var ConditionRules = function ConditionRules(_a) {
301
398
  })), /*#__PURE__*/_react.default.createElement("div", {
302
399
  className: "w-full"
303
400
  }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
401
+ onKeyDown: function onKeyDown(e) {
402
+ e.stopPropagation();
403
+ },
304
404
  placeholder: "To",
305
405
  value: context.conditionRules.betweenValue.value2,
306
406
  onChange: function onChange(e) {
@@ -352,6 +452,10 @@ var ConditionRules = function ConditionRules(_a) {
352
452
  });
353
453
  }
354
454
  }), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
455
+ placeholder: "Value",
456
+ onKeyDown: function onKeyDown(e) {
457
+ e.stopPropagation();
458
+ },
355
459
  className: "condition-rules-project-input pr-0",
356
460
  type: "number",
357
461
  min: 1,
@@ -379,74 +483,99 @@ var ConditionRules = function ConditionRules(_a) {
379
483
  ctx.conditionRules.projectValue = String(current + 1);
380
484
  });
381
485
  }
382
- })))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
383
- className: "condition-rules-value text-heading-xsm"
384
- }, "Cell(s) format if"), /*#__PURE__*/_react.default.createElement(_ui.Select, {
385
- value: type,
386
- onValueChange: function onValueChange(value) {
387
- console.log(value);
388
- setType(value);
389
- }
390
- }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, null, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null, /*#__PURE__*/_react.default.createElement("div", {
391
- className: "flex items-center gap-2"
392
- }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[type])))), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, {
393
- position: "popper",
394
- side: "bottom",
395
- align: "start",
396
- sideOffset: 4,
397
- className: "z-[100]",
398
- "data-dropdown-content": "true"
399
- }, conditionList.map(function (option) {
400
- return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
401
- key: option.value,
402
- value: option.text
403
- }, /*#__PURE__*/_react.default.createElement("div", {
404
- className: "flex items-center gap-2"
405
- }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[option.text])));
406
- })))), /*#__PURE__*/_react.default.createElement("div", {
407
- className: "flex flex-col"
408
- }, /*#__PURE__*/_react.default.createElement("div", {
409
- className: "condition-rules-value text-heading-xsm"
410
- }, conditionformat.applyRange), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
411
- rightIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
412
- name: "Grid2x2",
413
- size: "sm",
414
- onClick: function onClick() {
415
- dataSelectRange("conditionRules".concat(type));
416
- }
417
- }),
418
- "aria-hidden": "true",
419
- readOnly: true,
420
- placeholder: conditionformat.selectRange,
421
- value: (0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context),
422
- onClick: function onClick() {
423
- dataSelectRange("conditionRules".concat(type));
424
- }
425
- })), /*#__PURE__*/_react.default.createElement("div", {
486
+ })))))), /*#__PURE__*/_react.default.createElement("div", {
426
487
  className: "flex flex-col"
427
488
  }, /*#__PURE__*/_react.default.createElement("div", {
428
489
  className: "condition-rules-set-title text-heading-xsm"
429
- }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/_react.default.createElement("div", {
430
- className: "condition-rules-setbox"
490
+ }, "Formatting styles"), /*#__PURE__*/_react.default.createElement("div", {
491
+ className: "toolbar-container"
431
492
  }, /*#__PURE__*/_react.default.createElement("div", {
432
- 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
+ }
433
554
  }, /*#__PURE__*/_react.default.createElement("div", {
434
- className: "condition-rules-color"
435
- }, /*#__PURE__*/_react.default.createElement("span", {
436
- id: "checkTextColor"
437
- }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
438
- className: "border-2",
439
- checked: context.conditionRules.textColor.check,
440
- onCheckedChange: function onCheckedChange(e) {
441
- var checked = e.target.checked;
442
- setContext(function (ctx) {
443
- ctx.conditionRules.textColor.check = checked;
444
- });
555
+ style: {
556
+ display: 'flex',
557
+ flexDirection: 'column',
558
+ alignItems: 'center'
445
559
  }
446
- })), /*#__PURE__*/_react.default.createElement("label", {
447
- htmlFor: "checkTextColor",
448
- className: "condition-rules-label"
449
- }, 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
+ },
450
579
  type: "color",
451
580
  className: "condition-rules-select-color",
452
581
  value: colorRules.textColor,
@@ -456,25 +585,21 @@ var ConditionRules = function ConditionRules(_a) {
456
585
  draft.textColor = value;
457
586
  }));
458
587
  }
459
- }))), /*#__PURE__*/_react.default.createElement("div", {
460
- 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
+ }
461
595
  }, /*#__PURE__*/_react.default.createElement("div", {
462
- className: "condition-rules-color"
463
- }, /*#__PURE__*/_react.default.createElement("span", {
464
- id: "checkCellColor"
465
- }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
466
- className: "border-2",
467
- checked: context.conditionRules.cellColor.check,
468
- onCheckedChange: function onCheckedChange(e) {
469
- var checked = e.target.checked;
470
- setContext(function (ctx) {
471
- ctx.conditionRules.cellColor.check = checked;
472
- });
596
+ style: {
597
+ display: 'flex',
598
+ flexDirection: 'column'
473
599
  }
474
- })), /*#__PURE__*/_react.default.createElement("label", {
475
- htmlFor: "checkCellColor",
476
- className: "condition-rules-label"
477
- }, conditionformat.cellColor), /*#__PURE__*/_react.default.createElement("input", {
600
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
601
+ name: "PaintBucket"
602
+ }), /*#__PURE__*/_react.default.createElement("input", {
478
603
  type: "color",
479
604
  className: "condition-rules-select-color",
480
605
  value: colorRules.cellColor,
@@ -484,10 +609,11 @@ var ConditionRules = function ConditionRules(_a) {
484
609
  draft.cellColor = value;
485
610
  }));
486
611
  }
487
- }))))), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
488
- className: "w-full border-t-[1px]"
489
- }), /*#__PURE__*/_react.default.createElement("div", {
490
- 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
+ }
491
617
  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
492
618
  variant: "secondary",
493
619
  style: {
@@ -506,6 +632,6 @@ var ConditionRules = function ConditionRules(_a) {
506
632
  close("confirm");
507
633
  },
508
634
  tabIndex: 0
509
- }, button.apply)))));
635
+ }, "Create rule")))));
510
636
  };
511
637
  var _default = exports.default = ConditionRules;