@fileverse-dev/fortune-react 1.1.90 → 1.1.91
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/DataVerification/ColorPicker.d.ts +9 -0
- package/es/components/DataVerification/ColorPicker.js +98 -0
- package/es/components/DataVerification/DropdownList.js +22 -7
- package/es/components/DataVerification/DropdownOption.d.ts +11 -0
- package/es/components/DataVerification/DropdownOption.js +264 -0
- package/es/components/DataVerification/index.css +4 -0
- package/es/components/DataVerification/index.js +62 -14
- package/es/components/SheetOverlay/drag_and_drop/column-helpers.js +0 -2
- package/es/components/SheetOverlay/drag_and_drop/row-helpers.js +0 -2
- package/es/components/SheetOverlay/index.js +1 -6
- package/es/components/Toolbar/index.js +47 -44
- package/lib/components/DataVerification/ColorPicker.d.ts +9 -0
- package/lib/components/DataVerification/ColorPicker.js +106 -0
- package/lib/components/DataVerification/DropdownList.js +22 -7
- package/lib/components/DataVerification/DropdownOption.d.ts +11 -0
- package/lib/components/DataVerification/DropdownOption.js +271 -0
- package/lib/components/DataVerification/index.css +4 -0
- package/lib/components/DataVerification/index.js +61 -13
- package/lib/components/SheetOverlay/drag_and_drop/column-helpers.js +0 -2
- package/lib/components/SheetOverlay/drag_and_drop/row-helpers.js +0 -2
- package/lib/components/SheetOverlay/index.js +1 -6
- package/lib/components/Toolbar/index.js +47 -44
- package/package.json +2 -2
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { ChevronDown } from "lucide-react";
|
|
3
|
+
import { Popover, PopoverContent, PopoverTrigger } from "@fileverse/ui";
|
|
4
|
+
export var TEXT_COLORS = [{
|
|
5
|
+
name: "Light Gray",
|
|
6
|
+
value: "228, 232, 237"
|
|
7
|
+
}, {
|
|
8
|
+
name: "White",
|
|
9
|
+
value: "249, 249, 249"
|
|
10
|
+
}, {
|
|
11
|
+
name: "Pink",
|
|
12
|
+
value: "244, 217, 227"
|
|
13
|
+
}, {
|
|
14
|
+
name: "Peach",
|
|
15
|
+
value: "247, 229, 207"
|
|
16
|
+
}, {
|
|
17
|
+
name: "Blue",
|
|
18
|
+
value: "217, 234, 244"
|
|
19
|
+
}, {
|
|
20
|
+
name: "Green",
|
|
21
|
+
value: "222, 239, 222"
|
|
22
|
+
}, {
|
|
23
|
+
name: "Light Green",
|
|
24
|
+
value: "239, 239, 239"
|
|
25
|
+
}, {
|
|
26
|
+
name: "Rose",
|
|
27
|
+
value: "244, 230, 230"
|
|
28
|
+
}, {
|
|
29
|
+
name: "Yellow",
|
|
30
|
+
value: "247, 239, 217"
|
|
31
|
+
}, {
|
|
32
|
+
name: "Purple",
|
|
33
|
+
value: "230, 230, 244"
|
|
34
|
+
}, {
|
|
35
|
+
name: "Cyan",
|
|
36
|
+
value: "217, 244, 244"
|
|
37
|
+
}, {
|
|
38
|
+
name: "Cream",
|
|
39
|
+
value: "244, 239, 234"
|
|
40
|
+
}];
|
|
41
|
+
export var ColorSection = function ColorSection(_a) {
|
|
42
|
+
var onPick = _a.onPick,
|
|
43
|
+
trigerColor = _a.trigerColor;
|
|
44
|
+
var _b = useState(false),
|
|
45
|
+
isOpen = _b[0],
|
|
46
|
+
setIsOpen = _b[1];
|
|
47
|
+
return /*#__PURE__*/React.createElement(Popover, {
|
|
48
|
+
open: isOpen,
|
|
49
|
+
onOpenChange: function onOpenChange(open) {
|
|
50
|
+
setIsOpen(open);
|
|
51
|
+
}
|
|
52
|
+
}, /*#__PURE__*/React.createElement(PopoverTrigger, {
|
|
53
|
+
className: "hover:bg-red",
|
|
54
|
+
style: {
|
|
55
|
+
backgroundColor: "red!important"
|
|
56
|
+
}
|
|
57
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
58
|
+
className: "flex items-center justify-between color-picker rounded transition-all cursor-pointer border border-gray-300",
|
|
59
|
+
style: {
|
|
60
|
+
padding: "7px"
|
|
61
|
+
}
|
|
62
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
63
|
+
className: "flex items-center gap-3 color-text-secondary"
|
|
64
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
65
|
+
className: "w-5 h-5 rounded-full",
|
|
66
|
+
style: {
|
|
67
|
+
backgroundColor: "rgb(".concat(trigerColor, ")")
|
|
68
|
+
}
|
|
69
|
+
}), /*#__PURE__*/React.createElement(ChevronDown, {
|
|
70
|
+
size: 18,
|
|
71
|
+
className: "transition-transform ".concat(isOpen ? "rotate-180" : "")
|
|
72
|
+
})))), /*#__PURE__*/React.createElement(PopoverContent, {
|
|
73
|
+
align: "start",
|
|
74
|
+
alignOffset: 0,
|
|
75
|
+
className: "w-[200px] export-content-popover",
|
|
76
|
+
elevation: 2,
|
|
77
|
+
side: "bottom",
|
|
78
|
+
sideOffset: 4
|
|
79
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
80
|
+
className: "transition-all p-2 duration-200 w-full"
|
|
81
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
82
|
+
className: "flex gap-2 flex-wrap w-full"
|
|
83
|
+
}, TEXT_COLORS.map(function (color) {
|
|
84
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
85
|
+
type: "button",
|
|
86
|
+
key: color.value,
|
|
87
|
+
onClick: function onClick() {
|
|
88
|
+
onPick(color.value);
|
|
89
|
+
setIsOpen(false);
|
|
90
|
+
},
|
|
91
|
+
className: "w-7 h-7 rounded-full transition-all hover:scale-110 hover:shadow-md",
|
|
92
|
+
style: {
|
|
93
|
+
backgroundColor: "rgb(".concat(color.value, ")")
|
|
94
|
+
},
|
|
95
|
+
title: color.name
|
|
96
|
+
});
|
|
97
|
+
})))));
|
|
98
|
+
};
|
|
@@ -21,11 +21,10 @@ var DropDownList = function DropDownList() {
|
|
|
21
21
|
var _e = useState([]),
|
|
22
22
|
selected = _e[0],
|
|
23
23
|
setSelected = _e[1];
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}, [setContext]);
|
|
24
|
+
var _f = useState([]),
|
|
25
|
+
rbgColor = _f[0],
|
|
26
|
+
setRbgColor = _f[1];
|
|
27
|
+
var close = useCallback(function () {}, [setContext]);
|
|
29
28
|
useOutsideClick(containerRef, close, [close]);
|
|
30
29
|
useEffect(function () {
|
|
31
30
|
var _a, _b;
|
|
@@ -45,19 +44,30 @@ var DropDownList = function DropDownList() {
|
|
|
45
44
|
}
|
|
46
45
|
var index = getSheetIndex(context, context.currentSheetId);
|
|
47
46
|
var dataVerification = context.luckysheetfile[index].dataVerification;
|
|
47
|
+
if (!dataVerification) return;
|
|
48
48
|
var item = dataVerification["".concat(rowIndex, "_").concat(colIndex)];
|
|
49
|
+
if (!item) return;
|
|
49
50
|
var dropdownList = getDropdownList(context, item.value1);
|
|
50
51
|
var cellValue = getCellValue(rowIndex, colIndex, d);
|
|
51
52
|
if (cellValue) {
|
|
52
53
|
setSelected(cellValue.toString().split(","));
|
|
53
54
|
}
|
|
55
|
+
var color = item.color;
|
|
56
|
+
var colorValues = color === null || color === void 0 ? void 0 : color.split(",").map(function (v) {
|
|
57
|
+
return v.trim();
|
|
58
|
+
});
|
|
59
|
+
var rbgColorArr = [];
|
|
60
|
+
for (var i = 0; i < colorValues.length; i += 3) {
|
|
61
|
+
rbgColorArr.push(colorValues.slice(i, i + 3).join(", "));
|
|
62
|
+
}
|
|
63
|
+
setRbgColor(rbgColorArr);
|
|
54
64
|
setList(dropdownList);
|
|
55
65
|
setPosition({
|
|
56
66
|
left: col_pre,
|
|
57
67
|
top: row
|
|
58
68
|
});
|
|
59
69
|
setIsMul(item.type2 === "true");
|
|
60
|
-
}, []);
|
|
70
|
+
}, [context.luckysheet_select_save]);
|
|
61
71
|
useEffect(function () {
|
|
62
72
|
if (!context.luckysheet_select_save) return;
|
|
63
73
|
var last = context.luckysheet_select_save[context.luckysheet_select_save.length - 1];
|
|
@@ -66,7 +76,9 @@ var DropDownList = function DropDownList() {
|
|
|
66
76
|
if (rowIndex == null || colIndex == null) return;
|
|
67
77
|
var index = getSheetIndex(context, context.currentSheetId);
|
|
68
78
|
var dataVerification = context.luckysheetfile[index].dataVerification;
|
|
79
|
+
if (!dataVerification) return;
|
|
69
80
|
var item = dataVerification["".concat(rowIndex, "_").concat(colIndex)];
|
|
81
|
+
if (!item) return;
|
|
70
82
|
if (item.type2 !== "true") return;
|
|
71
83
|
var d = getFlowdata(context);
|
|
72
84
|
if (!d) return;
|
|
@@ -97,7 +109,10 @@ var DropDownList = function DropDownList() {
|
|
|
97
109
|
tabIndex: 0
|
|
98
110
|
}, list.map(function (v, i) {
|
|
99
111
|
return /*#__PURE__*/React.createElement("div", {
|
|
100
|
-
className: "dropdown-List-item",
|
|
112
|
+
className: "dropdown-List-item mb-1",
|
|
113
|
+
style: {
|
|
114
|
+
backgroundColor: "rgb(".concat(rbgColor[i], ")") || "red"
|
|
115
|
+
},
|
|
101
116
|
key: i,
|
|
102
117
|
onClick: function onClick() {
|
|
103
118
|
setContext(function (ctx) {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type Item = {
|
|
3
|
+
id: string;
|
|
4
|
+
value: string;
|
|
5
|
+
color?: string | null;
|
|
6
|
+
};
|
|
7
|
+
declare const DynamicInputList: ({ optionItems, setOptionItems, }: {
|
|
8
|
+
optionItems: Item[];
|
|
9
|
+
setOptionItems: React.Dispatch<React.SetStateAction<Item[]>>;
|
|
10
|
+
}) => React.JSX.Element;
|
|
11
|
+
export default DynamicInputList;
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
var __assign = this && this.__assign || function () {
|
|
4
|
+
__assign = Object.assign || function (t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
|
|
14
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
15
|
+
if (ar || !(i in from)) {
|
|
16
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
17
|
+
ar[i] = from[i];
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
21
|
+
};
|
|
22
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
23
|
+
import { Button, cn, TextField, IconButton } from "@fileverse/ui";
|
|
24
|
+
import { ColorSection as ColorPicker } from "./ColorPicker";
|
|
25
|
+
function createId() {
|
|
26
|
+
return "".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2));
|
|
27
|
+
}
|
|
28
|
+
var DynamicInputList = function DynamicInputList(_a) {
|
|
29
|
+
var optionItems = _a.optionItems,
|
|
30
|
+
setOptionItems = _a.setOptionItems;
|
|
31
|
+
var dragFromIndexRef = useRef(null);
|
|
32
|
+
var _b = useState(null),
|
|
33
|
+
draggingIndex = _b[0],
|
|
34
|
+
setDraggingIndex = _b[1];
|
|
35
|
+
var _c = useState(null),
|
|
36
|
+
overPosition = _c[0],
|
|
37
|
+
setOverPosition = _c[1];
|
|
38
|
+
var dragPreviewRef = useRef(null);
|
|
39
|
+
var handleAdd = function handleAdd() {
|
|
40
|
+
var nextNum = optionItems.length + 1;
|
|
41
|
+
setOptionItems(function (prev) {
|
|
42
|
+
return __spreadArray(__spreadArray([], prev, true), [{
|
|
43
|
+
id: createId(),
|
|
44
|
+
value: "Option ".concat(nextNum),
|
|
45
|
+
color: "228, 232, 237"
|
|
46
|
+
}], false);
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
useEffect(function () {
|
|
50
|
+
handleAdd();
|
|
51
|
+
}, []);
|
|
52
|
+
var handleRemove = function handleRemove(index) {
|
|
53
|
+
setOptionItems(function (prev) {
|
|
54
|
+
return prev.filter(function (_, i) {
|
|
55
|
+
return i !== index;
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
var handleChange = function handleChange(index, v) {
|
|
60
|
+
setOptionItems(function (prev) {
|
|
61
|
+
var next = prev.slice();
|
|
62
|
+
next[index] = __assign(__assign({}, next[index]), {
|
|
63
|
+
value: v
|
|
64
|
+
});
|
|
65
|
+
return next;
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
function createDragPreview(node, cursorX, cursorY) {
|
|
69
|
+
if (cursorX === void 0) {
|
|
70
|
+
cursorX = 20;
|
|
71
|
+
}
|
|
72
|
+
if (cursorY === void 0) {
|
|
73
|
+
cursorY = 10;
|
|
74
|
+
}
|
|
75
|
+
var rect = node.getBoundingClientRect();
|
|
76
|
+
var clone = node.cloneNode(true);
|
|
77
|
+
clone.style.position = "fixed";
|
|
78
|
+
clone.style.top = "".concat(rect.top, "px");
|
|
79
|
+
clone.style.left = "".concat(rect.left, "px");
|
|
80
|
+
clone.style.width = "".concat(rect.width, "px");
|
|
81
|
+
clone.style.pointerEvents = "none";
|
|
82
|
+
clone.style.zIndex = "9999";
|
|
83
|
+
clone.style.transform = "scale(0.98)";
|
|
84
|
+
clone.style.borderRadius = "12px";
|
|
85
|
+
clone.style.background = getComputedStyle(document.documentElement).getPropertyValue("--color-card") || "white";
|
|
86
|
+
clone.style.boxShadow = "0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08)";
|
|
87
|
+
clone.style.opacity = "0.95";
|
|
88
|
+
document.body.appendChild(clone);
|
|
89
|
+
return {
|
|
90
|
+
clone: clone,
|
|
91
|
+
offsetX: cursorX,
|
|
92
|
+
offsetY: cursorY
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
var _onDragStart = function onDragStart(index, e) {
|
|
96
|
+
dragFromIndexRef.current = index;
|
|
97
|
+
setDraggingIndex(index);
|
|
98
|
+
e.dataTransfer.effectAllowed = "move";
|
|
99
|
+
e.dataTransfer.setData("text/plain", String(index));
|
|
100
|
+
var handle = e.currentTarget;
|
|
101
|
+
var row = handle.closest("li");
|
|
102
|
+
if (row) {
|
|
103
|
+
var preview = createDragPreview(row);
|
|
104
|
+
dragPreviewRef.current = preview.clone;
|
|
105
|
+
try {
|
|
106
|
+
e.dataTransfer.setDragImage(preview.clone, preview.offsetX, preview.offsetY);
|
|
107
|
+
} catch (_a) {}
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
var onDragEnd = function onDragEnd() {
|
|
111
|
+
if (dragPreviewRef.current && dragPreviewRef.current.parentNode) {
|
|
112
|
+
dragPreviewRef.current.parentNode.removeChild(dragPreviewRef.current);
|
|
113
|
+
}
|
|
114
|
+
dragPreviewRef.current = null;
|
|
115
|
+
setDraggingIndex(null);
|
|
116
|
+
setOverPosition(null);
|
|
117
|
+
dragFromIndexRef.current = null;
|
|
118
|
+
};
|
|
119
|
+
var onDragOverRow = function onDragOverRow(index, e) {
|
|
120
|
+
e.preventDefault();
|
|
121
|
+
e.dataTransfer.dropEffect = "move";
|
|
122
|
+
var target = e.currentTarget;
|
|
123
|
+
var rect = target.getBoundingClientRect();
|
|
124
|
+
var halfway = rect.top + rect.height / 2;
|
|
125
|
+
var pos = e.clientY < halfway ? "before" : "after";
|
|
126
|
+
setOverPosition(pos);
|
|
127
|
+
};
|
|
128
|
+
var onDragLeaveRow = function onDragLeaveRow() {};
|
|
129
|
+
function move(list, from, to) {
|
|
130
|
+
var result = list.slice();
|
|
131
|
+
var removed = result.splice(from, 1)[0];
|
|
132
|
+
result.splice(to, 0, removed);
|
|
133
|
+
return result;
|
|
134
|
+
}
|
|
135
|
+
var onDropRow = function onDropRow(index, e) {
|
|
136
|
+
e.preventDefault();
|
|
137
|
+
var fromText = e.dataTransfer.getData("text/plain");
|
|
138
|
+
var fromIndex = Number.isNaN(Number(fromText)) ? dragFromIndexRef.current : Number(fromText);
|
|
139
|
+
if (fromIndex == null) {
|
|
140
|
+
setOverPosition(null);
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
var dest = index;
|
|
144
|
+
if (overPosition === "after") {
|
|
145
|
+
dest = index + 1;
|
|
146
|
+
}
|
|
147
|
+
var adjustedDest = fromIndex < dest ? dest - 1 : dest;
|
|
148
|
+
if (fromIndex !== adjustedDest) {
|
|
149
|
+
setOptionItems(function (prev) {
|
|
150
|
+
return move(prev, fromIndex, Math.max(0, Math.min(prev.length, adjustedDest)));
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
setOverPosition(null);
|
|
154
|
+
dragFromIndexRef.current = null;
|
|
155
|
+
setDraggingIndex(null);
|
|
156
|
+
if (dragPreviewRef.current && dragPreviewRef.current.parentNode) {
|
|
157
|
+
dragPreviewRef.current.parentNode.removeChild(dragPreviewRef.current);
|
|
158
|
+
dragPreviewRef.current = null;
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
var handleColorChange = function handleColorChange(index, color) {
|
|
162
|
+
setOptionItems(function (prev) {
|
|
163
|
+
var next = prev.slice();
|
|
164
|
+
next[index] = __assign(__assign({}, next[index]), {
|
|
165
|
+
color: color
|
|
166
|
+
});
|
|
167
|
+
return next;
|
|
168
|
+
});
|
|
169
|
+
};
|
|
170
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
171
|
+
className: "mx-auto max-w-2xl"
|
|
172
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
173
|
+
className: "flex flex-col"
|
|
174
|
+
}, optionItems.map(function (item, index) {
|
|
175
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
176
|
+
key: item.id,
|
|
177
|
+
className: cn("relative flex optionItems-center gap-3 transition mb-4", draggingIndex === index && "scale-[0.99] opacity-80 shadow-lg rounded-xl"),
|
|
178
|
+
onDragOver: function onDragOver(e) {
|
|
179
|
+
return onDragOverRow(index, e);
|
|
180
|
+
},
|
|
181
|
+
onDragLeave: onDragLeaveRow,
|
|
182
|
+
onDrop: function onDrop(e) {
|
|
183
|
+
return onDropRow(index, e);
|
|
184
|
+
}
|
|
185
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
186
|
+
className: "cursor-grab p-2 text-muted-foreground hover:text-foreground active:cursor-grabbing",
|
|
187
|
+
draggable: true,
|
|
188
|
+
onDragStart: function onDragStart(e) {
|
|
189
|
+
return _onDragStart(index, e);
|
|
190
|
+
},
|
|
191
|
+
onDragEnd: onDragEnd,
|
|
192
|
+
"aria-label": "Drag handle for row ".concat(index + 1),
|
|
193
|
+
title: "Drag to reorder",
|
|
194
|
+
style: {
|
|
195
|
+
cursor: "grab"
|
|
196
|
+
}
|
|
197
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
198
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
199
|
+
width: "16",
|
|
200
|
+
height: "20",
|
|
201
|
+
viewBox: "0 0 16 20",
|
|
202
|
+
fill: "currentColor",
|
|
203
|
+
"aria-hidden": "true"
|
|
204
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
205
|
+
cx: "4",
|
|
206
|
+
cy: "5",
|
|
207
|
+
r: "1.5"
|
|
208
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
209
|
+
cx: "4",
|
|
210
|
+
cy: "10",
|
|
211
|
+
r: "1.5"
|
|
212
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
213
|
+
cx: "4",
|
|
214
|
+
cy: "15",
|
|
215
|
+
r: "1.5"
|
|
216
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
217
|
+
cx: "10",
|
|
218
|
+
cy: "5",
|
|
219
|
+
r: "1.5"
|
|
220
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
221
|
+
cx: "10",
|
|
222
|
+
cy: "10",
|
|
223
|
+
r: "1.5"
|
|
224
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
225
|
+
cx: "10",
|
|
226
|
+
cy: "15",
|
|
227
|
+
r: "1.5"
|
|
228
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
229
|
+
className: "flex optionItems-center"
|
|
230
|
+
}, /*#__PURE__*/React.createElement(ColorPicker, {
|
|
231
|
+
onPick: function onPick(c) {
|
|
232
|
+
return handleColorChange(index, c);
|
|
233
|
+
},
|
|
234
|
+
trigerColor: item.color
|
|
235
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
236
|
+
className: "flex flex-1 optionItems-center transition"
|
|
237
|
+
}, /*#__PURE__*/React.createElement(TextField, {
|
|
238
|
+
className: "w-full",
|
|
239
|
+
placeholder: "Option ".concat(index + 1),
|
|
240
|
+
value: item.value,
|
|
241
|
+
onChange: function onChange(e) {
|
|
242
|
+
return handleChange(index, e.target.value);
|
|
243
|
+
},
|
|
244
|
+
"aria-label": "Option ".concat(index + 1)
|
|
245
|
+
})), /*#__PURE__*/React.createElement(IconButton, {
|
|
246
|
+
icon: "Trash2",
|
|
247
|
+
type: "button",
|
|
248
|
+
variant: "ghost",
|
|
249
|
+
onClick: function onClick() {
|
|
250
|
+
return handleRemove(index);
|
|
251
|
+
},
|
|
252
|
+
className: "",
|
|
253
|
+
"aria-label": "Delete row ".concat(index + 1),
|
|
254
|
+
title: "Delete"
|
|
255
|
+
}));
|
|
256
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
257
|
+
className: "mt-8"
|
|
258
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
259
|
+
variant: "secondary",
|
|
260
|
+
onClick: handleAdd,
|
|
261
|
+
className: ""
|
|
262
|
+
}, "Add another item")));
|
|
263
|
+
};
|
|
264
|
+
export default DynamicInputList;
|
|
@@ -8,13 +8,17 @@ var __assign = this && this.__assign || function () {
|
|
|
8
8
|
};
|
|
9
9
|
return __assign.apply(this, arguments);
|
|
10
10
|
};
|
|
11
|
-
import { getDropdownList, getFlowdata, getRangeByTxt, getRangetxt,
|
|
11
|
+
import { getDropdownList, getFlowdata, getRangeByTxt, getRangetxt, locale, setCellValue, confirmMessage } from "@fileverse-dev/fortune-core";
|
|
12
12
|
import { Button, Checkbox, Divider, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
|
|
13
13
|
import React, { useCallback, useContext, useEffect, useState } from "react";
|
|
14
|
+
import DynamicInputList from "./DropdownOption";
|
|
14
15
|
import WorkbookContext from "../../context";
|
|
15
16
|
import { useDialog } from "../../hooks/useDialog";
|
|
16
17
|
import { injectDatepickerStyles } from "../../utils/datepickerStyles";
|
|
17
18
|
import "./index.css";
|
|
19
|
+
function createId() {
|
|
20
|
+
return "".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2));
|
|
21
|
+
}
|
|
18
22
|
injectDatepickerStyles();
|
|
19
23
|
var DataVerification = function DataVerification() {
|
|
20
24
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -29,6 +33,56 @@ var DataVerification = function DataVerification() {
|
|
|
29
33
|
button = _r.button,
|
|
30
34
|
generalDialog = _r.generalDialog;
|
|
31
35
|
var dateCondition = useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"])[0];
|
|
36
|
+
function getSheetIndex() {
|
|
37
|
+
var _a;
|
|
38
|
+
for (var i = 0; i < context.luckysheetfile.length; i += 1) {
|
|
39
|
+
if (((_a = context.luckysheetfile[i]) === null || _a === void 0 ? void 0 : _a.id) === context.currentSheetId) {
|
|
40
|
+
return i;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
var _s = useState([]),
|
|
46
|
+
optionItems = _s[0],
|
|
47
|
+
setOptionItems = _s[1];
|
|
48
|
+
var valuesFromArray = optionItems.map(function (i) {
|
|
49
|
+
return i.value;
|
|
50
|
+
}).join(",");
|
|
51
|
+
var colors = optionItems.map(function (i) {
|
|
52
|
+
return i.color;
|
|
53
|
+
}).join(",");
|
|
54
|
+
useEffect(function () {
|
|
55
|
+
setContext(function (ctx) {
|
|
56
|
+
ctx.dataVerification.dataRegulation.color = colors;
|
|
57
|
+
ctx.dataVerification.dataRegulation.value1 = valuesFromArray;
|
|
58
|
+
});
|
|
59
|
+
}, [optionItems]);
|
|
60
|
+
useEffect(function () {
|
|
61
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
62
|
+
var selectRow = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.row) === null || _c === void 0 ? void 0 : _c[0];
|
|
63
|
+
var selectCol = (_f = (_e = (_d = context.luckysheet_select_save) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.column) === null || _f === void 0 ? void 0 : _f[0];
|
|
64
|
+
var sheetIndex = getSheetIndex();
|
|
65
|
+
var dataVerificationInfo = context.luckysheetfile[sheetIndex].dataVerification;
|
|
66
|
+
var value = (_g = dataVerificationInfo === null || dataVerificationInfo === void 0 ? void 0 : dataVerificationInfo["".concat(selectRow, "_").concat(selectCol)]) === null || _g === void 0 ? void 0 : _g.value1;
|
|
67
|
+
var color = (_h = dataVerificationInfo === null || dataVerificationInfo === void 0 ? void 0 : dataVerificationInfo["".concat(selectRow, "_").concat(selectCol)]) === null || _h === void 0 ? void 0 : _h.color;
|
|
68
|
+
if (value && color) {
|
|
69
|
+
var colorValues = color === null || color === void 0 ? void 0 : color.split(",").map(function (v) {
|
|
70
|
+
return v.trim();
|
|
71
|
+
});
|
|
72
|
+
var rgbArray_1 = [];
|
|
73
|
+
for (var i = 0; i < colorValues.length; i += 3) {
|
|
74
|
+
rgbArray_1.push(colorValues.slice(i, i + 3).join(", "));
|
|
75
|
+
}
|
|
76
|
+
value = value === null || value === void 0 ? void 0 : value.split(",");
|
|
77
|
+
setOptionItems(value.map(function (v, i) {
|
|
78
|
+
return {
|
|
79
|
+
id: createId(),
|
|
80
|
+
value: v,
|
|
81
|
+
color: rgbArray_1[i]
|
|
82
|
+
};
|
|
83
|
+
}));
|
|
84
|
+
}
|
|
85
|
+
}, []);
|
|
32
86
|
var dataSelectRange = useCallback(function (type, value) {
|
|
33
87
|
hideDialog();
|
|
34
88
|
setContext(function (ctx) {
|
|
@@ -57,7 +111,7 @@ var DataVerification = function DataVerification() {
|
|
|
57
111
|
var list = getDropdownList(ctx, value1);
|
|
58
112
|
item.value1 = list.join(",");
|
|
59
113
|
}
|
|
60
|
-
var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex(
|
|
114
|
+
var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex()].dataVerification) !== null && _c !== void 0 ? _c : {};
|
|
61
115
|
var str = range[range.length - 1].row[0];
|
|
62
116
|
var edr = range[range.length - 1].row[1];
|
|
63
117
|
var stc = range[range.length - 1].column[0];
|
|
@@ -73,7 +127,7 @@ var DataVerification = function DataVerification() {
|
|
|
73
127
|
}
|
|
74
128
|
}
|
|
75
129
|
}
|
|
76
|
-
ctx.luckysheetfile[getSheetIndex(
|
|
130
|
+
ctx.luckysheetfile[getSheetIndex()].dataVerification = currentDataVerification;
|
|
77
131
|
}
|
|
78
132
|
});
|
|
79
133
|
} else if (type === "delete") {
|
|
@@ -84,7 +138,7 @@ var DataVerification = function DataVerification() {
|
|
|
84
138
|
showDialog(generalDialog.noSelectionError, "ok");
|
|
85
139
|
return;
|
|
86
140
|
}
|
|
87
|
-
var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex(
|
|
141
|
+
var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex()].dataVerification) !== null && _c !== void 0 ? _c : {};
|
|
88
142
|
var str = range[range.length - 1].row[0];
|
|
89
143
|
var edr = range[range.length - 1].row[1];
|
|
90
144
|
var stc = range[range.length - 1].column[0];
|
|
@@ -106,7 +160,7 @@ var DataVerification = function DataVerification() {
|
|
|
106
160
|
var range = ctx.luckysheet_select_save[ctx.luckysheet_select_save.length - 1];
|
|
107
161
|
rangeT = getRangetxt(context, context.currentSheetId, range, context.currentSheetId);
|
|
108
162
|
}
|
|
109
|
-
var index = getSheetIndex(
|
|
163
|
+
var index = getSheetIndex();
|
|
110
164
|
var ctxDataVerification = ctx.luckysheetfile[index].dataVerification;
|
|
111
165
|
if (ctxDataVerification) {
|
|
112
166
|
if (!ctx.luckysheet_select_save) return;
|
|
@@ -215,15 +269,9 @@ var DataVerification = function DataVerification() {
|
|
|
215
269
|
}, dataVerification[v]);
|
|
216
270
|
}))), ((_c = (_b = context.dataVerification) === null || _b === void 0 ? void 0 : _b.dataRegulation) === null || _c === void 0 ? void 0 : _c.type) === "dropdown" && (/*#__PURE__*/React.createElement("div", {
|
|
217
271
|
className: "mt-4"
|
|
218
|
-
}, /*#__PURE__*/React.createElement(
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
onChange: function onChange(e) {
|
|
222
|
-
var value = e.target.value;
|
|
223
|
-
setContext(function (ctx) {
|
|
224
|
-
ctx.dataVerification.dataRegulation.value1 = value;
|
|
225
|
-
});
|
|
226
|
-
}
|
|
272
|
+
}, /*#__PURE__*/React.createElement(DynamicInputList, {
|
|
273
|
+
optionItems: optionItems,
|
|
274
|
+
setOptionItems: setOptionItems
|
|
227
275
|
}), /*#__PURE__*/React.createElement("div", {
|
|
228
276
|
className: "mt-4 flex items-center"
|
|
229
277
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
@@ -194,7 +194,6 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
|
|
|
194
194
|
var sourceIndex_1 = dragRef.current.source;
|
|
195
195
|
var sheetIdx_1 = getSheetIndex(context, context.currentSheetId);
|
|
196
196
|
if (sheetIdx_1 != null && sourceIndex_1 >= 0 && Number.isFinite(finalInsertionIndex_1) && finalInsertionIndex_1 >= 0) {
|
|
197
|
-
console.log("sourceIndex", sourceIndex_1);
|
|
198
197
|
setContext(function (draft) {
|
|
199
198
|
var _a, _b, _c, _d;
|
|
200
199
|
var _sheet = draft.luckysheetfile[sheetIdx_1];
|
|
@@ -299,7 +298,6 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
|
|
|
299
298
|
dragRef.current.startX = startX;
|
|
300
299
|
dragRef.current.source = clickedColIndex;
|
|
301
300
|
dragRef.current.active = false;
|
|
302
|
-
console.log("initiateDrag", startX);
|
|
303
301
|
dragRef.current.onDocMove = handleColumnDrag;
|
|
304
302
|
dragRef.current.onDocUp = handleColumnDragEnd;
|
|
305
303
|
document.addEventListener("mousemove", handleColumnDrag);
|
|
@@ -198,7 +198,6 @@ export var useRowDragAndDrop = function useRowDragAndDrop(containerRef, selected
|
|
|
198
198
|
rows.splice(targetIndex, 0, rowData);
|
|
199
199
|
_sheet.data = rows;
|
|
200
200
|
updateContextWithSheetData(draft, _sheet.data);
|
|
201
|
-
console.log("rows", sourceIndex_1);
|
|
202
201
|
var d = getFlowdata(draft);
|
|
203
202
|
d === null || d === void 0 ? void 0 : d.forEach(function (row) {
|
|
204
203
|
row.forEach(function (cell) {
|
|
@@ -263,7 +262,6 @@ export var useRowDragAndDrop = function useRowDragAndDrop(containerRef, selected
|
|
|
263
262
|
item.r += 1;
|
|
264
263
|
}
|
|
265
264
|
});
|
|
266
|
-
console.log("_sheet.calcChain", _sheet.calcChain);
|
|
267
265
|
(_b = window === null || window === void 0 ? void 0 : window.updateDataBlockCalcFunctionAfterRowDrag) === null || _b === void 0 ? void 0 : _b.call(window, sourceIndex_1, targetIndex, "row", context.currentSheetId);
|
|
268
266
|
});
|
|
269
267
|
}
|
|
@@ -25,7 +25,6 @@ import ImgBoxs from "../ImgBoxs";
|
|
|
25
25
|
import NotationBoxes from "../NotationBoxes";
|
|
26
26
|
import RangeDialog from "../DataVerification/RangeDialog";
|
|
27
27
|
import { useDialog } from "../../hooks/useDialog";
|
|
28
|
-
import SVGIcon from "../SVGIcon";
|
|
29
28
|
import DropDownList from "../DataVerification/DropdownList";
|
|
30
29
|
import IframeBoxs from "../IFrameBoxs/iFrameBoxs";
|
|
31
30
|
import ErrorBoxes from "../ErrorState";
|
|
@@ -482,11 +481,7 @@ var SheetOverlay = function SheetOverlay() {
|
|
|
482
481
|
style: {
|
|
483
482
|
display: "none"
|
|
484
483
|
}
|
|
485
|
-
}, /*#__PURE__*/React.createElement(
|
|
486
|
-
name: "caret-down-fill",
|
|
487
|
-
width: 16,
|
|
488
|
-
height: 16
|
|
489
|
-
})), context.dataVerificationDropDownList && (context.dataVerification.dataRegulation.value1 !== "" || context.dataVerification.dataRegulation.value2 !== "") && (/*#__PURE__*/React.createElement(DropDownList, null)), /*#__PURE__*/React.createElement("div", {
|
|
484
|
+
}), context.dataVerificationDropDownList && (context.dataVerification.dataRegulation.value1 !== "" || context.dataVerification.dataRegulation.value2 !== "") && (/*#__PURE__*/React.createElement(DropDownList, null)), /*#__PURE__*/React.createElement("div", {
|
|
490
485
|
id: "luckysheet-dataVerification-showHintBox",
|
|
491
486
|
ref: dataVerificationHintBoxRef
|
|
492
487
|
}), /*#__PURE__*/React.createElement("div", {
|