deepsea-components 2.8.3 → 3.0.0
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/dist/cjs/components/AutoFit.d.ts +25 -0
- package/dist/cjs/components/AutoFit.js +99 -0
- package/dist/cjs/components/AutoFit.js.map +7 -0
- package/dist/cjs/components/AutoScroll.d.ts +5 -0
- package/dist/cjs/components/AutoScroll.js +8 -6
- package/dist/cjs/components/AutoScroll.js.map +2 -2
- package/dist/cjs/components/AutoSizeTextarea.d.ts +5 -0
- package/dist/cjs/components/AutoSizeTextarea.js +51 -0
- package/dist/cjs/components/AutoSizeTextarea.js.map +7 -0
- package/dist/cjs/components/CircleText.d.ts +25 -0
- package/dist/cjs/components/CircleText.js +48 -0
- package/dist/cjs/components/CircleText.js.map +7 -0
- package/dist/cjs/components/Flow.d.ts +57 -0
- package/dist/cjs/components/Flow.js +119 -0
- package/dist/cjs/components/Flow.js.map +7 -0
- package/dist/cjs/components/InputFile.d.ts +64 -0
- package/dist/cjs/components/InputFile.js +143 -0
- package/dist/cjs/components/InputFile.js.map +7 -0
- package/dist/cjs/components/LoopSwiper.d.ts +9 -0
- package/dist/cjs/components/LoopSwiper.js +116 -0
- package/dist/cjs/components/LoopSwiper.js.map +7 -0
- package/dist/cjs/components/Ring.d.ts +7 -0
- package/dist/cjs/components/Ring.js +37 -0
- package/dist/cjs/components/Ring.js.map +7 -0
- package/dist/cjs/components/Scroll.js.map +2 -2
- package/dist/cjs/components/SectionRing.d.ts +8 -0
- package/dist/cjs/components/SectionRing.js +50 -0
- package/dist/cjs/components/SectionRing.js.map +7 -0
- package/dist/cjs/components/Skeleton.d.ts +3 -0
- package/dist/cjs/components/Skeleton.js +60 -0
- package/dist/cjs/components/Skeleton.js.map +7 -0
- package/dist/cjs/components/TransitionBox.d.ts +10 -0
- package/dist/cjs/components/TransitionBox.js +45 -0
- package/dist/cjs/components/TransitionBox.js.map +7 -0
- package/dist/cjs/components/TransitionNum.d.ts +16 -0
- package/dist/cjs/components/TransitionNum.js +62 -0
- package/dist/cjs/components/TransitionNum.js.map +7 -0
- package/dist/cjs/components/Trapezium.d.ts +9 -0
- package/dist/cjs/components/Trapezium.js +44 -0
- package/dist/cjs/components/Trapezium.js.map +7 -0
- package/dist/cjs/index.d.ts +13 -265
- package/dist/cjs/index.js +26 -505
- package/dist/cjs/index.js.map +3 -3
- package/dist/esm/components/AutoFit.d.ts +25 -0
- package/dist/esm/components/AutoFit.js +87 -0
- package/dist/esm/components/AutoFit.js.map +1 -0
- package/dist/esm/components/AutoScroll.d.ts +5 -0
- package/dist/esm/components/AutoScroll.js +8 -5
- package/dist/esm/components/AutoScroll.js.map +1 -1
- package/dist/esm/components/AutoSizeTextarea.d.ts +5 -0
- package/dist/esm/components/AutoSizeTextarea.js +45 -0
- package/dist/esm/components/AutoSizeTextarea.js.map +1 -0
- package/dist/esm/components/CircleText.d.ts +25 -0
- package/dist/esm/components/CircleText.js +49 -0
- package/dist/esm/components/CircleText.js.map +1 -0
- package/dist/esm/components/Flow.d.ts +57 -0
- package/dist/esm/components/Flow.js +130 -0
- package/dist/esm/components/Flow.js.map +1 -0
- package/dist/esm/components/InputFile.d.ts +64 -0
- package/dist/esm/components/InputFile.js +167 -0
- package/dist/esm/components/InputFile.js.map +1 -0
- package/dist/esm/components/LoopSwiper.d.ts +9 -0
- package/dist/esm/components/LoopSwiper.js +122 -0
- package/dist/esm/components/LoopSwiper.js.map +1 -0
- package/dist/esm/components/Ring.d.ts +7 -0
- package/dist/esm/components/Ring.js +26 -0
- package/dist/esm/components/Ring.js.map +1 -0
- package/dist/esm/components/Scroll.js.map +1 -1
- package/dist/esm/components/SectionRing.d.ts +8 -0
- package/dist/esm/components/SectionRing.js +31 -0
- package/dist/esm/components/SectionRing.js.map +1 -0
- package/dist/esm/components/Skeleton.d.ts +3 -0
- package/dist/esm/components/Skeleton.js +35 -0
- package/dist/esm/components/Skeleton.js.map +1 -0
- package/dist/esm/components/TransitionBox.d.ts +10 -0
- package/dist/esm/components/TransitionBox.js +50 -0
- package/dist/esm/components/TransitionBox.js.map +1 -0
- package/dist/esm/components/TransitionNum.d.ts +16 -0
- package/dist/esm/components/TransitionNum.js +65 -0
- package/dist/esm/components/TransitionNum.js.map +1 -0
- package/dist/esm/components/Trapezium.d.ts +9 -0
- package/dist/esm/components/Trapezium.js +35 -0
- package/dist/esm/components/Trapezium.js.map +1 -0
- package/dist/esm/index.d.ts +13 -265
- package/dist/esm/index.js +13 -843
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/AutoFit.tsx +95 -0
- package/src/components/AutoScroll.tsx +18 -9
- package/src/components/AutoSizeTextarea.tsx +31 -0
- package/src/components/CircleText.tsx +56 -0
- package/src/components/Flow.tsx +154 -0
- package/src/components/InputFile.tsx +193 -0
- package/src/components/LoopSwiper.tsx +101 -0
- package/src/components/Ring.tsx +19 -0
- package/src/components/Scroll.tsx +1 -0
- package/src/components/SectionRing.tsx +36 -0
- package/src/components/Skeleton.tsx +38 -0
- package/src/components/TransitionBox.tsx +36 -0
- package/src/components/TransitionNum.tsx +54 -0
- package/src/components/Trapezium.tsx +35 -0
- package/src/index.tsx +13 -862
- package/dist/cjs/skeleton.css +0 -18
- package/dist/esm/skeleton.css +0 -18
- package/src/skeleton.css +0 -18
package/dist/cjs/index.js
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
5
|
var __copyProps = (to, from, except, desc) => {
|
|
11
6
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
7
|
for (let key of __getOwnPropNames(from))
|
|
@@ -20,510 +15,36 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
15
|
|
|
21
16
|
// src/index.tsx
|
|
22
17
|
var src_exports = {};
|
|
23
|
-
__export(src_exports, {
|
|
24
|
-
AutoFit: () => AutoFit,
|
|
25
|
-
AutoSizeTextArea: () => AutoSizeTextArea,
|
|
26
|
-
CircleText: () => CircleText,
|
|
27
|
-
ExportExcel: () => ExportExcel,
|
|
28
|
-
Flow: () => Flow,
|
|
29
|
-
ImportExcel: () => ImportExcel,
|
|
30
|
-
InputFile: () => InputFile,
|
|
31
|
-
InputFileButton: () => InputFileButton,
|
|
32
|
-
LoopSwiper: () => LoopSwiper,
|
|
33
|
-
Ring: () => Ring,
|
|
34
|
-
SeaRadar: () => SeaRadar,
|
|
35
|
-
SectionRing: () => SectionRing,
|
|
36
|
-
TransitionBox: () => TransitionBox,
|
|
37
|
-
TransitionNum: () => TransitionNum,
|
|
38
|
-
Trapezium: () => Trapezium,
|
|
39
|
-
exportExcel: () => exportExcel,
|
|
40
|
-
getFileData: () => getFileData,
|
|
41
|
-
getGapCountAndSize: () => getGapCountAndSize,
|
|
42
|
-
getGapRange: () => getGapRange
|
|
43
|
-
});
|
|
44
18
|
module.exports = __toCommonJS(src_exports);
|
|
45
|
-
|
|
46
|
-
var import_deepsea_tools = require("deepsea-tools");
|
|
47
|
-
var import_react = require("react");
|
|
48
|
-
var import_xlsx = require("xlsx");
|
|
49
|
-
__reExport(src_exports, require("./components/Scroll"), module.exports);
|
|
19
|
+
__reExport(src_exports, require("./components/AutoFit"), module.exports);
|
|
50
20
|
__reExport(src_exports, require("./components/AutoScroll"), module.exports);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
case "text":
|
|
64
|
-
fileReader.readAsText(file);
|
|
65
|
-
break;
|
|
66
|
-
default:
|
|
67
|
-
return file;
|
|
68
|
-
}
|
|
69
|
-
return new Promise((resolve) => {
|
|
70
|
-
fileReader.addEventListener("load", () => {
|
|
71
|
-
resolve(fileReader.result);
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
var InputFile = (0, import_react.forwardRef)((props, ref) => {
|
|
76
|
-
const { multiple = false, type = "file", onChange, disabled: inputDisabled, clearAfterChange, ...others } = props;
|
|
77
|
-
const [disabled, setDisabled] = (0, import_react.useState)(false);
|
|
78
|
-
async function onInputChange(e) {
|
|
79
|
-
const input = e.target;
|
|
80
|
-
const { files } = input;
|
|
81
|
-
if (!files || files.length === 0)
|
|
82
|
-
return;
|
|
83
|
-
setDisabled(true);
|
|
84
|
-
try {
|
|
85
|
-
if (multiple) {
|
|
86
|
-
const result = [];
|
|
87
|
-
for (const file of Array.from(files)) {
|
|
88
|
-
result.push({
|
|
89
|
-
result: await getFileData(file, type),
|
|
90
|
-
file
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
onChange?.(result);
|
|
94
|
-
} else {
|
|
95
|
-
onChange?.({
|
|
96
|
-
result: await getFileData(files[0], type),
|
|
97
|
-
file: files[0]
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
setDisabled(false);
|
|
101
|
-
if (clearAfterChange)
|
|
102
|
-
input.value = "";
|
|
103
|
-
} catch (error) {
|
|
104
|
-
setDisabled(false);
|
|
105
|
-
if (clearAfterChange)
|
|
106
|
-
input.value = "";
|
|
107
|
-
throw error;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
return /* @__PURE__ */ React.createElement("input", { disabled: disabled && inputDisabled, ref, type: "file", multiple, onChange: onInputChange, ...others });
|
|
111
|
-
});
|
|
112
|
-
var InputFileButton = (0, import_react.forwardRef)((props, ref) => {
|
|
113
|
-
const { onClick, children, input: inputProps, ...others } = props;
|
|
114
|
-
const { style, ...otherInputProps } = inputProps;
|
|
115
|
-
const input = (0, import_react.useRef)(null);
|
|
116
|
-
function onBtnClick(e) {
|
|
117
|
-
input.current?.click();
|
|
118
|
-
onClick?.(e);
|
|
119
|
-
}
|
|
120
|
-
return /* @__PURE__ */ React.createElement("button", { ref, type: "button", onClick: onBtnClick, ...others }, /* @__PURE__ */ React.createElement(InputFile, { ref: input, style: { display: "none", ...style }, ...otherInputProps }), children);
|
|
121
|
-
});
|
|
122
|
-
var ImportExcel = (0, import_react.forwardRef)((props, ref) => {
|
|
123
|
-
const { onChange, ...others } = props;
|
|
124
|
-
function onInputChange(data) {
|
|
125
|
-
const wb = (0, import_xlsx.read)(data.result);
|
|
126
|
-
const result = import_xlsx.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
|
127
|
-
if (typeof result === "object") {
|
|
128
|
-
const $ = result.map((it) => {
|
|
129
|
-
const _ = {};
|
|
130
|
-
Object.keys(it).filter((key) => key !== "__rowNum__").forEach((key) => _[key] = String(it[key]));
|
|
131
|
-
return _;
|
|
132
|
-
});
|
|
133
|
-
onChange?.($);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
return /* @__PURE__ */ React.createElement(InputFile, { ref, accept: ".xlsx", type: "arrayBuffer", onChange: onInputChange, ...others });
|
|
137
|
-
});
|
|
138
|
-
function exportExcel(data, name) {
|
|
139
|
-
const workSheet = import_xlsx.utils.json_to_sheet(data);
|
|
140
|
-
const workBook = import_xlsx.utils.book_new();
|
|
141
|
-
import_xlsx.utils.book_append_sheet(workBook, workSheet);
|
|
142
|
-
(0, import_xlsx.writeFile)(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
|
|
143
|
-
}
|
|
144
|
-
var ExportExcel = (0, import_react.forwardRef)((props, ref) => {
|
|
145
|
-
const { data, fileName, onClick, ...others } = props;
|
|
146
|
-
function onButtonClick(e) {
|
|
147
|
-
exportExcel(data, fileName);
|
|
148
|
-
onClick?.(e);
|
|
149
|
-
}
|
|
150
|
-
return /* @__PURE__ */ React.createElement("button", { ref, onClick: onButtonClick, ...others });
|
|
151
|
-
});
|
|
152
|
-
var TransitionBox = (props) => {
|
|
153
|
-
const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3e3, ...others } = props;
|
|
154
|
-
const box = (0, import_react.useRef)(null);
|
|
155
|
-
const [width, setWidth] = (0, import_react.useState)(0);
|
|
156
|
-
const [height, setHeight] = (0, import_react.useState)(0);
|
|
157
|
-
const [count, setCount] = (0, import_react.useState)(0);
|
|
158
|
-
(0, import_react.useEffect)(() => {
|
|
159
|
-
const observer = new ResizeObserver((entries) => {
|
|
160
|
-
const { width: currentWidth, height: currentHeight } = entries[0].contentRect;
|
|
161
|
-
setWidth(currentWidth);
|
|
162
|
-
setHeight(currentHeight);
|
|
163
|
-
});
|
|
164
|
-
observer.observe(box.current);
|
|
165
|
-
return () => {
|
|
166
|
-
observer.disconnect();
|
|
167
|
-
};
|
|
168
|
-
}, []);
|
|
169
|
-
(0, import_react.useEffect)(() => {
|
|
170
|
-
setCount((count2) => Math.min(count2 + 1, 3));
|
|
171
|
-
}, [width, height]);
|
|
172
|
-
const outerStyle = { transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : void 0, transitionDuration: count === 3 ? `${time}ms` : void 0, width, height, overflow: "hidden", position: "relative", ...style };
|
|
173
|
-
return /* @__PURE__ */ React.createElement("div", { style: outerStyle, ...others }, /* @__PURE__ */ React.createElement("div", { className: containerClassName, style: { position: "absolute", ...containerStyle }, ref: box }, children));
|
|
174
|
-
};
|
|
175
|
-
var SeaRadar = (props) => {
|
|
176
|
-
const { unitRadius = 50, circleCount = 4, circleWidth = 1, circleColor, directionCount = 36, directionWidth = 1, directionColor, backgroundColor, scanColor, scanAngle = Math.PI / 6, period = 8, targets, showGraduationLine, showGraduationText, showCircle, showDirection } = props;
|
|
177
|
-
const style = { "--unit-radius": `${unitRadius}px`, "--circle-count": circleCount, "--circle-width": `${circleWidth}px`, "--circle-color": circleColor, "--direction-count": directionCount, "--direction-width": `${directionWidth}px`, "--direction-color": directionColor, "--background-color": backgroundColor, "--scan-color": scanColor, "--period": `${period}s` };
|
|
178
|
-
return /* @__PURE__ */ React.createElement("div", { className: "sea-radar-wrapper", style }, Array(180).fill(0).map((_, index) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-little-graduation", style: { transform: `rotateZ(${2 * index}deg)`, display: showGraduationLine ? "block" : "none" } })), Array(36).fill(0).map((_, index) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-graduation", style: { transform: `rotateZ(${10 * index}deg)`, display: showGraduationLine ? "block" : "none" } }, /* @__PURE__ */ React.createElement("span", { className: "sea-radar-graduation-text", style: { display: showGraduationText ? "block" : "none" } }, String(index * 10).padStart(3, "0")))), /* @__PURE__ */ React.createElement("div", { className: "sea-radar" }, /* @__PURE__ */ React.createElement("div", { className: "sea-radar-scan", style: { height: `${unitRadius * circleCount * Math.tan(scanAngle)}px`, clipPath: `polygon(0 0, 0 100%, 100% 100%)` } }), showCircle && Array(circleCount).fill(0).map((_, index) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-circle", style: { width: `${unitRadius * 2 * (index + 1)}px`, height: `${unitRadius * 2 * (index + 1)}px` } })), showDirection && Array(directionCount).fill(0).map((_, index) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-direction", style: { transform: `rotateZ(${360 / directionCount * index}deg)` } })), targets?.map((it) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-target", style: { left: `${unitRadius * circleCount + it.radius * Math.cos(it.angle)}px`, bottom: `${unitRadius * circleCount + it.radius * Math.sin(it.angle)}px` } }, it.element))));
|
|
179
|
-
};
|
|
180
|
-
var Ring = (props) => {
|
|
181
|
-
const { outerWidth, innerWidth, style, ...leftProps } = props;
|
|
182
|
-
const outerRadius = outerWidth / 2;
|
|
183
|
-
const innerRadius = innerWidth / 2;
|
|
184
|
-
return /* @__PURE__ */ React.createElement("div", { style: { ...style, width: `${outerWidth}px`, height: `${outerWidth}px`, clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")` }, ...leftProps });
|
|
185
|
-
};
|
|
186
|
-
function getGapRange(gap) {
|
|
187
|
-
if (typeof gap === "number")
|
|
188
|
-
return [gap, gap];
|
|
189
|
-
if (Array.isArray(gap))
|
|
190
|
-
return [gap[0] || 0, gap[1]];
|
|
191
|
-
return [0, null];
|
|
192
|
-
}
|
|
193
|
-
function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
|
|
194
|
-
const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
|
|
195
|
-
if (count === 1)
|
|
196
|
-
return [count, 0];
|
|
197
|
-
const averageGap = (width - itemWidth * count) / (count - 1);
|
|
198
|
-
if (averageGap < minGap)
|
|
199
|
-
return [count, minGap];
|
|
200
|
-
if (maxGap !== null && averageGap > maxGap)
|
|
201
|
-
return [count, maxGap];
|
|
202
|
-
return [count, averageGap];
|
|
203
|
-
}
|
|
204
|
-
function Flow(props) {
|
|
205
|
-
const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, ...others } = props;
|
|
206
|
-
const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
|
|
207
|
-
const [width, setWidth] = (0, import_react.useState)(0);
|
|
208
|
-
const [columnCount, setColumnCount] = (0, import_react.useState)(1);
|
|
209
|
-
const [columnGapSize, setColumnGapSize] = (0, import_react.useState)(minColumnGap);
|
|
210
|
-
const [showItems, setShowItems] = (0, import_react.useState)(false);
|
|
211
|
-
const ele = (0, import_react.useRef)(null);
|
|
212
|
-
const contentRows = Math.ceil(data.length / columnCount);
|
|
213
|
-
const contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
|
|
214
|
-
const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
|
|
215
|
-
function getPosition(index) {
|
|
216
|
-
const y = Math.floor(index / columnCount);
|
|
217
|
-
const x = index - y * columnCount;
|
|
218
|
-
return {
|
|
219
|
-
left: x * (itemWidth + columnGapSize),
|
|
220
|
-
top: y * (itemHeight + rowGap)
|
|
221
|
-
};
|
|
222
|
-
}
|
|
223
|
-
function getHidden(index) {
|
|
224
|
-
if (typeof maxRows !== "number")
|
|
225
|
-
return false;
|
|
226
|
-
return index >= maxRows * columnCount;
|
|
227
|
-
}
|
|
228
|
-
(0, import_react.useEffect)(() => {
|
|
229
|
-
let timeout;
|
|
230
|
-
const observer = new ResizeObserver((entries) => {
|
|
231
|
-
clearTimeout(timeout);
|
|
232
|
-
function task() {
|
|
233
|
-
const { inlineSize: width2 } = entries[0].borderBoxSize[0];
|
|
234
|
-
const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width2, itemWidth, minColumnGap, maxColumnGap);
|
|
235
|
-
setShowItems(true);
|
|
236
|
-
setWidth(width2);
|
|
237
|
-
setColumnCount(newColumnCount);
|
|
238
|
-
setColumnGapSize(newColumnGapSize);
|
|
239
|
-
}
|
|
240
|
-
if (throttle === null) {
|
|
241
|
-
task();
|
|
242
|
-
} else {
|
|
243
|
-
timeout = window.setTimeout(task, throttle || 200);
|
|
244
|
-
}
|
|
245
|
-
});
|
|
246
|
-
observer.observe(ele.current);
|
|
247
|
-
return () => {
|
|
248
|
-
observer.disconnect();
|
|
249
|
-
};
|
|
250
|
-
}, [itemWidth, throttle, columnGap]);
|
|
251
|
-
(0, import_react.useEffect)(() => {
|
|
252
|
-
onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null });
|
|
253
|
-
}, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
|
|
254
|
-
return /* @__PURE__ */ React.createElement("div", { ref: ele, className, style: { position: "relative", boxSizing: "border-box", height, ...style }, ...others }, showItems && data.map((it, idx) => /* @__PURE__ */ React.createElement(
|
|
255
|
-
"div",
|
|
256
|
-
{
|
|
257
|
-
key: keyExactor?.(it, idx) || idx,
|
|
258
|
-
className: containerClassName,
|
|
259
|
-
style: {
|
|
260
|
-
position: "absolute",
|
|
261
|
-
width: itemWidth,
|
|
262
|
-
height: itemHeight,
|
|
263
|
-
transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : void 0,
|
|
264
|
-
...getPosition(idx)
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
|
-
/* @__PURE__ */ React.createElement("div", { style: { width: itemWidth, height: itemHeight, display: maxRows && idx >= maxRows * columnCount ? "none" : "block", ...containerStyle } }, render(it, idx, getHidden(idx)))
|
|
268
|
-
)));
|
|
269
|
-
}
|
|
270
|
-
var Trapezium = (0, import_react.forwardRef)((props, ref) => {
|
|
271
|
-
const { top, bottom, height, borderRadius, style, ...other } = props;
|
|
272
|
-
const diff = (bottom - top) / 2;
|
|
273
|
-
const a = Math.atan(height / diff) / 2;
|
|
274
|
-
const b = borderRadius / Math.tan(a);
|
|
275
|
-
const c = b * Math.cos(a * 2);
|
|
276
|
-
const d = b * Math.sin(a * 2);
|
|
277
|
-
const e = Math.PI / 2 - a;
|
|
278
|
-
const f = borderRadius / Math.tan(e);
|
|
279
|
-
const g = f * Math.cos(a * 2);
|
|
280
|
-
const h = f * Math.sin(a * 2);
|
|
281
|
-
return /* @__PURE__ */ React.createElement("div", { ref, style: { width: bottom, height, clipPath: `path("M ${diff + f} ${0} A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z")`, ...style }, ...other });
|
|
282
|
-
});
|
|
283
|
-
import_css.css`
|
|
284
|
-
@keyframes deepsea-horizontal-loop-swipe {
|
|
285
|
-
from {
|
|
286
|
-
transform: translateX(0);
|
|
287
|
-
}
|
|
288
|
-
to {
|
|
289
|
-
transform: translateX(-100%);
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
@keyframes deepsea-reverse-horizontal-loop-swipe {
|
|
293
|
-
from {
|
|
294
|
-
transform: translateX(0);
|
|
295
|
-
}
|
|
296
|
-
to {
|
|
297
|
-
transform: translateX(100%);
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
@keyframes deepsea-vertical-loop-swipe {
|
|
301
|
-
from {
|
|
302
|
-
transform: translateY(0);
|
|
303
|
-
}
|
|
304
|
-
to {
|
|
305
|
-
transform: translateY(-100%);
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
@keyframes deepsea-reverse-vertical-loop-swipe {
|
|
309
|
-
from {
|
|
310
|
-
transform: translateY(0);
|
|
311
|
-
}
|
|
312
|
-
to {
|
|
313
|
-
transform: translateY(100%);
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
`;
|
|
317
|
-
var LoopSwiper = (0, import_react.forwardRef)((props, ref) => {
|
|
318
|
-
const { style, children, direction, period, reverse, gap, ...others } = props;
|
|
319
|
-
const wrapper = (0, import_react.useRef)(null);
|
|
320
|
-
const container = (0, import_react.useRef)(null);
|
|
321
|
-
const [swiper, setSwiper] = (0, import_react.useState)(false);
|
|
322
|
-
const directionRef = (0, import_react.useRef)(direction);
|
|
323
|
-
directionRef.current = direction;
|
|
324
|
-
const flexDirection = direction === "vertical" ? reverse ? "column-reverse" : "column" : reverse ? "row-reverse" : "row";
|
|
325
|
-
const animationName = swiper ? direction === "vertical" ? reverse ? "deepsea-reverse-vertical-loop-swipe" : "deepsea-vertical-loop-swipe" : reverse ? "deepsea-reverse-horizontal-loop-swipe" : "deepsea-horizontal-loop-swipe" : "none";
|
|
326
|
-
const animationDuration = `${period}ms`;
|
|
327
|
-
const animationTimingFunction = "linear";
|
|
328
|
-
const animationIterationCount = "infinite";
|
|
329
|
-
(0, import_react.useImperativeHandle)(ref, () => wrapper.current);
|
|
330
|
-
(0, import_react.useEffect)(() => {
|
|
331
|
-
const wrapperEle = wrapper.current;
|
|
332
|
-
const containerEle = container.current;
|
|
333
|
-
let wrapperWidth = 0;
|
|
334
|
-
let wrapperHeight = 0;
|
|
335
|
-
let containerWidth = 0;
|
|
336
|
-
let containerHeight = 0;
|
|
337
|
-
const observer = new ResizeObserver((entries) => {
|
|
338
|
-
entries.forEach((entry) => {
|
|
339
|
-
if (entry.target === wrapperEle) {
|
|
340
|
-
wrapperWidth = entry.contentRect.width;
|
|
341
|
-
wrapperHeight = entry.contentRect.height;
|
|
342
|
-
} else if (entry.target === containerEle) {
|
|
343
|
-
containerWidth = entry.contentRect.width;
|
|
344
|
-
containerHeight = entry.contentRect.height;
|
|
345
|
-
}
|
|
346
|
-
});
|
|
347
|
-
setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth);
|
|
348
|
-
});
|
|
349
|
-
observer.observe(wrapperEle);
|
|
350
|
-
observer.observe(containerEle);
|
|
351
|
-
}, []);
|
|
352
|
-
return /* @__PURE__ */ React.createElement("div", { ref: wrapper, style: { display: "flex", flexDirection, gap, ...style }, ...others }, /* @__PURE__ */ React.createElement("div", { ref: container, style: { display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount } }, children), /* @__PURE__ */ React.createElement("div", { style: { display: swiper ? "flex" : "none", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount } }, children));
|
|
353
|
-
});
|
|
354
|
-
var SectionRing = (props) => {
|
|
355
|
-
const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...others } = props;
|
|
356
|
-
const s = Math.PI * 2 / c - a;
|
|
357
|
-
function arc(radius, startAngle, endAngle, options = {}) {
|
|
358
|
-
return (0, import_deepsea_tools.drawArc)(o, o, radius, startAngle, endAngle, options);
|
|
359
|
-
}
|
|
360
|
-
return /* @__PURE__ */ React.createElement(
|
|
361
|
-
"div",
|
|
362
|
-
{
|
|
363
|
-
style: {
|
|
364
|
-
...style,
|
|
365
|
-
width: o * 2,
|
|
366
|
-
height: o * 2,
|
|
367
|
-
clipPath: `path("${Array(c).fill(0).map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`).join(" ")} Z")`
|
|
368
|
-
},
|
|
369
|
-
...others
|
|
370
|
-
}
|
|
371
|
-
);
|
|
372
|
-
};
|
|
373
|
-
var TransitionNum = (0, import_react.forwardRef)((props, ref) => {
|
|
374
|
-
const { children: num, period, numToStr, ...others } = props;
|
|
375
|
-
if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
|
|
376
|
-
throw new RangeError("目标数字必须是整数,周期必须是正整数");
|
|
377
|
-
}
|
|
378
|
-
const ele = (0, import_react.useRef)(null);
|
|
379
|
-
const cache = (0, import_react.useRef)({ num, period, numToStr, show: num });
|
|
380
|
-
cache.current = { ...cache.current, num, period, numToStr };
|
|
381
|
-
(0, import_react.useImperativeHandle)(ref, () => ({ get: () => cache.current.show }), []);
|
|
382
|
-
(0, import_react.useEffect)(() => {
|
|
383
|
-
const { num: num2, period: period2, show, numToStr: numToStr2 } = cache.current;
|
|
384
|
-
ele.current.innerText = (numToStr2 || String)(show);
|
|
385
|
-
if (num2 === show)
|
|
386
|
-
return;
|
|
387
|
-
const div = ele.current;
|
|
388
|
-
const speed = (num2 - show) / period2;
|
|
389
|
-
const cancel = (0, import_deepsea_tools.setFrameInterval)(() => {
|
|
390
|
-
const { num: num3, numToStr: numToStr3 } = cache.current;
|
|
391
|
-
cache.current.show += speed;
|
|
392
|
-
if (speed > 0 && cache.current.show > num3 || speed < 0 && cache.current.show < num3) {
|
|
393
|
-
cancel();
|
|
394
|
-
cache.current.show = num3;
|
|
395
|
-
}
|
|
396
|
-
div.innerText = (numToStr3 || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show));
|
|
397
|
-
}, 1);
|
|
398
|
-
return cancel;
|
|
399
|
-
}, [num]);
|
|
400
|
-
return /* @__PURE__ */ React.createElement("div", { ref: ele, ...others });
|
|
401
|
-
});
|
|
402
|
-
var CircleText = (props) => {
|
|
403
|
-
const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...others } = props;
|
|
404
|
-
const unitAngle = Math.atan(width / 2 / radius) * 2;
|
|
405
|
-
const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
|
|
406
|
-
const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2;
|
|
407
|
-
function getTransform(idx) {
|
|
408
|
-
const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2;
|
|
409
|
-
const x = (radius + height / 2) * Math.cos(angle) - width / 2;
|
|
410
|
-
const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2;
|
|
411
|
-
const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0);
|
|
412
|
-
return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
|
|
413
|
-
}
|
|
414
|
-
const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "");
|
|
415
|
-
if (reverse)
|
|
416
|
-
words.reverse();
|
|
417
|
-
return /* @__PURE__ */ React.createElement(import_react.Fragment, null, words.map((w, idx) => /* @__PURE__ */ React.createElement("span", { key: idx, style: { position: "absolute", ...style, transform: getTransform(idx), textAlign: "center", width, lineHeight: `${height}px`, height }, ...others }, w)));
|
|
418
|
-
};
|
|
419
|
-
var AutoSizeTextArea = (0, import_react.forwardRef)((props, ref) => {
|
|
420
|
-
const { style = {}, ...others } = props;
|
|
421
|
-
const { height, resize, overflowY, ...otherStyle } = style;
|
|
422
|
-
const ele = (0, import_react.useRef)(null);
|
|
423
|
-
(0, import_react.useImperativeHandle)(ref, () => ele.current);
|
|
424
|
-
(0, import_react.useEffect)(() => {
|
|
425
|
-
const textarea = ele.current;
|
|
426
|
-
function resizeTextarea() {
|
|
427
|
-
textarea.style.height = "auto";
|
|
428
|
-
textarea.style.height = `${textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight}px`;
|
|
429
|
-
}
|
|
430
|
-
textarea.addEventListener("input", resizeTextarea);
|
|
431
|
-
textarea.addEventListener("change", resizeTextarea);
|
|
432
|
-
return () => {
|
|
433
|
-
textarea.removeEventListener("input", resizeTextarea);
|
|
434
|
-
textarea.removeEventListener("change", resizeTextarea);
|
|
435
|
-
};
|
|
436
|
-
}, []);
|
|
437
|
-
return /* @__PURE__ */ React.createElement("textarea", { ref: ele, style: { ...otherStyle, resize: "none", overflowY: "hidden" }, ...others });
|
|
438
|
-
});
|
|
439
|
-
var AutoFit = (0, import_react.forwardRef)((props, ref) => {
|
|
440
|
-
const { width = 1920, height = 1080, direction, className, ...rest } = props;
|
|
441
|
-
const ele = (0, import_react.useRef)(null);
|
|
442
|
-
const [show, setShow] = (0, import_react.useState)(false);
|
|
443
|
-
(0, import_react.useImperativeHandle)(ref, () => ele.current, [ele.current]);
|
|
444
|
-
(0, import_react.useLayoutEffect)(() => {
|
|
445
|
-
const element = ele.current;
|
|
446
|
-
const parent = element?.parentElement;
|
|
447
|
-
if (!element || !parent)
|
|
448
|
-
return;
|
|
449
|
-
function listener(entries) {
|
|
450
|
-
const entry = entries[0];
|
|
451
|
-
const { contentRect } = entry;
|
|
452
|
-
if (direction === "horizontal") {
|
|
453
|
-
const scale = contentRect.width / width;
|
|
454
|
-
element?.style.setProperty("--transform", `scale(${scale})`);
|
|
455
|
-
element?.style.setProperty("--width", `${width}px`);
|
|
456
|
-
element?.style.setProperty("--height", `${contentRect.height / scale}px`);
|
|
457
|
-
} else if (direction === "vertical") {
|
|
458
|
-
const scale = contentRect.height / height;
|
|
459
|
-
element?.style.setProperty("--transform", `scale(${scale})`);
|
|
460
|
-
element?.style.setProperty("--width", `${contentRect.width / scale}px`);
|
|
461
|
-
element?.style.setProperty("--height", `${height}px`);
|
|
462
|
-
} else {
|
|
463
|
-
const scale = Math.min(contentRect.width / width, contentRect.height / height);
|
|
464
|
-
element?.style.setProperty("--transform", `translateX(${(contentRect.width - width * scale) / 2}px) translateY(${(contentRect.height - height * scale) / 2}px) scale(${scale})`);
|
|
465
|
-
element?.style.setProperty("--width", `${width}px`);
|
|
466
|
-
element?.style.setProperty("--height", `${height}px`);
|
|
467
|
-
}
|
|
468
|
-
setShow(true);
|
|
469
|
-
}
|
|
470
|
-
const observer = new ResizeObserver(listener);
|
|
471
|
-
observer.observe(parent);
|
|
472
|
-
return () => observer.disconnect();
|
|
473
|
-
}, [ele.current?.parentElement, width, height, direction]);
|
|
474
|
-
if (process.env.NODE_ENV === "development") {
|
|
475
|
-
(0, import_react.useEffect)(() => {
|
|
476
|
-
const parent = ele.current?.parentElement;
|
|
477
|
-
if (!parent)
|
|
478
|
-
return;
|
|
479
|
-
const style = getComputedStyle(parent);
|
|
480
|
-
if (style.position === "static") {
|
|
481
|
-
console.warn("AutoFit 组件的父元素的 position 属性不应该是 static");
|
|
482
|
-
}
|
|
483
|
-
}, [ele.current?.parentElement]);
|
|
484
|
-
}
|
|
485
|
-
if (!show)
|
|
486
|
-
return /* @__PURE__ */ React.createElement("div", { ref: ele, style: { display: "none" } });
|
|
487
|
-
return /* @__PURE__ */ React.createElement(
|
|
488
|
-
"div",
|
|
489
|
-
{
|
|
490
|
-
ref: ele,
|
|
491
|
-
className: (0, import_deepsea_tools.clsx)(
|
|
492
|
-
import_css.css`
|
|
493
|
-
position: absolute;
|
|
494
|
-
transform: var(--transform);
|
|
495
|
-
transform-origin: top left;
|
|
496
|
-
width: var(--width);
|
|
497
|
-
height: var(--height);
|
|
498
|
-
`,
|
|
499
|
-
className
|
|
500
|
-
),
|
|
501
|
-
...rest
|
|
502
|
-
}
|
|
503
|
-
);
|
|
504
|
-
});
|
|
21
|
+
__reExport(src_exports, require("./components/AutoSizeTextarea"), module.exports);
|
|
22
|
+
__reExport(src_exports, require("./components/CircleText"), module.exports);
|
|
23
|
+
__reExport(src_exports, require("./components/Flow"), module.exports);
|
|
24
|
+
__reExport(src_exports, require("./components/InputFile"), module.exports);
|
|
25
|
+
__reExport(src_exports, require("./components/LoopSwiper"), module.exports);
|
|
26
|
+
__reExport(src_exports, require("./components/Ring"), module.exports);
|
|
27
|
+
__reExport(src_exports, require("./components/Scroll"), module.exports);
|
|
28
|
+
__reExport(src_exports, require("./components/SectionRing"), module.exports);
|
|
29
|
+
__reExport(src_exports, require("./components/Skeleton"), module.exports);
|
|
30
|
+
__reExport(src_exports, require("./components/TransitionBox"), module.exports);
|
|
31
|
+
__reExport(src_exports, require("./components/TransitionNum"), module.exports);
|
|
32
|
+
__reExport(src_exports, require("./components/Trapezium"), module.exports);
|
|
505
33
|
// Annotate the CommonJS export names for ESM import in node:
|
|
506
34
|
0 && (module.exports = {
|
|
507
|
-
AutoFit,
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
Flow,
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
LoopSwiper,
|
|
516
|
-
Ring,
|
|
517
|
-
SeaRadar,
|
|
518
|
-
SectionRing,
|
|
519
|
-
TransitionBox,
|
|
520
|
-
TransitionNum,
|
|
521
|
-
Trapezium,
|
|
522
|
-
exportExcel,
|
|
523
|
-
getFileData,
|
|
524
|
-
getGapCountAndSize,
|
|
525
|
-
getGapRange,
|
|
35
|
+
...require("./components/AutoFit"),
|
|
36
|
+
...require("./components/AutoScroll"),
|
|
37
|
+
...require("./components/AutoSizeTextarea"),
|
|
38
|
+
...require("./components/CircleText"),
|
|
39
|
+
...require("./components/Flow"),
|
|
40
|
+
...require("./components/InputFile"),
|
|
41
|
+
...require("./components/LoopSwiper"),
|
|
42
|
+
...require("./components/Ring"),
|
|
526
43
|
...require("./components/Scroll"),
|
|
527
|
-
...require("./components/
|
|
44
|
+
...require("./components/SectionRing"),
|
|
45
|
+
...require("./components/Skeleton"),
|
|
46
|
+
...require("./components/TransitionBox"),
|
|
47
|
+
...require("./components/TransitionNum"),
|
|
48
|
+
...require("./components/Trapezium")
|
|
528
49
|
});
|
|
529
50
|
//# sourceMappingURL=index.js.map
|