@canvas-components/react-components 0.3.19 → 0.3.21
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/README.md +138 -21
- package/THIRD_PARTY_NOTICES.md +30 -0
- package/dist/index.cjs +5266 -479
- package/dist/index.d.cts +3051 -188
- package/dist/index.d.ts +3051 -188
- package/dist/index.js +3552 -477
- package/package.json +6 -2
package/dist/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { forwardRef, useRef, useEffect, useImperativeHandle,
|
|
2
|
+
import { createContext, forwardRef, createElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo, useSyncExternalStore, useContext, isValidElement, cloneElement, Fragment as Fragment$1, useId, Children } from 'react';
|
|
3
3
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
import { iconDefinitions, iconNames } from '@canvas-components/icons';
|
|
5
|
+
import * as ReactDOM from 'react-dom';
|
|
4
6
|
import { createPortal } from 'react-dom';
|
|
5
7
|
|
|
6
8
|
// #style-inject:#style-inject
|
|
@@ -26,7 +28,1396 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
// src/styles/variables.css
|
|
29
|
-
styleInject(":root {\n --canvas-react-color-primary: #1677ff;\n --canvas-react-color-primary-hover: #4096ff;\n --canvas-react-color-border: #d9d9d9;\n --canvas-react-color-border-strong: #bfbfbf;\n --canvas-react-color-text: #1f2937;\n --canvas-react-color-text-muted: #6b7280;\n --canvas-react-color-bg: #ffffff;\n --canvas-react-color-bg-soft: #f5f5f5;\n --canvas-react-color-bg-hover: #f3f4f6;\n --canvas-react-color-bg-active: #e6f4ff;\n --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n --canvas-react-radius-sm: 6px;\n --canvas-react-radius-md: 8px;\n --canvas-react-control-height: 32px;\n --canvas-react-font-size: 14px;\n --canvas-react-control-padding-inline: 11px;\n --canvas-react-control-padding-block: 0px;\n --canvas-react-content-zoom: 1;\n}\n.canvas-react-scrollbar {\n scrollbar-width: thin;\n}\n.canvas-react-scrollbar::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-thumb {\n min-height: 32px;\n border: 2px solid transparent;\n border-radius: 999px;\n background: #aeb4bd;\n background-clip: content-box;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-thumb:hover {\n background: #8f98a5;\n background-clip: content-box;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-corner {\n background: transparent;\n}\n");
|
|
31
|
+
styleInject(":root {\n --canvas-react-color-primary: #1677ff;\n --canvas-react-color-primary-hover: #4096ff;\n --canvas-react-color-border: #d9d9d9;\n --canvas-react-color-border-strong: #bfbfbf;\n --canvas-react-color-text: #1f2937;\n --canvas-react-color-text-muted: #6b7280;\n --canvas-react-color-bg: #ffffff;\n --canvas-react-color-bg-soft: #f5f5f5;\n --canvas-react-color-bg-hover: #f3f4f6;\n --canvas-react-color-bg-active: #e6f4ff;\n --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n --canvas-react-radius-sm: 6px;\n --canvas-react-radius-md: 8px;\n --canvas-react-control-height: 32px;\n --canvas-react-font-size: 14px;\n --canvas-react-font-size-secondary: 12px;\n --canvas-react-font-size-label: 13px;\n --canvas-react-control-padding-inline: 11px;\n --canvas-react-control-padding-block: 0px;\n --canvas-react-content-zoom: 1;\n}\n.canvas-react-scrollbar {\n scrollbar-width: thin;\n}\n.canvas-react-scrollbar::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-thumb {\n min-height: 32px;\n border: 2px solid transparent;\n border-radius: 999px;\n background: #aeb4bd;\n background-clip: content-box;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-thumb:hover {\n background: #8f98a5;\n background-clip: content-box;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-corner {\n background: transparent;\n}\n");
|
|
32
|
+
var ConfigContext = createContext({});
|
|
33
|
+
var variables = {
|
|
34
|
+
fontSize: "font-size",
|
|
35
|
+
secondaryFontSize: "font-size-secondary",
|
|
36
|
+
labelFontSize: "font-size-label",
|
|
37
|
+
colorText: "color-text",
|
|
38
|
+
colorTextSecondary: "color-text-muted",
|
|
39
|
+
colorPrimary: "color-primary",
|
|
40
|
+
colorPrimaryHover: "color-primary-hover",
|
|
41
|
+
colorBorder: "color-border",
|
|
42
|
+
colorBackground: "color-bg",
|
|
43
|
+
controlHeight: "control-height",
|
|
44
|
+
borderRadius: "radius-sm"
|
|
45
|
+
};
|
|
46
|
+
function reactConfigThemeStyle(theme) {
|
|
47
|
+
const style = {};
|
|
48
|
+
for (const key of Object.keys(variables)) {
|
|
49
|
+
const value = theme[key];
|
|
50
|
+
if (typeof value === "number" && Number.isFinite(value) && value >= 0)
|
|
51
|
+
style[`--canvas-react-${variables[key]}`] = `${value}px`;
|
|
52
|
+
else if (typeof value === "string" && value.trim())
|
|
53
|
+
style[`--canvas-react-${variables[key]}`] = value;
|
|
54
|
+
}
|
|
55
|
+
return style;
|
|
56
|
+
}
|
|
57
|
+
function useReactConfig() {
|
|
58
|
+
return useContext(ConfigContext);
|
|
59
|
+
}
|
|
60
|
+
function useReactConfigStyle() {
|
|
61
|
+
return reactConfigThemeStyle(useReactConfig());
|
|
62
|
+
}
|
|
63
|
+
function ReactConfigProvider({
|
|
64
|
+
theme = {},
|
|
65
|
+
style,
|
|
66
|
+
className,
|
|
67
|
+
children,
|
|
68
|
+
...rest
|
|
69
|
+
}) {
|
|
70
|
+
const parent = useReactConfig();
|
|
71
|
+
const merged = useMemo(
|
|
72
|
+
() => ({
|
|
73
|
+
...parent,
|
|
74
|
+
...Object.fromEntries(
|
|
75
|
+
Object.entries(theme).filter(([, value]) => value !== void 0)
|
|
76
|
+
)
|
|
77
|
+
}),
|
|
78
|
+
[parent, theme]
|
|
79
|
+
);
|
|
80
|
+
return /* @__PURE__ */ jsx(ConfigContext.Provider, { value: merged, children: /* @__PURE__ */ jsx(
|
|
81
|
+
"div",
|
|
82
|
+
{
|
|
83
|
+
...rest,
|
|
84
|
+
className: ["canvas-react-config-provider", className].filter(Boolean).join(" "),
|
|
85
|
+
style: {
|
|
86
|
+
color: "var(--canvas-react-color-text)",
|
|
87
|
+
fontSize: "var(--canvas-react-font-size)",
|
|
88
|
+
...reactConfigThemeStyle(merged),
|
|
89
|
+
...style
|
|
90
|
+
},
|
|
91
|
+
children
|
|
92
|
+
}
|
|
93
|
+
) });
|
|
94
|
+
}
|
|
95
|
+
function ReactProgress({
|
|
96
|
+
percent,
|
|
97
|
+
label,
|
|
98
|
+
showInfo = true,
|
|
99
|
+
status = "normal",
|
|
100
|
+
className,
|
|
101
|
+
style
|
|
102
|
+
}) {
|
|
103
|
+
const configStyle = useReactConfigStyle();
|
|
104
|
+
const value = Number.isFinite(percent) ? Math.min(100, Math.max(0, percent)) : 0;
|
|
105
|
+
return /* @__PURE__ */ jsxs(
|
|
106
|
+
"div",
|
|
107
|
+
{
|
|
108
|
+
className: ["canvas-react-progress", className].filter(Boolean).join(" "),
|
|
109
|
+
role: "progressbar",
|
|
110
|
+
"aria-label": label,
|
|
111
|
+
"aria-valuemin": 0,
|
|
112
|
+
"aria-valuemax": 100,
|
|
113
|
+
"aria-valuenow": value,
|
|
114
|
+
style: {
|
|
115
|
+
...configStyle,
|
|
116
|
+
display: "flex",
|
|
117
|
+
alignItems: "center",
|
|
118
|
+
gap: 12,
|
|
119
|
+
...style
|
|
120
|
+
},
|
|
121
|
+
children: [
|
|
122
|
+
/* @__PURE__ */ jsx(
|
|
123
|
+
"div",
|
|
124
|
+
{
|
|
125
|
+
style: {
|
|
126
|
+
flex: 1,
|
|
127
|
+
height: 8,
|
|
128
|
+
overflow: "hidden",
|
|
129
|
+
borderRadius: 4,
|
|
130
|
+
background: "var(--canvas-react-color-bg-soft)"
|
|
131
|
+
},
|
|
132
|
+
children: /* @__PURE__ */ jsx(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
style: {
|
|
136
|
+
width: `${value}%`,
|
|
137
|
+
height: "100%",
|
|
138
|
+
borderRadius: "inherit",
|
|
139
|
+
background: status === "exception" ? "#ff4d4f" : "var(--canvas-react-color-primary)",
|
|
140
|
+
transition: "width 160ms ease"
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
)
|
|
144
|
+
}
|
|
145
|
+
),
|
|
146
|
+
showInfo && /* @__PURE__ */ jsxs(
|
|
147
|
+
"span",
|
|
148
|
+
{
|
|
149
|
+
style: {
|
|
150
|
+
minWidth: "4ch",
|
|
151
|
+
textAlign: "right",
|
|
152
|
+
color: "var(--canvas-react-color-text-muted)",
|
|
153
|
+
fontVariantNumeric: "tabular-nums"
|
|
154
|
+
},
|
|
155
|
+
children: [
|
|
156
|
+
Math.round(value),
|
|
157
|
+
"%"
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
)
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
var REACT_ICON_DEFINITIONS = iconDefinitions;
|
|
166
|
+
|
|
167
|
+
// src/components/icon/style.css
|
|
168
|
+
styleInject(".canvas-react-icon {\n display: inline-block;\n vertical-align: -0.125em;\n color: inherit;\n}\n.canvas-react-icon-spin {\n animation: canvas-react-icon-spin 1s infinite linear;\n}\n@keyframes canvas-react-icon-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-icon-spin {\n animation-duration: 2s;\n }\n}\n");
|
|
169
|
+
var PRIMARY_COLOR_TOKEN = "__CC_REACT_ICON_PRIMARY__";
|
|
170
|
+
var SECONDARY_COLOR_TOKEN = "__CC_REACT_ICON_SECONDARY__";
|
|
171
|
+
var ReactIcon = forwardRef(
|
|
172
|
+
function ReactIcon2({
|
|
173
|
+
"aria-hidden": ariaHidden,
|
|
174
|
+
"aria-label": ariaLabel,
|
|
175
|
+
className,
|
|
176
|
+
color,
|
|
177
|
+
name,
|
|
178
|
+
rotate,
|
|
179
|
+
size = "1em",
|
|
180
|
+
spin = false,
|
|
181
|
+
style,
|
|
182
|
+
twoToneColor,
|
|
183
|
+
...svgProps
|
|
184
|
+
}, ref) {
|
|
185
|
+
const icon = REACT_ICON_DEFINITIONS[name];
|
|
186
|
+
const [primaryColor, secondaryColor] = resolveTwoToneColors(twoToneColor);
|
|
187
|
+
const svgStyle = {
|
|
188
|
+
color,
|
|
189
|
+
width: size,
|
|
190
|
+
height: size,
|
|
191
|
+
transform: rotate == null ? void 0 : `rotate(${rotate}deg)`,
|
|
192
|
+
...style
|
|
193
|
+
};
|
|
194
|
+
const classes = [
|
|
195
|
+
"canvas-react-icon",
|
|
196
|
+
spin ? "canvas-react-icon-spin" : void 0,
|
|
197
|
+
className
|
|
198
|
+
].filter(Boolean).join(" ");
|
|
199
|
+
return createElement(
|
|
200
|
+
"svg",
|
|
201
|
+
{
|
|
202
|
+
...svgProps,
|
|
203
|
+
ref,
|
|
204
|
+
className: classes,
|
|
205
|
+
viewBox: icon.icon.attrs.viewBox,
|
|
206
|
+
width: size,
|
|
207
|
+
height: size,
|
|
208
|
+
fill: "currentColor",
|
|
209
|
+
style: svgStyle,
|
|
210
|
+
role: ariaLabel ? "img" : svgProps.role,
|
|
211
|
+
"aria-label": ariaLabel,
|
|
212
|
+
"aria-hidden": ariaHidden ?? !ariaLabel,
|
|
213
|
+
focusable: "false",
|
|
214
|
+
"data-icon": icon.name
|
|
215
|
+
},
|
|
216
|
+
...renderIconChildren(icon.icon, primaryColor, secondaryColor)
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
);
|
|
220
|
+
ReactIcon.displayName = "ReactIcon";
|
|
221
|
+
function createReactIconComponent(name) {
|
|
222
|
+
const IconComponent = forwardRef(
|
|
223
|
+
function NamedReactIcon(props, ref) {
|
|
224
|
+
return /* @__PURE__ */ jsx(ReactIcon, { ...props, name, ref });
|
|
225
|
+
}
|
|
226
|
+
);
|
|
227
|
+
IconComponent.displayName = `React${name}`;
|
|
228
|
+
return IconComponent;
|
|
229
|
+
}
|
|
230
|
+
function resolveTwoToneColors(twoToneColor) {
|
|
231
|
+
if (Array.isArray(twoToneColor)) {
|
|
232
|
+
return [twoToneColor[0], twoToneColor[1]];
|
|
233
|
+
}
|
|
234
|
+
const primaryColor = twoToneColor ?? "#1677ff";
|
|
235
|
+
return [
|
|
236
|
+
primaryColor,
|
|
237
|
+
twoToneColor ? lightenColor(twoToneColor) : "#e6f4ff"
|
|
238
|
+
];
|
|
239
|
+
}
|
|
240
|
+
function lightenColor(color) {
|
|
241
|
+
const match = color.match(/^#([\da-f]{3}|[\da-f]{6})$/i);
|
|
242
|
+
if (!match) return "#e6e6e6";
|
|
243
|
+
const raw = match[1];
|
|
244
|
+
const normalized = raw.length === 3 ? raw.split("").map((digit) => digit + digit).join("") : raw;
|
|
245
|
+
const channels = normalized.match(/[\da-f]{2}/gi).map((channel) => Number.parseInt(channel, 16));
|
|
246
|
+
return `#${channels.map((channel) => Math.round(channel + (255 - channel) * 0.9)).map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
|
|
247
|
+
}
|
|
248
|
+
function renderIconChildren(node, primaryColor, secondaryColor) {
|
|
249
|
+
return (node.children ?? []).map((child, index) => {
|
|
250
|
+
const props = {};
|
|
251
|
+
for (const [key, rawValue] of Object.entries(child.attrs)) {
|
|
252
|
+
const value = rawValue.split(PRIMARY_COLOR_TOKEN).join(primaryColor).split(SECONDARY_COLOR_TOKEN).join(secondaryColor);
|
|
253
|
+
props[normalizeSvgAttribute(key)] = value;
|
|
254
|
+
}
|
|
255
|
+
return createElement(
|
|
256
|
+
child.tag,
|
|
257
|
+
{ ...props, key: `${child.tag}-${index}` },
|
|
258
|
+
...renderIconChildren(child, primaryColor, secondaryColor)
|
|
259
|
+
);
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
var SVG_ATTRIBUTE_NAMES = {
|
|
263
|
+
class: "className",
|
|
264
|
+
"clip-path": "clipPath",
|
|
265
|
+
"clip-rule": "clipRule",
|
|
266
|
+
"fill-rule": "fillRule",
|
|
267
|
+
"stroke-dasharray": "strokeDasharray",
|
|
268
|
+
"stroke-dashoffset": "strokeDashoffset",
|
|
269
|
+
"stroke-linecap": "strokeLinecap",
|
|
270
|
+
"stroke-linejoin": "strokeLinejoin",
|
|
271
|
+
"stroke-miterlimit": "strokeMiterlimit",
|
|
272
|
+
"stroke-width": "strokeWidth",
|
|
273
|
+
"xlink:href": "xlinkHref"
|
|
274
|
+
};
|
|
275
|
+
function normalizeSvgAttribute(name) {
|
|
276
|
+
return SVG_ATTRIBUTE_NAMES[name] ?? name.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
|
|
277
|
+
}
|
|
278
|
+
var reactIconNames = iconNames;
|
|
279
|
+
|
|
280
|
+
// src/components/icon/icons.tsx
|
|
281
|
+
var ReactAccountBookFilled = createReactIconComponent("AccountBookFilled");
|
|
282
|
+
var ReactAccountBookOutlined = createReactIconComponent(
|
|
283
|
+
"AccountBookOutlined"
|
|
284
|
+
);
|
|
285
|
+
var ReactAccountBookTwoTone = createReactIconComponent("AccountBookTwoTone");
|
|
286
|
+
var ReactAimOutlined = createReactIconComponent("AimOutlined");
|
|
287
|
+
var ReactAlertFilled = createReactIconComponent("AlertFilled");
|
|
288
|
+
var ReactAlertOutlined = createReactIconComponent("AlertOutlined");
|
|
289
|
+
var ReactAlertTwoTone = createReactIconComponent("AlertTwoTone");
|
|
290
|
+
var ReactAlibabaOutlined = createReactIconComponent("AlibabaOutlined");
|
|
291
|
+
var ReactAlignCenterOutlined = createReactIconComponent(
|
|
292
|
+
"AlignCenterOutlined"
|
|
293
|
+
);
|
|
294
|
+
var ReactAlignLeftOutlined = createReactIconComponent("AlignLeftOutlined");
|
|
295
|
+
var ReactAlignRightOutlined = createReactIconComponent("AlignRightOutlined");
|
|
296
|
+
var ReactAlipayCircleFilled = createReactIconComponent("AlipayCircleFilled");
|
|
297
|
+
var ReactAlipayCircleOutlined = createReactIconComponent(
|
|
298
|
+
"AlipayCircleOutlined"
|
|
299
|
+
);
|
|
300
|
+
var ReactAlipayOutlined = createReactIconComponent("AlipayOutlined");
|
|
301
|
+
var ReactAlipaySquareFilled = createReactIconComponent("AlipaySquareFilled");
|
|
302
|
+
var ReactAliwangwangFilled = createReactIconComponent("AliwangwangFilled");
|
|
303
|
+
var ReactAliwangwangOutlined = createReactIconComponent(
|
|
304
|
+
"AliwangwangOutlined"
|
|
305
|
+
);
|
|
306
|
+
var ReactAliyunOutlined = createReactIconComponent("AliyunOutlined");
|
|
307
|
+
var ReactAmazonCircleFilled = createReactIconComponent("AmazonCircleFilled");
|
|
308
|
+
var ReactAmazonOutlined = createReactIconComponent("AmazonOutlined");
|
|
309
|
+
var ReactAmazonSquareFilled = createReactIconComponent("AmazonSquareFilled");
|
|
310
|
+
var ReactAndroidFilled = createReactIconComponent("AndroidFilled");
|
|
311
|
+
var ReactAndroidOutlined = createReactIconComponent("AndroidOutlined");
|
|
312
|
+
var ReactAntCloudOutlined = createReactIconComponent("AntCloudOutlined");
|
|
313
|
+
var ReactAntDesignOutlined = createReactIconComponent("AntDesignOutlined");
|
|
314
|
+
var ReactAnthropicFilled = createReactIconComponent("AnthropicFilled");
|
|
315
|
+
var ReactApartmentOutlined = createReactIconComponent("ApartmentOutlined");
|
|
316
|
+
var ReactApiFilled = createReactIconComponent("ApiFilled");
|
|
317
|
+
var ReactApiOutlined = createReactIconComponent("ApiOutlined");
|
|
318
|
+
var ReactApiTwoTone = createReactIconComponent("ApiTwoTone");
|
|
319
|
+
var ReactAppleFilled = createReactIconComponent("AppleFilled");
|
|
320
|
+
var ReactAppleOutlined = createReactIconComponent("AppleOutlined");
|
|
321
|
+
var ReactAppstoreAddOutlined = createReactIconComponent(
|
|
322
|
+
"AppstoreAddOutlined"
|
|
323
|
+
);
|
|
324
|
+
var ReactAppstoreFilled = createReactIconComponent("AppstoreFilled");
|
|
325
|
+
var ReactAppstoreOutlined = createReactIconComponent("AppstoreOutlined");
|
|
326
|
+
var ReactAppstoreTwoTone = createReactIconComponent("AppstoreTwoTone");
|
|
327
|
+
var ReactAreaChartOutlined = createReactIconComponent("AreaChartOutlined");
|
|
328
|
+
var ReactArrowDownOutlined = createReactIconComponent("ArrowDownOutlined");
|
|
329
|
+
var ReactArrowLeftOutlined = createReactIconComponent("ArrowLeftOutlined");
|
|
330
|
+
var ReactArrowRightOutlined = createReactIconComponent("ArrowRightOutlined");
|
|
331
|
+
var ReactArrowUpOutlined = createReactIconComponent("ArrowUpOutlined");
|
|
332
|
+
var ReactArrowsAltOutlined = createReactIconComponent("ArrowsAltOutlined");
|
|
333
|
+
var ReactAudioFilled = createReactIconComponent("AudioFilled");
|
|
334
|
+
var ReactAudioMutedOutlined = createReactIconComponent("AudioMutedOutlined");
|
|
335
|
+
var ReactAudioOutlined = createReactIconComponent("AudioOutlined");
|
|
336
|
+
var ReactAudioTwoTone = createReactIconComponent("AudioTwoTone");
|
|
337
|
+
var ReactAuditOutlined = createReactIconComponent("AuditOutlined");
|
|
338
|
+
var ReactBackwardFilled = createReactIconComponent("BackwardFilled");
|
|
339
|
+
var ReactBackwardOutlined = createReactIconComponent("BackwardOutlined");
|
|
340
|
+
var ReactBaiduOutlined = createReactIconComponent("BaiduOutlined");
|
|
341
|
+
var ReactBankFilled = createReactIconComponent("BankFilled");
|
|
342
|
+
var ReactBankOutlined = createReactIconComponent("BankOutlined");
|
|
343
|
+
var ReactBankTwoTone = createReactIconComponent("BankTwoTone");
|
|
344
|
+
var ReactBarChartOutlined = createReactIconComponent("BarChartOutlined");
|
|
345
|
+
var ReactBarcodeOutlined = createReactIconComponent("BarcodeOutlined");
|
|
346
|
+
var ReactBarsOutlined = createReactIconComponent("BarsOutlined");
|
|
347
|
+
var ReactBehanceCircleFilled = createReactIconComponent(
|
|
348
|
+
"BehanceCircleFilled"
|
|
349
|
+
);
|
|
350
|
+
var ReactBehanceOutlined = createReactIconComponent("BehanceOutlined");
|
|
351
|
+
var ReactBehanceSquareFilled = createReactIconComponent(
|
|
352
|
+
"BehanceSquareFilled"
|
|
353
|
+
);
|
|
354
|
+
var ReactBehanceSquareOutlined = createReactIconComponent(
|
|
355
|
+
"BehanceSquareOutlined"
|
|
356
|
+
);
|
|
357
|
+
var ReactBellFilled = createReactIconComponent("BellFilled");
|
|
358
|
+
var ReactBellOutlined = createReactIconComponent("BellOutlined");
|
|
359
|
+
var ReactBellTwoTone = createReactIconComponent("BellTwoTone");
|
|
360
|
+
var ReactBgColorsOutlined = createReactIconComponent("BgColorsOutlined");
|
|
361
|
+
var ReactBilibiliFilled = createReactIconComponent("BilibiliFilled");
|
|
362
|
+
var ReactBilibiliOutlined = createReactIconComponent("BilibiliOutlined");
|
|
363
|
+
var ReactBlockOutlined = createReactIconComponent("BlockOutlined");
|
|
364
|
+
var ReactBoldOutlined = createReactIconComponent("BoldOutlined");
|
|
365
|
+
var ReactBookFilled = createReactIconComponent("BookFilled");
|
|
366
|
+
var ReactBookOutlined = createReactIconComponent("BookOutlined");
|
|
367
|
+
var ReactBookTwoTone = createReactIconComponent("BookTwoTone");
|
|
368
|
+
var ReactBorderBottomOutlined = createReactIconComponent(
|
|
369
|
+
"BorderBottomOutlined"
|
|
370
|
+
);
|
|
371
|
+
var ReactBorderHorizontalOutlined = createReactIconComponent(
|
|
372
|
+
"BorderHorizontalOutlined"
|
|
373
|
+
);
|
|
374
|
+
var ReactBorderInnerOutlined = createReactIconComponent(
|
|
375
|
+
"BorderInnerOutlined"
|
|
376
|
+
);
|
|
377
|
+
var ReactBorderLeftOutlined = createReactIconComponent("BorderLeftOutlined");
|
|
378
|
+
var ReactBorderOuterOutlined = createReactIconComponent(
|
|
379
|
+
"BorderOuterOutlined"
|
|
380
|
+
);
|
|
381
|
+
var ReactBorderOutlined = createReactIconComponent("BorderOutlined");
|
|
382
|
+
var ReactBorderRightOutlined = createReactIconComponent(
|
|
383
|
+
"BorderRightOutlined"
|
|
384
|
+
);
|
|
385
|
+
var ReactBorderTopOutlined = createReactIconComponent("BorderTopOutlined");
|
|
386
|
+
var ReactBorderVerticleOutlined = createReactIconComponent(
|
|
387
|
+
"BorderVerticleOutlined"
|
|
388
|
+
);
|
|
389
|
+
var ReactBorderlessTableOutlined = createReactIconComponent(
|
|
390
|
+
"BorderlessTableOutlined"
|
|
391
|
+
);
|
|
392
|
+
var ReactBoxPlotFilled = createReactIconComponent("BoxPlotFilled");
|
|
393
|
+
var ReactBoxPlotOutlined = createReactIconComponent("BoxPlotOutlined");
|
|
394
|
+
var ReactBoxPlotTwoTone = createReactIconComponent("BoxPlotTwoTone");
|
|
395
|
+
var ReactBranchesOutlined = createReactIconComponent("BranchesOutlined");
|
|
396
|
+
var ReactBugFilled = createReactIconComponent("BugFilled");
|
|
397
|
+
var ReactBugOutlined = createReactIconComponent("BugOutlined");
|
|
398
|
+
var ReactBugTwoTone = createReactIconComponent("BugTwoTone");
|
|
399
|
+
var ReactBuildFilled = createReactIconComponent("BuildFilled");
|
|
400
|
+
var ReactBuildOutlined = createReactIconComponent("BuildOutlined");
|
|
401
|
+
var ReactBuildTwoTone = createReactIconComponent("BuildTwoTone");
|
|
402
|
+
var ReactBulbFilled = createReactIconComponent("BulbFilled");
|
|
403
|
+
var ReactBulbOutlined = createReactIconComponent("BulbOutlined");
|
|
404
|
+
var ReactBulbTwoTone = createReactIconComponent("BulbTwoTone");
|
|
405
|
+
var ReactCalculatorFilled = createReactIconComponent("CalculatorFilled");
|
|
406
|
+
var ReactCalculatorOutlined = createReactIconComponent("CalculatorOutlined");
|
|
407
|
+
var ReactCalculatorTwoTone = createReactIconComponent("CalculatorTwoTone");
|
|
408
|
+
var ReactCalendarFilled = createReactIconComponent("CalendarFilled");
|
|
409
|
+
var ReactCalendarOutlined = createReactIconComponent("CalendarOutlined");
|
|
410
|
+
var ReactCalendarTwoTone = createReactIconComponent("CalendarTwoTone");
|
|
411
|
+
var ReactCameraFilled = createReactIconComponent("CameraFilled");
|
|
412
|
+
var ReactCameraOutlined = createReactIconComponent("CameraOutlined");
|
|
413
|
+
var ReactCameraTwoTone = createReactIconComponent("CameraTwoTone");
|
|
414
|
+
var ReactCarFilled = createReactIconComponent("CarFilled");
|
|
415
|
+
var ReactCarOutlined = createReactIconComponent("CarOutlined");
|
|
416
|
+
var ReactCarTwoTone = createReactIconComponent("CarTwoTone");
|
|
417
|
+
var ReactCaretDownFilled = createReactIconComponent("CaretDownFilled");
|
|
418
|
+
var ReactCaretDownOutlined = createReactIconComponent("CaretDownOutlined");
|
|
419
|
+
var ReactCaretLeftFilled = createReactIconComponent("CaretLeftFilled");
|
|
420
|
+
var ReactCaretLeftOutlined = createReactIconComponent("CaretLeftOutlined");
|
|
421
|
+
var ReactCaretRightFilled = createReactIconComponent("CaretRightFilled");
|
|
422
|
+
var ReactCaretRightOutlined = createReactIconComponent("CaretRightOutlined");
|
|
423
|
+
var ReactCaretUpFilled = createReactIconComponent("CaretUpFilled");
|
|
424
|
+
var ReactCaretUpOutlined = createReactIconComponent("CaretUpOutlined");
|
|
425
|
+
var ReactCarryOutFilled = createReactIconComponent("CarryOutFilled");
|
|
426
|
+
var ReactCarryOutOutlined = createReactIconComponent("CarryOutOutlined");
|
|
427
|
+
var ReactCarryOutTwoTone = createReactIconComponent("CarryOutTwoTone");
|
|
428
|
+
var ReactCheckCircleFilled = createReactIconComponent("CheckCircleFilled");
|
|
429
|
+
var ReactCheckCircleOutlined = createReactIconComponent(
|
|
430
|
+
"CheckCircleOutlined"
|
|
431
|
+
);
|
|
432
|
+
var ReactCheckCircleTwoTone = createReactIconComponent("CheckCircleTwoTone");
|
|
433
|
+
var ReactCheckOutlined = createReactIconComponent("CheckOutlined");
|
|
434
|
+
var ReactCheckSquareFilled = createReactIconComponent("CheckSquareFilled");
|
|
435
|
+
var ReactCheckSquareOutlined = createReactIconComponent(
|
|
436
|
+
"CheckSquareOutlined"
|
|
437
|
+
);
|
|
438
|
+
var ReactCheckSquareTwoTone = createReactIconComponent("CheckSquareTwoTone");
|
|
439
|
+
var ReactChromeFilled = createReactIconComponent("ChromeFilled");
|
|
440
|
+
var ReactChromeOutlined = createReactIconComponent("ChromeOutlined");
|
|
441
|
+
var ReactCiCircleFilled = createReactIconComponent("CiCircleFilled");
|
|
442
|
+
var ReactCiCircleOutlined = createReactIconComponent("CiCircleOutlined");
|
|
443
|
+
var ReactCiCircleTwoTone = createReactIconComponent("CiCircleTwoTone");
|
|
444
|
+
var ReactCiOutlined = createReactIconComponent("CiOutlined");
|
|
445
|
+
var ReactCiTwoTone = createReactIconComponent("CiTwoTone");
|
|
446
|
+
var ReactClaudeFilled = createReactIconComponent("ClaudeFilled");
|
|
447
|
+
var ReactClearOutlined = createReactIconComponent("ClearOutlined");
|
|
448
|
+
var ReactClockCircleFilled = createReactIconComponent("ClockCircleFilled");
|
|
449
|
+
var ReactClockCircleOutlined = createReactIconComponent(
|
|
450
|
+
"ClockCircleOutlined"
|
|
451
|
+
);
|
|
452
|
+
var ReactClockCircleTwoTone = createReactIconComponent("ClockCircleTwoTone");
|
|
453
|
+
var ReactCloseCircleFilled = createReactIconComponent("CloseCircleFilled");
|
|
454
|
+
var ReactCloseCircleOutlined = createReactIconComponent(
|
|
455
|
+
"CloseCircleOutlined"
|
|
456
|
+
);
|
|
457
|
+
var ReactCloseCircleTwoTone = createReactIconComponent("CloseCircleTwoTone");
|
|
458
|
+
var ReactCloseOutlined = createReactIconComponent("CloseOutlined");
|
|
459
|
+
var ReactCloseSquareFilled = createReactIconComponent("CloseSquareFilled");
|
|
460
|
+
var ReactCloseSquareOutlined = createReactIconComponent(
|
|
461
|
+
"CloseSquareOutlined"
|
|
462
|
+
);
|
|
463
|
+
var ReactCloseSquareTwoTone = createReactIconComponent("CloseSquareTwoTone");
|
|
464
|
+
var ReactCloudDownloadOutlined = createReactIconComponent(
|
|
465
|
+
"CloudDownloadOutlined"
|
|
466
|
+
);
|
|
467
|
+
var ReactCloudFilled = createReactIconComponent("CloudFilled");
|
|
468
|
+
var ReactCloudOutlined = createReactIconComponent("CloudOutlined");
|
|
469
|
+
var ReactCloudServerOutlined = createReactIconComponent(
|
|
470
|
+
"CloudServerOutlined"
|
|
471
|
+
);
|
|
472
|
+
var ReactCloudSyncOutlined = createReactIconComponent("CloudSyncOutlined");
|
|
473
|
+
var ReactCloudTwoTone = createReactIconComponent("CloudTwoTone");
|
|
474
|
+
var ReactCloudUploadOutlined = createReactIconComponent(
|
|
475
|
+
"CloudUploadOutlined"
|
|
476
|
+
);
|
|
477
|
+
var ReactClusterOutlined = createReactIconComponent("ClusterOutlined");
|
|
478
|
+
var ReactCodeFilled = createReactIconComponent("CodeFilled");
|
|
479
|
+
var ReactCodeOutlined = createReactIconComponent("CodeOutlined");
|
|
480
|
+
var ReactCodeSandboxCircleFilled = createReactIconComponent(
|
|
481
|
+
"CodeSandboxCircleFilled"
|
|
482
|
+
);
|
|
483
|
+
var ReactCodeSandboxOutlined = createReactIconComponent(
|
|
484
|
+
"CodeSandboxOutlined"
|
|
485
|
+
);
|
|
486
|
+
var ReactCodeSandboxSquareFilled = createReactIconComponent(
|
|
487
|
+
"CodeSandboxSquareFilled"
|
|
488
|
+
);
|
|
489
|
+
var ReactCodeTwoTone = createReactIconComponent("CodeTwoTone");
|
|
490
|
+
var ReactCodepenCircleFilled = createReactIconComponent(
|
|
491
|
+
"CodepenCircleFilled"
|
|
492
|
+
);
|
|
493
|
+
var ReactCodepenCircleOutlined = createReactIconComponent(
|
|
494
|
+
"CodepenCircleOutlined"
|
|
495
|
+
);
|
|
496
|
+
var ReactCodepenOutlined = createReactIconComponent("CodepenOutlined");
|
|
497
|
+
var ReactCodepenSquareFilled = createReactIconComponent(
|
|
498
|
+
"CodepenSquareFilled"
|
|
499
|
+
);
|
|
500
|
+
var ReactCoffeeOutlined = createReactIconComponent("CoffeeOutlined");
|
|
501
|
+
var ReactColumnHeightOutlined = createReactIconComponent(
|
|
502
|
+
"ColumnHeightOutlined"
|
|
503
|
+
);
|
|
504
|
+
var ReactColumnWidthOutlined = createReactIconComponent(
|
|
505
|
+
"ColumnWidthOutlined"
|
|
506
|
+
);
|
|
507
|
+
var ReactCommentOutlined = createReactIconComponent("CommentOutlined");
|
|
508
|
+
var ReactCompassFilled = createReactIconComponent("CompassFilled");
|
|
509
|
+
var ReactCompassOutlined = createReactIconComponent("CompassOutlined");
|
|
510
|
+
var ReactCompassTwoTone = createReactIconComponent("CompassTwoTone");
|
|
511
|
+
var ReactCompressOutlined = createReactIconComponent("CompressOutlined");
|
|
512
|
+
var ReactConsoleSqlOutlined = createReactIconComponent("ConsoleSqlOutlined");
|
|
513
|
+
var ReactContactsFilled = createReactIconComponent("ContactsFilled");
|
|
514
|
+
var ReactContactsOutlined = createReactIconComponent("ContactsOutlined");
|
|
515
|
+
var ReactContactsTwoTone = createReactIconComponent("ContactsTwoTone");
|
|
516
|
+
var ReactContainerFilled = createReactIconComponent("ContainerFilled");
|
|
517
|
+
var ReactContainerOutlined = createReactIconComponent("ContainerOutlined");
|
|
518
|
+
var ReactContainerTwoTone = createReactIconComponent("ContainerTwoTone");
|
|
519
|
+
var ReactControlFilled = createReactIconComponent("ControlFilled");
|
|
520
|
+
var ReactControlOutlined = createReactIconComponent("ControlOutlined");
|
|
521
|
+
var ReactControlTwoTone = createReactIconComponent("ControlTwoTone");
|
|
522
|
+
var ReactCopyFilled = createReactIconComponent("CopyFilled");
|
|
523
|
+
var ReactCopyOutlined = createReactIconComponent("CopyOutlined");
|
|
524
|
+
var ReactCopyTwoTone = createReactIconComponent("CopyTwoTone");
|
|
525
|
+
var ReactCopyrightCircleFilled = createReactIconComponent(
|
|
526
|
+
"CopyrightCircleFilled"
|
|
527
|
+
);
|
|
528
|
+
var ReactCopyrightCircleOutlined = createReactIconComponent(
|
|
529
|
+
"CopyrightCircleOutlined"
|
|
530
|
+
);
|
|
531
|
+
var ReactCopyrightCircleTwoTone = createReactIconComponent(
|
|
532
|
+
"CopyrightCircleTwoTone"
|
|
533
|
+
);
|
|
534
|
+
var ReactCopyrightOutlined = createReactIconComponent("CopyrightOutlined");
|
|
535
|
+
var ReactCopyrightTwoTone = createReactIconComponent("CopyrightTwoTone");
|
|
536
|
+
var ReactCreditCardFilled = createReactIconComponent("CreditCardFilled");
|
|
537
|
+
var ReactCreditCardOutlined = createReactIconComponent("CreditCardOutlined");
|
|
538
|
+
var ReactCreditCardTwoTone = createReactIconComponent("CreditCardTwoTone");
|
|
539
|
+
var ReactCrownFilled = createReactIconComponent("CrownFilled");
|
|
540
|
+
var ReactCrownOutlined = createReactIconComponent("CrownOutlined");
|
|
541
|
+
var ReactCrownTwoTone = createReactIconComponent("CrownTwoTone");
|
|
542
|
+
var ReactCustomerServiceFilled = createReactIconComponent(
|
|
543
|
+
"CustomerServiceFilled"
|
|
544
|
+
);
|
|
545
|
+
var ReactCustomerServiceOutlined = createReactIconComponent(
|
|
546
|
+
"CustomerServiceOutlined"
|
|
547
|
+
);
|
|
548
|
+
var ReactCustomerServiceTwoTone = createReactIconComponent(
|
|
549
|
+
"CustomerServiceTwoTone"
|
|
550
|
+
);
|
|
551
|
+
var ReactDashOutlined = createReactIconComponent("DashOutlined");
|
|
552
|
+
var ReactDashboardFilled = createReactIconComponent("DashboardFilled");
|
|
553
|
+
var ReactDashboardOutlined = createReactIconComponent("DashboardOutlined");
|
|
554
|
+
var ReactDashboardTwoTone = createReactIconComponent("DashboardTwoTone");
|
|
555
|
+
var ReactDatabaseFilled = createReactIconComponent("DatabaseFilled");
|
|
556
|
+
var ReactDatabaseOutlined = createReactIconComponent("DatabaseOutlined");
|
|
557
|
+
var ReactDatabaseTwoTone = createReactIconComponent("DatabaseTwoTone");
|
|
558
|
+
var ReactDeepSeekFilled = createReactIconComponent("DeepSeekFilled");
|
|
559
|
+
var ReactDeleteColumnOutlined = createReactIconComponent(
|
|
560
|
+
"DeleteColumnOutlined"
|
|
561
|
+
);
|
|
562
|
+
var ReactDeleteFilled = createReactIconComponent("DeleteFilled");
|
|
563
|
+
var ReactDeleteOutlined = createReactIconComponent("DeleteOutlined");
|
|
564
|
+
var ReactDeleteRowOutlined = createReactIconComponent("DeleteRowOutlined");
|
|
565
|
+
var ReactDeleteTwoTone = createReactIconComponent("DeleteTwoTone");
|
|
566
|
+
var ReactDeliveredProcedureOutlined = createReactIconComponent(
|
|
567
|
+
"DeliveredProcedureOutlined"
|
|
568
|
+
);
|
|
569
|
+
var ReactDeploymentUnitOutlined = createReactIconComponent(
|
|
570
|
+
"DeploymentUnitOutlined"
|
|
571
|
+
);
|
|
572
|
+
var ReactDesktopOutlined = createReactIconComponent("DesktopOutlined");
|
|
573
|
+
var ReactDiffFilled = createReactIconComponent("DiffFilled");
|
|
574
|
+
var ReactDiffOutlined = createReactIconComponent("DiffOutlined");
|
|
575
|
+
var ReactDiffTwoTone = createReactIconComponent("DiffTwoTone");
|
|
576
|
+
var ReactDingdingOutlined = createReactIconComponent("DingdingOutlined");
|
|
577
|
+
var ReactDingtalkCircleFilled = createReactIconComponent(
|
|
578
|
+
"DingtalkCircleFilled"
|
|
579
|
+
);
|
|
580
|
+
var ReactDingtalkOutlined = createReactIconComponent("DingtalkOutlined");
|
|
581
|
+
var ReactDingtalkSquareFilled = createReactIconComponent(
|
|
582
|
+
"DingtalkSquareFilled"
|
|
583
|
+
);
|
|
584
|
+
var ReactDisconnectOutlined = createReactIconComponent("DisconnectOutlined");
|
|
585
|
+
var ReactDiscordFilled = createReactIconComponent("DiscordFilled");
|
|
586
|
+
var ReactDiscordOutlined = createReactIconComponent("DiscordOutlined");
|
|
587
|
+
var ReactDislikeFilled = createReactIconComponent("DislikeFilled");
|
|
588
|
+
var ReactDislikeOutlined = createReactIconComponent("DislikeOutlined");
|
|
589
|
+
var ReactDislikeTwoTone = createReactIconComponent("DislikeTwoTone");
|
|
590
|
+
var ReactDockerOutlined = createReactIconComponent("DockerOutlined");
|
|
591
|
+
var ReactDollarCircleFilled = createReactIconComponent("DollarCircleFilled");
|
|
592
|
+
var ReactDollarCircleOutlined = createReactIconComponent(
|
|
593
|
+
"DollarCircleOutlined"
|
|
594
|
+
);
|
|
595
|
+
var ReactDollarCircleTwoTone = createReactIconComponent(
|
|
596
|
+
"DollarCircleTwoTone"
|
|
597
|
+
);
|
|
598
|
+
var ReactDollarOutlined = createReactIconComponent("DollarOutlined");
|
|
599
|
+
var ReactDollarTwoTone = createReactIconComponent("DollarTwoTone");
|
|
600
|
+
var ReactDotChartOutlined = createReactIconComponent("DotChartOutlined");
|
|
601
|
+
var ReactDotNetOutlined = createReactIconComponent("DotNetOutlined");
|
|
602
|
+
var ReactDoubleLeftOutlined = createReactIconComponent("DoubleLeftOutlined");
|
|
603
|
+
var ReactDoubleRightOutlined = createReactIconComponent(
|
|
604
|
+
"DoubleRightOutlined"
|
|
605
|
+
);
|
|
606
|
+
var ReactDownCircleFilled = createReactIconComponent("DownCircleFilled");
|
|
607
|
+
var ReactDownCircleOutlined = createReactIconComponent("DownCircleOutlined");
|
|
608
|
+
var ReactDownCircleTwoTone = createReactIconComponent("DownCircleTwoTone");
|
|
609
|
+
var ReactDownOutlined = createReactIconComponent("DownOutlined");
|
|
610
|
+
var ReactDownSquareFilled = createReactIconComponent("DownSquareFilled");
|
|
611
|
+
var ReactDownSquareOutlined = createReactIconComponent("DownSquareOutlined");
|
|
612
|
+
var ReactDownSquareTwoTone = createReactIconComponent("DownSquareTwoTone");
|
|
613
|
+
var ReactDownloadOutlined = createReactIconComponent("DownloadOutlined");
|
|
614
|
+
var ReactDragOutlined = createReactIconComponent("DragOutlined");
|
|
615
|
+
var ReactDribbbleCircleFilled = createReactIconComponent(
|
|
616
|
+
"DribbbleCircleFilled"
|
|
617
|
+
);
|
|
618
|
+
var ReactDribbbleOutlined = createReactIconComponent("DribbbleOutlined");
|
|
619
|
+
var ReactDribbbleSquareFilled = createReactIconComponent(
|
|
620
|
+
"DribbbleSquareFilled"
|
|
621
|
+
);
|
|
622
|
+
var ReactDribbbleSquareOutlined = createReactIconComponent(
|
|
623
|
+
"DribbbleSquareOutlined"
|
|
624
|
+
);
|
|
625
|
+
var ReactDropboxCircleFilled = createReactIconComponent(
|
|
626
|
+
"DropboxCircleFilled"
|
|
627
|
+
);
|
|
628
|
+
var ReactDropboxOutlined = createReactIconComponent("DropboxOutlined");
|
|
629
|
+
var ReactDropboxSquareFilled = createReactIconComponent(
|
|
630
|
+
"DropboxSquareFilled"
|
|
631
|
+
);
|
|
632
|
+
var ReactEditFilled = createReactIconComponent("EditFilled");
|
|
633
|
+
var ReactEditOutlined = createReactIconComponent("EditOutlined");
|
|
634
|
+
var ReactEditTwoTone = createReactIconComponent("EditTwoTone");
|
|
635
|
+
var ReactElevenLabsFilled = createReactIconComponent("ElevenLabsFilled");
|
|
636
|
+
var ReactEllipsisOutlined = createReactIconComponent("EllipsisOutlined");
|
|
637
|
+
var ReactEnterOutlined = createReactIconComponent("EnterOutlined");
|
|
638
|
+
var ReactEnvironmentFilled = createReactIconComponent("EnvironmentFilled");
|
|
639
|
+
var ReactEnvironmentOutlined = createReactIconComponent(
|
|
640
|
+
"EnvironmentOutlined"
|
|
641
|
+
);
|
|
642
|
+
var ReactEnvironmentTwoTone = createReactIconComponent("EnvironmentTwoTone");
|
|
643
|
+
var ReactEuroCircleFilled = createReactIconComponent("EuroCircleFilled");
|
|
644
|
+
var ReactEuroCircleOutlined = createReactIconComponent("EuroCircleOutlined");
|
|
645
|
+
var ReactEuroCircleTwoTone = createReactIconComponent("EuroCircleTwoTone");
|
|
646
|
+
var ReactEuroOutlined = createReactIconComponent("EuroOutlined");
|
|
647
|
+
var ReactEuroTwoTone = createReactIconComponent("EuroTwoTone");
|
|
648
|
+
var ReactExceptionOutlined = createReactIconComponent("ExceptionOutlined");
|
|
649
|
+
var ReactExclamationCircleFilled = createReactIconComponent(
|
|
650
|
+
"ExclamationCircleFilled"
|
|
651
|
+
);
|
|
652
|
+
var ReactExclamationCircleOutlined = createReactIconComponent(
|
|
653
|
+
"ExclamationCircleOutlined"
|
|
654
|
+
);
|
|
655
|
+
var ReactExclamationCircleTwoTone = createReactIconComponent(
|
|
656
|
+
"ExclamationCircleTwoTone"
|
|
657
|
+
);
|
|
658
|
+
var ReactExclamationOutlined = createReactIconComponent(
|
|
659
|
+
"ExclamationOutlined"
|
|
660
|
+
);
|
|
661
|
+
var ReactExpandAltOutlined = createReactIconComponent("ExpandAltOutlined");
|
|
662
|
+
var ReactExpandOutlined = createReactIconComponent("ExpandOutlined");
|
|
663
|
+
var ReactExperimentFilled = createReactIconComponent("ExperimentFilled");
|
|
664
|
+
var ReactExperimentOutlined = createReactIconComponent("ExperimentOutlined");
|
|
665
|
+
var ReactExperimentTwoTone = createReactIconComponent("ExperimentTwoTone");
|
|
666
|
+
var ReactExportOutlined = createReactIconComponent("ExportOutlined");
|
|
667
|
+
var ReactEyeFilled = createReactIconComponent("EyeFilled");
|
|
668
|
+
var ReactEyeInvisibleFilled = createReactIconComponent("EyeInvisibleFilled");
|
|
669
|
+
var ReactEyeInvisibleOutlined = createReactIconComponent(
|
|
670
|
+
"EyeInvisibleOutlined"
|
|
671
|
+
);
|
|
672
|
+
var ReactEyeInvisibleTwoTone = createReactIconComponent(
|
|
673
|
+
"EyeInvisibleTwoTone"
|
|
674
|
+
);
|
|
675
|
+
var ReactEyeOutlined = createReactIconComponent("EyeOutlined");
|
|
676
|
+
var ReactEyeTwoTone = createReactIconComponent("EyeTwoTone");
|
|
677
|
+
var ReactFacebookFilled = createReactIconComponent("FacebookFilled");
|
|
678
|
+
var ReactFacebookOutlined = createReactIconComponent("FacebookOutlined");
|
|
679
|
+
var ReactFallOutlined = createReactIconComponent("FallOutlined");
|
|
680
|
+
var ReactFastBackwardFilled = createReactIconComponent("FastBackwardFilled");
|
|
681
|
+
var ReactFastBackwardOutlined = createReactIconComponent(
|
|
682
|
+
"FastBackwardOutlined"
|
|
683
|
+
);
|
|
684
|
+
var ReactFastForwardFilled = createReactIconComponent("FastForwardFilled");
|
|
685
|
+
var ReactFastForwardOutlined = createReactIconComponent(
|
|
686
|
+
"FastForwardOutlined"
|
|
687
|
+
);
|
|
688
|
+
var ReactFieldBinaryOutlined = createReactIconComponent(
|
|
689
|
+
"FieldBinaryOutlined"
|
|
690
|
+
);
|
|
691
|
+
var ReactFieldNumberOutlined = createReactIconComponent(
|
|
692
|
+
"FieldNumberOutlined"
|
|
693
|
+
);
|
|
694
|
+
var ReactFieldStringOutlined = createReactIconComponent(
|
|
695
|
+
"FieldStringOutlined"
|
|
696
|
+
);
|
|
697
|
+
var ReactFieldTimeOutlined = createReactIconComponent("FieldTimeOutlined");
|
|
698
|
+
var ReactFileAddFilled = createReactIconComponent("FileAddFilled");
|
|
699
|
+
var ReactFileAddOutlined = createReactIconComponent("FileAddOutlined");
|
|
700
|
+
var ReactFileAddTwoTone = createReactIconComponent("FileAddTwoTone");
|
|
701
|
+
var ReactFileDoneOutlined = createReactIconComponent("FileDoneOutlined");
|
|
702
|
+
var ReactFileExcelFilled = createReactIconComponent("FileExcelFilled");
|
|
703
|
+
var ReactFileExcelOutlined = createReactIconComponent("FileExcelOutlined");
|
|
704
|
+
var ReactFileExcelTwoTone = createReactIconComponent("FileExcelTwoTone");
|
|
705
|
+
var ReactFileExclamationFilled = createReactIconComponent(
|
|
706
|
+
"FileExclamationFilled"
|
|
707
|
+
);
|
|
708
|
+
var ReactFileExclamationOutlined = createReactIconComponent(
|
|
709
|
+
"FileExclamationOutlined"
|
|
710
|
+
);
|
|
711
|
+
var ReactFileExclamationTwoTone = createReactIconComponent(
|
|
712
|
+
"FileExclamationTwoTone"
|
|
713
|
+
);
|
|
714
|
+
var ReactFileFilled = createReactIconComponent("FileFilled");
|
|
715
|
+
var ReactFileGifOutlined = createReactIconComponent("FileGifOutlined");
|
|
716
|
+
var ReactFileImageFilled = createReactIconComponent("FileImageFilled");
|
|
717
|
+
var ReactFileImageOutlined = createReactIconComponent("FileImageOutlined");
|
|
718
|
+
var ReactFileImageTwoTone = createReactIconComponent("FileImageTwoTone");
|
|
719
|
+
var ReactFileJpgOutlined = createReactIconComponent("FileJpgOutlined");
|
|
720
|
+
var ReactFileMarkdownFilled = createReactIconComponent("FileMarkdownFilled");
|
|
721
|
+
var ReactFileMarkdownOutlined = createReactIconComponent(
|
|
722
|
+
"FileMarkdownOutlined"
|
|
723
|
+
);
|
|
724
|
+
var ReactFileMarkdownTwoTone = createReactIconComponent(
|
|
725
|
+
"FileMarkdownTwoTone"
|
|
726
|
+
);
|
|
727
|
+
var ReactFileOutlined = createReactIconComponent("FileOutlined");
|
|
728
|
+
var ReactFilePdfFilled = createReactIconComponent("FilePdfFilled");
|
|
729
|
+
var ReactFilePdfOutlined = createReactIconComponent("FilePdfOutlined");
|
|
730
|
+
var ReactFilePdfTwoTone = createReactIconComponent("FilePdfTwoTone");
|
|
731
|
+
var ReactFilePptFilled = createReactIconComponent("FilePptFilled");
|
|
732
|
+
var ReactFilePptOutlined = createReactIconComponent("FilePptOutlined");
|
|
733
|
+
var ReactFilePptTwoTone = createReactIconComponent("FilePptTwoTone");
|
|
734
|
+
var ReactFileProtectOutlined = createReactIconComponent(
|
|
735
|
+
"FileProtectOutlined"
|
|
736
|
+
);
|
|
737
|
+
var ReactFileSearchOutlined = createReactIconComponent("FileSearchOutlined");
|
|
738
|
+
var ReactFileSyncOutlined = createReactIconComponent("FileSyncOutlined");
|
|
739
|
+
var ReactFileTextFilled = createReactIconComponent("FileTextFilled");
|
|
740
|
+
var ReactFileTextOutlined = createReactIconComponent("FileTextOutlined");
|
|
741
|
+
var ReactFileTextTwoTone = createReactIconComponent("FileTextTwoTone");
|
|
742
|
+
var ReactFileTwoTone = createReactIconComponent("FileTwoTone");
|
|
743
|
+
var ReactFileUnknownFilled = createReactIconComponent("FileUnknownFilled");
|
|
744
|
+
var ReactFileUnknownOutlined = createReactIconComponent(
|
|
745
|
+
"FileUnknownOutlined"
|
|
746
|
+
);
|
|
747
|
+
var ReactFileUnknownTwoTone = createReactIconComponent("FileUnknownTwoTone");
|
|
748
|
+
var ReactFileWordFilled = createReactIconComponent("FileWordFilled");
|
|
749
|
+
var ReactFileWordOutlined = createReactIconComponent("FileWordOutlined");
|
|
750
|
+
var ReactFileWordTwoTone = createReactIconComponent("FileWordTwoTone");
|
|
751
|
+
var ReactFileZipFilled = createReactIconComponent("FileZipFilled");
|
|
752
|
+
var ReactFileZipOutlined = createReactIconComponent("FileZipOutlined");
|
|
753
|
+
var ReactFileZipTwoTone = createReactIconComponent("FileZipTwoTone");
|
|
754
|
+
var ReactFilterFilled = createReactIconComponent("FilterFilled");
|
|
755
|
+
var ReactFilterOutlined = createReactIconComponent("FilterOutlined");
|
|
756
|
+
var ReactFilterTwoTone = createReactIconComponent("FilterTwoTone");
|
|
757
|
+
var ReactFireFilled = createReactIconComponent("FireFilled");
|
|
758
|
+
var ReactFireOutlined = createReactIconComponent("FireOutlined");
|
|
759
|
+
var ReactFireTwoTone = createReactIconComponent("FireTwoTone");
|
|
760
|
+
var ReactFlagFilled = createReactIconComponent("FlagFilled");
|
|
761
|
+
var ReactFlagOutlined = createReactIconComponent("FlagOutlined");
|
|
762
|
+
var ReactFlagTwoTone = createReactIconComponent("FlagTwoTone");
|
|
763
|
+
var ReactFolderAddFilled = createReactIconComponent("FolderAddFilled");
|
|
764
|
+
var ReactFolderAddOutlined = createReactIconComponent("FolderAddOutlined");
|
|
765
|
+
var ReactFolderAddTwoTone = createReactIconComponent("FolderAddTwoTone");
|
|
766
|
+
var ReactFolderFilled = createReactIconComponent("FolderFilled");
|
|
767
|
+
var ReactFolderOpenFilled = createReactIconComponent("FolderOpenFilled");
|
|
768
|
+
var ReactFolderOpenOutlined = createReactIconComponent("FolderOpenOutlined");
|
|
769
|
+
var ReactFolderOpenTwoTone = createReactIconComponent("FolderOpenTwoTone");
|
|
770
|
+
var ReactFolderOutlined = createReactIconComponent("FolderOutlined");
|
|
771
|
+
var ReactFolderTwoTone = createReactIconComponent("FolderTwoTone");
|
|
772
|
+
var ReactFolderViewOutlined = createReactIconComponent("FolderViewOutlined");
|
|
773
|
+
var ReactFontColorsOutlined = createReactIconComponent("FontColorsOutlined");
|
|
774
|
+
var ReactFontSizeOutlined = createReactIconComponent("FontSizeOutlined");
|
|
775
|
+
var ReactForkOutlined = createReactIconComponent("ForkOutlined");
|
|
776
|
+
var ReactFormOutlined = createReactIconComponent("FormOutlined");
|
|
777
|
+
var ReactFormatPainterFilled = createReactIconComponent(
|
|
778
|
+
"FormatPainterFilled"
|
|
779
|
+
);
|
|
780
|
+
var ReactFormatPainterOutlined = createReactIconComponent(
|
|
781
|
+
"FormatPainterOutlined"
|
|
782
|
+
);
|
|
783
|
+
var ReactForwardFilled = createReactIconComponent("ForwardFilled");
|
|
784
|
+
var ReactForwardOutlined = createReactIconComponent("ForwardOutlined");
|
|
785
|
+
var ReactFrownFilled = createReactIconComponent("FrownFilled");
|
|
786
|
+
var ReactFrownOutlined = createReactIconComponent("FrownOutlined");
|
|
787
|
+
var ReactFrownTwoTone = createReactIconComponent("FrownTwoTone");
|
|
788
|
+
var ReactFullscreenExitOutlined = createReactIconComponent(
|
|
789
|
+
"FullscreenExitOutlined"
|
|
790
|
+
);
|
|
791
|
+
var ReactFullscreenOutlined = createReactIconComponent("FullscreenOutlined");
|
|
792
|
+
var ReactFunctionOutlined = createReactIconComponent("FunctionOutlined");
|
|
793
|
+
var ReactFundFilled = createReactIconComponent("FundFilled");
|
|
794
|
+
var ReactFundOutlined = createReactIconComponent("FundOutlined");
|
|
795
|
+
var ReactFundProjectionScreenOutlined = createReactIconComponent(
|
|
796
|
+
"FundProjectionScreenOutlined"
|
|
797
|
+
);
|
|
798
|
+
var ReactFundTwoTone = createReactIconComponent("FundTwoTone");
|
|
799
|
+
var ReactFundViewOutlined = createReactIconComponent("FundViewOutlined");
|
|
800
|
+
var ReactFunnelPlotFilled = createReactIconComponent("FunnelPlotFilled");
|
|
801
|
+
var ReactFunnelPlotOutlined = createReactIconComponent("FunnelPlotOutlined");
|
|
802
|
+
var ReactFunnelPlotTwoTone = createReactIconComponent("FunnelPlotTwoTone");
|
|
803
|
+
var ReactGatewayOutlined = createReactIconComponent("GatewayOutlined");
|
|
804
|
+
var ReactGeminiFilled = createReactIconComponent("GeminiFilled");
|
|
805
|
+
var ReactGifOutlined = createReactIconComponent("GifOutlined");
|
|
806
|
+
var ReactGiftFilled = createReactIconComponent("GiftFilled");
|
|
807
|
+
var ReactGiftOutlined = createReactIconComponent("GiftOutlined");
|
|
808
|
+
var ReactGiftTwoTone = createReactIconComponent("GiftTwoTone");
|
|
809
|
+
var ReactGithubFilled = createReactIconComponent("GithubFilled");
|
|
810
|
+
var ReactGithubOutlined = createReactIconComponent("GithubOutlined");
|
|
811
|
+
var ReactGitlabFilled = createReactIconComponent("GitlabFilled");
|
|
812
|
+
var ReactGitlabOutlined = createReactIconComponent("GitlabOutlined");
|
|
813
|
+
var ReactGlobalOutlined = createReactIconComponent("GlobalOutlined");
|
|
814
|
+
var ReactGoldFilled = createReactIconComponent("GoldFilled");
|
|
815
|
+
var ReactGoldOutlined = createReactIconComponent("GoldOutlined");
|
|
816
|
+
var ReactGoldTwoTone = createReactIconComponent("GoldTwoTone");
|
|
817
|
+
var ReactGoldenFilled = createReactIconComponent("GoldenFilled");
|
|
818
|
+
var ReactGoogleCircleFilled = createReactIconComponent("GoogleCircleFilled");
|
|
819
|
+
var ReactGoogleOutlined = createReactIconComponent("GoogleOutlined");
|
|
820
|
+
var ReactGooglePlusCircleFilled = createReactIconComponent(
|
|
821
|
+
"GooglePlusCircleFilled"
|
|
822
|
+
);
|
|
823
|
+
var ReactGooglePlusOutlined = createReactIconComponent("GooglePlusOutlined");
|
|
824
|
+
var ReactGooglePlusSquareFilled = createReactIconComponent(
|
|
825
|
+
"GooglePlusSquareFilled"
|
|
826
|
+
);
|
|
827
|
+
var ReactGoogleSquareFilled = createReactIconComponent("GoogleSquareFilled");
|
|
828
|
+
var ReactGroupOutlined = createReactIconComponent("GroupOutlined");
|
|
829
|
+
var ReactHarmonyOSOutlined = createReactIconComponent("HarmonyOSOutlined");
|
|
830
|
+
var ReactHddFilled = createReactIconComponent("HddFilled");
|
|
831
|
+
var ReactHddOutlined = createReactIconComponent("HddOutlined");
|
|
832
|
+
var ReactHddTwoTone = createReactIconComponent("HddTwoTone");
|
|
833
|
+
var ReactHeartFilled = createReactIconComponent("HeartFilled");
|
|
834
|
+
var ReactHeartOutlined = createReactIconComponent("HeartOutlined");
|
|
835
|
+
var ReactHeartTwoTone = createReactIconComponent("HeartTwoTone");
|
|
836
|
+
var ReactHeatMapOutlined = createReactIconComponent("HeatMapOutlined");
|
|
837
|
+
var ReactHighlightFilled = createReactIconComponent("HighlightFilled");
|
|
838
|
+
var ReactHighlightOutlined = createReactIconComponent("HighlightOutlined");
|
|
839
|
+
var ReactHighlightTwoTone = createReactIconComponent("HighlightTwoTone");
|
|
840
|
+
var ReactHistoryOutlined = createReactIconComponent("HistoryOutlined");
|
|
841
|
+
var ReactHolderOutlined = createReactIconComponent("HolderOutlined");
|
|
842
|
+
var ReactHomeFilled = createReactIconComponent("HomeFilled");
|
|
843
|
+
var ReactHomeOutlined = createReactIconComponent("HomeOutlined");
|
|
844
|
+
var ReactHomeTwoTone = createReactIconComponent("HomeTwoTone");
|
|
845
|
+
var ReactHourglassFilled = createReactIconComponent("HourglassFilled");
|
|
846
|
+
var ReactHourglassOutlined = createReactIconComponent("HourglassOutlined");
|
|
847
|
+
var ReactHourglassTwoTone = createReactIconComponent("HourglassTwoTone");
|
|
848
|
+
var ReactHtml5Filled = createReactIconComponent("Html5Filled");
|
|
849
|
+
var ReactHtml5Outlined = createReactIconComponent("Html5Outlined");
|
|
850
|
+
var ReactHtml5TwoTone = createReactIconComponent("Html5TwoTone");
|
|
851
|
+
var ReactHuggingFaceFilled = createReactIconComponent("HuggingFaceFilled");
|
|
852
|
+
var ReactIdcardFilled = createReactIconComponent("IdcardFilled");
|
|
853
|
+
var ReactIdcardOutlined = createReactIconComponent("IdcardOutlined");
|
|
854
|
+
var ReactIdcardTwoTone = createReactIconComponent("IdcardTwoTone");
|
|
855
|
+
var ReactIeCircleFilled = createReactIconComponent("IeCircleFilled");
|
|
856
|
+
var ReactIeOutlined = createReactIconComponent("IeOutlined");
|
|
857
|
+
var ReactIeSquareFilled = createReactIconComponent("IeSquareFilled");
|
|
858
|
+
var ReactImportOutlined = createReactIconComponent("ImportOutlined");
|
|
859
|
+
var ReactInboxOutlined = createReactIconComponent("InboxOutlined");
|
|
860
|
+
var ReactInfoCircleFilled = createReactIconComponent("InfoCircleFilled");
|
|
861
|
+
var ReactInfoCircleOutlined = createReactIconComponent("InfoCircleOutlined");
|
|
862
|
+
var ReactInfoCircleTwoTone = createReactIconComponent("InfoCircleTwoTone");
|
|
863
|
+
var ReactInfoOutlined = createReactIconComponent("InfoOutlined");
|
|
864
|
+
var ReactInsertRowAboveOutlined = createReactIconComponent(
|
|
865
|
+
"InsertRowAboveOutlined"
|
|
866
|
+
);
|
|
867
|
+
var ReactInsertRowBelowOutlined = createReactIconComponent(
|
|
868
|
+
"InsertRowBelowOutlined"
|
|
869
|
+
);
|
|
870
|
+
var ReactInsertRowLeftOutlined = createReactIconComponent(
|
|
871
|
+
"InsertRowLeftOutlined"
|
|
872
|
+
);
|
|
873
|
+
var ReactInsertRowRightOutlined = createReactIconComponent(
|
|
874
|
+
"InsertRowRightOutlined"
|
|
875
|
+
);
|
|
876
|
+
var ReactInstagramFilled = createReactIconComponent("InstagramFilled");
|
|
877
|
+
var ReactInstagramOutlined = createReactIconComponent("InstagramOutlined");
|
|
878
|
+
var ReactInsuranceFilled = createReactIconComponent("InsuranceFilled");
|
|
879
|
+
var ReactInsuranceOutlined = createReactIconComponent("InsuranceOutlined");
|
|
880
|
+
var ReactInsuranceTwoTone = createReactIconComponent("InsuranceTwoTone");
|
|
881
|
+
var ReactInteractionFilled = createReactIconComponent("InteractionFilled");
|
|
882
|
+
var ReactInteractionOutlined = createReactIconComponent(
|
|
883
|
+
"InteractionOutlined"
|
|
884
|
+
);
|
|
885
|
+
var ReactInteractionTwoTone = createReactIconComponent("InteractionTwoTone");
|
|
886
|
+
var ReactIssuesCloseOutlined = createReactIconComponent(
|
|
887
|
+
"IssuesCloseOutlined"
|
|
888
|
+
);
|
|
889
|
+
var ReactItalicOutlined = createReactIconComponent("ItalicOutlined");
|
|
890
|
+
var ReactJavaOutlined = createReactIconComponent("JavaOutlined");
|
|
891
|
+
var ReactJavaScriptOutlined = createReactIconComponent("JavaScriptOutlined");
|
|
892
|
+
var ReactKeyOutlined = createReactIconComponent("KeyOutlined");
|
|
893
|
+
var ReactKubernetesOutlined = createReactIconComponent("KubernetesOutlined");
|
|
894
|
+
var ReactLaptopOutlined = createReactIconComponent("LaptopOutlined");
|
|
895
|
+
var ReactLayoutFilled = createReactIconComponent("LayoutFilled");
|
|
896
|
+
var ReactLayoutOutlined = createReactIconComponent("LayoutOutlined");
|
|
897
|
+
var ReactLayoutTwoTone = createReactIconComponent("LayoutTwoTone");
|
|
898
|
+
var ReactLeftCircleFilled = createReactIconComponent("LeftCircleFilled");
|
|
899
|
+
var ReactLeftCircleOutlined = createReactIconComponent("LeftCircleOutlined");
|
|
900
|
+
var ReactLeftCircleTwoTone = createReactIconComponent("LeftCircleTwoTone");
|
|
901
|
+
var ReactLeftOutlined = createReactIconComponent("LeftOutlined");
|
|
902
|
+
var ReactLeftSquareFilled = createReactIconComponent("LeftSquareFilled");
|
|
903
|
+
var ReactLeftSquareOutlined = createReactIconComponent("LeftSquareOutlined");
|
|
904
|
+
var ReactLeftSquareTwoTone = createReactIconComponent("LeftSquareTwoTone");
|
|
905
|
+
var ReactLikeFilled = createReactIconComponent("LikeFilled");
|
|
906
|
+
var ReactLikeOutlined = createReactIconComponent("LikeOutlined");
|
|
907
|
+
var ReactLikeTwoTone = createReactIconComponent("LikeTwoTone");
|
|
908
|
+
var ReactLineChartOutlined = createReactIconComponent("LineChartOutlined");
|
|
909
|
+
var ReactLineHeightOutlined = createReactIconComponent("LineHeightOutlined");
|
|
910
|
+
var ReactLineOutlined = createReactIconComponent("LineOutlined");
|
|
911
|
+
var ReactLinkOutlined = createReactIconComponent("LinkOutlined");
|
|
912
|
+
var ReactLinkedinFilled = createReactIconComponent("LinkedinFilled");
|
|
913
|
+
var ReactLinkedinOutlined = createReactIconComponent("LinkedinOutlined");
|
|
914
|
+
var ReactLinuxOutlined = createReactIconComponent("LinuxOutlined");
|
|
915
|
+
var ReactLoading3QuartersOutlined = createReactIconComponent(
|
|
916
|
+
"Loading3QuartersOutlined"
|
|
917
|
+
);
|
|
918
|
+
var ReactLoadingOutlined = createReactIconComponent("LoadingOutlined");
|
|
919
|
+
var ReactLockFilled = createReactIconComponent("LockFilled");
|
|
920
|
+
var ReactLockOutlined = createReactIconComponent("LockOutlined");
|
|
921
|
+
var ReactLockTwoTone = createReactIconComponent("LockTwoTone");
|
|
922
|
+
var ReactLoginOutlined = createReactIconComponent("LoginOutlined");
|
|
923
|
+
var ReactLogoutOutlined = createReactIconComponent("LogoutOutlined");
|
|
924
|
+
var ReactMacCommandFilled = createReactIconComponent("MacCommandFilled");
|
|
925
|
+
var ReactMacCommandOutlined = createReactIconComponent("MacCommandOutlined");
|
|
926
|
+
var ReactMailFilled = createReactIconComponent("MailFilled");
|
|
927
|
+
var ReactMailOutlined = createReactIconComponent("MailOutlined");
|
|
928
|
+
var ReactMailTwoTone = createReactIconComponent("MailTwoTone");
|
|
929
|
+
var ReactManOutlined = createReactIconComponent("ManOutlined");
|
|
930
|
+
var ReactMastodonFilled = createReactIconComponent("MastodonFilled");
|
|
931
|
+
var ReactMedicineBoxFilled = createReactIconComponent("MedicineBoxFilled");
|
|
932
|
+
var ReactMedicineBoxOutlined = createReactIconComponent(
|
|
933
|
+
"MedicineBoxOutlined"
|
|
934
|
+
);
|
|
935
|
+
var ReactMedicineBoxTwoTone = createReactIconComponent("MedicineBoxTwoTone");
|
|
936
|
+
var ReactMediumCircleFilled = createReactIconComponent("MediumCircleFilled");
|
|
937
|
+
var ReactMediumOutlined = createReactIconComponent("MediumOutlined");
|
|
938
|
+
var ReactMediumSquareFilled = createReactIconComponent("MediumSquareFilled");
|
|
939
|
+
var ReactMediumWorkmarkOutlined = createReactIconComponent(
|
|
940
|
+
"MediumWorkmarkOutlined"
|
|
941
|
+
);
|
|
942
|
+
var ReactMehFilled = createReactIconComponent("MehFilled");
|
|
943
|
+
var ReactMehOutlined = createReactIconComponent("MehOutlined");
|
|
944
|
+
var ReactMehTwoTone = createReactIconComponent("MehTwoTone");
|
|
945
|
+
var ReactMenuFoldOutlined = createReactIconComponent("MenuFoldOutlined");
|
|
946
|
+
var ReactMenuOutlined = createReactIconComponent("MenuOutlined");
|
|
947
|
+
var ReactMenuUnfoldOutlined = createReactIconComponent("MenuUnfoldOutlined");
|
|
948
|
+
var ReactMergeCellsOutlined = createReactIconComponent("MergeCellsOutlined");
|
|
949
|
+
var ReactMergeFilled = createReactIconComponent("MergeFilled");
|
|
950
|
+
var ReactMergeOutlined = createReactIconComponent("MergeOutlined");
|
|
951
|
+
var ReactMessageFilled = createReactIconComponent("MessageFilled");
|
|
952
|
+
var ReactMessageOutlined = createReactIconComponent("MessageOutlined");
|
|
953
|
+
var ReactMessageTwoTone = createReactIconComponent("MessageTwoTone");
|
|
954
|
+
var ReactMetaFilled = createReactIconComponent("MetaFilled");
|
|
955
|
+
var ReactMinusCircleFilled = createReactIconComponent("MinusCircleFilled");
|
|
956
|
+
var ReactMinusCircleOutlined = createReactIconComponent(
|
|
957
|
+
"MinusCircleOutlined"
|
|
958
|
+
);
|
|
959
|
+
var ReactMinusCircleTwoTone = createReactIconComponent("MinusCircleTwoTone");
|
|
960
|
+
var ReactMinusOutlined = createReactIconComponent("MinusOutlined");
|
|
961
|
+
var ReactMinusSquareFilled = createReactIconComponent("MinusSquareFilled");
|
|
962
|
+
var ReactMinusSquareOutlined = createReactIconComponent(
|
|
963
|
+
"MinusSquareOutlined"
|
|
964
|
+
);
|
|
965
|
+
var ReactMinusSquareTwoTone = createReactIconComponent("MinusSquareTwoTone");
|
|
966
|
+
var ReactMistralFilled = createReactIconComponent("MistralFilled");
|
|
967
|
+
var ReactMobileFilled = createReactIconComponent("MobileFilled");
|
|
968
|
+
var ReactMobileOutlined = createReactIconComponent("MobileOutlined");
|
|
969
|
+
var ReactMobileTwoTone = createReactIconComponent("MobileTwoTone");
|
|
970
|
+
var ReactMoneyCollectFilled = createReactIconComponent("MoneyCollectFilled");
|
|
971
|
+
var ReactMoneyCollectOutlined = createReactIconComponent(
|
|
972
|
+
"MoneyCollectOutlined"
|
|
973
|
+
);
|
|
974
|
+
var ReactMoneyCollectTwoTone = createReactIconComponent(
|
|
975
|
+
"MoneyCollectTwoTone"
|
|
976
|
+
);
|
|
977
|
+
var ReactMonitorOutlined = createReactIconComponent("MonitorOutlined");
|
|
978
|
+
var ReactMoonFilled = createReactIconComponent("MoonFilled");
|
|
979
|
+
var ReactMoonOutlined = createReactIconComponent("MoonOutlined");
|
|
980
|
+
var ReactMoreOutlined = createReactIconComponent("MoreOutlined");
|
|
981
|
+
var ReactMutedFilled = createReactIconComponent("MutedFilled");
|
|
982
|
+
var ReactMutedOutlined = createReactIconComponent("MutedOutlined");
|
|
983
|
+
var ReactNetflixFilled = createReactIconComponent("NetflixFilled");
|
|
984
|
+
var ReactNodeCollapseOutlined = createReactIconComponent(
|
|
985
|
+
"NodeCollapseOutlined"
|
|
986
|
+
);
|
|
987
|
+
var ReactNodeExpandOutlined = createReactIconComponent("NodeExpandOutlined");
|
|
988
|
+
var ReactNodeIndexOutlined = createReactIconComponent("NodeIndexOutlined");
|
|
989
|
+
var ReactNotificationFilled = createReactIconComponent("NotificationFilled");
|
|
990
|
+
var ReactNotificationOutlined = createReactIconComponent(
|
|
991
|
+
"NotificationOutlined"
|
|
992
|
+
);
|
|
993
|
+
var ReactNotificationTwoTone = createReactIconComponent(
|
|
994
|
+
"NotificationTwoTone"
|
|
995
|
+
);
|
|
996
|
+
var ReactNumberOutlined = createReactIconComponent("NumberOutlined");
|
|
997
|
+
var ReactOllamaFilled = createReactIconComponent("OllamaFilled");
|
|
998
|
+
var ReactOneToOneOutlined = createReactIconComponent("OneToOneOutlined");
|
|
999
|
+
var ReactOpenAIFilled = createReactIconComponent("OpenAIFilled");
|
|
1000
|
+
var ReactOpenAIOutlined = createReactIconComponent("OpenAIOutlined");
|
|
1001
|
+
var ReactOrderedListOutlined = createReactIconComponent(
|
|
1002
|
+
"OrderedListOutlined"
|
|
1003
|
+
);
|
|
1004
|
+
var ReactPaperClipOutlined = createReactIconComponent("PaperClipOutlined");
|
|
1005
|
+
var ReactPartitionOutlined = createReactIconComponent("PartitionOutlined");
|
|
1006
|
+
var ReactPauseCircleFilled = createReactIconComponent("PauseCircleFilled");
|
|
1007
|
+
var ReactPauseCircleOutlined = createReactIconComponent(
|
|
1008
|
+
"PauseCircleOutlined"
|
|
1009
|
+
);
|
|
1010
|
+
var ReactPauseCircleTwoTone = createReactIconComponent("PauseCircleTwoTone");
|
|
1011
|
+
var ReactPauseOutlined = createReactIconComponent("PauseOutlined");
|
|
1012
|
+
var ReactPayCircleFilled = createReactIconComponent("PayCircleFilled");
|
|
1013
|
+
var ReactPayCircleOutlined = createReactIconComponent("PayCircleOutlined");
|
|
1014
|
+
var ReactPercentageOutlined = createReactIconComponent("PercentageOutlined");
|
|
1015
|
+
var ReactPerplexityFilled = createReactIconComponent("PerplexityFilled");
|
|
1016
|
+
var ReactPhoneFilled = createReactIconComponent("PhoneFilled");
|
|
1017
|
+
var ReactPhoneOutlined = createReactIconComponent("PhoneOutlined");
|
|
1018
|
+
var ReactPhoneTwoTone = createReactIconComponent("PhoneTwoTone");
|
|
1019
|
+
var ReactPicCenterOutlined = createReactIconComponent("PicCenterOutlined");
|
|
1020
|
+
var ReactPicLeftOutlined = createReactIconComponent("PicLeftOutlined");
|
|
1021
|
+
var ReactPicRightOutlined = createReactIconComponent("PicRightOutlined");
|
|
1022
|
+
var ReactPictureFilled = createReactIconComponent("PictureFilled");
|
|
1023
|
+
var ReactPictureOutlined = createReactIconComponent("PictureOutlined");
|
|
1024
|
+
var ReactPictureTwoTone = createReactIconComponent("PictureTwoTone");
|
|
1025
|
+
var ReactPieChartFilled = createReactIconComponent("PieChartFilled");
|
|
1026
|
+
var ReactPieChartOutlined = createReactIconComponent("PieChartOutlined");
|
|
1027
|
+
var ReactPieChartTwoTone = createReactIconComponent("PieChartTwoTone");
|
|
1028
|
+
var ReactPinterestFilled = createReactIconComponent("PinterestFilled");
|
|
1029
|
+
var ReactPinterestOutlined = createReactIconComponent("PinterestOutlined");
|
|
1030
|
+
var ReactPlayCircleFilled = createReactIconComponent("PlayCircleFilled");
|
|
1031
|
+
var ReactPlayCircleOutlined = createReactIconComponent("PlayCircleOutlined");
|
|
1032
|
+
var ReactPlayCircleTwoTone = createReactIconComponent("PlayCircleTwoTone");
|
|
1033
|
+
var ReactPlaySquareFilled = createReactIconComponent("PlaySquareFilled");
|
|
1034
|
+
var ReactPlaySquareOutlined = createReactIconComponent("PlaySquareOutlined");
|
|
1035
|
+
var ReactPlaySquareTwoTone = createReactIconComponent("PlaySquareTwoTone");
|
|
1036
|
+
var ReactPlusCircleFilled = createReactIconComponent("PlusCircleFilled");
|
|
1037
|
+
var ReactPlusCircleOutlined = createReactIconComponent("PlusCircleOutlined");
|
|
1038
|
+
var ReactPlusCircleTwoTone = createReactIconComponent("PlusCircleTwoTone");
|
|
1039
|
+
var ReactPlusOutlined = createReactIconComponent("PlusOutlined");
|
|
1040
|
+
var ReactPlusSquareFilled = createReactIconComponent("PlusSquareFilled");
|
|
1041
|
+
var ReactPlusSquareOutlined = createReactIconComponent("PlusSquareOutlined");
|
|
1042
|
+
var ReactPlusSquareTwoTone = createReactIconComponent("PlusSquareTwoTone");
|
|
1043
|
+
var ReactPoundCircleFilled = createReactIconComponent("PoundCircleFilled");
|
|
1044
|
+
var ReactPoundCircleOutlined = createReactIconComponent(
|
|
1045
|
+
"PoundCircleOutlined"
|
|
1046
|
+
);
|
|
1047
|
+
var ReactPoundCircleTwoTone = createReactIconComponent("PoundCircleTwoTone");
|
|
1048
|
+
var ReactPoundOutlined = createReactIconComponent("PoundOutlined");
|
|
1049
|
+
var ReactPoweroffOutlined = createReactIconComponent("PoweroffOutlined");
|
|
1050
|
+
var ReactPrinterFilled = createReactIconComponent("PrinterFilled");
|
|
1051
|
+
var ReactPrinterOutlined = createReactIconComponent("PrinterOutlined");
|
|
1052
|
+
var ReactPrinterTwoTone = createReactIconComponent("PrinterTwoTone");
|
|
1053
|
+
var ReactProductFilled = createReactIconComponent("ProductFilled");
|
|
1054
|
+
var ReactProductOutlined = createReactIconComponent("ProductOutlined");
|
|
1055
|
+
var ReactProfileFilled = createReactIconComponent("ProfileFilled");
|
|
1056
|
+
var ReactProfileOutlined = createReactIconComponent("ProfileOutlined");
|
|
1057
|
+
var ReactProfileTwoTone = createReactIconComponent("ProfileTwoTone");
|
|
1058
|
+
var ReactProjectFilled = createReactIconComponent("ProjectFilled");
|
|
1059
|
+
var ReactProjectOutlined = createReactIconComponent("ProjectOutlined");
|
|
1060
|
+
var ReactProjectTwoTone = createReactIconComponent("ProjectTwoTone");
|
|
1061
|
+
var ReactPropertySafetyFilled = createReactIconComponent(
|
|
1062
|
+
"PropertySafetyFilled"
|
|
1063
|
+
);
|
|
1064
|
+
var ReactPropertySafetyOutlined = createReactIconComponent(
|
|
1065
|
+
"PropertySafetyOutlined"
|
|
1066
|
+
);
|
|
1067
|
+
var ReactPropertySafetyTwoTone = createReactIconComponent(
|
|
1068
|
+
"PropertySafetyTwoTone"
|
|
1069
|
+
);
|
|
1070
|
+
var ReactPullRequestOutlined = createReactIconComponent(
|
|
1071
|
+
"PullRequestOutlined"
|
|
1072
|
+
);
|
|
1073
|
+
var ReactPushpinFilled = createReactIconComponent("PushpinFilled");
|
|
1074
|
+
var ReactPushpinOutlined = createReactIconComponent("PushpinOutlined");
|
|
1075
|
+
var ReactPushpinTwoTone = createReactIconComponent("PushpinTwoTone");
|
|
1076
|
+
var ReactPythonOutlined = createReactIconComponent("PythonOutlined");
|
|
1077
|
+
var ReactQqCircleFilled = createReactIconComponent("QqCircleFilled");
|
|
1078
|
+
var ReactQqOutlined = createReactIconComponent("QqOutlined");
|
|
1079
|
+
var ReactQqSquareFilled = createReactIconComponent("QqSquareFilled");
|
|
1080
|
+
var ReactQrcodeOutlined = createReactIconComponent("QrcodeOutlined");
|
|
1081
|
+
var ReactQuestionCircleFilled = createReactIconComponent(
|
|
1082
|
+
"QuestionCircleFilled"
|
|
1083
|
+
);
|
|
1084
|
+
var ReactQuestionCircleOutlined = createReactIconComponent(
|
|
1085
|
+
"QuestionCircleOutlined"
|
|
1086
|
+
);
|
|
1087
|
+
var ReactQuestionCircleTwoTone = createReactIconComponent(
|
|
1088
|
+
"QuestionCircleTwoTone"
|
|
1089
|
+
);
|
|
1090
|
+
var ReactQuestionOutlined = createReactIconComponent("QuestionOutlined");
|
|
1091
|
+
var ReactQwenFilled = createReactIconComponent("QwenFilled");
|
|
1092
|
+
var ReactRadarChartOutlined = createReactIconComponent("RadarChartOutlined");
|
|
1093
|
+
var ReactRadiusBottomleftOutlined = createReactIconComponent(
|
|
1094
|
+
"RadiusBottomleftOutlined"
|
|
1095
|
+
);
|
|
1096
|
+
var ReactRadiusBottomrightOutlined = createReactIconComponent(
|
|
1097
|
+
"RadiusBottomrightOutlined"
|
|
1098
|
+
);
|
|
1099
|
+
var ReactRadiusSettingOutlined = createReactIconComponent(
|
|
1100
|
+
"RadiusSettingOutlined"
|
|
1101
|
+
);
|
|
1102
|
+
var ReactRadiusUpleftOutlined = createReactIconComponent(
|
|
1103
|
+
"RadiusUpleftOutlined"
|
|
1104
|
+
);
|
|
1105
|
+
var ReactRadiusUprightOutlined = createReactIconComponent(
|
|
1106
|
+
"RadiusUprightOutlined"
|
|
1107
|
+
);
|
|
1108
|
+
var ReactReadFilled = createReactIconComponent("ReadFilled");
|
|
1109
|
+
var ReactReadOutlined = createReactIconComponent("ReadOutlined");
|
|
1110
|
+
var ReactReconciliationFilled = createReactIconComponent(
|
|
1111
|
+
"ReconciliationFilled"
|
|
1112
|
+
);
|
|
1113
|
+
var ReactReconciliationOutlined = createReactIconComponent(
|
|
1114
|
+
"ReconciliationOutlined"
|
|
1115
|
+
);
|
|
1116
|
+
var ReactReconciliationTwoTone = createReactIconComponent(
|
|
1117
|
+
"ReconciliationTwoTone"
|
|
1118
|
+
);
|
|
1119
|
+
var ReactRedEnvelopeFilled = createReactIconComponent("RedEnvelopeFilled");
|
|
1120
|
+
var ReactRedEnvelopeOutlined = createReactIconComponent(
|
|
1121
|
+
"RedEnvelopeOutlined"
|
|
1122
|
+
);
|
|
1123
|
+
var ReactRedEnvelopeTwoTone = createReactIconComponent("RedEnvelopeTwoTone");
|
|
1124
|
+
var ReactRedditCircleFilled = createReactIconComponent("RedditCircleFilled");
|
|
1125
|
+
var ReactRedditOutlined = createReactIconComponent("RedditOutlined");
|
|
1126
|
+
var ReactRedditSquareFilled = createReactIconComponent("RedditSquareFilled");
|
|
1127
|
+
var ReactRedoOutlined = createReactIconComponent("RedoOutlined");
|
|
1128
|
+
var ReactReloadOutlined = createReactIconComponent("ReloadOutlined");
|
|
1129
|
+
var ReactReplicateFilled = createReactIconComponent("ReplicateFilled");
|
|
1130
|
+
var ReactRestFilled = createReactIconComponent("RestFilled");
|
|
1131
|
+
var ReactRestOutlined = createReactIconComponent("RestOutlined");
|
|
1132
|
+
var ReactRestTwoTone = createReactIconComponent("RestTwoTone");
|
|
1133
|
+
var ReactRetweetOutlined = createReactIconComponent("RetweetOutlined");
|
|
1134
|
+
var ReactRightCircleFilled = createReactIconComponent("RightCircleFilled");
|
|
1135
|
+
var ReactRightCircleOutlined = createReactIconComponent(
|
|
1136
|
+
"RightCircleOutlined"
|
|
1137
|
+
);
|
|
1138
|
+
var ReactRightCircleTwoTone = createReactIconComponent("RightCircleTwoTone");
|
|
1139
|
+
var ReactRightOutlined = createReactIconComponent("RightOutlined");
|
|
1140
|
+
var ReactRightSquareFilled = createReactIconComponent("RightSquareFilled");
|
|
1141
|
+
var ReactRightSquareOutlined = createReactIconComponent(
|
|
1142
|
+
"RightSquareOutlined"
|
|
1143
|
+
);
|
|
1144
|
+
var ReactRightSquareTwoTone = createReactIconComponent("RightSquareTwoTone");
|
|
1145
|
+
var ReactRiseOutlined = createReactIconComponent("RiseOutlined");
|
|
1146
|
+
var ReactRobotFilled = createReactIconComponent("RobotFilled");
|
|
1147
|
+
var ReactRobotOutlined = createReactIconComponent("RobotOutlined");
|
|
1148
|
+
var ReactRocketFilled = createReactIconComponent("RocketFilled");
|
|
1149
|
+
var ReactRocketOutlined = createReactIconComponent("RocketOutlined");
|
|
1150
|
+
var ReactRocketTwoTone = createReactIconComponent("RocketTwoTone");
|
|
1151
|
+
var ReactRollbackOutlined = createReactIconComponent("RollbackOutlined");
|
|
1152
|
+
var ReactRotateLeftOutlined = createReactIconComponent("RotateLeftOutlined");
|
|
1153
|
+
var ReactRotateRightOutlined = createReactIconComponent(
|
|
1154
|
+
"RotateRightOutlined"
|
|
1155
|
+
);
|
|
1156
|
+
var ReactRubyOutlined = createReactIconComponent("RubyOutlined");
|
|
1157
|
+
var ReactSafetyCertificateFilled = createReactIconComponent(
|
|
1158
|
+
"SafetyCertificateFilled"
|
|
1159
|
+
);
|
|
1160
|
+
var ReactSafetyCertificateOutlined = createReactIconComponent(
|
|
1161
|
+
"SafetyCertificateOutlined"
|
|
1162
|
+
);
|
|
1163
|
+
var ReactSafetyCertificateTwoTone = createReactIconComponent(
|
|
1164
|
+
"SafetyCertificateTwoTone"
|
|
1165
|
+
);
|
|
1166
|
+
var ReactSafetyOutlined = createReactIconComponent("SafetyOutlined");
|
|
1167
|
+
var ReactSaveFilled = createReactIconComponent("SaveFilled");
|
|
1168
|
+
var ReactSaveOutlined = createReactIconComponent("SaveOutlined");
|
|
1169
|
+
var ReactSaveTwoTone = createReactIconComponent("SaveTwoTone");
|
|
1170
|
+
var ReactScanOutlined = createReactIconComponent("ScanOutlined");
|
|
1171
|
+
var ReactScheduleFilled = createReactIconComponent("ScheduleFilled");
|
|
1172
|
+
var ReactScheduleOutlined = createReactIconComponent("ScheduleOutlined");
|
|
1173
|
+
var ReactScheduleTwoTone = createReactIconComponent("ScheduleTwoTone");
|
|
1174
|
+
var ReactScissorOutlined = createReactIconComponent("ScissorOutlined");
|
|
1175
|
+
var ReactSearchOutlined = createReactIconComponent("SearchOutlined");
|
|
1176
|
+
var ReactSecurityScanFilled = createReactIconComponent("SecurityScanFilled");
|
|
1177
|
+
var ReactSecurityScanOutlined = createReactIconComponent(
|
|
1178
|
+
"SecurityScanOutlined"
|
|
1179
|
+
);
|
|
1180
|
+
var ReactSecurityScanTwoTone = createReactIconComponent(
|
|
1181
|
+
"SecurityScanTwoTone"
|
|
1182
|
+
);
|
|
1183
|
+
var ReactSelectOutlined = createReactIconComponent("SelectOutlined");
|
|
1184
|
+
var ReactSendOutlined = createReactIconComponent("SendOutlined");
|
|
1185
|
+
var ReactSettingFilled = createReactIconComponent("SettingFilled");
|
|
1186
|
+
var ReactSettingOutlined = createReactIconComponent("SettingOutlined");
|
|
1187
|
+
var ReactSettingTwoTone = createReactIconComponent("SettingTwoTone");
|
|
1188
|
+
var ReactShakeOutlined = createReactIconComponent("ShakeOutlined");
|
|
1189
|
+
var ReactShareAltOutlined = createReactIconComponent("ShareAltOutlined");
|
|
1190
|
+
var ReactShopFilled = createReactIconComponent("ShopFilled");
|
|
1191
|
+
var ReactShopOutlined = createReactIconComponent("ShopOutlined");
|
|
1192
|
+
var ReactShopTwoTone = createReactIconComponent("ShopTwoTone");
|
|
1193
|
+
var ReactShoppingCartOutlined = createReactIconComponent(
|
|
1194
|
+
"ShoppingCartOutlined"
|
|
1195
|
+
);
|
|
1196
|
+
var ReactShoppingFilled = createReactIconComponent("ShoppingFilled");
|
|
1197
|
+
var ReactShoppingOutlined = createReactIconComponent("ShoppingOutlined");
|
|
1198
|
+
var ReactShoppingTwoTone = createReactIconComponent("ShoppingTwoTone");
|
|
1199
|
+
var ReactShrinkOutlined = createReactIconComponent("ShrinkOutlined");
|
|
1200
|
+
var ReactSignalFilled = createReactIconComponent("SignalFilled");
|
|
1201
|
+
var ReactSignatureFilled = createReactIconComponent("SignatureFilled");
|
|
1202
|
+
var ReactSignatureOutlined = createReactIconComponent("SignatureOutlined");
|
|
1203
|
+
var ReactSisternodeOutlined = createReactIconComponent("SisternodeOutlined");
|
|
1204
|
+
var ReactSketchCircleFilled = createReactIconComponent("SketchCircleFilled");
|
|
1205
|
+
var ReactSketchOutlined = createReactIconComponent("SketchOutlined");
|
|
1206
|
+
var ReactSketchSquareFilled = createReactIconComponent("SketchSquareFilled");
|
|
1207
|
+
var ReactSkinFilled = createReactIconComponent("SkinFilled");
|
|
1208
|
+
var ReactSkinOutlined = createReactIconComponent("SkinOutlined");
|
|
1209
|
+
var ReactSkinTwoTone = createReactIconComponent("SkinTwoTone");
|
|
1210
|
+
var ReactSkypeFilled = createReactIconComponent("SkypeFilled");
|
|
1211
|
+
var ReactSkypeOutlined = createReactIconComponent("SkypeOutlined");
|
|
1212
|
+
var ReactSlackCircleFilled = createReactIconComponent("SlackCircleFilled");
|
|
1213
|
+
var ReactSlackOutlined = createReactIconComponent("SlackOutlined");
|
|
1214
|
+
var ReactSlackSquareFilled = createReactIconComponent("SlackSquareFilled");
|
|
1215
|
+
var ReactSlackSquareOutlined = createReactIconComponent(
|
|
1216
|
+
"SlackSquareOutlined"
|
|
1217
|
+
);
|
|
1218
|
+
var ReactSlidersFilled = createReactIconComponent("SlidersFilled");
|
|
1219
|
+
var ReactSlidersOutlined = createReactIconComponent("SlidersOutlined");
|
|
1220
|
+
var ReactSlidersTwoTone = createReactIconComponent("SlidersTwoTone");
|
|
1221
|
+
var ReactSmallDashOutlined = createReactIconComponent("SmallDashOutlined");
|
|
1222
|
+
var ReactSmileFilled = createReactIconComponent("SmileFilled");
|
|
1223
|
+
var ReactSmileOutlined = createReactIconComponent("SmileOutlined");
|
|
1224
|
+
var ReactSmileTwoTone = createReactIconComponent("SmileTwoTone");
|
|
1225
|
+
var ReactSnapchatFilled = createReactIconComponent("SnapchatFilled");
|
|
1226
|
+
var ReactSnippetsFilled = createReactIconComponent("SnippetsFilled");
|
|
1227
|
+
var ReactSnippetsOutlined = createReactIconComponent("SnippetsOutlined");
|
|
1228
|
+
var ReactSnippetsTwoTone = createReactIconComponent("SnippetsTwoTone");
|
|
1229
|
+
var ReactSolutionOutlined = createReactIconComponent("SolutionOutlined");
|
|
1230
|
+
var ReactSortAscendingOutlined = createReactIconComponent(
|
|
1231
|
+
"SortAscendingOutlined"
|
|
1232
|
+
);
|
|
1233
|
+
var ReactSortDescendingOutlined = createReactIconComponent(
|
|
1234
|
+
"SortDescendingOutlined"
|
|
1235
|
+
);
|
|
1236
|
+
var ReactSoundFilled = createReactIconComponent("SoundFilled");
|
|
1237
|
+
var ReactSoundOutlined = createReactIconComponent("SoundOutlined");
|
|
1238
|
+
var ReactSoundTwoTone = createReactIconComponent("SoundTwoTone");
|
|
1239
|
+
var ReactSplitCellsOutlined = createReactIconComponent("SplitCellsOutlined");
|
|
1240
|
+
var ReactSpotifyFilled = createReactIconComponent("SpotifyFilled");
|
|
1241
|
+
var ReactSpotifyOutlined = createReactIconComponent("SpotifyOutlined");
|
|
1242
|
+
var ReactStarFilled = createReactIconComponent("StarFilled");
|
|
1243
|
+
var ReactStarOutlined = createReactIconComponent("StarOutlined");
|
|
1244
|
+
var ReactStarTwoTone = createReactIconComponent("StarTwoTone");
|
|
1245
|
+
var ReactStepBackwardFilled = createReactIconComponent("StepBackwardFilled");
|
|
1246
|
+
var ReactStepBackwardOutlined = createReactIconComponent(
|
|
1247
|
+
"StepBackwardOutlined"
|
|
1248
|
+
);
|
|
1249
|
+
var ReactStepForwardFilled = createReactIconComponent("StepForwardFilled");
|
|
1250
|
+
var ReactStepForwardOutlined = createReactIconComponent(
|
|
1251
|
+
"StepForwardOutlined"
|
|
1252
|
+
);
|
|
1253
|
+
var ReactStockOutlined = createReactIconComponent("StockOutlined");
|
|
1254
|
+
var ReactStopFilled = createReactIconComponent("StopFilled");
|
|
1255
|
+
var ReactStopOutlined = createReactIconComponent("StopOutlined");
|
|
1256
|
+
var ReactStopTwoTone = createReactIconComponent("StopTwoTone");
|
|
1257
|
+
var ReactStrikethroughOutlined = createReactIconComponent(
|
|
1258
|
+
"StrikethroughOutlined"
|
|
1259
|
+
);
|
|
1260
|
+
var ReactSubnodeOutlined = createReactIconComponent("SubnodeOutlined");
|
|
1261
|
+
var ReactSunFilled = createReactIconComponent("SunFilled");
|
|
1262
|
+
var ReactSunOutlined = createReactIconComponent("SunOutlined");
|
|
1263
|
+
var ReactSwapLeftOutlined = createReactIconComponent("SwapLeftOutlined");
|
|
1264
|
+
var ReactSwapOutlined = createReactIconComponent("SwapOutlined");
|
|
1265
|
+
var ReactSwapRightOutlined = createReactIconComponent("SwapRightOutlined");
|
|
1266
|
+
var ReactSwitcherFilled = createReactIconComponent("SwitcherFilled");
|
|
1267
|
+
var ReactSwitcherOutlined = createReactIconComponent("SwitcherOutlined");
|
|
1268
|
+
var ReactSwitcherTwoTone = createReactIconComponent("SwitcherTwoTone");
|
|
1269
|
+
var ReactSyncOutlined = createReactIconComponent("SyncOutlined");
|
|
1270
|
+
var ReactTableOutlined = createReactIconComponent("TableOutlined");
|
|
1271
|
+
var ReactTabletFilled = createReactIconComponent("TabletFilled");
|
|
1272
|
+
var ReactTabletOutlined = createReactIconComponent("TabletOutlined");
|
|
1273
|
+
var ReactTabletTwoTone = createReactIconComponent("TabletTwoTone");
|
|
1274
|
+
var ReactTagFilled = createReactIconComponent("TagFilled");
|
|
1275
|
+
var ReactTagOutlined = createReactIconComponent("TagOutlined");
|
|
1276
|
+
var ReactTagTwoTone = createReactIconComponent("TagTwoTone");
|
|
1277
|
+
var ReactTagsFilled = createReactIconComponent("TagsFilled");
|
|
1278
|
+
var ReactTagsOutlined = createReactIconComponent("TagsOutlined");
|
|
1279
|
+
var ReactTagsTwoTone = createReactIconComponent("TagsTwoTone");
|
|
1280
|
+
var ReactTaobaoCircleFilled = createReactIconComponent("TaobaoCircleFilled");
|
|
1281
|
+
var ReactTaobaoCircleOutlined = createReactIconComponent(
|
|
1282
|
+
"TaobaoCircleOutlined"
|
|
1283
|
+
);
|
|
1284
|
+
var ReactTaobaoOutlined = createReactIconComponent("TaobaoOutlined");
|
|
1285
|
+
var ReactTaobaoSquareFilled = createReactIconComponent("TaobaoSquareFilled");
|
|
1286
|
+
var ReactTeamOutlined = createReactIconComponent("TeamOutlined");
|
|
1287
|
+
var ReactTelegramFilled = createReactIconComponent("TelegramFilled");
|
|
1288
|
+
var ReactThreadsFilled = createReactIconComponent("ThreadsFilled");
|
|
1289
|
+
var ReactThunderboltFilled = createReactIconComponent("ThunderboltFilled");
|
|
1290
|
+
var ReactThunderboltOutlined = createReactIconComponent(
|
|
1291
|
+
"ThunderboltOutlined"
|
|
1292
|
+
);
|
|
1293
|
+
var ReactThunderboltTwoTone = createReactIconComponent("ThunderboltTwoTone");
|
|
1294
|
+
var ReactTikTokFilled = createReactIconComponent("TikTokFilled");
|
|
1295
|
+
var ReactTikTokOutlined = createReactIconComponent("TikTokOutlined");
|
|
1296
|
+
var ReactToTopOutlined = createReactIconComponent("ToTopOutlined");
|
|
1297
|
+
var ReactToolFilled = createReactIconComponent("ToolFilled");
|
|
1298
|
+
var ReactToolOutlined = createReactIconComponent("ToolOutlined");
|
|
1299
|
+
var ReactToolTwoTone = createReactIconComponent("ToolTwoTone");
|
|
1300
|
+
var ReactTrademarkCircleFilled = createReactIconComponent(
|
|
1301
|
+
"TrademarkCircleFilled"
|
|
1302
|
+
);
|
|
1303
|
+
var ReactTrademarkCircleOutlined = createReactIconComponent(
|
|
1304
|
+
"TrademarkCircleOutlined"
|
|
1305
|
+
);
|
|
1306
|
+
var ReactTrademarkCircleTwoTone = createReactIconComponent(
|
|
1307
|
+
"TrademarkCircleTwoTone"
|
|
1308
|
+
);
|
|
1309
|
+
var ReactTrademarkOutlined = createReactIconComponent("TrademarkOutlined");
|
|
1310
|
+
var ReactTransactionOutlined = createReactIconComponent(
|
|
1311
|
+
"TransactionOutlined"
|
|
1312
|
+
);
|
|
1313
|
+
var ReactTranslationOutlined = createReactIconComponent(
|
|
1314
|
+
"TranslationOutlined"
|
|
1315
|
+
);
|
|
1316
|
+
var ReactTrophyFilled = createReactIconComponent("TrophyFilled");
|
|
1317
|
+
var ReactTrophyOutlined = createReactIconComponent("TrophyOutlined");
|
|
1318
|
+
var ReactTrophyTwoTone = createReactIconComponent("TrophyTwoTone");
|
|
1319
|
+
var ReactTruckFilled = createReactIconComponent("TruckFilled");
|
|
1320
|
+
var ReactTruckOutlined = createReactIconComponent("TruckOutlined");
|
|
1321
|
+
var ReactTwitchFilled = createReactIconComponent("TwitchFilled");
|
|
1322
|
+
var ReactTwitchOutlined = createReactIconComponent("TwitchOutlined");
|
|
1323
|
+
var ReactTwitterCircleFilled = createReactIconComponent(
|
|
1324
|
+
"TwitterCircleFilled"
|
|
1325
|
+
);
|
|
1326
|
+
var ReactTwitterOutlined = createReactIconComponent("TwitterOutlined");
|
|
1327
|
+
var ReactTwitterSquareFilled = createReactIconComponent(
|
|
1328
|
+
"TwitterSquareFilled"
|
|
1329
|
+
);
|
|
1330
|
+
var ReactUnderlineOutlined = createReactIconComponent("UnderlineOutlined");
|
|
1331
|
+
var ReactUndoOutlined = createReactIconComponent("UndoOutlined");
|
|
1332
|
+
var ReactUngroupOutlined = createReactIconComponent("UngroupOutlined");
|
|
1333
|
+
var ReactUnlockFilled = createReactIconComponent("UnlockFilled");
|
|
1334
|
+
var ReactUnlockOutlined = createReactIconComponent("UnlockOutlined");
|
|
1335
|
+
var ReactUnlockTwoTone = createReactIconComponent("UnlockTwoTone");
|
|
1336
|
+
var ReactUnorderedListOutlined = createReactIconComponent(
|
|
1337
|
+
"UnorderedListOutlined"
|
|
1338
|
+
);
|
|
1339
|
+
var ReactUpCircleFilled = createReactIconComponent("UpCircleFilled");
|
|
1340
|
+
var ReactUpCircleOutlined = createReactIconComponent("UpCircleOutlined");
|
|
1341
|
+
var ReactUpCircleTwoTone = createReactIconComponent("UpCircleTwoTone");
|
|
1342
|
+
var ReactUpOutlined = createReactIconComponent("UpOutlined");
|
|
1343
|
+
var ReactUpSquareFilled = createReactIconComponent("UpSquareFilled");
|
|
1344
|
+
var ReactUpSquareOutlined = createReactIconComponent("UpSquareOutlined");
|
|
1345
|
+
var ReactUpSquareTwoTone = createReactIconComponent("UpSquareTwoTone");
|
|
1346
|
+
var ReactUploadOutlined = createReactIconComponent("UploadOutlined");
|
|
1347
|
+
var ReactUsbFilled = createReactIconComponent("UsbFilled");
|
|
1348
|
+
var ReactUsbOutlined = createReactIconComponent("UsbOutlined");
|
|
1349
|
+
var ReactUsbTwoTone = createReactIconComponent("UsbTwoTone");
|
|
1350
|
+
var ReactUserAddOutlined = createReactIconComponent("UserAddOutlined");
|
|
1351
|
+
var ReactUserDeleteOutlined = createReactIconComponent("UserDeleteOutlined");
|
|
1352
|
+
var ReactUserOutlined = createReactIconComponent("UserOutlined");
|
|
1353
|
+
var ReactUserSwitchOutlined = createReactIconComponent("UserSwitchOutlined");
|
|
1354
|
+
var ReactUsergroupAddOutlined = createReactIconComponent(
|
|
1355
|
+
"UsergroupAddOutlined"
|
|
1356
|
+
);
|
|
1357
|
+
var ReactUsergroupDeleteOutlined = createReactIconComponent(
|
|
1358
|
+
"UsergroupDeleteOutlined"
|
|
1359
|
+
);
|
|
1360
|
+
var ReactVerifiedOutlined = createReactIconComponent("VerifiedOutlined");
|
|
1361
|
+
var ReactVerticalAlignBottomOutlined = createReactIconComponent(
|
|
1362
|
+
"VerticalAlignBottomOutlined"
|
|
1363
|
+
);
|
|
1364
|
+
var ReactVerticalAlignMiddleOutlined = createReactIconComponent(
|
|
1365
|
+
"VerticalAlignMiddleOutlined"
|
|
1366
|
+
);
|
|
1367
|
+
var ReactVerticalAlignTopOutlined = createReactIconComponent(
|
|
1368
|
+
"VerticalAlignTopOutlined"
|
|
1369
|
+
);
|
|
1370
|
+
var ReactVerticalLeftOutlined = createReactIconComponent(
|
|
1371
|
+
"VerticalLeftOutlined"
|
|
1372
|
+
);
|
|
1373
|
+
var ReactVerticalRightOutlined = createReactIconComponent(
|
|
1374
|
+
"VerticalRightOutlined"
|
|
1375
|
+
);
|
|
1376
|
+
var ReactVideoCameraAddOutlined = createReactIconComponent(
|
|
1377
|
+
"VideoCameraAddOutlined"
|
|
1378
|
+
);
|
|
1379
|
+
var ReactVideoCameraFilled = createReactIconComponent("VideoCameraFilled");
|
|
1380
|
+
var ReactVideoCameraOutlined = createReactIconComponent(
|
|
1381
|
+
"VideoCameraOutlined"
|
|
1382
|
+
);
|
|
1383
|
+
var ReactVideoCameraTwoTone = createReactIconComponent("VideoCameraTwoTone");
|
|
1384
|
+
var ReactWalletFilled = createReactIconComponent("WalletFilled");
|
|
1385
|
+
var ReactWalletOutlined = createReactIconComponent("WalletOutlined");
|
|
1386
|
+
var ReactWalletTwoTone = createReactIconComponent("WalletTwoTone");
|
|
1387
|
+
var ReactWarningFilled = createReactIconComponent("WarningFilled");
|
|
1388
|
+
var ReactWarningOutlined = createReactIconComponent("WarningOutlined");
|
|
1389
|
+
var ReactWarningTwoTone = createReactIconComponent("WarningTwoTone");
|
|
1390
|
+
var ReactWechatFilled = createReactIconComponent("WechatFilled");
|
|
1391
|
+
var ReactWechatOutlined = createReactIconComponent("WechatOutlined");
|
|
1392
|
+
var ReactWechatWorkFilled = createReactIconComponent("WechatWorkFilled");
|
|
1393
|
+
var ReactWechatWorkOutlined = createReactIconComponent("WechatWorkOutlined");
|
|
1394
|
+
var ReactWeiboCircleFilled = createReactIconComponent("WeiboCircleFilled");
|
|
1395
|
+
var ReactWeiboCircleOutlined = createReactIconComponent(
|
|
1396
|
+
"WeiboCircleOutlined"
|
|
1397
|
+
);
|
|
1398
|
+
var ReactWeiboOutlined = createReactIconComponent("WeiboOutlined");
|
|
1399
|
+
var ReactWeiboSquareFilled = createReactIconComponent("WeiboSquareFilled");
|
|
1400
|
+
var ReactWeiboSquareOutlined = createReactIconComponent(
|
|
1401
|
+
"WeiboSquareOutlined"
|
|
1402
|
+
);
|
|
1403
|
+
var ReactWhatsAppOutlined = createReactIconComponent("WhatsAppOutlined");
|
|
1404
|
+
var ReactWifiOutlined = createReactIconComponent("WifiOutlined");
|
|
1405
|
+
var ReactWindowsFilled = createReactIconComponent("WindowsFilled");
|
|
1406
|
+
var ReactWindowsOutlined = createReactIconComponent("WindowsOutlined");
|
|
1407
|
+
var ReactWomanOutlined = createReactIconComponent("WomanOutlined");
|
|
1408
|
+
var ReactXFilled = createReactIconComponent("XFilled");
|
|
1409
|
+
var ReactXOutlined = createReactIconComponent("XOutlined");
|
|
1410
|
+
var ReactYahooFilled = createReactIconComponent("YahooFilled");
|
|
1411
|
+
var ReactYahooOutlined = createReactIconComponent("YahooOutlined");
|
|
1412
|
+
var ReactYoutubeFilled = createReactIconComponent("YoutubeFilled");
|
|
1413
|
+
var ReactYoutubeOutlined = createReactIconComponent("YoutubeOutlined");
|
|
1414
|
+
var ReactYuqueFilled = createReactIconComponent("YuqueFilled");
|
|
1415
|
+
var ReactYuqueOutlined = createReactIconComponent("YuqueOutlined");
|
|
1416
|
+
var ReactZhihuCircleFilled = createReactIconComponent("ZhihuCircleFilled");
|
|
1417
|
+
var ReactZhihuOutlined = createReactIconComponent("ZhihuOutlined");
|
|
1418
|
+
var ReactZhihuSquareFilled = createReactIconComponent("ZhihuSquareFilled");
|
|
1419
|
+
var ReactZoomInOutlined = createReactIconComponent("ZoomInOutlined");
|
|
1420
|
+
var ReactZoomOutOutlined = createReactIconComponent("ZoomOutOutlined");
|
|
30
1421
|
|
|
31
1422
|
// src/shared/class-names.ts
|
|
32
1423
|
function joinClassNames(...values) {
|
|
@@ -37,7 +1428,7 @@ function joinClassNames(...values) {
|
|
|
37
1428
|
var REACT_COMPONENT_PREFIX = "canvas-react";
|
|
38
1429
|
|
|
39
1430
|
// src/components/checkbox/style.css
|
|
40
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-checkbox {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n user-select: none;\n}\n.canvas-react-checkbox-disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-checkbox-input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-checkbox-box {\n position: relative;\n flex: none;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border-strong);\n border-radius: 4px;\n background: var(--canvas-react-color-bg);\n transition:\n border-color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n}\n.canvas-react-checkbox:hover .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-checkbox-input:focus-visible + .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box,\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-checkbox-box::after {\n position: absolute;\n content: "";\n opacity: 0;\n box-sizing: border-box;\n transform: scale(0);\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box::after {\n top: 50%;\n left: 22%;\n width: 5.5px;\n height: 9px;\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transform: translateY(-58%) rotate(45deg) scale(1);\n transform-origin: center;\n opacity: 1;\n}\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box::after {\n top: 50%;\n left: 50%;\n width: 8px;\n border-bottom: 2px solid #fff;\n transform: translate(-50%, -50%);\n opacity: 1;\n}\n.canvas-react-checkbox-label {\n min-width: 0;\n}\n');
|
|
1431
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-checkbox {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n user-select: none;\n}\n.canvas-react-checkbox-disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-checkbox-input {\n position: absolute;\n top: 50%;\n inset-inline-start: 0;\n width: 16px;\n height: 16px;\n margin: 0;\n transform: translateY(-50%);\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-checkbox-box {\n position: relative;\n flex: none;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border-strong);\n border-radius: 4px;\n background: var(--canvas-react-color-bg);\n transition:\n border-color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n}\n.canvas-react-checkbox:hover .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-checkbox-input:focus-visible + .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box,\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-checkbox-box::after {\n position: absolute;\n content: "";\n opacity: 0;\n box-sizing: border-box;\n transform: scale(0);\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box::after {\n top: 50%;\n left: 22%;\n width: 5.5px;\n height: 9px;\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transform: translateY(-58%) rotate(45deg) scale(1);\n transform-origin: center;\n opacity: 1;\n}\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box::after {\n top: 50%;\n left: 50%;\n width: 8px;\n border-bottom: 2px solid #fff;\n transform: translate(-50%, -50%);\n opacity: 1;\n}\n.canvas-react-checkbox-label {\n min-width: 0;\n}\n');
|
|
41
1432
|
var ReactCheckbox = forwardRef(
|
|
42
1433
|
function ReactCheckbox2(props, ref) {
|
|
43
1434
|
const {
|
|
@@ -284,6 +1675,7 @@ function resolveDuration(duration, direction) {
|
|
|
284
1675
|
styleInject('@import "../../styles/variables.css";\n.canvas-react-popup {\n position: fixed;\n z-index: 1200;\n box-sizing: border-box;\n pointer-events: auto;\n}\n.canvas-react-popup-surface {\n overflow: hidden;\n border: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #ffffff);\n box-shadow: var( --canvas-react-shadow-popup, 0 8px 24px rgba(15, 23, 42, 0.16) );\n transform-origin: top center;\n}\n.canvas-react-popup-surface-enter-active,\n.canvas-react-popup-surface-leave-active {\n transition: opacity 0.18s ease-out, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.canvas-react-popup-surface-enter-from,\n.canvas-react-popup-surface-leave-to {\n opacity: 0;\n transform: translateY(-6px) scale(0.98);\n}\n.canvas-react-popup-surface-enter-to,\n.canvas-react-popup-surface-leave-from {\n opacity: 1;\n transform: translate(0) scale(1);\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface {\n transform-origin: bottom center;\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface-leave-to {\n transform: translateY(6px) scale(0.98);\n}\n.canvas-react-popup[data-placement^=bottom] .canvas-react-popup-surface {\n transform-origin: top center;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface {\n transform-origin: center right;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface-leave-to {\n transform: translateX(6px) scale(0.98);\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface {\n transform-origin: center left;\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface-leave-to {\n transform: translateX(-6px) scale(0.98);\n}\n.canvas-react-popup-leave {\n pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-popup-surface-enter-active,\n .canvas-react-popup-surface-leave-active {\n transition-duration: 0.01ms;\n }\n}\n');
|
|
285
1676
|
var POPUP_MOTION_DURATION = 180;
|
|
286
1677
|
function ReactPopup(props) {
|
|
1678
|
+
const configStyle = useReactConfigStyle();
|
|
287
1679
|
const {
|
|
288
1680
|
anchorRect,
|
|
289
1681
|
anchorRef,
|
|
@@ -453,6 +1845,7 @@ function ReactPopup(props) {
|
|
|
453
1845
|
className
|
|
454
1846
|
),
|
|
455
1847
|
style: {
|
|
1848
|
+
...configStyle,
|
|
456
1849
|
...position.style,
|
|
457
1850
|
...style,
|
|
458
1851
|
...contentScaleStyle,
|
|
@@ -645,6 +2038,12 @@ var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
|
|
|
645
2038
|
} = props;
|
|
646
2039
|
const hostRef = useRef(null);
|
|
647
2040
|
const [scrollTop, setScrollTop] = useState(0);
|
|
2041
|
+
useLayoutEffect(() => {
|
|
2042
|
+
const maximum = Math.max(0, items.length * itemHeight - height);
|
|
2043
|
+
if (hostRef.current && hostRef.current.scrollTop > maximum)
|
|
2044
|
+
hostRef.current.scrollTop = maximum;
|
|
2045
|
+
setScrollTop((current) => Math.min(current, maximum));
|
|
2046
|
+
}, [items.length, itemHeight, height]);
|
|
648
2047
|
const useVirtual = virtual && items.length * itemHeight > height;
|
|
649
2048
|
const startIndex = useVirtual ? Math.max(0, Math.floor(scrollTop / itemHeight) - overscan) : 0;
|
|
650
2049
|
const endIndex = useVirtual ? Math.min(
|
|
@@ -1498,7 +2897,7 @@ function actionStyle(primary) {
|
|
|
1498
2897
|
}
|
|
1499
2898
|
|
|
1500
2899
|
// src/components/form/style.css
|
|
1501
|
-
styleInject(".canvas-react-form {\n min-width: 0;\n}\n.canvas-react-form-vertical {\n display: grid;\n gap: 16px;\n}\n.canvas-react-form-horizontal {\n display: grid;\n gap: 12px;\n}\n.canvas-react-form-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: 12px 16px;\n}\n.canvas-react-form-item {\n box-sizing: border-box;\n min-width: 0;\n}\n.canvas-react-form-item-vertical {\n display: grid;\n gap: 6px;\n}\n.canvas-react-form-item-horizontal {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n column-gap: 10px;\n row-gap: 4px;\n}\n.canvas-react-form-item-inline {\n display: inline-grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n column-gap: 8px;\n}\n.canvas-react-form-item-no-wrap {\n flex-wrap: nowrap;\n}\n.canvas-react-form-item-horizontal.canvas-react-form-item-no-wrap {\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-horizontal > .canvas-react-form-item {\n margin-bottom: var(--canvas-react-form-item-spacing, 16px);\n}\n.canvas-react-form-item-inline.canvas-react-form-item-no-wrap {\n display: inline-grid;\n grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-item-no-wrap > .canvas-react-form-label {\n white-space: nowrap;\n}\n.canvas-react-form-label {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n min-width: 0;\n color: #475569;\n font-size:
|
|
2900
|
+
styleInject(".canvas-react-form {\n min-width: 0;\n}\n.canvas-react-form-vertical {\n display: grid;\n gap: 16px;\n}\n.canvas-react-form-horizontal {\n display: grid;\n gap: 12px;\n}\n.canvas-react-form-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: 12px 16px;\n}\n.canvas-react-form-item {\n box-sizing: border-box;\n min-width: 0;\n}\n.canvas-react-form-item-vertical {\n display: grid;\n gap: 6px;\n}\n.canvas-react-form-item-horizontal {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n column-gap: 10px;\n row-gap: 4px;\n}\n.canvas-react-form-item-inline {\n display: inline-grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n column-gap: 8px;\n}\n.canvas-react-form-item-no-wrap {\n flex-wrap: nowrap;\n}\n.canvas-react-form-item-horizontal.canvas-react-form-item-no-wrap {\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-horizontal > .canvas-react-form-item {\n margin-bottom: var(--canvas-react-form-item-spacing, 16px);\n}\n.canvas-react-form-item-inline.canvas-react-form-item-no-wrap {\n display: inline-grid;\n grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-item-no-wrap > .canvas-react-form-label {\n white-space: nowrap;\n}\n.canvas-react-form-label {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n min-width: 0;\n color: #475569;\n font-size: var(--canvas-react-font-size-label);\n line-height: 1.4;\n}\n.canvas-react-form-horizontal > .canvas-react-form-item > .canvas-react-form-label {\n min-height: 32px;\n}\n.canvas-react-form-required {\n color: #dc2626;\n}\n.canvas-react-form-control {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.canvas-react-form-error {\n color: #dc2626;\n font-size: var(--canvas-react-font-size-secondary);\n}\n.canvas-react-form-help,\n.canvas-react-form-extra {\n color: #64748b;\n font-size: var(--canvas-react-font-size-secondary);\n}\n.canvas-react-form-item-error .canvas-react-form-control > input,\n.canvas-react-form-item-error .canvas-react-form-control > textarea {\n border-color: #dc2626;\n}\n");
|
|
1502
2901
|
function createFormInstance() {
|
|
1503
2902
|
const store = {
|
|
1504
2903
|
values: {},
|
|
@@ -1767,7 +3166,7 @@ var ReactForm = Object.assign(ReactFormRoot, {
|
|
|
1767
3166
|
});
|
|
1768
3167
|
|
|
1769
3168
|
// src/components/color/style.css
|
|
1770
|
-
styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 auto;\n width: calc(24px * var(--canvas-react-content-zoom, 1));\n height: calc(24px * var(--canvas-react-content-zoom, 1));\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n margin-right: var(--canvas-react-control-padding-inline, 11px);\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n overflow: hidden;\n}\n.canvas-react-color-panel {\n padding: 12px;\n box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n position: relative;\n height: 150px;\n overflow: hidden;\n border-radius: 6px;\n cursor: crosshair;\n background-image:\n linear-gradient(\n to top,\n #000,\n transparent),\n linear-gradient(\n to right,\n #fff,\n transparent);\n touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.canvas-react-color-controls {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 12px;\n}\n.canvas-react-color-current {\n flex: 0 0 28px;\n height: 28px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 50%;\n}\n.canvas-react-color-hue {\n width: 100%;\n height: 12px;\n margin: 0;\n appearance: none;\n border-radius: 999px;\n background:\n linear-gradient(\n to right,\n #f00,\n #ff0,\n #0f0,\n #0ff,\n #00f,\n #f0f,\n #f00);\n cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n appearance: none;\n border: 2px solid #fff;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n display: grid;\n grid-template-columns: 36px 1fr;\n align-items: center;\n gap: 8px;\n margin-top: 12px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n height: 28px;\n}\n.canvas-react-color-presets {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 7px;\n margin-top: 12px;\n}\n.canvas-react-color-preset {\n width: 20px;\n height: 20px;\n padding: 0;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
|
|
3169
|
+
styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 auto;\n width: calc(24px * var(--canvas-react-content-zoom, 1));\n height: calc(24px * var(--canvas-react-content-zoom, 1));\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-transparent {\n background-color: #fff;\n background-image:\n linear-gradient(\n 45deg,\n #d1d5db 25%,\n transparent 25%),\n linear-gradient(\n -45deg,\n #d1d5db 25%,\n transparent 25%),\n linear-gradient(\n 45deg,\n transparent 75%,\n #d1d5db 75%),\n linear-gradient(\n -45deg,\n transparent 75%,\n #d1d5db 75%);\n background-position:\n 0 0,\n 0 5px,\n 5px -5px,\n -5px 0;\n background-size: 10px 10px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n margin-right: var(--canvas-react-control-padding-inline, 11px);\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n overflow: hidden;\n}\n.canvas-react-color-panel {\n padding: 12px;\n box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n position: relative;\n height: 150px;\n overflow: hidden;\n border-radius: 6px;\n cursor: crosshair;\n background-image:\n linear-gradient(\n to top,\n #000,\n transparent),\n linear-gradient(\n to right,\n #fff,\n transparent);\n touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.canvas-react-color-controls {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 12px;\n}\n.canvas-react-color-current {\n flex: 0 0 28px;\n height: 28px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 50%;\n}\n.canvas-react-color-hue {\n width: 100%;\n height: 12px;\n margin: 0;\n appearance: none;\n border-radius: 999px;\n background:\n linear-gradient(\n to right,\n #f00,\n #ff0,\n #0f0,\n #0ff,\n #00f,\n #f0f,\n #f00);\n cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n appearance: none;\n border: 2px solid #fff;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n display: grid;\n grid-template-columns: 36px 1fr;\n align-items: center;\n gap: 8px;\n margin-top: 12px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n height: 28px;\n}\n.canvas-react-color-presets {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 7px;\n margin-top: 12px;\n}\n.canvas-react-color-preset {\n width: 20px;\n height: 20px;\n padding: 0;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
|
|
1771
3170
|
var DEFAULT_COLOR = "#1677ff";
|
|
1772
3171
|
var PRESET_COLORS = [
|
|
1773
3172
|
"#ff4d4f",
|
|
@@ -1798,27 +3197,34 @@ var ReactColorPicker = forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
1798
3197
|
style,
|
|
1799
3198
|
value,
|
|
1800
3199
|
showArrow = true,
|
|
3200
|
+
allowTransparent = true,
|
|
1801
3201
|
...restProps
|
|
1802
3202
|
} = props;
|
|
1803
3203
|
const triggerRef = useRef(null);
|
|
1804
3204
|
const inputRef = useRef(null);
|
|
1805
3205
|
const popupRef = useRef(null);
|
|
1806
|
-
const
|
|
3206
|
+
const normalizedValue = normalizeHexColor(value);
|
|
3207
|
+
const resolvedValue = normalizedValue ?? DEFAULT_COLOR;
|
|
3208
|
+
const [selectedTransparent, setSelectedTransparent] = useState(false);
|
|
3209
|
+
const isTransparent = allowTransparent && (value === void 0 ? selectedTransparent : value.toLowerCase() === "transparent");
|
|
1807
3210
|
const [open, setOpen] = useState(false);
|
|
1808
3211
|
const [draftValue, setDraftValue] = useState(resolvedValue);
|
|
1809
3212
|
const [hexText, setHexText] = useState(resolvedValue.toUpperCase());
|
|
1810
3213
|
const hsv = useMemo(() => hexToHsv(draftValue), [draftValue]);
|
|
1811
3214
|
useImperativeHandle(ref, () => inputRef.current);
|
|
1812
3215
|
useEffect(() => {
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
3216
|
+
if (normalizedValue) {
|
|
3217
|
+
setDraftValue(normalizedValue);
|
|
3218
|
+
setHexText(normalizedValue.toUpperCase());
|
|
3219
|
+
}
|
|
3220
|
+
}, [normalizedValue]);
|
|
1816
3221
|
useEffect(() => {
|
|
1817
3222
|
if (autoFocus) {
|
|
1818
3223
|
inputRef.current?.focus();
|
|
1819
3224
|
}
|
|
1820
3225
|
}, [autoFocus]);
|
|
1821
3226
|
const updateValue = (nextValue) => {
|
|
3227
|
+
setSelectedTransparent(false);
|
|
1822
3228
|
setDraftValue(nextValue);
|
|
1823
3229
|
setHexText(nextValue.toUpperCase());
|
|
1824
3230
|
onChange?.(nextValue);
|
|
@@ -1855,8 +3261,11 @@ var ReactColorPicker = forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
1855
3261
|
/* @__PURE__ */ jsx(
|
|
1856
3262
|
"span",
|
|
1857
3263
|
{
|
|
1858
|
-
className:
|
|
1859
|
-
|
|
3264
|
+
className: joinClassNames(
|
|
3265
|
+
`${REACT_COMPONENT_PREFIX}-color-preview`,
|
|
3266
|
+
isTransparent && `${REACT_COMPONENT_PREFIX}-color-transparent`
|
|
3267
|
+
),
|
|
3268
|
+
style: isTransparent ? void 0 : { backgroundColor: draftValue }
|
|
1860
3269
|
}
|
|
1861
3270
|
),
|
|
1862
3271
|
/* @__PURE__ */ jsx(
|
|
@@ -1867,7 +3276,7 @@ var ReactColorPicker = forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
1867
3276
|
allowClear: false,
|
|
1868
3277
|
disabled,
|
|
1869
3278
|
readOnly: true,
|
|
1870
|
-
value: value ? draftValue.toUpperCase() : "",
|
|
3279
|
+
value: isTransparent ? "\u900F\u660E" : value ? draftValue.toUpperCase() : "",
|
|
1871
3280
|
placeholder,
|
|
1872
3281
|
wrapperClassName: `${REACT_COMPONENT_PREFIX}-color-input-wrap`,
|
|
1873
3282
|
className: `${REACT_COMPONENT_PREFIX}-color-input`,
|
|
@@ -1947,8 +3356,11 @@ var ReactColorPicker = forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
1947
3356
|
/* @__PURE__ */ jsx(
|
|
1948
3357
|
"span",
|
|
1949
3358
|
{
|
|
1950
|
-
className:
|
|
1951
|
-
|
|
3359
|
+
className: joinClassNames(
|
|
3360
|
+
`${REACT_COMPONENT_PREFIX}-color-current`,
|
|
3361
|
+
isTransparent && `${REACT_COMPONENT_PREFIX}-color-transparent`
|
|
3362
|
+
),
|
|
3363
|
+
style: isTransparent ? void 0 : { backgroundColor: draftValue }
|
|
1952
3364
|
}
|
|
1953
3365
|
),
|
|
1954
3366
|
/* @__PURE__ */ jsx(
|
|
@@ -1990,24 +3402,45 @@ var ReactColorPicker = forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
1990
3402
|
}
|
|
1991
3403
|
)
|
|
1992
3404
|
] }),
|
|
1993
|
-
/* @__PURE__ */
|
|
1994
|
-
|
|
1995
|
-
return normalizedPreset ? /* @__PURE__ */ jsx(
|
|
3405
|
+
/* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-color-presets`, children: [
|
|
3406
|
+
allowTransparent && /* @__PURE__ */ jsx(
|
|
1996
3407
|
"button",
|
|
1997
3408
|
{
|
|
1998
3409
|
type: "button",
|
|
1999
3410
|
className: joinClassNames(
|
|
2000
3411
|
`${REACT_COMPONENT_PREFIX}-color-preset`,
|
|
2001
|
-
|
|
3412
|
+
`${REACT_COMPONENT_PREFIX}-color-transparent`,
|
|
3413
|
+
isTransparent && `${REACT_COMPONENT_PREFIX}-color-preset-selected`
|
|
2002
3414
|
),
|
|
2003
|
-
|
|
2004
|
-
|
|
3415
|
+
title: "\u900F\u660E",
|
|
3416
|
+
"aria-label": "\u900F\u660E",
|
|
3417
|
+
"aria-pressed": isTransparent,
|
|
2005
3418
|
onMouseDown: (event) => event.preventDefault(),
|
|
2006
|
-
onClick: () =>
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
3419
|
+
onClick: () => {
|
|
3420
|
+
setSelectedTransparent(true);
|
|
3421
|
+
onChange?.("transparent");
|
|
3422
|
+
}
|
|
3423
|
+
}
|
|
3424
|
+
),
|
|
3425
|
+
presets.map((preset) => {
|
|
3426
|
+
const normalizedPreset = normalizeHexColor(preset);
|
|
3427
|
+
return normalizedPreset ? /* @__PURE__ */ jsx(
|
|
3428
|
+
"button",
|
|
3429
|
+
{
|
|
3430
|
+
type: "button",
|
|
3431
|
+
className: joinClassNames(
|
|
3432
|
+
`${REACT_COMPONENT_PREFIX}-color-preset`,
|
|
3433
|
+
normalizedPreset === draftValue && `${REACT_COMPONENT_PREFIX}-color-preset-selected`
|
|
3434
|
+
),
|
|
3435
|
+
style: { backgroundColor: normalizedPreset },
|
|
3436
|
+
title: normalizedPreset.toUpperCase(),
|
|
3437
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
3438
|
+
onClick: () => updateValue(normalizedPreset)
|
|
3439
|
+
},
|
|
3440
|
+
normalizedPreset
|
|
3441
|
+
) : null;
|
|
3442
|
+
})
|
|
3443
|
+
] })
|
|
2011
3444
|
] })
|
|
2012
3445
|
}
|
|
2013
3446
|
)
|
|
@@ -4927,83 +6360,300 @@ function compareDateTimeValue(left, right) {
|
|
|
4927
6360
|
return left.localeCompare(right);
|
|
4928
6361
|
}
|
|
4929
6362
|
|
|
4930
|
-
// src/components/number
|
|
4931
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-
|
|
4932
|
-
var
|
|
4933
|
-
function
|
|
6363
|
+
// src/components/input-number/style.css
|
|
6364
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n box-sizing: border-box;\n display: inline-flex;\n align-items: stretch;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n text-align: left;\n overflow: hidden;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n position: relative;\n display: flex;\n flex: 0 0 28px;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n color: var(--canvas-react-color-primary);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n color: #c4c7cf;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n position: relative;\n display: block;\n width: 10px;\n height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n background: currentColor;\n border-radius: 1px;\n transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n width: 10px;\n height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n width: 1.5px;\n height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-input-number-input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0 var(--canvas-react-control-padding-inline, 8px);\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n text-align: inherit;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n flex: 0 0 auto;\n padding-right: 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n user-select: none;\n}\n');
|
|
6365
|
+
var ReactInputNumber = forwardRef(
|
|
6366
|
+
function ReactInputNumber2(props, ref) {
|
|
4934
6367
|
const {
|
|
6368
|
+
addonAfter,
|
|
4935
6369
|
className,
|
|
6370
|
+
changeOnWheel = false,
|
|
6371
|
+
controls = false,
|
|
6372
|
+
defaultValue = null,
|
|
4936
6373
|
disabled,
|
|
6374
|
+
formatter,
|
|
6375
|
+
initialText,
|
|
6376
|
+
max,
|
|
6377
|
+
min,
|
|
4937
6378
|
onBlur,
|
|
4938
6379
|
onChange,
|
|
6380
|
+
onCommit,
|
|
6381
|
+
onFocus,
|
|
4939
6382
|
onKeyDown,
|
|
4940
6383
|
onPressEnter,
|
|
4941
|
-
|
|
4942
|
-
|
|
6384
|
+
onWheel,
|
|
6385
|
+
parser,
|
|
6386
|
+
precision,
|
|
6387
|
+
step = 1,
|
|
6388
|
+
style,
|
|
6389
|
+
value,
|
|
4943
6390
|
...restProps
|
|
4944
6391
|
} = props;
|
|
4945
|
-
const
|
|
6392
|
+
const isControlled = value !== void 0;
|
|
6393
|
+
const [innerValue, setInnerValue] = useState(
|
|
6394
|
+
isControlled ? value ?? null : defaultValue
|
|
6395
|
+
);
|
|
6396
|
+
const currentValue = isControlled ? value ?? null : innerValue;
|
|
6397
|
+
const [draftText, setDraftText] = useState(
|
|
6398
|
+
initialText ?? formatDisplayValue(
|
|
6399
|
+
currentValue,
|
|
6400
|
+
formatter,
|
|
6401
|
+
resolvePrecision(precision, props.step, currentValue)
|
|
6402
|
+
)
|
|
6403
|
+
);
|
|
6404
|
+
const initialTextPendingRef = useRef(initialText !== void 0);
|
|
6405
|
+
const initialValueRef = useRef(currentValue);
|
|
6406
|
+
const [focused, setFocused] = useState(false);
|
|
6407
|
+
const resolvedPrecision = useMemo(
|
|
6408
|
+
() => resolvePrecision(precision, props.step, currentValue),
|
|
6409
|
+
[precision, props.step, currentValue]
|
|
6410
|
+
);
|
|
4946
6411
|
useEffect(() => {
|
|
4947
|
-
|
|
4948
|
-
|
|
4949
|
-
|
|
6412
|
+
if (initialValueRef.current !== currentValue) {
|
|
6413
|
+
initialTextPendingRef.current = false;
|
|
6414
|
+
}
|
|
6415
|
+
initialValueRef.current = currentValue;
|
|
6416
|
+
if (!focused && !initialTextPendingRef.current) {
|
|
6417
|
+
setDraftText(
|
|
6418
|
+
formatDisplayValue(currentValue, formatter, resolvedPrecision)
|
|
6419
|
+
);
|
|
6420
|
+
}
|
|
6421
|
+
}, [currentValue, focused, formatter, resolvedPrecision]);
|
|
6422
|
+
const commitValue = (nextValue, stepPrecision) => {
|
|
6423
|
+
initialTextPendingRef.current = false;
|
|
6424
|
+
const normalized = normalizeNumberValue(nextValue, {
|
|
6425
|
+
min,
|
|
6426
|
+
max,
|
|
6427
|
+
precision: stepPrecision ?? resolvePrecision(precision, props.step, nextValue)
|
|
6428
|
+
});
|
|
6429
|
+
if (!isControlled) {
|
|
6430
|
+
setInnerValue(normalized);
|
|
6431
|
+
}
|
|
6432
|
+
if (normalized !== currentValue) {
|
|
6433
|
+
onChange?.(normalized);
|
|
6434
|
+
}
|
|
6435
|
+
onCommit?.(normalized);
|
|
6436
|
+
setDraftText(
|
|
6437
|
+
formatDisplayValue(
|
|
6438
|
+
normalized,
|
|
6439
|
+
formatter,
|
|
6440
|
+
resolvePrecision(precision, props.step, normalized)
|
|
6441
|
+
)
|
|
6442
|
+
);
|
|
6443
|
+
return normalized;
|
|
6444
|
+
};
|
|
6445
|
+
const stepBy = (direction) => {
|
|
6446
|
+
if (disabled) {
|
|
6447
|
+
return;
|
|
6448
|
+
}
|
|
6449
|
+
const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
|
|
6450
|
+
const next = base + direction * step;
|
|
6451
|
+
commitValue(next, resolvedPrecision);
|
|
6452
|
+
};
|
|
6453
|
+
const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
|
|
6454
|
+
const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
|
|
6455
|
+
return /* @__PURE__ */ jsxs(
|
|
4950
6456
|
"span",
|
|
4951
6457
|
{
|
|
4952
6458
|
className: joinClassNames(
|
|
4953
|
-
`${REACT_COMPONENT_PREFIX}-
|
|
4954
|
-
|
|
6459
|
+
`${REACT_COMPONENT_PREFIX}-input-number`,
|
|
6460
|
+
focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
|
|
6461
|
+
disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
|
|
6462
|
+
className
|
|
4955
6463
|
),
|
|
4956
6464
|
style,
|
|
4957
|
-
children:
|
|
4958
|
-
|
|
4959
|
-
|
|
4960
|
-
|
|
4961
|
-
|
|
4962
|
-
|
|
4963
|
-
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
|
|
4967
|
-
|
|
4968
|
-
|
|
4969
|
-
|
|
4970
|
-
|
|
4971
|
-
|
|
4972
|
-
|
|
4973
|
-
|
|
4974
|
-
|
|
4975
|
-
|
|
4976
|
-
|
|
4977
|
-
|
|
4978
|
-
|
|
4979
|
-
|
|
4980
|
-
|
|
4981
|
-
|
|
6465
|
+
children: [
|
|
6466
|
+
controls && /* @__PURE__ */ jsx(
|
|
6467
|
+
"button",
|
|
6468
|
+
{
|
|
6469
|
+
type: "button",
|
|
6470
|
+
tabIndex: -1,
|
|
6471
|
+
disabled: disabled || atMin,
|
|
6472
|
+
className: joinClassNames(
|
|
6473
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler`,
|
|
6474
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler-down`
|
|
6475
|
+
),
|
|
6476
|
+
"aria-label": "\u51CF\u5C11",
|
|
6477
|
+
onMouseDown: (event) => {
|
|
6478
|
+
event.preventDefault();
|
|
6479
|
+
},
|
|
6480
|
+
onClick: () => {
|
|
6481
|
+
stepBy(-1);
|
|
6482
|
+
},
|
|
6483
|
+
children: /* @__PURE__ */ jsx(
|
|
6484
|
+
"span",
|
|
6485
|
+
{
|
|
6486
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
|
|
6487
|
+
"aria-hidden": "true"
|
|
6488
|
+
}
|
|
6489
|
+
)
|
|
6490
|
+
}
|
|
6491
|
+
),
|
|
6492
|
+
/* @__PURE__ */ jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
|
|
6493
|
+
/* @__PURE__ */ jsx(
|
|
6494
|
+
"input",
|
|
6495
|
+
{
|
|
6496
|
+
...restProps,
|
|
6497
|
+
type: "text",
|
|
6498
|
+
ref,
|
|
6499
|
+
disabled,
|
|
6500
|
+
inputMode: "decimal",
|
|
6501
|
+
min,
|
|
6502
|
+
max,
|
|
6503
|
+
step,
|
|
6504
|
+
value: draftText,
|
|
6505
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
|
|
6506
|
+
onFocus: (event) => {
|
|
6507
|
+
setFocused(true);
|
|
6508
|
+
onFocus?.(event);
|
|
6509
|
+
},
|
|
6510
|
+
onChange: (event) => {
|
|
6511
|
+
const nextText = event.target.value;
|
|
6512
|
+
if (!isValidNumberDraftText(nextText)) {
|
|
6513
|
+
return;
|
|
6514
|
+
}
|
|
6515
|
+
setDraftText(nextText);
|
|
6516
|
+
if (isIncompleteNumberText(nextText)) {
|
|
6517
|
+
return;
|
|
6518
|
+
}
|
|
6519
|
+
const parsed = parser ? parser(nextText) : parseNumberText(nextText);
|
|
6520
|
+
if (!isControlled) {
|
|
6521
|
+
setInnerValue(parsed);
|
|
6522
|
+
}
|
|
6523
|
+
onChange?.(parsed);
|
|
6524
|
+
},
|
|
6525
|
+
onBlur: (event) => {
|
|
6526
|
+
setFocused(false);
|
|
6527
|
+
const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
|
|
6528
|
+
commitValue(parsed);
|
|
6529
|
+
onBlur?.(event);
|
|
6530
|
+
},
|
|
6531
|
+
onKeyDown: (event) => {
|
|
6532
|
+
onKeyDown?.(event);
|
|
6533
|
+
if (event.defaultPrevented) return;
|
|
6534
|
+
if (event.key === "ArrowUp") {
|
|
6535
|
+
event.preventDefault();
|
|
6536
|
+
stepBy(1);
|
|
6537
|
+
} else if (event.key === "ArrowDown") {
|
|
6538
|
+
event.preventDefault();
|
|
6539
|
+
stepBy(-1);
|
|
6540
|
+
} else if (event.key === "Enter") {
|
|
6541
|
+
const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
|
|
6542
|
+
commitValue(parsed);
|
|
6543
|
+
onPressEnter?.(event);
|
|
6544
|
+
}
|
|
6545
|
+
},
|
|
6546
|
+
onWheel: (event) => {
|
|
6547
|
+
if (changeOnWheel && !disabled && event.deltaY !== 0) {
|
|
6548
|
+
stepBy(event.deltaY < 0 ? 1 : -1);
|
|
6549
|
+
} else if (!changeOnWheel) {
|
|
6550
|
+
event.currentTarget.blur();
|
|
6551
|
+
}
|
|
6552
|
+
onWheel?.(event);
|
|
6553
|
+
}
|
|
4982
6554
|
}
|
|
6555
|
+
),
|
|
6556
|
+
addonAfter != null ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
|
|
6557
|
+
] }),
|
|
6558
|
+
controls && /* @__PURE__ */ jsx(
|
|
6559
|
+
"button",
|
|
6560
|
+
{
|
|
6561
|
+
type: "button",
|
|
6562
|
+
tabIndex: -1,
|
|
6563
|
+
disabled: disabled || atMax,
|
|
6564
|
+
className: joinClassNames(
|
|
6565
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler`,
|
|
6566
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler-up`
|
|
6567
|
+
),
|
|
6568
|
+
"aria-label": "\u589E\u52A0",
|
|
6569
|
+
onMouseDown: (event) => {
|
|
6570
|
+
event.preventDefault();
|
|
6571
|
+
},
|
|
6572
|
+
onClick: () => {
|
|
6573
|
+
stepBy(1);
|
|
6574
|
+
},
|
|
6575
|
+
children: /* @__PURE__ */ jsx(
|
|
6576
|
+
"span",
|
|
6577
|
+
{
|
|
6578
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
|
|
6579
|
+
"aria-hidden": "true"
|
|
6580
|
+
}
|
|
6581
|
+
)
|
|
4983
6582
|
}
|
|
4984
|
-
|
|
4985
|
-
|
|
6583
|
+
)
|
|
6584
|
+
]
|
|
4986
6585
|
}
|
|
4987
6586
|
);
|
|
4988
6587
|
}
|
|
4989
6588
|
);
|
|
4990
|
-
function
|
|
4991
|
-
|
|
6589
|
+
function parseNumberText(value) {
|
|
6590
|
+
const text = value.trim().replace(/%/g, "");
|
|
6591
|
+
if (!text) {
|
|
4992
6592
|
return null;
|
|
4993
6593
|
}
|
|
4994
|
-
const nextValue = Number(
|
|
6594
|
+
const nextValue = Number(text);
|
|
4995
6595
|
return Number.isFinite(nextValue) ? nextValue : null;
|
|
4996
6596
|
}
|
|
4997
|
-
function
|
|
4998
|
-
|
|
6597
|
+
function isValidNumberDraftText(value) {
|
|
6598
|
+
const minusIndex = value.indexOf("-");
|
|
6599
|
+
return (minusIndex === -1 || minusIndex === 0 && value.lastIndexOf("-") === 0) && value.indexOf(".") === value.lastIndexOf(".");
|
|
6600
|
+
}
|
|
6601
|
+
function isIncompleteNumberText(value) {
|
|
6602
|
+
const text = value.trim();
|
|
6603
|
+
return text === "-" || text === "." || text === "-." || /^-?\d+\.$/.test(text);
|
|
6604
|
+
}
|
|
6605
|
+
function resolvePrecision(precision, step, value) {
|
|
6606
|
+
if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
|
|
6607
|
+
return precision;
|
|
6608
|
+
}
|
|
6609
|
+
if (step == null) {
|
|
6610
|
+
return void 0;
|
|
6611
|
+
}
|
|
6612
|
+
return Math.max(countDecimalPlaces(step), countDecimalPlaces(value));
|
|
6613
|
+
}
|
|
6614
|
+
function countDecimalPlaces(value) {
|
|
6615
|
+
if (value == null || !Number.isFinite(value)) return 0;
|
|
6616
|
+
const [mantissa, exponentText] = String(value).toLowerCase().split("e");
|
|
6617
|
+
const fractionDigits = mantissa.split(".")[1]?.length ?? 0;
|
|
6618
|
+
return Math.min(100, Math.max(0, fractionDigits - Number(exponentText ?? 0)));
|
|
6619
|
+
}
|
|
6620
|
+
function normalizeNumberValue(value, options) {
|
|
6621
|
+
if (value == null || !Number.isFinite(value)) {
|
|
6622
|
+
return null;
|
|
6623
|
+
}
|
|
6624
|
+
let next = value;
|
|
6625
|
+
if (options.min != null) {
|
|
6626
|
+
next = Math.max(options.min, next);
|
|
6627
|
+
}
|
|
6628
|
+
if (options.max != null) {
|
|
6629
|
+
next = Math.min(options.max, next);
|
|
6630
|
+
}
|
|
6631
|
+
if (options.precision == null) {
|
|
6632
|
+
return next;
|
|
6633
|
+
}
|
|
6634
|
+
const factor = 10 ** options.precision;
|
|
6635
|
+
return Math.round(next * factor) / factor;
|
|
6636
|
+
}
|
|
6637
|
+
function formatDisplayValue(value, formatter, precision) {
|
|
6638
|
+
if (formatter) {
|
|
6639
|
+
return formatter(value);
|
|
6640
|
+
}
|
|
6641
|
+
if (value == null || !Number.isFinite(value)) {
|
|
6642
|
+
return "";
|
|
6643
|
+
}
|
|
6644
|
+
if (precision == null) {
|
|
6645
|
+
return String(value);
|
|
6646
|
+
}
|
|
6647
|
+
return precision > 0 ? value.toFixed(precision) : String(Math.round(value));
|
|
4999
6648
|
}
|
|
5000
6649
|
|
|
5001
6650
|
// src/components/input-range/style.css
|
|
5002
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-input-range {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n overflow: hidden;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-range:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-range:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-range-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input-range > .canvas-react-
|
|
6651
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-input-range {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n overflow: hidden;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-range:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-range:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-range-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input-range > .canvas-react-input-number,\n.canvas-react-input-range > .canvas-react-input-number:hover,\n.canvas-react-input-range > .canvas-react-input-number:focus-within {\n flex: 1 1 0;\n width: 0;\n height: 100%;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n}\n.canvas-react-input-range-separator {\n flex: 0 0 auto;\n color: #9ca3af;\n line-height: 1;\n}\n');
|
|
5003
6652
|
var ReactInputRange = forwardRef(function ReactInputRange2(props, ref) {
|
|
5004
6653
|
const {
|
|
5005
6654
|
autoFocus,
|
|
5006
6655
|
className,
|
|
6656
|
+
changeOnWheel,
|
|
5007
6657
|
disabled,
|
|
5008
6658
|
max,
|
|
5009
6659
|
min,
|
|
@@ -5046,7 +6696,7 @@ var ReactInputRange = forwardRef(function ReactInputRange2(props, ref) {
|
|
|
5046
6696
|
style,
|
|
5047
6697
|
children: [
|
|
5048
6698
|
/* @__PURE__ */ jsx(
|
|
5049
|
-
|
|
6699
|
+
ReactInputNumber,
|
|
5050
6700
|
{
|
|
5051
6701
|
...restProps,
|
|
5052
6702
|
ref: startInputRef,
|
|
@@ -5060,12 +6710,13 @@ var ReactInputRange = forwardRef(function ReactInputRange2(props, ref) {
|
|
|
5060
6710
|
onFocus,
|
|
5061
6711
|
onBlur: handleBlur,
|
|
5062
6712
|
onKeyDown,
|
|
5063
|
-
onPressEnter
|
|
6713
|
+
onPressEnter,
|
|
6714
|
+
changeOnWheel
|
|
5064
6715
|
}
|
|
5065
6716
|
),
|
|
5066
6717
|
/* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-range-separator`, children: rangeSeparator }),
|
|
5067
6718
|
/* @__PURE__ */ jsx(
|
|
5068
|
-
|
|
6719
|
+
ReactInputNumber,
|
|
5069
6720
|
{
|
|
5070
6721
|
...restProps,
|
|
5071
6722
|
value: value[1],
|
|
@@ -5078,7 +6729,8 @@ var ReactInputRange = forwardRef(function ReactInputRange2(props, ref) {
|
|
|
5078
6729
|
onFocus,
|
|
5079
6730
|
onBlur: handleBlur,
|
|
5080
6731
|
onKeyDown,
|
|
5081
|
-
onPressEnter
|
|
6732
|
+
onPressEnter,
|
|
6733
|
+
changeOnWheel
|
|
5082
6734
|
}
|
|
5083
6735
|
)
|
|
5084
6736
|
]
|
|
@@ -5678,6 +7330,7 @@ var FOCUSABLE_SELECTOR = [
|
|
|
5678
7330
|
var bodyScrollLockCount = 0;
|
|
5679
7331
|
var bodyOverflowBeforeLock = "";
|
|
5680
7332
|
function ReactModal(props) {
|
|
7333
|
+
const configStyle = useReactConfigStyle();
|
|
5681
7334
|
const {
|
|
5682
7335
|
afterClose,
|
|
5683
7336
|
afterOpenChange,
|
|
@@ -5960,7 +7613,7 @@ function ReactModal(props) {
|
|
|
5960
7613
|
transition.className,
|
|
5961
7614
|
rootClassName
|
|
5962
7615
|
),
|
|
5963
|
-
style: { zIndex },
|
|
7616
|
+
style: { ...configStyle, zIndex },
|
|
5964
7617
|
children: [
|
|
5965
7618
|
mask ? /* @__PURE__ */ jsx(
|
|
5966
7619
|
"div",
|
|
@@ -6161,42 +7814,585 @@ function isPromiseLike(value) {
|
|
|
6161
7814
|
return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
|
|
6162
7815
|
}
|
|
6163
7816
|
|
|
6164
|
-
// src/components/
|
|
6165
|
-
styleInject(".canvas-react-
|
|
6166
|
-
|
|
7817
|
+
// src/components/drawer/style.css
|
|
7818
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-drawer-root,\n.canvas-react-drawer-root * {\n box-sizing: border-box;\n}\n.canvas-react-drawer-root {\n position: fixed;\n inset: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n pointer-events: none;\n}\n.canvas-react-drawer-mask {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n pointer-events: auto;\n}\n.canvas-react-drawer-mask-blur {\n backdrop-filter: blur(4px);\n}\n.canvas-react-drawer-section {\n position: absolute;\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n background: var(--canvas-react-color-bg, #fff);\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);\n outline: none;\n pointer-events: auto;\n}\n.canvas-react-drawer-right .canvas-react-drawer-section {\n top: 0;\n right: 0;\n bottom: 0;\n}\n.canvas-react-drawer-left .canvas-react-drawer-section {\n top: 0;\n left: 0;\n bottom: 0;\n}\n.canvas-react-drawer-top .canvas-react-drawer-section {\n top: 0;\n right: 0;\n left: 0;\n}\n.canvas-react-drawer-bottom .canvas-react-drawer-section {\n right: 0;\n bottom: 0;\n left: 0;\n}\n.canvas-react-drawer-fullscreen .canvas-react-drawer-section {\n inset: 0;\n width: 100%;\n height: 100%;\n max-width: none;\n max-height: none;\n}\n.canvas-react-drawer-header {\n display: flex;\n align-items: center;\n flex: none;\n gap: 12px;\n min-height: 56px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-drawer-title {\n min-width: 0;\n flex: 1;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.5;\n}\n.canvas-react-drawer-extra {\n flex: none;\n}\n.canvas-react-drawer-close,\n.canvas-react-drawer-fullscreen-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: 24px;\n height: 24px;\n padding: 0;\n border: 0;\n border-radius: 4px;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font: inherit;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n}\n.canvas-react-drawer-close:hover,\n.canvas-react-drawer-fullscreen-button:hover {\n background: var(--canvas-react-color-bg-hover);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-drawer-close:focus-visible,\n.canvas-react-drawer-fullscreen-button:focus-visible {\n outline: 2px solid var(--canvas-react-color-primary);\n outline-offset: 2px;\n}\n.canvas-react-drawer-close:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n.canvas-react-drawer-body {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: 24px;\n}\n.canvas-react-drawer-footer {\n flex: none;\n padding: 8px 16px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-drawer-skeleton {\n display: grid;\n gap: 14px;\n padding: 6px 0;\n}\n.canvas-react-drawer-skeleton i {\n display: block;\n height: 16px;\n border-radius: 4px;\n background:\n linear-gradient(\n 90deg,\n #f0f0f0,\n #fafafa,\n #f0f0f0);\n background-size: 200% 100%;\n animation: canvas-react-drawer-loading 1.4s ease infinite;\n}\n.canvas-react-drawer-skeleton i:nth-child(2) {\n width: 80%;\n}\n.canvas-react-drawer-skeleton i:nth-child(3) {\n width: 60%;\n}\n.canvas-react-drawer-motion-enter-active,\n.canvas-react-drawer-motion-leave-active {\n transition: opacity 0.3s ease;\n}\n.canvas-react-drawer-motion-enter-active .canvas-react-drawer-section,\n.canvas-react-drawer-motion-leave-active .canvas-react-drawer-section {\n transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.canvas-react-drawer-motion-enter-from,\n.canvas-react-drawer-motion-leave-to {\n opacity: 0;\n}\n.canvas-react-drawer-right.canvas-react-drawer-motion-enter-from .canvas-react-drawer-section,\n.canvas-react-drawer-right.canvas-react-drawer-motion-leave-to .canvas-react-drawer-section {\n transform: translateX(100%);\n}\n.canvas-react-drawer-left.canvas-react-drawer-motion-enter-from .canvas-react-drawer-section,\n.canvas-react-drawer-left.canvas-react-drawer-motion-leave-to .canvas-react-drawer-section {\n transform: translateX(-100%);\n}\n.canvas-react-drawer-top.canvas-react-drawer-motion-enter-from .canvas-react-drawer-section,\n.canvas-react-drawer-top.canvas-react-drawer-motion-leave-to .canvas-react-drawer-section {\n transform: translateY(-100%);\n}\n.canvas-react-drawer-bottom.canvas-react-drawer-motion-enter-from .canvas-react-drawer-section,\n.canvas-react-drawer-bottom.canvas-react-drawer-motion-leave-to .canvas-react-drawer-section {\n transform: translateY(100%);\n}\n.canvas-react-drawer-hidden {\n visibility: hidden;\n}\n@keyframes canvas-react-drawer-loading {\n to {\n background-position-x: -200%;\n }\n}\n@media (max-width: 575px) {\n .canvas-react-drawer-header {\n padding: 16px;\n }\n .canvas-react-drawer-body {\n padding: 16px;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-drawer-motion-enter-active,\n .canvas-react-drawer-motion-leave-active,\n .canvas-react-drawer-motion-enter-active .canvas-react-drawer-section,\n .canvas-react-drawer-motion-leave-active .canvas-react-drawer-section {\n transition-duration: 0.01ms;\n }\n}\n');
|
|
7819
|
+
var scrollLockCount = 0;
|
|
7820
|
+
var savedOverflow = "";
|
|
7821
|
+
function ReactDrawer({
|
|
7822
|
+
open,
|
|
6167
7823
|
children,
|
|
7824
|
+
title,
|
|
7825
|
+
extra,
|
|
7826
|
+
footer,
|
|
7827
|
+
placement = "right",
|
|
7828
|
+
size = "default",
|
|
7829
|
+
fullscreenable = true,
|
|
7830
|
+
fullscreen,
|
|
7831
|
+
defaultFullscreen = false,
|
|
7832
|
+
onFullscreenChange,
|
|
7833
|
+
closable = true,
|
|
7834
|
+
mask = true,
|
|
7835
|
+
keyboard = true,
|
|
7836
|
+
loading = false,
|
|
7837
|
+
destroyOnHidden = false,
|
|
7838
|
+
forceRender = false,
|
|
7839
|
+
getContainer,
|
|
7840
|
+
zIndex = 1e3,
|
|
6168
7841
|
className,
|
|
6169
|
-
|
|
6170
|
-
|
|
6171
|
-
|
|
6172
|
-
|
|
6173
|
-
|
|
6174
|
-
|
|
7842
|
+
rootClassName,
|
|
7843
|
+
style,
|
|
7844
|
+
rootStyle,
|
|
7845
|
+
classNames,
|
|
7846
|
+
styles,
|
|
7847
|
+
onClose,
|
|
7848
|
+
afterOpenChange
|
|
6175
7849
|
}) {
|
|
6176
|
-
|
|
7850
|
+
const configStyle = useReactConfigStyle();
|
|
7851
|
+
const [innerFullscreen, setInnerFullscreen] = useState(defaultFullscreen);
|
|
7852
|
+
const mergedFullscreen = fullscreen ?? innerFullscreen;
|
|
7853
|
+
const transition = useReactTransition({
|
|
7854
|
+
show: open,
|
|
7855
|
+
duration: 300,
|
|
7856
|
+
name: `${REACT_COMPONENT_PREFIX}-drawer-motion`
|
|
7857
|
+
});
|
|
7858
|
+
const panelRef = useRef(null);
|
|
7859
|
+
const triggerRef = useRef(null);
|
|
7860
|
+
const wasOpenRef = useRef(false);
|
|
7861
|
+
const titleId = useCompatibleId(`${REACT_COMPONENT_PREFIX}-drawer-title`);
|
|
7862
|
+
const enabledMask = typeof mask === "object" ? mask.enabled !== false : mask;
|
|
7863
|
+
const maskClosable = typeof mask === "object" ? mask.closable !== false : true;
|
|
7864
|
+
const showClose = typeof closable === "object" || closable;
|
|
7865
|
+
const closeDisabled = typeof closable === "object" && closable.disabled;
|
|
7866
|
+
const closeAtEnd = typeof closable === "object" && closable.placement === "end";
|
|
7867
|
+
const closeIcon = typeof closable === "object" ? closable.closeIcon : void 0;
|
|
7868
|
+
const hasTitle = title != null && title !== false;
|
|
7869
|
+
const measure = size === "default" ? 378 : size === "large" ? 736 : size;
|
|
7870
|
+
const vertical = placement === "top" || placement === "bottom";
|
|
7871
|
+
useEffect(() => {
|
|
7872
|
+
if (!open || typeof document === "undefined") return;
|
|
7873
|
+
triggerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
7874
|
+
const frame = requestAnimationFrame(() => panelRef.current?.focus());
|
|
7875
|
+
return () => cancelAnimationFrame(frame);
|
|
7876
|
+
}, [open]);
|
|
7877
|
+
useEffect(() => {
|
|
7878
|
+
if (!open || !enabledMask) return;
|
|
7879
|
+
if (scrollLockCount++ === 0) {
|
|
7880
|
+
savedOverflow = document.body.style.overflow;
|
|
7881
|
+
document.body.style.overflow = "hidden";
|
|
7882
|
+
}
|
|
7883
|
+
return () => {
|
|
7884
|
+
scrollLockCount = Math.max(0, scrollLockCount - 1);
|
|
7885
|
+
if (scrollLockCount === 0) document.body.style.overflow = savedOverflow;
|
|
7886
|
+
};
|
|
7887
|
+
}, [enabledMask, open]);
|
|
7888
|
+
useEffect(() => {
|
|
7889
|
+
if (!open) return;
|
|
7890
|
+
const onKeyDown = (event) => {
|
|
7891
|
+
if (event.key === "Escape" && keyboard && panelRef.current) {
|
|
7892
|
+
event.preventDefault();
|
|
7893
|
+
onClose?.(event);
|
|
7894
|
+
}
|
|
7895
|
+
if (event.key === "Tab" && enabledMask && panelRef.current)
|
|
7896
|
+
trapFocus2(event, panelRef.current);
|
|
7897
|
+
};
|
|
7898
|
+
document.addEventListener("keydown", onKeyDown);
|
|
7899
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
7900
|
+
}, [enabledMask, keyboard, onClose, open]);
|
|
7901
|
+
useEffect(() => {
|
|
7902
|
+
if (open) {
|
|
7903
|
+
wasOpenRef.current = true;
|
|
7904
|
+
const timer = setTimeout(() => afterOpenChange?.(true), 300);
|
|
7905
|
+
return () => clearTimeout(timer);
|
|
7906
|
+
}
|
|
7907
|
+
if (wasOpenRef.current && !transition.rendered) {
|
|
7908
|
+
wasOpenRef.current = false;
|
|
7909
|
+
triggerRef.current?.focus();
|
|
7910
|
+
afterOpenChange?.(false);
|
|
7911
|
+
}
|
|
7912
|
+
}, [afterOpenChange, open, transition.rendered]);
|
|
7913
|
+
if (typeof document === "undefined" || !transition.rendered && !forceRender)
|
|
7914
|
+
return null;
|
|
7915
|
+
const container = resolveContainer2(getContainer);
|
|
7916
|
+
if (getContainer !== false && !container) return null;
|
|
7917
|
+
const hasHeader = hasTitle || showClose || extra != null || fullscreenable;
|
|
7918
|
+
const closeButton = showClose ? /* @__PURE__ */ jsx(
|
|
6177
7919
|
"button",
|
|
6178
7920
|
{
|
|
6179
|
-
|
|
6180
|
-
type: htmlType,
|
|
7921
|
+
type: "button",
|
|
6181
7922
|
className: joinClassNames(
|
|
6182
|
-
`${REACT_COMPONENT_PREFIX}-
|
|
6183
|
-
|
|
6184
|
-
`${REACT_COMPONENT_PREFIX}-button-${size}`,
|
|
6185
|
-
danger && `${REACT_COMPONENT_PREFIX}-button-danger`,
|
|
6186
|
-
className
|
|
7923
|
+
`${REACT_COMPONENT_PREFIX}-drawer-close`,
|
|
7924
|
+
classNames?.close
|
|
6187
7925
|
),
|
|
6188
|
-
|
|
6189
|
-
|
|
6190
|
-
|
|
6191
|
-
|
|
7926
|
+
style: styles?.close,
|
|
7927
|
+
"aria-label": "\u5173\u95ED",
|
|
7928
|
+
disabled: closeDisabled,
|
|
7929
|
+
onClick: onClose,
|
|
7930
|
+
children: closeIcon ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
|
|
6192
7931
|
}
|
|
6193
|
-
);
|
|
6194
|
-
|
|
6195
|
-
|
|
6196
|
-
|
|
6197
|
-
|
|
6198
|
-
|
|
6199
|
-
|
|
7932
|
+
) : null;
|
|
7933
|
+
const node = /* @__PURE__ */ jsxs(
|
|
7934
|
+
"div",
|
|
7935
|
+
{
|
|
7936
|
+
className: joinClassNames(
|
|
7937
|
+
`${REACT_COMPONENT_PREFIX}-drawer-root`,
|
|
7938
|
+
`${REACT_COMPONENT_PREFIX}-drawer-${placement}`,
|
|
7939
|
+
transition.className,
|
|
7940
|
+
!enabledMask && `${REACT_COMPONENT_PREFIX}-drawer-no-mask`,
|
|
7941
|
+
mergedFullscreen && `${REACT_COMPONENT_PREFIX}-drawer-fullscreen`,
|
|
7942
|
+
!open && `${REACT_COMPONENT_PREFIX}-drawer-hidden`,
|
|
7943
|
+
rootClassName,
|
|
7944
|
+
classNames?.root
|
|
7945
|
+
),
|
|
7946
|
+
style: { ...configStyle, zIndex, ...rootStyle, ...styles?.root },
|
|
7947
|
+
children: [
|
|
7948
|
+
enabledMask && /* @__PURE__ */ jsx(
|
|
7949
|
+
"div",
|
|
7950
|
+
{
|
|
7951
|
+
className: joinClassNames(
|
|
7952
|
+
`${REACT_COMPONENT_PREFIX}-drawer-mask`,
|
|
7953
|
+
typeof mask === "object" && mask.blur && `${REACT_COMPONENT_PREFIX}-drawer-mask-blur`,
|
|
7954
|
+
classNames?.mask
|
|
7955
|
+
),
|
|
7956
|
+
style: styles?.mask,
|
|
7957
|
+
"aria-hidden": "true",
|
|
7958
|
+
onMouseDown: (event) => {
|
|
7959
|
+
if (maskClosable && event.target === event.currentTarget)
|
|
7960
|
+
onClose?.(event);
|
|
7961
|
+
}
|
|
7962
|
+
}
|
|
7963
|
+
),
|
|
7964
|
+
/* @__PURE__ */ jsxs(
|
|
7965
|
+
"section",
|
|
7966
|
+
{
|
|
7967
|
+
ref: panelRef,
|
|
7968
|
+
className: joinClassNames(
|
|
7969
|
+
`${REACT_COMPONENT_PREFIX}-drawer-section`,
|
|
7970
|
+
className,
|
|
7971
|
+
classNames?.section
|
|
7972
|
+
),
|
|
7973
|
+
style: {
|
|
7974
|
+
[vertical ? "height" : "width"]: measure,
|
|
7975
|
+
...style,
|
|
7976
|
+
...styles?.section,
|
|
7977
|
+
...mergedFullscreen ? { width: "100%", height: "100%" } : void 0
|
|
7978
|
+
},
|
|
7979
|
+
role: "dialog",
|
|
7980
|
+
"aria-modal": enabledMask ? "true" : void 0,
|
|
7981
|
+
"aria-labelledby": hasTitle ? titleId : void 0,
|
|
7982
|
+
"aria-label": hasTitle ? void 0 : "\u62BD\u5C49",
|
|
7983
|
+
tabIndex: -1,
|
|
7984
|
+
children: [
|
|
7985
|
+
hasHeader && /* @__PURE__ */ jsxs(
|
|
7986
|
+
"header",
|
|
7987
|
+
{
|
|
7988
|
+
className: joinClassNames(
|
|
7989
|
+
`${REACT_COMPONENT_PREFIX}-drawer-header`,
|
|
7990
|
+
classNames?.header
|
|
7991
|
+
),
|
|
7992
|
+
style: styles?.header,
|
|
7993
|
+
children: [
|
|
7994
|
+
!closeAtEnd && closeButton,
|
|
7995
|
+
/* @__PURE__ */ jsx(
|
|
7996
|
+
"div",
|
|
7997
|
+
{
|
|
7998
|
+
id: hasTitle ? titleId : void 0,
|
|
7999
|
+
className: joinClassNames(
|
|
8000
|
+
`${REACT_COMPONENT_PREFIX}-drawer-title`,
|
|
8001
|
+
classNames?.title
|
|
8002
|
+
),
|
|
8003
|
+
style: styles?.title,
|
|
8004
|
+
children: title
|
|
8005
|
+
}
|
|
8006
|
+
),
|
|
8007
|
+
extra != null && /* @__PURE__ */ jsx(
|
|
8008
|
+
"div",
|
|
8009
|
+
{
|
|
8010
|
+
className: joinClassNames(
|
|
8011
|
+
`${REACT_COMPONENT_PREFIX}-drawer-extra`,
|
|
8012
|
+
classNames?.extra
|
|
8013
|
+
),
|
|
8014
|
+
style: styles?.extra,
|
|
8015
|
+
children: extra
|
|
8016
|
+
}
|
|
8017
|
+
),
|
|
8018
|
+
fullscreenable && /* @__PURE__ */ jsx(
|
|
8019
|
+
"button",
|
|
8020
|
+
{
|
|
8021
|
+
type: "button",
|
|
8022
|
+
className: joinClassNames(
|
|
8023
|
+
`${REACT_COMPONENT_PREFIX}-drawer-fullscreen-button`,
|
|
8024
|
+
classNames?.fullscreen
|
|
8025
|
+
),
|
|
8026
|
+
style: styles?.fullscreen,
|
|
8027
|
+
title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
|
|
8028
|
+
"aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
|
|
8029
|
+
"aria-pressed": mergedFullscreen,
|
|
8030
|
+
onClick: () => {
|
|
8031
|
+
const next = !mergedFullscreen;
|
|
8032
|
+
if (fullscreen === void 0) setInnerFullscreen(next);
|
|
8033
|
+
onFullscreenChange?.(next);
|
|
8034
|
+
},
|
|
8035
|
+
children: /* @__PURE__ */ jsx(ModalFullscreenIcon, { exit: mergedFullscreen })
|
|
8036
|
+
}
|
|
8037
|
+
),
|
|
8038
|
+
closeAtEnd && closeButton
|
|
8039
|
+
]
|
|
8040
|
+
}
|
|
8041
|
+
),
|
|
8042
|
+
/* @__PURE__ */ jsx(
|
|
8043
|
+
"div",
|
|
8044
|
+
{
|
|
8045
|
+
className: joinClassNames(
|
|
8046
|
+
`${REACT_COMPONENT_PREFIX}-drawer-body`,
|
|
8047
|
+
classNames?.body
|
|
8048
|
+
),
|
|
8049
|
+
style: styles?.body,
|
|
8050
|
+
children: loading ? /* @__PURE__ */ jsxs(
|
|
8051
|
+
"div",
|
|
8052
|
+
{
|
|
8053
|
+
className: `${REACT_COMPONENT_PREFIX}-drawer-skeleton`,
|
|
8054
|
+
"aria-label": "\u52A0\u8F7D\u4E2D",
|
|
8055
|
+
children: [
|
|
8056
|
+
/* @__PURE__ */ jsx("i", {}),
|
|
8057
|
+
/* @__PURE__ */ jsx("i", {}),
|
|
8058
|
+
/* @__PURE__ */ jsx("i", {})
|
|
8059
|
+
]
|
|
8060
|
+
}
|
|
8061
|
+
) : (!destroyOnHidden || open) && children
|
|
8062
|
+
}
|
|
8063
|
+
),
|
|
8064
|
+
footer != null && /* @__PURE__ */ jsx(
|
|
8065
|
+
"footer",
|
|
8066
|
+
{
|
|
8067
|
+
className: joinClassNames(
|
|
8068
|
+
`${REACT_COMPONENT_PREFIX}-drawer-footer`,
|
|
8069
|
+
classNames?.footer
|
|
8070
|
+
),
|
|
8071
|
+
style: styles?.footer,
|
|
8072
|
+
children: footer
|
|
8073
|
+
}
|
|
8074
|
+
)
|
|
8075
|
+
]
|
|
8076
|
+
}
|
|
8077
|
+
)
|
|
8078
|
+
]
|
|
8079
|
+
}
|
|
8080
|
+
);
|
|
8081
|
+
return getContainer === false ? node : createPortal(node, container);
|
|
8082
|
+
}
|
|
8083
|
+
function resolveContainer2(value) {
|
|
8084
|
+
if (value === false) return null;
|
|
8085
|
+
if (typeof value === "function") return value();
|
|
8086
|
+
if (typeof value === "string")
|
|
8087
|
+
return document.querySelector(value);
|
|
8088
|
+
return value ?? document.body;
|
|
8089
|
+
}
|
|
8090
|
+
function trapFocus2(event, panel) {
|
|
8091
|
+
const focusable = Array.from(
|
|
8092
|
+
panel.querySelectorAll(
|
|
8093
|
+
'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
|
|
8094
|
+
)
|
|
8095
|
+
);
|
|
8096
|
+
const first = focusable[0];
|
|
8097
|
+
const last = focusable[focusable.length - 1];
|
|
8098
|
+
if (!first || !last) {
|
|
8099
|
+
event.preventDefault();
|
|
8100
|
+
panel.focus();
|
|
8101
|
+
return;
|
|
8102
|
+
}
|
|
8103
|
+
if (event.shiftKey && (document.activeElement === first || !panel.contains(document.activeElement))) {
|
|
8104
|
+
event.preventDefault();
|
|
8105
|
+
last.focus();
|
|
8106
|
+
} else if (!event.shiftKey && (document.activeElement === last || !panel.contains(document.activeElement))) {
|
|
8107
|
+
event.preventDefault();
|
|
8108
|
+
first.focus();
|
|
8109
|
+
}
|
|
8110
|
+
}
|
|
8111
|
+
|
|
8112
|
+
// src/components/compat/style.css
|
|
8113
|
+
styleInject(".canvas-react-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n min-height: 32px;\n padding: 4px 14px;\n border: 1px solid var(--cc-border-color, #d9d9d9);\n border-radius: 6px;\n color: var(--cc-text-color, #1f2937);\n background: var(--cc-surface-color, #fff);\n cursor: pointer;\n}\n.canvas-react-button:hover:not(:disabled) {\n color: #1677ff;\n border-color: #1677ff;\n}\n.canvas-react-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.canvas-react-button-primary {\n color: #fff;\n border-color: #1677ff;\n background: #1677ff;\n}\n.canvas-react-button-primary:hover:not(:disabled) {\n color: #fff;\n border-color: #4096ff;\n background: #4096ff;\n}\n.canvas-react-button-danger {\n color: #dc2626;\n border-color: #fca5a5;\n}\n.canvas-react-button-small {\n min-height: 24px;\n padding: 2px 8px;\n}\n.canvas-react-button-large {\n min-height: 40px;\n padding: 6px 18px;\n}\n.canvas-react-button-icon {\n display: inline-flex;\n}\n.canvas-react-row {\n display: flex;\n flex-flow: row wrap;\n}\n.canvas-react-col {\n min-width: 0;\n padding-inline: 8px;\n}\n.canvas-react-radio-group {\n display: flex;\n gap: 16px;\n}\n.canvas-react-radio {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n.canvas-react-radio input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-radio-mark {\n width: 14px;\n height: 14px;\n border: 1px solid #94a3b8;\n border-radius: 50%;\n box-sizing: border-box;\n}\n.canvas-react-radio input:checked + .canvas-react-radio-mark {\n border: 4px solid #1677ff;\n}\n.canvas-react-form-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 16px;\n}\n.canvas-react-form-label {\n color: #334155;\n font-size: 14px;\n}\n.canvas-react-form-error {\n color: #dc2626;\n font-size: 12px;\n}\n.canvas-react-textarea {\n width: 100%;\n min-height: 72px;\n padding: 8px 10px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: 6px;\n box-sizing: border-box;\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font: inherit;\n resize: vertical;\n}\n.canvas-react-textarea:hover:not(:disabled) {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-textarea:focus {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n outline: none;\n}\n.canvas-react-textarea::placeholder {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-textarea:disabled {\n background: var(--canvas-react-color-bg-soft, #fafafa);\n color: var(--canvas-react-color-text-muted);\n cursor: not-allowed;\n}\n");
|
|
8114
|
+
|
|
8115
|
+
// src/components/message/style.css
|
|
8116
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-message-host {\n position: fixed;\n z-index: 3000;\n inset-inline: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding-inline: 16px;\n pointer-events: none;\n font-size: var(--canvas-react-font-size, 14px);\n}\n.canvas-react-message {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n max-width: min(100%, 640px);\n max-height: 240px;\n padding: 9px 12px;\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #fff);\n color: var(--canvas-react-color-text, rgba(0, 0, 0, 0.88));\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);\n line-height: 1.5;\n pointer-events: auto;\n animation: canvas-react-message-enter 0.2s ease-out both;\n}\n.canvas-react-message-leaving {\n overflow: hidden;\n pointer-events: none;\n animation: canvas-react-message-leave 0.3s ease-in forwards;\n}\n.canvas-react-message-icon {\n display: inline-flex;\n flex: none;\n width: 16px;\n height: 16px;\n}\n.canvas-react-message-icon svg {\n width: 16px;\n height: 16px;\n}\n.canvas-react-message-info,\n.canvas-react-message-loading {\n --canvas-react-message-color: #1677ff;\n}\n.canvas-react-message-success {\n --canvas-react-message-color: #52c41a;\n}\n.canvas-react-message-warning {\n --canvas-react-message-color: #faad14;\n}\n.canvas-react-message-error {\n --canvas-react-message-color: #ff4d4f;\n}\n.canvas-react-message-icon {\n color: var(--canvas-react-message-color);\n}\n.canvas-react-message-spinner {\n width: 14px;\n height: 14px;\n border: 2px solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n animation: canvas-react-message-spin 0.8s linear infinite;\n}\n@keyframes canvas-react-message-enter {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes canvas-react-message-leave {\n to {\n opacity: 0;\n transform: translateY(-8px);\n max-height: 0;\n padding-block: 0;\n margin-bottom: -8px;\n }\n}\n@keyframes canvas-react-message-spin {\n to {\n transform: rotate(360deg);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-message,\n .canvas-react-message-spinner {\n animation-duration: 0.01ms;\n }\n}\n');
|
|
8117
|
+
var nextKey = 0;
|
|
8118
|
+
var LEAVE_DURATION = 300;
|
|
8119
|
+
function createMessageStore(initialOptions = {}) {
|
|
8120
|
+
let options = initialOptions;
|
|
8121
|
+
let entries = [];
|
|
8122
|
+
const listeners2 = /* @__PURE__ */ new Set();
|
|
8123
|
+
const timers = /* @__PURE__ */ new Map();
|
|
8124
|
+
const leaveTimers = /* @__PURE__ */ new Map();
|
|
8125
|
+
const publish = () => listeners2.forEach((listener) => listener());
|
|
8126
|
+
const remove = (key) => {
|
|
8127
|
+
const targets = key === void 0 ? entries.filter((entry) => !entry.leaving) : entries.filter((entry) => entry.key === key && !entry.leaving);
|
|
8128
|
+
if (!targets.length) return;
|
|
8129
|
+
targets.forEach((entry) => {
|
|
8130
|
+
const timer = timers.get(entry.key);
|
|
8131
|
+
if (timer) clearTimeout(timer);
|
|
8132
|
+
timers.delete(entry.key);
|
|
8133
|
+
entry.leaving = true;
|
|
8134
|
+
leaveTimers.set(
|
|
8135
|
+
entry.key,
|
|
8136
|
+
setTimeout(() => {
|
|
8137
|
+
leaveTimers.delete(entry.key);
|
|
8138
|
+
entries = entries.filter(
|
|
8139
|
+
(item) => item.key !== entry.key || item !== entry
|
|
8140
|
+
);
|
|
8141
|
+
entry.close();
|
|
8142
|
+
entry.onClose?.();
|
|
8143
|
+
publish();
|
|
8144
|
+
}, LEAVE_DURATION)
|
|
8145
|
+
);
|
|
8146
|
+
});
|
|
8147
|
+
publish();
|
|
8148
|
+
};
|
|
8149
|
+
const open = (config) => {
|
|
8150
|
+
const key = config.key ?? ++nextKey;
|
|
8151
|
+
const previous = entries.find((entry2) => entry2.key === key);
|
|
8152
|
+
const oldTimer = timers.get(key);
|
|
8153
|
+
if (oldTimer) clearTimeout(oldTimer);
|
|
8154
|
+
timers.delete(key);
|
|
8155
|
+
const leaveTimer = leaveTimers.get(key);
|
|
8156
|
+
if (leaveTimer) clearTimeout(leaveTimer);
|
|
8157
|
+
leaveTimers.delete(key);
|
|
8158
|
+
let resolve;
|
|
8159
|
+
const promise = previous ? void 0 : new Promise((done) => {
|
|
8160
|
+
resolve = done;
|
|
8161
|
+
});
|
|
8162
|
+
const close = previous?.close ?? resolve;
|
|
8163
|
+
const entry = {
|
|
8164
|
+
...config,
|
|
8165
|
+
key,
|
|
8166
|
+
type: config.type ?? "info",
|
|
8167
|
+
close
|
|
8168
|
+
};
|
|
8169
|
+
entries = previous ? entries.map((item) => item.key === key ? entry : item) : [...entries, entry];
|
|
8170
|
+
if (options.maxCount && entries.filter((item) => !item.leaving).length > options.maxCount) {
|
|
8171
|
+
const oldest = entries.find((item) => item.key !== key && !item.leaving);
|
|
8172
|
+
if (oldest && oldest.key !== key) remove(oldest.key);
|
|
8173
|
+
}
|
|
8174
|
+
const duration = config.duration ?? options.duration ?? (entry.type === "loading" ? 0 : 3);
|
|
8175
|
+
if (duration > 0)
|
|
8176
|
+
timers.set(
|
|
8177
|
+
key,
|
|
8178
|
+
setTimeout(() => remove(key), duration * 1e3)
|
|
8179
|
+
);
|
|
8180
|
+
publish();
|
|
8181
|
+
const handle = (() => remove(key));
|
|
8182
|
+
handle.then = (onFulfilled, onRejected) => (promise ?? new Promise((done) => {
|
|
8183
|
+
const current = entries.find((item) => item.key === key);
|
|
8184
|
+
if (!current) done();
|
|
8185
|
+
else {
|
|
8186
|
+
const originalClose = current.close;
|
|
8187
|
+
current.close = () => {
|
|
8188
|
+
originalClose();
|
|
8189
|
+
done();
|
|
8190
|
+
};
|
|
8191
|
+
}
|
|
8192
|
+
})).then(onFulfilled, onRejected);
|
|
8193
|
+
return handle;
|
|
8194
|
+
};
|
|
8195
|
+
const level = (type) => (content, duration, onClose) => open(
|
|
8196
|
+
isConfig(content) ? { ...content, type } : { content, type, duration, onClose }
|
|
8197
|
+
);
|
|
8198
|
+
const api = {
|
|
8199
|
+
open,
|
|
8200
|
+
info: level("info"),
|
|
8201
|
+
success: level("success"),
|
|
8202
|
+
warning: level("warning"),
|
|
8203
|
+
error: level("error"),
|
|
8204
|
+
loading: level("loading"),
|
|
8205
|
+
destroy: remove,
|
|
8206
|
+
config(next) {
|
|
8207
|
+
options = { ...options, ...next };
|
|
8208
|
+
publish();
|
|
8209
|
+
}
|
|
8210
|
+
};
|
|
8211
|
+
return {
|
|
8212
|
+
api,
|
|
8213
|
+
getEntries: () => entries,
|
|
8214
|
+
getOptions: () => options,
|
|
8215
|
+
subscribe(listener) {
|
|
8216
|
+
listeners2.add(listener);
|
|
8217
|
+
return () => {
|
|
8218
|
+
listeners2.delete(listener);
|
|
8219
|
+
};
|
|
8220
|
+
}
|
|
8221
|
+
};
|
|
8222
|
+
}
|
|
8223
|
+
function isConfig(value) {
|
|
8224
|
+
return typeof value === "object" && value !== null && !Array.isArray(value) && "content" in value;
|
|
8225
|
+
}
|
|
8226
|
+
function MessageHolder({ store }) {
|
|
8227
|
+
const [, refresh] = useState(0);
|
|
8228
|
+
useEffect(() => {
|
|
8229
|
+
refresh((value) => value + 1);
|
|
8230
|
+
return store.subscribe(() => refresh((value) => value + 1));
|
|
8231
|
+
}, [store]);
|
|
8232
|
+
const options = store.getOptions();
|
|
8233
|
+
return /* @__PURE__ */ jsx(
|
|
8234
|
+
"div",
|
|
8235
|
+
{
|
|
8236
|
+
className: `${REACT_COMPONENT_PREFIX}-message-host`,
|
|
8237
|
+
style: { top: options.top ?? 8 },
|
|
8238
|
+
role: "status",
|
|
8239
|
+
"aria-live": "polite",
|
|
8240
|
+
children: store.getEntries().map((entry) => /* @__PURE__ */ jsxs(
|
|
8241
|
+
"div",
|
|
8242
|
+
{
|
|
8243
|
+
className: [
|
|
8244
|
+
`${REACT_COMPONENT_PREFIX}-message`,
|
|
8245
|
+
`${REACT_COMPONENT_PREFIX}-message-${entry.type}`,
|
|
8246
|
+
entry.leaving && `${REACT_COMPONENT_PREFIX}-message-leaving`,
|
|
8247
|
+
entry.className
|
|
8248
|
+
].filter(Boolean).join(" "),
|
|
8249
|
+
style: entry.style,
|
|
8250
|
+
onClick: entry.onClick,
|
|
8251
|
+
children: [
|
|
8252
|
+
/* @__PURE__ */ jsx(
|
|
8253
|
+
"span",
|
|
8254
|
+
{
|
|
8255
|
+
className: `${REACT_COMPONENT_PREFIX}-message-icon`,
|
|
8256
|
+
"aria-hidden": "true",
|
|
8257
|
+
children: entry.icon ?? /* @__PURE__ */ jsx(MessageIcon, { type: entry.type })
|
|
8258
|
+
}
|
|
8259
|
+
),
|
|
8260
|
+
/* @__PURE__ */ jsx("span", { children: entry.content })
|
|
8261
|
+
]
|
|
8262
|
+
},
|
|
8263
|
+
entry.key
|
|
8264
|
+
))
|
|
8265
|
+
}
|
|
8266
|
+
);
|
|
8267
|
+
}
|
|
8268
|
+
function MessageIcon({ type }) {
|
|
8269
|
+
if (type === "loading")
|
|
8270
|
+
return /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-message-spinner` });
|
|
8271
|
+
const path = type === "success" ? "M5 12l4 4L19 6" : type === "error" ? "M6 6l12 12M18 6L6 18" : type === "warning" ? "M12 7v6m0 4h.01" : "M12 11v6m0-10h.01";
|
|
8272
|
+
return /* @__PURE__ */ jsxs(
|
|
8273
|
+
"svg",
|
|
8274
|
+
{
|
|
8275
|
+
viewBox: "0 0 24 24",
|
|
8276
|
+
fill: "none",
|
|
8277
|
+
stroke: "currentColor",
|
|
8278
|
+
strokeWidth: "2.4",
|
|
8279
|
+
strokeLinecap: "round",
|
|
8280
|
+
strokeLinejoin: "round",
|
|
8281
|
+
children: [
|
|
8282
|
+
/* @__PURE__ */ jsx(
|
|
8283
|
+
"circle",
|
|
8284
|
+
{
|
|
8285
|
+
cx: "12",
|
|
8286
|
+
cy: "12",
|
|
8287
|
+
r: "10",
|
|
8288
|
+
fill: "currentColor",
|
|
8289
|
+
stroke: "none",
|
|
8290
|
+
opacity: ".12"
|
|
8291
|
+
}
|
|
8292
|
+
),
|
|
8293
|
+
/* @__PURE__ */ jsx("path", { d: path })
|
|
8294
|
+
]
|
|
8295
|
+
}
|
|
8296
|
+
);
|
|
8297
|
+
}
|
|
8298
|
+
var staticStore;
|
|
8299
|
+
var staticRootMounted = false;
|
|
8300
|
+
var staticHost;
|
|
8301
|
+
function resolveMessageContainer(value) {
|
|
8302
|
+
return (typeof value === "function" ? value() : value) ?? document.body;
|
|
8303
|
+
}
|
|
8304
|
+
function getStaticStore() {
|
|
8305
|
+
if (!staticStore) staticStore = createMessageStore();
|
|
8306
|
+
if (typeof document !== "undefined" && !staticRootMounted) {
|
|
8307
|
+
const host = document.createElement("div");
|
|
8308
|
+
host.id = `${REACT_COMPONENT_PREFIX}-message-root`;
|
|
8309
|
+
resolveMessageContainer(staticStore.getOptions().getContainer).appendChild(
|
|
8310
|
+
host
|
|
8311
|
+
);
|
|
8312
|
+
staticHost = host;
|
|
8313
|
+
staticRootMounted = true;
|
|
8314
|
+
if (typeof ReactDOM.render === "function") {
|
|
8315
|
+
ReactDOM.render(/* @__PURE__ */ jsx(MessageHolder, { store: staticStore }), host);
|
|
8316
|
+
} else {
|
|
8317
|
+
void import('react-dom/client').then(({ createRoot }) => {
|
|
8318
|
+
createRoot(host).render(/* @__PURE__ */ jsx(MessageHolder, { store: staticStore }));
|
|
8319
|
+
});
|
|
8320
|
+
}
|
|
8321
|
+
} else if (staticHost && !staticHost.isConnected) {
|
|
8322
|
+
resolveMessageContainer(staticStore.getOptions().getContainer).appendChild(
|
|
8323
|
+
staticHost
|
|
8324
|
+
);
|
|
8325
|
+
}
|
|
8326
|
+
return staticStore;
|
|
8327
|
+
}
|
|
8328
|
+
var reactMessage = {
|
|
8329
|
+
open: (config) => getStaticStore().api.open(config),
|
|
8330
|
+
info: (content, duration, onClose) => getStaticStore().api.info(content, duration, onClose),
|
|
8331
|
+
success: (content, duration, onClose) => getStaticStore().api.success(content, duration, onClose),
|
|
8332
|
+
warning: (content, duration, onClose) => getStaticStore().api.warning(content, duration, onClose),
|
|
8333
|
+
error: (content, duration, onClose) => getStaticStore().api.error(content, duration, onClose),
|
|
8334
|
+
loading: (content, duration, onClose) => getStaticStore().api.loading(content, duration, onClose),
|
|
8335
|
+
destroy: (key) => getStaticStore().api.destroy(key),
|
|
8336
|
+
config: (options) => {
|
|
8337
|
+
const store = getStaticStore();
|
|
8338
|
+
store.api.config(options);
|
|
8339
|
+
if (staticHost && typeof document !== "undefined") {
|
|
8340
|
+
const container = resolveMessageContainer(
|
|
8341
|
+
store.getOptions().getContainer
|
|
8342
|
+
);
|
|
8343
|
+
if (staticHost.parentElement !== container)
|
|
8344
|
+
container.appendChild(staticHost);
|
|
8345
|
+
}
|
|
8346
|
+
},
|
|
8347
|
+
/** 创建能读取调用位置 React Context 的消息实例。 */
|
|
8348
|
+
useMessage: (options) => useReactMessage(options)
|
|
8349
|
+
};
|
|
8350
|
+
function useReactMessage(options) {
|
|
8351
|
+
const store = useMemo(() => createMessageStore(options), []);
|
|
8352
|
+
useEffect(() => () => store.api.destroy(), [store]);
|
|
8353
|
+
const holder = /* @__PURE__ */ jsx(MessageHolder, { store }, "message-holder");
|
|
8354
|
+
return [
|
|
8355
|
+
store.api,
|
|
8356
|
+
options?.getContainer && typeof document !== "undefined" ? ReactDOM.createPortal(
|
|
8357
|
+
holder,
|
|
8358
|
+
resolveMessageContainer(options.getContainer)
|
|
8359
|
+
) : holder
|
|
8360
|
+
];
|
|
8361
|
+
}
|
|
8362
|
+
function ReactButton({
|
|
8363
|
+
children,
|
|
8364
|
+
className,
|
|
8365
|
+
danger,
|
|
8366
|
+
htmlType = "button",
|
|
8367
|
+
icon,
|
|
8368
|
+
size = "middle",
|
|
8369
|
+
type = "default",
|
|
8370
|
+
...props
|
|
8371
|
+
}) {
|
|
8372
|
+
return /* @__PURE__ */ jsxs(
|
|
8373
|
+
"button",
|
|
8374
|
+
{
|
|
8375
|
+
...props,
|
|
8376
|
+
type: htmlType,
|
|
8377
|
+
className: joinClassNames(
|
|
8378
|
+
`${REACT_COMPONENT_PREFIX}-button`,
|
|
8379
|
+
`${REACT_COMPONENT_PREFIX}-button-${type}`,
|
|
8380
|
+
`${REACT_COMPONENT_PREFIX}-button-${size}`,
|
|
8381
|
+
danger && `${REACT_COMPONENT_PREFIX}-button-danger`,
|
|
8382
|
+
className
|
|
8383
|
+
),
|
|
8384
|
+
children: [
|
|
8385
|
+
icon ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-button-icon`, children: icon }) : null,
|
|
8386
|
+
children
|
|
8387
|
+
]
|
|
8388
|
+
}
|
|
8389
|
+
);
|
|
8390
|
+
}
|
|
8391
|
+
function ReactFlex({
|
|
8392
|
+
vertical,
|
|
8393
|
+
justify,
|
|
8394
|
+
align,
|
|
8395
|
+
gap,
|
|
6200
8396
|
style,
|
|
6201
8397
|
...props
|
|
6202
8398
|
}) {
|
|
@@ -6245,12 +8441,6 @@ function ReactCol({ span = 24, style, ...props }) {
|
|
|
6245
8441
|
}
|
|
6246
8442
|
);
|
|
6247
8443
|
}
|
|
6248
|
-
function ReactTooltip({ title, children }) {
|
|
6249
|
-
return cloneElement(children, {
|
|
6250
|
-
title: typeof title === "string" ? title : void 0,
|
|
6251
|
-
"aria-label": typeof title === "string" ? title : void 0
|
|
6252
|
-
});
|
|
6253
|
-
}
|
|
6254
8444
|
var RadioGroupContext = createContext({});
|
|
6255
8445
|
function ReactRadioOption({
|
|
6256
8446
|
value,
|
|
@@ -6324,317 +8514,63 @@ function ReactTextArea({ className, ...props }) {
|
|
|
6324
8514
|
}
|
|
6325
8515
|
);
|
|
6326
8516
|
}
|
|
6327
|
-
|
|
6328
|
-
|
|
6329
|
-
|
|
6330
|
-
|
|
6331
|
-
|
|
6332
|
-
|
|
6333
|
-
|
|
6334
|
-
|
|
6335
|
-
|
|
8517
|
+
|
|
8518
|
+
// src/shared/scrollbar-settings.ts
|
|
8519
|
+
var STORAGE_KEY = "canvas-components:shared-scrollbar-settings";
|
|
8520
|
+
var listeners = /* @__PURE__ */ new Set();
|
|
8521
|
+
function readStoredSettings() {
|
|
8522
|
+
try {
|
|
8523
|
+
const raw = globalThis.localStorage?.getItem(STORAGE_KEY);
|
|
8524
|
+
if (!raw) return { shared: false };
|
|
8525
|
+
const parsed = JSON.parse(raw);
|
|
8526
|
+
if (!parsed || typeof parsed !== "object") return { shared: false };
|
|
8527
|
+
const settings = parsed;
|
|
8528
|
+
return {
|
|
8529
|
+
shared: settings.shared === true,
|
|
8530
|
+
value: settings.value && typeof settings.value === "object" ? settings.value : void 0
|
|
8531
|
+
};
|
|
8532
|
+
} catch {
|
|
8533
|
+
return { shared: false };
|
|
8534
|
+
}
|
|
8535
|
+
}
|
|
8536
|
+
var snapshot = readStoredSettings();
|
|
8537
|
+
function getSharedScrollbarSettings() {
|
|
8538
|
+
return snapshot;
|
|
8539
|
+
}
|
|
8540
|
+
function subscribeSharedScrollbarSettings(listener) {
|
|
8541
|
+
listeners.add(listener);
|
|
8542
|
+
return () => listeners.delete(listener);
|
|
8543
|
+
}
|
|
8544
|
+
function setSharedScrollbarSettings(next) {
|
|
8545
|
+
snapshot = next;
|
|
8546
|
+
try {
|
|
8547
|
+
globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(next));
|
|
8548
|
+
} catch {
|
|
6336
8549
|
}
|
|
6337
|
-
|
|
6338
|
-
item.className = `${REACT_COMPONENT_PREFIX}-message ${REACT_COMPONENT_PREFIX}-message-${type}`;
|
|
6339
|
-
item.textContent = typeof content === "string" ? content : String(content ?? "");
|
|
6340
|
-
host.appendChild(item);
|
|
6341
|
-
window.setTimeout(() => item.remove(), 3e3);
|
|
8550
|
+
listeners.forEach((listener) => listener());
|
|
6342
8551
|
}
|
|
6343
|
-
|
|
6344
|
-
|
|
6345
|
-
|
|
6346
|
-
|
|
6347
|
-
|
|
6348
|
-
};
|
|
6349
|
-
|
|
6350
|
-
|
|
6351
|
-
|
|
6352
|
-
|
|
6353
|
-
|
|
6354
|
-
|
|
6355
|
-
|
|
6356
|
-
|
|
6357
|
-
|
|
6358
|
-
|
|
6359
|
-
|
|
6360
|
-
|
|
6361
|
-
|
|
6362
|
-
|
|
6363
|
-
|
|
6364
|
-
|
|
6365
|
-
onFocus,
|
|
6366
|
-
onKeyDown,
|
|
6367
|
-
parser,
|
|
6368
|
-
precision,
|
|
6369
|
-
step = 1,
|
|
6370
|
-
style,
|
|
6371
|
-
value,
|
|
6372
|
-
...restProps
|
|
6373
|
-
} = props;
|
|
6374
|
-
const isControlled = value !== void 0;
|
|
6375
|
-
const [innerValue, setInnerValue] = useState(
|
|
6376
|
-
isControlled ? value ?? null : defaultValue
|
|
6377
|
-
);
|
|
6378
|
-
const currentValue = isControlled ? value ?? null : innerValue;
|
|
6379
|
-
const [draftText, setDraftText] = useState(
|
|
6380
|
-
formatDisplayValue(
|
|
6381
|
-
currentValue,
|
|
6382
|
-
formatter,
|
|
6383
|
-
resolvePrecision(precision, step),
|
|
6384
|
-
step
|
|
6385
|
-
)
|
|
6386
|
-
);
|
|
6387
|
-
const [focused, setFocused] = useState(false);
|
|
6388
|
-
const resolvedPrecision = useMemo(
|
|
6389
|
-
() => resolvePrecision(precision, step),
|
|
6390
|
-
[precision, step]
|
|
6391
|
-
);
|
|
6392
|
-
useEffect(() => {
|
|
6393
|
-
if (!focused) {
|
|
6394
|
-
setDraftText(
|
|
6395
|
-
formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
|
|
6396
|
-
);
|
|
6397
|
-
}
|
|
6398
|
-
}, [currentValue, focused, formatter, resolvedPrecision, step]);
|
|
6399
|
-
const commitValue = (nextValue) => {
|
|
6400
|
-
const normalized = normalizeNumberValue(nextValue, {
|
|
6401
|
-
min,
|
|
6402
|
-
max,
|
|
6403
|
-
precision: resolvedPrecision
|
|
6404
|
-
});
|
|
6405
|
-
if (!isControlled) {
|
|
6406
|
-
setInnerValue(normalized);
|
|
6407
|
-
}
|
|
6408
|
-
onChange?.(normalized);
|
|
6409
|
-
onCommit?.(normalized);
|
|
6410
|
-
setDraftText(
|
|
6411
|
-
formatDisplayValue(normalized, formatter, resolvedPrecision, step)
|
|
6412
|
-
);
|
|
6413
|
-
return normalized;
|
|
6414
|
-
};
|
|
6415
|
-
const stepBy = (direction) => {
|
|
6416
|
-
if (disabled) {
|
|
6417
|
-
return;
|
|
6418
|
-
}
|
|
6419
|
-
const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
|
|
6420
|
-
const next = base + direction * step;
|
|
6421
|
-
commitValue(next);
|
|
6422
|
-
};
|
|
6423
|
-
const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
|
|
6424
|
-
const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
|
|
6425
|
-
return /* @__PURE__ */ jsxs(
|
|
6426
|
-
"span",
|
|
6427
|
-
{
|
|
6428
|
-
className: joinClassNames(
|
|
6429
|
-
`${REACT_COMPONENT_PREFIX}-input-number`,
|
|
6430
|
-
focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
|
|
6431
|
-
disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
|
|
6432
|
-
className
|
|
6433
|
-
),
|
|
6434
|
-
style,
|
|
6435
|
-
children: [
|
|
6436
|
-
/* @__PURE__ */ jsx(
|
|
6437
|
-
"button",
|
|
6438
|
-
{
|
|
6439
|
-
type: "button",
|
|
6440
|
-
tabIndex: -1,
|
|
6441
|
-
disabled: disabled || atMin,
|
|
6442
|
-
className: joinClassNames(
|
|
6443
|
-
`${REACT_COMPONENT_PREFIX}-input-number-handler`,
|
|
6444
|
-
`${REACT_COMPONENT_PREFIX}-input-number-handler-down`
|
|
6445
|
-
),
|
|
6446
|
-
"aria-label": "\u51CF\u5C11",
|
|
6447
|
-
onMouseDown: (event) => {
|
|
6448
|
-
event.preventDefault();
|
|
6449
|
-
},
|
|
6450
|
-
onClick: () => {
|
|
6451
|
-
stepBy(-1);
|
|
6452
|
-
},
|
|
6453
|
-
children: /* @__PURE__ */ jsx(
|
|
6454
|
-
"span",
|
|
6455
|
-
{
|
|
6456
|
-
className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
|
|
6457
|
-
"aria-hidden": "true"
|
|
6458
|
-
}
|
|
6459
|
-
)
|
|
6460
|
-
}
|
|
6461
|
-
),
|
|
6462
|
-
/* @__PURE__ */ jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
|
|
6463
|
-
/* @__PURE__ */ jsx(
|
|
6464
|
-
"input",
|
|
6465
|
-
{
|
|
6466
|
-
...restProps,
|
|
6467
|
-
ref,
|
|
6468
|
-
disabled,
|
|
6469
|
-
inputMode: "decimal",
|
|
6470
|
-
value: draftText,
|
|
6471
|
-
className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
|
|
6472
|
-
onFocus: (event) => {
|
|
6473
|
-
setFocused(true);
|
|
6474
|
-
onFocus?.(event);
|
|
6475
|
-
},
|
|
6476
|
-
onChange: (event) => {
|
|
6477
|
-
const nextText = event.target.value;
|
|
6478
|
-
setDraftText(nextText);
|
|
6479
|
-
const parsed = parser ? parser(nextText) : parseNumberText(nextText);
|
|
6480
|
-
if (!isControlled) {
|
|
6481
|
-
setInnerValue(parsed);
|
|
6482
|
-
}
|
|
6483
|
-
onChange?.(parsed);
|
|
6484
|
-
},
|
|
6485
|
-
onBlur: (event) => {
|
|
6486
|
-
setFocused(false);
|
|
6487
|
-
const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
|
|
6488
|
-
commitValue(parsed);
|
|
6489
|
-
onBlur?.(event);
|
|
6490
|
-
},
|
|
6491
|
-
onKeyDown: (event) => {
|
|
6492
|
-
if (event.key === "ArrowUp") {
|
|
6493
|
-
event.preventDefault();
|
|
6494
|
-
stepBy(1);
|
|
6495
|
-
} else if (event.key === "ArrowDown") {
|
|
6496
|
-
event.preventDefault();
|
|
6497
|
-
stepBy(-1);
|
|
6498
|
-
} else if (event.key === "Enter") {
|
|
6499
|
-
const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
|
|
6500
|
-
commitValue(parsed);
|
|
6501
|
-
}
|
|
6502
|
-
onKeyDown?.(event);
|
|
6503
|
-
}
|
|
6504
|
-
}
|
|
6505
|
-
),
|
|
6506
|
-
addonAfter != null ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
|
|
6507
|
-
] }),
|
|
6508
|
-
/* @__PURE__ */ jsx(
|
|
6509
|
-
"button",
|
|
6510
|
-
{
|
|
6511
|
-
type: "button",
|
|
6512
|
-
tabIndex: -1,
|
|
6513
|
-
disabled: disabled || atMax,
|
|
6514
|
-
className: joinClassNames(
|
|
6515
|
-
`${REACT_COMPONENT_PREFIX}-input-number-handler`,
|
|
6516
|
-
`${REACT_COMPONENT_PREFIX}-input-number-handler-up`
|
|
6517
|
-
),
|
|
6518
|
-
"aria-label": "\u589E\u52A0",
|
|
6519
|
-
onMouseDown: (event) => {
|
|
6520
|
-
event.preventDefault();
|
|
6521
|
-
},
|
|
6522
|
-
onClick: () => {
|
|
6523
|
-
stepBy(1);
|
|
6524
|
-
},
|
|
6525
|
-
children: /* @__PURE__ */ jsx(
|
|
6526
|
-
"span",
|
|
6527
|
-
{
|
|
6528
|
-
className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
|
|
6529
|
-
"aria-hidden": "true"
|
|
6530
|
-
}
|
|
6531
|
-
)
|
|
6532
|
-
}
|
|
6533
|
-
)
|
|
6534
|
-
]
|
|
6535
|
-
}
|
|
6536
|
-
);
|
|
6537
|
-
}
|
|
6538
|
-
);
|
|
6539
|
-
function parseNumberText(value) {
|
|
6540
|
-
const text = value.trim().replace(/%/g, "");
|
|
6541
|
-
if (!text) {
|
|
6542
|
-
return null;
|
|
6543
|
-
}
|
|
6544
|
-
const nextValue = Number(text);
|
|
6545
|
-
return Number.isFinite(nextValue) ? nextValue : null;
|
|
6546
|
-
}
|
|
6547
|
-
function resolvePrecision(precision, step) {
|
|
6548
|
-
if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
|
|
6549
|
-
return precision;
|
|
6550
|
-
}
|
|
6551
|
-
const stepText = String(step);
|
|
6552
|
-
if (!stepText.includes(".")) {
|
|
6553
|
-
return 0;
|
|
6554
|
-
}
|
|
6555
|
-
return stepText.split(".")[1]?.length ?? 0;
|
|
6556
|
-
}
|
|
6557
|
-
function normalizeNumberValue(value, options) {
|
|
6558
|
-
if (value == null || !Number.isFinite(value)) {
|
|
6559
|
-
return null;
|
|
6560
|
-
}
|
|
6561
|
-
let next = value;
|
|
6562
|
-
if (options.min != null) {
|
|
6563
|
-
next = Math.max(options.min, next);
|
|
6564
|
-
}
|
|
6565
|
-
if (options.max != null) {
|
|
6566
|
-
next = Math.min(options.max, next);
|
|
6567
|
-
}
|
|
6568
|
-
const factor = 10 ** options.precision;
|
|
6569
|
-
return Math.round(next * factor) / factor;
|
|
6570
|
-
}
|
|
6571
|
-
function formatDisplayValue(value, formatter, precision, step) {
|
|
6572
|
-
if (formatter) {
|
|
6573
|
-
return formatter(value);
|
|
6574
|
-
}
|
|
6575
|
-
if (value == null || !Number.isFinite(value)) {
|
|
6576
|
-
return "";
|
|
6577
|
-
}
|
|
6578
|
-
const digits = resolvePrecision(precision, step);
|
|
6579
|
-
return digits > 0 ? value.toFixed(digits) : String(Math.round(value));
|
|
6580
|
-
}
|
|
6581
|
-
|
|
6582
|
-
// src/shared/scrollbar-settings.ts
|
|
6583
|
-
var STORAGE_KEY = "canvas-components:shared-scrollbar-settings";
|
|
6584
|
-
var listeners = /* @__PURE__ */ new Set();
|
|
6585
|
-
function readStoredSettings() {
|
|
6586
|
-
try {
|
|
6587
|
-
const raw = globalThis.localStorage?.getItem(STORAGE_KEY);
|
|
6588
|
-
if (!raw) return { shared: false };
|
|
6589
|
-
const parsed = JSON.parse(raw);
|
|
6590
|
-
if (!parsed || typeof parsed !== "object") return { shared: false };
|
|
6591
|
-
const settings = parsed;
|
|
6592
|
-
return {
|
|
6593
|
-
shared: settings.shared === true,
|
|
6594
|
-
value: settings.value && typeof settings.value === "object" ? settings.value : void 0
|
|
6595
|
-
};
|
|
6596
|
-
} catch {
|
|
6597
|
-
return { shared: false };
|
|
6598
|
-
}
|
|
6599
|
-
}
|
|
6600
|
-
var snapshot = readStoredSettings();
|
|
6601
|
-
function getSharedScrollbarSettings() {
|
|
6602
|
-
return snapshot;
|
|
6603
|
-
}
|
|
6604
|
-
function subscribeSharedScrollbarSettings(listener) {
|
|
6605
|
-
listeners.add(listener);
|
|
6606
|
-
return () => listeners.delete(listener);
|
|
6607
|
-
}
|
|
6608
|
-
function setSharedScrollbarSettings(next) {
|
|
6609
|
-
snapshot = next;
|
|
6610
|
-
try {
|
|
6611
|
-
globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(next));
|
|
6612
|
-
} catch {
|
|
6613
|
-
}
|
|
6614
|
-
listeners.forEach((listener) => listener());
|
|
6615
|
-
}
|
|
6616
|
-
if (typeof globalThis.addEventListener === "function") {
|
|
6617
|
-
globalThis.addEventListener("storage", (event) => {
|
|
6618
|
-
if (event.key !== STORAGE_KEY) return;
|
|
6619
|
-
snapshot = readStoredSettings();
|
|
6620
|
-
listeners.forEach((listener) => listener());
|
|
6621
|
-
});
|
|
6622
|
-
}
|
|
6623
|
-
function resolveReactScrollbarMode(value) {
|
|
6624
|
-
const modes = ["horizontal", "vertical"].filter((axis) => value?.[axis] !== false && value?.[axis]?.visible !== false).map((axis) => {
|
|
6625
|
-
const axisValue = value?.[axis];
|
|
6626
|
-
return axisValue && axisValue.mode || value?.mode || "scrollbar";
|
|
6627
|
-
});
|
|
6628
|
-
if (modes.length === 0) return value?.mode ?? "scrollbar";
|
|
6629
|
-
return modes.every((mode) => mode === modes[0]) ? modes[0] : void 0;
|
|
6630
|
-
}
|
|
6631
|
-
var rowStyle = {
|
|
6632
|
-
display: "grid",
|
|
6633
|
-
gridTemplateColumns: "108px minmax(0, 1fr)",
|
|
6634
|
-
alignItems: "center",
|
|
6635
|
-
gap: 10,
|
|
6636
|
-
marginBottom: 12,
|
|
6637
|
-
fontSize: 14
|
|
8552
|
+
if (typeof globalThis.addEventListener === "function") {
|
|
8553
|
+
globalThis.addEventListener("storage", (event) => {
|
|
8554
|
+
if (event.key !== STORAGE_KEY) return;
|
|
8555
|
+
snapshot = readStoredSettings();
|
|
8556
|
+
listeners.forEach((listener) => listener());
|
|
8557
|
+
});
|
|
8558
|
+
}
|
|
8559
|
+
function resolveReactScrollbarMode(value) {
|
|
8560
|
+
const modes = ["horizontal", "vertical"].filter((axis) => value?.[axis] !== false && value?.[axis]?.visible !== false).map((axis) => {
|
|
8561
|
+
const axisValue = value?.[axis];
|
|
8562
|
+
return axisValue && axisValue.mode || value?.mode || "scrollbar";
|
|
8563
|
+
});
|
|
8564
|
+
if (modes.length === 0) return value?.mode ?? "scrollbar";
|
|
8565
|
+
return modes.every((mode) => mode === modes[0]) ? modes[0] : void 0;
|
|
8566
|
+
}
|
|
8567
|
+
var rowStyle = {
|
|
8568
|
+
display: "grid",
|
|
8569
|
+
gridTemplateColumns: "108px minmax(0, 1fr)",
|
|
8570
|
+
alignItems: "center",
|
|
8571
|
+
gap: 10,
|
|
8572
|
+
marginBottom: 12,
|
|
8573
|
+
fontSize: 14
|
|
6638
8574
|
};
|
|
6639
8575
|
function ReactScrollbarSettingsDialog(props) {
|
|
6640
8576
|
const [draft, setDraft] = useState(props.value ?? {});
|
|
@@ -7332,66 +9268,773 @@ function ReactPopconfirm(props) {
|
|
|
7332
9268
|
hasDescription ? /* @__PURE__ */ jsx(
|
|
7333
9269
|
"div",
|
|
7334
9270
|
{
|
|
7335
|
-
id: descriptionId,
|
|
7336
|
-
className: `${REACT_COMPONENT_PREFIX}-popconfirm-description`,
|
|
7337
|
-
children: description
|
|
7338
|
-
}
|
|
7339
|
-
) : null
|
|
7340
|
-
] })
|
|
7341
|
-
] }),
|
|
7342
|
-
/* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-actions`, children: [
|
|
7343
|
-
showCancel ? /* @__PURE__ */ jsx(
|
|
7344
|
-
"button",
|
|
7345
|
-
{
|
|
7346
|
-
...restCancelButtonProps,
|
|
7347
|
-
type: "button",
|
|
7348
|
-
className: joinClassNames(
|
|
7349
|
-
`${REACT_COMPONENT_PREFIX}-popconfirm-button`,
|
|
7350
|
-
`${REACT_COMPONENT_PREFIX}-popconfirm-button-cancel`,
|
|
7351
|
-
cancelButtonClassName
|
|
7352
|
-
),
|
|
7353
|
-
disabled: mergedConfirmLoading || cancelButtonDisabled,
|
|
7354
|
-
onClick: (event) => {
|
|
7355
|
-
onCancel?.(event);
|
|
7356
|
-
setOpen(false);
|
|
9271
|
+
id: descriptionId,
|
|
9272
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-description`,
|
|
9273
|
+
children: description
|
|
9274
|
+
}
|
|
9275
|
+
) : null
|
|
9276
|
+
] })
|
|
9277
|
+
] }),
|
|
9278
|
+
/* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-actions`, children: [
|
|
9279
|
+
showCancel ? /* @__PURE__ */ jsx(
|
|
9280
|
+
"button",
|
|
9281
|
+
{
|
|
9282
|
+
...restCancelButtonProps,
|
|
9283
|
+
type: "button",
|
|
9284
|
+
className: joinClassNames(
|
|
9285
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button`,
|
|
9286
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button-cancel`,
|
|
9287
|
+
cancelButtonClassName
|
|
9288
|
+
),
|
|
9289
|
+
disabled: mergedConfirmLoading || cancelButtonDisabled,
|
|
9290
|
+
onClick: (event) => {
|
|
9291
|
+
onCancel?.(event);
|
|
9292
|
+
setOpen(false);
|
|
9293
|
+
},
|
|
9294
|
+
children: cancelText
|
|
9295
|
+
}
|
|
9296
|
+
) : null,
|
|
9297
|
+
/* @__PURE__ */ jsxs(
|
|
9298
|
+
"button",
|
|
9299
|
+
{
|
|
9300
|
+
...restOkButtonProps,
|
|
9301
|
+
type: "button",
|
|
9302
|
+
className: joinClassNames(
|
|
9303
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button`,
|
|
9304
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button-primary`,
|
|
9305
|
+
okButtonClassName
|
|
9306
|
+
),
|
|
9307
|
+
disabled: mergedConfirmLoading || okButtonDisabled,
|
|
9308
|
+
onClick: handleConfirm,
|
|
9309
|
+
children: [
|
|
9310
|
+
mergedConfirmLoading ? /* @__PURE__ */ jsx(
|
|
9311
|
+
"span",
|
|
9312
|
+
{
|
|
9313
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-loading`,
|
|
9314
|
+
"aria-hidden": "true"
|
|
9315
|
+
}
|
|
9316
|
+
) : null,
|
|
9317
|
+
/* @__PURE__ */ jsx("span", { children: okText })
|
|
9318
|
+
]
|
|
9319
|
+
}
|
|
9320
|
+
)
|
|
9321
|
+
] })
|
|
9322
|
+
]
|
|
9323
|
+
}
|
|
9324
|
+
)
|
|
9325
|
+
}
|
|
9326
|
+
)
|
|
9327
|
+
] });
|
|
9328
|
+
}
|
|
9329
|
+
function isPromiseLike2(value) {
|
|
9330
|
+
return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
|
|
9331
|
+
}
|
|
9332
|
+
|
|
9333
|
+
// src/components/dropdown/style.css
|
|
9334
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n}\n.canvas-react-dropdown-trigger-icon-only .canvas-react-button {\n min-width: 32px;\n padding-inline: 0;\n}\n.canvas-react-dropdown-trigger-icon-only .canvas-react-button-small {\n min-width: 24px;\n}\n.canvas-react-dropdown-trigger-icon-only .canvas-react-button-large {\n min-width: 40px;\n}\n.canvas-react-dropdown-arrow {\n margin-left: 6px;\n font-size: 10px;\n transition: transform 0.18s ease;\n}\n.canvas-react-dropdown-trigger [aria-expanded=true] .canvas-react-dropdown-arrow {\n transform: rotate(180deg);\n}\n.canvas-react-dropdown-menu {\n min-width: 160px;\n padding: 4px;\n}\n.canvas-react-dropdown-item {\n display: flex;\n box-sizing: border-box;\n width: 100%;\n align-items: center;\n gap: 9px;\n border: 0;\n border-radius: 5px;\n padding: 7px 10px;\n color: var(--canvas-react-color-text, #263244);\n background: transparent;\n font: inherit;\n text-align: left;\n cursor: pointer;\n}\n.canvas-react-dropdown-item:hover,\n.canvas-react-dropdown-item:focus-visible {\n outline: none;\n background: var(--canvas-react-color-fill-secondary, #f5f7fa);\n}\n.canvas-react-dropdown-item:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n.canvas-react-dropdown-item-danger {\n color: var(--canvas-react-color-error, #dc2626);\n}\n.canvas-react-dropdown-item-icon {\n display: inline-flex;\n flex: 0 0 auto;\n}\n.canvas-react-dropdown-item-content {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 2px;\n}\n.canvas-react-dropdown-item-content small {\n color: var(--canvas-react-color-text-muted, #8993a2);\n font-size: 11px;\n}\n');
|
|
9335
|
+
function ReactDropdown(props) {
|
|
9336
|
+
const {
|
|
9337
|
+
children,
|
|
9338
|
+
className,
|
|
9339
|
+
defaultOpen = false,
|
|
9340
|
+
disabled = false,
|
|
9341
|
+
icon,
|
|
9342
|
+
items,
|
|
9343
|
+
onOpenChange,
|
|
9344
|
+
onSelect,
|
|
9345
|
+
open,
|
|
9346
|
+
placement = "bottomRight",
|
|
9347
|
+
popupClassName,
|
|
9348
|
+
popupStyle,
|
|
9349
|
+
triggerProps
|
|
9350
|
+
} = props;
|
|
9351
|
+
const anchorRef = useRef(null);
|
|
9352
|
+
const menuId = useCompatibleId("canvas-react-dropdown-menu");
|
|
9353
|
+
const [innerOpen, setInnerOpen] = useState(defaultOpen);
|
|
9354
|
+
const mergedOpen = (open ?? innerOpen) && !disabled;
|
|
9355
|
+
const hasChildren = children !== void 0 && children !== null && children !== false && children !== "";
|
|
9356
|
+
const setOpen = (next) => {
|
|
9357
|
+
if (open === void 0) setInnerOpen(next);
|
|
9358
|
+
if (next !== mergedOpen) onOpenChange?.(next);
|
|
9359
|
+
};
|
|
9360
|
+
useEffect(() => {
|
|
9361
|
+
if (!mergedOpen) return;
|
|
9362
|
+
const focusFirst = window.setTimeout(() => {
|
|
9363
|
+
document.getElementById(menuId)?.querySelector('[role="menuitem"]:not(:disabled)')?.focus();
|
|
9364
|
+
}, 0);
|
|
9365
|
+
return () => window.clearTimeout(focusFirst);
|
|
9366
|
+
}, [mergedOpen, menuId]);
|
|
9367
|
+
const handleMenuKeyDown = (event) => {
|
|
9368
|
+
if (event.key === "Escape") {
|
|
9369
|
+
event.stopPropagation();
|
|
9370
|
+
setOpen(false);
|
|
9371
|
+
anchorRef.current?.querySelector("button")?.focus();
|
|
9372
|
+
return;
|
|
9373
|
+
}
|
|
9374
|
+
if (event.key !== "ArrowDown" && event.key !== "ArrowUp" && event.key !== "Home" && event.key !== "End")
|
|
9375
|
+
return;
|
|
9376
|
+
const buttons = Array.from(
|
|
9377
|
+
event.currentTarget.querySelectorAll(
|
|
9378
|
+
'[role="menuitem"]:not(:disabled)'
|
|
9379
|
+
)
|
|
9380
|
+
);
|
|
9381
|
+
if (!buttons.length) return;
|
|
9382
|
+
event.preventDefault();
|
|
9383
|
+
const current = buttons.indexOf(
|
|
9384
|
+
document.activeElement
|
|
9385
|
+
);
|
|
9386
|
+
const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : event.key === "ArrowDown" ? (current + 1) % buttons.length : (current - 1 + buttons.length) % buttons.length;
|
|
9387
|
+
buttons[next]?.focus();
|
|
9388
|
+
};
|
|
9389
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
9390
|
+
/* @__PURE__ */ jsx(
|
|
9391
|
+
"span",
|
|
9392
|
+
{
|
|
9393
|
+
ref: anchorRef,
|
|
9394
|
+
className: joinClassNames(
|
|
9395
|
+
`${REACT_COMPONENT_PREFIX}-dropdown-trigger`,
|
|
9396
|
+
!hasChildren && `${REACT_COMPONENT_PREFIX}-dropdown-trigger-icon-only`,
|
|
9397
|
+
className
|
|
9398
|
+
),
|
|
9399
|
+
children: /* @__PURE__ */ jsxs(
|
|
9400
|
+
ReactButton,
|
|
9401
|
+
{
|
|
9402
|
+
...triggerProps,
|
|
9403
|
+
icon,
|
|
9404
|
+
disabled: disabled || triggerProps?.disabled,
|
|
9405
|
+
"aria-haspopup": "menu",
|
|
9406
|
+
"aria-controls": menuId,
|
|
9407
|
+
"aria-expanded": mergedOpen,
|
|
9408
|
+
onClick: () => setOpen(!mergedOpen),
|
|
9409
|
+
onKeyDown: (event) => {
|
|
9410
|
+
triggerProps?.onKeyDown?.(event);
|
|
9411
|
+
if (event.defaultPrevented) return;
|
|
9412
|
+
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
9413
|
+
event.preventDefault();
|
|
9414
|
+
setOpen(true);
|
|
9415
|
+
}
|
|
9416
|
+
},
|
|
9417
|
+
children: [
|
|
9418
|
+
children,
|
|
9419
|
+
hasChildren && /* @__PURE__ */ jsx(
|
|
9420
|
+
ReactDownOutlined,
|
|
9421
|
+
{
|
|
9422
|
+
className: `${REACT_COMPONENT_PREFIX}-dropdown-arrow`,
|
|
9423
|
+
"aria-hidden": "true"
|
|
9424
|
+
}
|
|
9425
|
+
)
|
|
9426
|
+
]
|
|
9427
|
+
}
|
|
9428
|
+
)
|
|
9429
|
+
}
|
|
9430
|
+
),
|
|
9431
|
+
/* @__PURE__ */ jsx(
|
|
9432
|
+
ReactPopup,
|
|
9433
|
+
{
|
|
9434
|
+
open: mergedOpen,
|
|
9435
|
+
anchorRef,
|
|
9436
|
+
placement,
|
|
9437
|
+
onOpenChange: setOpen,
|
|
9438
|
+
surfaceClassName: joinClassNames(
|
|
9439
|
+
`${REACT_COMPONENT_PREFIX}-dropdown-popup`,
|
|
9440
|
+
popupClassName
|
|
9441
|
+
),
|
|
9442
|
+
surfaceStyle: popupStyle,
|
|
9443
|
+
children: /* @__PURE__ */ jsx(
|
|
9444
|
+
"div",
|
|
9445
|
+
{
|
|
9446
|
+
id: menuId,
|
|
9447
|
+
className: `${REACT_COMPONENT_PREFIX}-dropdown-menu`,
|
|
9448
|
+
role: "menu",
|
|
9449
|
+
onKeyDown: handleMenuKeyDown,
|
|
9450
|
+
children: items.map((item) => /* @__PURE__ */ jsxs(
|
|
9451
|
+
"button",
|
|
9452
|
+
{
|
|
9453
|
+
type: "button",
|
|
9454
|
+
role: "menuitem",
|
|
9455
|
+
className: joinClassNames(
|
|
9456
|
+
`${REACT_COMPONENT_PREFIX}-dropdown-item`,
|
|
9457
|
+
item.danger && `${REACT_COMPONENT_PREFIX}-dropdown-item-danger`
|
|
9458
|
+
),
|
|
9459
|
+
disabled: item.disabled,
|
|
9460
|
+
draggable: item.draggable && !item.disabled,
|
|
9461
|
+
onDragStart: item.onDragStart,
|
|
9462
|
+
onPointerEnter: item.onPointerEnter,
|
|
9463
|
+
onClick: () => {
|
|
9464
|
+
onSelect?.(item.key);
|
|
9465
|
+
setOpen(false);
|
|
9466
|
+
anchorRef.current?.querySelector("button")?.focus();
|
|
9467
|
+
},
|
|
9468
|
+
children: [
|
|
9469
|
+
item.icon && /* @__PURE__ */ jsx(
|
|
9470
|
+
"span",
|
|
9471
|
+
{
|
|
9472
|
+
className: `${REACT_COMPONENT_PREFIX}-dropdown-item-icon`,
|
|
9473
|
+
"aria-hidden": "true",
|
|
9474
|
+
children: item.icon
|
|
9475
|
+
}
|
|
9476
|
+
),
|
|
9477
|
+
/* @__PURE__ */ jsxs(
|
|
9478
|
+
"span",
|
|
9479
|
+
{
|
|
9480
|
+
className: `${REACT_COMPONENT_PREFIX}-dropdown-item-content`,
|
|
9481
|
+
children: [
|
|
9482
|
+
/* @__PURE__ */ jsx("span", { children: item.label }),
|
|
9483
|
+
item.description && /* @__PURE__ */ jsx("small", { children: item.description })
|
|
9484
|
+
]
|
|
9485
|
+
}
|
|
9486
|
+
)
|
|
9487
|
+
]
|
|
9488
|
+
},
|
|
9489
|
+
item.key
|
|
9490
|
+
))
|
|
9491
|
+
}
|
|
9492
|
+
)
|
|
9493
|
+
}
|
|
9494
|
+
)
|
|
9495
|
+
] });
|
|
9496
|
+
}
|
|
9497
|
+
var VIEWPORT_MARGIN = 8;
|
|
9498
|
+
function clamp3(value, min, max) {
|
|
9499
|
+
return Math.max(min, Math.min(value, max));
|
|
9500
|
+
}
|
|
9501
|
+
function resolveTooltipLayout(params) {
|
|
9502
|
+
const {
|
|
9503
|
+
anchor,
|
|
9504
|
+
width,
|
|
9505
|
+
height,
|
|
9506
|
+
viewportWidth,
|
|
9507
|
+
viewportHeight,
|
|
9508
|
+
gap,
|
|
9509
|
+
arrowSize
|
|
9510
|
+
} = params;
|
|
9511
|
+
const centerX = anchor.x + anchor.width / 2;
|
|
9512
|
+
const centerY = anchor.y + anchor.height / 2;
|
|
9513
|
+
const right = anchor.x + anchor.width;
|
|
9514
|
+
const bottom = anchor.y + anchor.height;
|
|
9515
|
+
const room = {
|
|
9516
|
+
bottom: viewportHeight - VIEWPORT_MARGIN - bottom - gap,
|
|
9517
|
+
top: anchor.y - VIEWPORT_MARGIN - gap,
|
|
9518
|
+
right: viewportWidth - VIEWPORT_MARGIN - right - gap,
|
|
9519
|
+
left: anchor.x - VIEWPORT_MARGIN - gap
|
|
9520
|
+
};
|
|
9521
|
+
const choices = ["bottom", "top", "right", "left"];
|
|
9522
|
+
const placement = choices.find(
|
|
9523
|
+
(side) => room[side] >= (side === "bottom" || side === "top" ? height : width)
|
|
9524
|
+
) ?? choices.reduce(
|
|
9525
|
+
(best, side) => room[side] - (side === "bottom" || side === "top" ? height : width) > room[best] - (best === "bottom" || best === "top" ? height : width) ? side : best
|
|
9526
|
+
);
|
|
9527
|
+
const rawLeft = placement === "right" ? right + gap : placement === "left" ? anchor.x - width - gap : centerX - width / 2;
|
|
9528
|
+
const rawTop = placement === "bottom" ? bottom + gap : placement === "top" ? anchor.y - height - gap : centerY - height / 2;
|
|
9529
|
+
const left = clamp3(
|
|
9530
|
+
rawLeft,
|
|
9531
|
+
VIEWPORT_MARGIN,
|
|
9532
|
+
Math.max(VIEWPORT_MARGIN, viewportWidth - width - VIEWPORT_MARGIN)
|
|
9533
|
+
);
|
|
9534
|
+
const top = clamp3(
|
|
9535
|
+
rawTop,
|
|
9536
|
+
VIEWPORT_MARGIN,
|
|
9537
|
+
Math.max(VIEWPORT_MARGIN, viewportHeight - height - VIEWPORT_MARGIN)
|
|
9538
|
+
);
|
|
9539
|
+
const horizontal = placement === "bottom" || placement === "top";
|
|
9540
|
+
const available = horizontal ? width : height;
|
|
9541
|
+
const target = horizontal ? centerX - left : centerY - top;
|
|
9542
|
+
const arrowOffset = clamp3(
|
|
9543
|
+
target - arrowSize / 2,
|
|
9544
|
+
4,
|
|
9545
|
+
Math.max(4, available - arrowSize - 4)
|
|
9546
|
+
);
|
|
9547
|
+
return { left, top, placement, arrowOffset };
|
|
9548
|
+
}
|
|
9549
|
+
function ReactTooltip(props) {
|
|
9550
|
+
if ("request" in props) {
|
|
9551
|
+
return /* @__PURE__ */ jsx(ReactPositionedTooltip, { request: props.request });
|
|
9552
|
+
}
|
|
9553
|
+
return cloneElement(props.children, {
|
|
9554
|
+
title: typeof props.title === "string" ? props.title : void 0,
|
|
9555
|
+
"aria-label": typeof props.title === "string" ? props.title : void 0
|
|
9556
|
+
});
|
|
9557
|
+
}
|
|
9558
|
+
function ReactPositionedTooltip(props) {
|
|
9559
|
+
const { request } = props;
|
|
9560
|
+
const tooltipRef = useRef(null);
|
|
9561
|
+
const arrowRef = useRef(null);
|
|
9562
|
+
const zoom = typeof request?.contentZoom === "number" && Number.isFinite(request.contentZoom) && request.contentZoom > 0 ? request.contentZoom : 1;
|
|
9563
|
+
const arrowSize = 8 * zoom;
|
|
9564
|
+
useLayoutEffect(() => {
|
|
9565
|
+
const tooltip = tooltipRef.current;
|
|
9566
|
+
const arrow = arrowRef.current;
|
|
9567
|
+
if (!tooltip || !arrow || !request || typeof window === "undefined") return;
|
|
9568
|
+
const updateLayout = () => {
|
|
9569
|
+
const bounds = tooltip.getBoundingClientRect();
|
|
9570
|
+
const layout = resolveTooltipLayout({
|
|
9571
|
+
anchor: request.anchorRect ?? {
|
|
9572
|
+
x: request.x,
|
|
9573
|
+
y: request.y,
|
|
9574
|
+
width: 0,
|
|
9575
|
+
height: 0
|
|
9576
|
+
},
|
|
9577
|
+
width: bounds.width,
|
|
9578
|
+
height: bounds.height,
|
|
9579
|
+
viewportWidth: window.innerWidth,
|
|
9580
|
+
viewportHeight: window.innerHeight,
|
|
9581
|
+
gap: 6 * zoom,
|
|
9582
|
+
arrowSize
|
|
9583
|
+
});
|
|
9584
|
+
tooltip.style.left = `${layout.left}px`;
|
|
9585
|
+
tooltip.style.top = `${layout.top}px`;
|
|
9586
|
+
tooltip.dataset.placement = layout.placement;
|
|
9587
|
+
arrow.style.left = "";
|
|
9588
|
+
arrow.style.right = "";
|
|
9589
|
+
arrow.style.top = "";
|
|
9590
|
+
arrow.style.bottom = "";
|
|
9591
|
+
arrow.style.borderTop = "";
|
|
9592
|
+
arrow.style.borderRight = "";
|
|
9593
|
+
arrow.style.borderBottom = "";
|
|
9594
|
+
arrow.style.borderLeft = "";
|
|
9595
|
+
const arrowBorder = request.variant === "error" ? "1px solid rgba(255, 77, 79, 0.2)" : "none";
|
|
9596
|
+
if (layout.placement === "bottom" || layout.placement === "top") {
|
|
9597
|
+
arrow.style.left = `${layout.arrowOffset}px`;
|
|
9598
|
+
if (layout.placement === "bottom") {
|
|
9599
|
+
arrow.style.top = `${-arrowSize / 2}px`;
|
|
9600
|
+
arrow.style.borderTop = arrowBorder;
|
|
9601
|
+
arrow.style.borderLeft = arrowBorder;
|
|
9602
|
+
} else {
|
|
9603
|
+
arrow.style.bottom = `${-arrowSize / 2}px`;
|
|
9604
|
+
arrow.style.borderBottom = arrowBorder;
|
|
9605
|
+
arrow.style.borderRight = arrowBorder;
|
|
9606
|
+
}
|
|
9607
|
+
} else {
|
|
9608
|
+
arrow.style.top = `${layout.arrowOffset}px`;
|
|
9609
|
+
if (layout.placement === "right") {
|
|
9610
|
+
arrow.style.left = `${-arrowSize / 2}px`;
|
|
9611
|
+
arrow.style.borderLeft = arrowBorder;
|
|
9612
|
+
arrow.style.borderBottom = arrowBorder;
|
|
9613
|
+
} else {
|
|
9614
|
+
arrow.style.right = `${-arrowSize / 2}px`;
|
|
9615
|
+
arrow.style.borderTop = arrowBorder;
|
|
9616
|
+
arrow.style.borderRight = arrowBorder;
|
|
9617
|
+
}
|
|
9618
|
+
}
|
|
9619
|
+
};
|
|
9620
|
+
updateLayout();
|
|
9621
|
+
window.addEventListener("resize", updateLayout);
|
|
9622
|
+
return () => window.removeEventListener("resize", updateLayout);
|
|
9623
|
+
}, [request, arrowSize, zoom]);
|
|
9624
|
+
if (!request) return null;
|
|
9625
|
+
const fontSize = 14 * zoom;
|
|
9626
|
+
const paddingBlock = 6 * zoom;
|
|
9627
|
+
const paddingInline = 10 * zoom;
|
|
9628
|
+
const background = request.variant === "error" ? "#ffffff" : "rgba(17, 24, 39, 0.92)";
|
|
9629
|
+
const style = {
|
|
9630
|
+
position: "fixed",
|
|
9631
|
+
left: request.x,
|
|
9632
|
+
top: request.y,
|
|
9633
|
+
boxSizing: "border-box",
|
|
9634
|
+
maxWidth: request.variant === "resize" ? "calc(100vw - 16px)" : `min(${320 * zoom}px, calc(100vw - 16px))`,
|
|
9635
|
+
maxHeight: "calc(100vh - 16px)",
|
|
9636
|
+
padding: `${paddingBlock}px ${paddingInline}px`,
|
|
9637
|
+
borderRadius: 6 * zoom,
|
|
9638
|
+
background,
|
|
9639
|
+
color: request.variant === "error" ? "#ff4d4f" : "#fff",
|
|
9640
|
+
fontSize,
|
|
9641
|
+
lineHeight: 1.5,
|
|
9642
|
+
boxShadow: request.variant === "error" ? "0 10px 30px rgba(255, 77, 79, 0.16)" : "0 10px 30px rgba(15, 23, 42, 0.18)",
|
|
9643
|
+
border: request.variant === "error" ? "1px solid rgba(255, 77, 79, 0.2)" : "none",
|
|
9644
|
+
pointerEvents: "none",
|
|
9645
|
+
zIndex: 1200,
|
|
9646
|
+
whiteSpace: request.variant === "resize" ? "nowrap" : "pre-wrap",
|
|
9647
|
+
wordBreak: "break-word"
|
|
9648
|
+
};
|
|
9649
|
+
return /* @__PURE__ */ jsxs("div", { ref: tooltipRef, role: "tooltip", style, children: [
|
|
9650
|
+
/* @__PURE__ */ jsx(
|
|
9651
|
+
"span",
|
|
9652
|
+
{
|
|
9653
|
+
style: {
|
|
9654
|
+
display: "block",
|
|
9655
|
+
maxHeight: `calc(100vh - ${16 + 2 * paddingBlock + 2}px)`,
|
|
9656
|
+
overflow: "hidden",
|
|
9657
|
+
textOverflow: request.variant === "resize" ? "ellipsis" : void 0
|
|
9658
|
+
},
|
|
9659
|
+
children: request.content
|
|
9660
|
+
}
|
|
9661
|
+
),
|
|
9662
|
+
/* @__PURE__ */ jsx(
|
|
9663
|
+
"span",
|
|
9664
|
+
{
|
|
9665
|
+
ref: arrowRef,
|
|
9666
|
+
"aria-hidden": "true",
|
|
9667
|
+
style: {
|
|
9668
|
+
position: "absolute",
|
|
9669
|
+
width: arrowSize,
|
|
9670
|
+
height: arrowSize,
|
|
9671
|
+
boxSizing: "border-box",
|
|
9672
|
+
background,
|
|
9673
|
+
transform: "rotate(45deg)",
|
|
9674
|
+
pointerEvents: "none"
|
|
9675
|
+
}
|
|
9676
|
+
}
|
|
9677
|
+
)
|
|
9678
|
+
] });
|
|
9679
|
+
}
|
|
9680
|
+
|
|
9681
|
+
// src/components/tour/style.css
|
|
9682
|
+
styleInject(".canvas-react-tour {\n position: fixed;\n inset: 0;\n z-index: 1800;\n pointer-events: none;\n font-family: inherit;\n}\n.canvas-react-tour-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(15, 23, 42, 0.56);\n pointer-events: auto;\n}\n.canvas-react-tour-mask {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.canvas-react-tour-focus {\n position: absolute;\n border-radius: 8px;\n box-shadow: 0 0 0 2px #60a5fa, 0 0 0 5px rgba(96, 165, 250, 0.24);\n pointer-events: none;\n}\n.canvas-react-tour-focus-secondary {\n box-shadow: 0 0 0 3px #f59e0b, 0 0 0 7px rgba(245, 158, 11, 0.24);\n}\n.canvas-react-tour-card {\n position: absolute;\n box-sizing: border-box;\n width: min(360px, calc(100vw - 24px));\n max-height: calc(100vh - 24px);\n overflow: auto;\n padding: 16px;\n border: 1px solid #dbeafe;\n border-radius: 12px;\n background: #fff;\n color: #172033;\n box-shadow: 0 20px 50px rgba(15, 23, 42, 0.26);\n pointer-events: auto;\n transition: top 320ms cubic-bezier(0.22, 1, 0.36, 1), left 320ms cubic-bezier(0.22, 1, 0.36, 1);\n animation: canvas-react-tour-appear 220ms ease-out both;\n}\n.canvas-react-tour-card:focus {\n outline: none;\n}\n.canvas-react-tour-heading,\n.canvas-react-tour-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.canvas-react-tour-heading {\n justify-content: space-between;\n color: #64748b;\n font-size: 12px;\n}\n.canvas-react-tour-heading button {\n border: 0;\n background: transparent;\n color: #64748b;\n font-size: 22px;\n cursor: pointer;\n}\n.canvas-react-tour-card h3 {\n margin: 8px 0;\n font-size: 16px;\n line-height: 1.4;\n}\n.canvas-react-tour-content {\n animation: canvas-react-tour-content-enter 260ms ease-out both;\n}\n.canvas-react-tour-description {\n font-size: 13px;\n line-height: 1.65;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n.canvas-react-tour-progress {\n display: flex;\n gap: 4px;\n overflow-x: auto;\n padding: 16px 0;\n}\n.canvas-react-tour-progress button {\n flex: 0 0 16px;\n height: 5px;\n border: 0;\n border-radius: 5px;\n background: #cbd5e1;\n cursor: pointer;\n}\n.canvas-react-tour-progress button.active {\n background: #2563eb;\n}\n.canvas-react-tour-progress button {\n transition: background-color 220ms ease;\n}\n.canvas-react-tour-start-step {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 12px;\n color: #475569;\n font-size: 12px;\n}\n.canvas-react-tour-start-step input {\n box-sizing: border-box;\n width: 56px;\n height: 28px;\n padding: 2px 6px;\n border: 1px solid #cbd5e1;\n border-radius: 6px;\n background: #fff;\n color: #172033;\n font: inherit;\n text-align: center;\n}\n.canvas-react-tour-start-step input:focus-visible {\n outline: 2px solid #60a5fa;\n outline-offset: 1px;\n}\n.canvas-react-tour-actions {\n justify-content: flex-end;\n}\n.canvas-react-tour-actions button {\n padding: 5px 10px;\n border: 1px solid #cbd5e1;\n border-radius: 6px;\n background: #fff;\n color: #334155;\n cursor: pointer;\n}\n.canvas-react-tour-actions button:last-child {\n background: #2563eb;\n border-color: #2563eb;\n color: #fff;\n}\n.canvas-react-tour-actions button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n@keyframes canvas-react-tour-appear {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes canvas-react-tour-content-enter {\n from {\n opacity: 0;\n transform: translateY(5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-tour-card,\n .canvas-react-tour-content {\n animation: none;\n }\n .canvas-react-tour-card,\n .canvas-react-tour-progress button {\n transition: none;\n }\n}\n");
|
|
9683
|
+
function focusRect(rect, pad = 6) {
|
|
9684
|
+
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
9685
|
+
const left = Math.max(0, rect.left - pad);
|
|
9686
|
+
const top = Math.max(0, rect.top - pad);
|
|
9687
|
+
const right = Math.min(window.innerWidth, rect.left + rect.width + pad);
|
|
9688
|
+
const bottom = Math.min(window.innerHeight, rect.top + rect.height + pad);
|
|
9689
|
+
if (right <= left || bottom <= top) return null;
|
|
9690
|
+
return { left, top, width: right - left, height: bottom - top };
|
|
9691
|
+
}
|
|
9692
|
+
function collapsedRect(rect) {
|
|
9693
|
+
return {
|
|
9694
|
+
left: rect.left + rect.width / 2,
|
|
9695
|
+
top: rect.top + rect.height / 2,
|
|
9696
|
+
width: 0,
|
|
9697
|
+
height: 0
|
|
9698
|
+
};
|
|
9699
|
+
}
|
|
9700
|
+
function interpolateRect(from, to, progress) {
|
|
9701
|
+
if (!from && !to) return null;
|
|
9702
|
+
const start = from ?? collapsedRect(to);
|
|
9703
|
+
const end = to ?? collapsedRect(from);
|
|
9704
|
+
return {
|
|
9705
|
+
left: start.left + (end.left - start.left) * progress,
|
|
9706
|
+
top: start.top + (end.top - start.top) * progress,
|
|
9707
|
+
width: start.width + (end.width - start.width) * progress,
|
|
9708
|
+
height: start.height + (end.height - start.height) * progress
|
|
9709
|
+
};
|
|
9710
|
+
}
|
|
9711
|
+
function ReactTour(props) {
|
|
9712
|
+
const {
|
|
9713
|
+
open,
|
|
9714
|
+
steps,
|
|
9715
|
+
current,
|
|
9716
|
+
onChange,
|
|
9717
|
+
onClose,
|
|
9718
|
+
interval = 3e3,
|
|
9719
|
+
playing = false,
|
|
9720
|
+
onPlayingChange
|
|
9721
|
+
} = props;
|
|
9722
|
+
const cardRef = useRef(null);
|
|
9723
|
+
const maskId = useRef(
|
|
9724
|
+
`canvas-react-tour-mask-${Math.random().toString(36).slice(2)}`
|
|
9725
|
+
);
|
|
9726
|
+
const [geometry, setGeometry] = useState(null);
|
|
9727
|
+
const [displayFocus, setDisplayFocus] = useState({
|
|
9728
|
+
primary: null,
|
|
9729
|
+
secondary: null
|
|
9730
|
+
});
|
|
9731
|
+
const displayFocusRef = useRef(displayFocus);
|
|
9732
|
+
const previousStepRef = useRef(null);
|
|
9733
|
+
const animationRef = useRef(null);
|
|
9734
|
+
const [startStep, setStartStep] = useState(String(current + 1));
|
|
9735
|
+
const step = steps[current];
|
|
9736
|
+
useEffect(() => {
|
|
9737
|
+
if (open)
|
|
9738
|
+
setStartStep(
|
|
9739
|
+
String(
|
|
9740
|
+
current === steps.length - 1 && steps.length > 1 ? 1 : current + 1
|
|
9741
|
+
)
|
|
9742
|
+
);
|
|
9743
|
+
}, [open, current, steps.length]);
|
|
9744
|
+
const playFromSelectedStep = () => {
|
|
9745
|
+
if (playing) {
|
|
9746
|
+
onPlayingChange?.(false);
|
|
9747
|
+
return;
|
|
9748
|
+
}
|
|
9749
|
+
const value = Number(startStep);
|
|
9750
|
+
if (!Number.isInteger(value) || !startStep.trim()) return;
|
|
9751
|
+
const index = Math.min(steps.length - 1, Math.max(0, value - 1));
|
|
9752
|
+
setStartStep(String(index + 1));
|
|
9753
|
+
if (index !== current) onChange(index);
|
|
9754
|
+
onPlayingChange?.(true);
|
|
9755
|
+
};
|
|
9756
|
+
useLayoutEffect(() => {
|
|
9757
|
+
if (!open || !step) return;
|
|
9758
|
+
let pending;
|
|
9759
|
+
const update = (reveal = false) => {
|
|
9760
|
+
const target = typeof step.target === "string" ? document.querySelector(step.target) : step.target?.();
|
|
9761
|
+
let parent = target instanceof HTMLElement ? target.parentElement : null;
|
|
9762
|
+
let opened = false;
|
|
9763
|
+
while (parent) {
|
|
9764
|
+
if (parent.hidden && parent.previousElementSibling instanceof HTMLButtonElement) {
|
|
9765
|
+
parent.previousElementSibling.click();
|
|
9766
|
+
opened = true;
|
|
9767
|
+
}
|
|
9768
|
+
parent = parent.parentElement;
|
|
9769
|
+
}
|
|
9770
|
+
if (opened) {
|
|
9771
|
+
if (pending !== void 0) window.clearTimeout(pending);
|
|
9772
|
+
pending = window.setTimeout(() => update(true), 0);
|
|
9773
|
+
return;
|
|
9774
|
+
}
|
|
9775
|
+
if (reveal && target instanceof HTMLElement)
|
|
9776
|
+
target.scrollIntoView?.({ block: "nearest", inline: "nearest" });
|
|
9777
|
+
setGeometry({
|
|
9778
|
+
stepIndex: current,
|
|
9779
|
+
primary: focusRect(
|
|
9780
|
+
target instanceof HTMLElement ? target.getBoundingClientRect() : target ?? null
|
|
9781
|
+
),
|
|
9782
|
+
secondary: focusRect(props.highlightTarget?.() ?? null, 8)
|
|
9783
|
+
});
|
|
9784
|
+
};
|
|
9785
|
+
update(true);
|
|
9786
|
+
const refresh = () => update();
|
|
9787
|
+
window.addEventListener("resize", refresh);
|
|
9788
|
+
window.addEventListener("scroll", refresh, true);
|
|
9789
|
+
return () => {
|
|
9790
|
+
if (pending !== void 0) window.clearTimeout(pending);
|
|
9791
|
+
window.removeEventListener("resize", refresh);
|
|
9792
|
+
window.removeEventListener("scroll", refresh, true);
|
|
9793
|
+
};
|
|
9794
|
+
}, [open, step, current, props.highlightTarget]);
|
|
9795
|
+
useLayoutEffect(() => {
|
|
9796
|
+
if (animationRef.current !== null) {
|
|
9797
|
+
window.cancelAnimationFrame(animationRef.current);
|
|
9798
|
+
animationRef.current = null;
|
|
9799
|
+
}
|
|
9800
|
+
if (!open) {
|
|
9801
|
+
previousStepRef.current = null;
|
|
9802
|
+
displayFocusRef.current = { primary: null, secondary: null };
|
|
9803
|
+
setDisplayFocus(displayFocusRef.current);
|
|
9804
|
+
return;
|
|
9805
|
+
}
|
|
9806
|
+
if (!geometry || geometry.stepIndex !== current) return;
|
|
9807
|
+
const target = {
|
|
9808
|
+
primary: geometry.primary,
|
|
9809
|
+
secondary: geometry.secondary
|
|
9810
|
+
};
|
|
9811
|
+
const previousStep = previousStepRef.current;
|
|
9812
|
+
previousStepRef.current = current;
|
|
9813
|
+
if (previousStep === null || previousStep === current || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
|
|
9814
|
+
displayFocusRef.current = target;
|
|
9815
|
+
setDisplayFocus(target);
|
|
9816
|
+
return;
|
|
9817
|
+
}
|
|
9818
|
+
const start = displayFocusRef.current;
|
|
9819
|
+
let startedAt = null;
|
|
9820
|
+
const tick = (time) => {
|
|
9821
|
+
startedAt ?? (startedAt = time);
|
|
9822
|
+
const progress = Math.min(1, Math.max(0, (time - startedAt) / 320));
|
|
9823
|
+
const eased = 1 - Math.pow(1 - progress, 3);
|
|
9824
|
+
const next = {
|
|
9825
|
+
primary: interpolateRect(start.primary, target.primary, eased),
|
|
9826
|
+
secondary: interpolateRect(start.secondary, target.secondary, eased)
|
|
9827
|
+
};
|
|
9828
|
+
displayFocusRef.current = next;
|
|
9829
|
+
setDisplayFocus(next);
|
|
9830
|
+
if (progress < 1)
|
|
9831
|
+
animationRef.current = window.requestAnimationFrame(tick);
|
|
9832
|
+
else {
|
|
9833
|
+
animationRef.current = null;
|
|
9834
|
+
displayFocusRef.current = target;
|
|
9835
|
+
setDisplayFocus(target);
|
|
9836
|
+
}
|
|
9837
|
+
};
|
|
9838
|
+
animationRef.current = window.requestAnimationFrame(tick);
|
|
9839
|
+
return () => {
|
|
9840
|
+
if (animationRef.current !== null) {
|
|
9841
|
+
window.cancelAnimationFrame(animationRef.current);
|
|
9842
|
+
animationRef.current = null;
|
|
9843
|
+
}
|
|
9844
|
+
};
|
|
9845
|
+
}, [open, current, geometry]);
|
|
9846
|
+
useEffect(() => {
|
|
9847
|
+
if (!open || !playing || !step || steps.length < 2) return;
|
|
9848
|
+
const timer = window.setTimeout(
|
|
9849
|
+
() => {
|
|
9850
|
+
if (current >= steps.length - 1) onPlayingChange?.(false);
|
|
9851
|
+
else onChange(current + 1);
|
|
9852
|
+
},
|
|
9853
|
+
Math.max(500, interval)
|
|
9854
|
+
);
|
|
9855
|
+
return () => window.clearTimeout(timer);
|
|
9856
|
+
}, [
|
|
9857
|
+
open,
|
|
9858
|
+
playing,
|
|
9859
|
+
current,
|
|
9860
|
+
interval,
|
|
9861
|
+
steps.length,
|
|
9862
|
+
step,
|
|
9863
|
+
onChange,
|
|
9864
|
+
onPlayingChange
|
|
9865
|
+
]);
|
|
9866
|
+
useEffect(() => {
|
|
9867
|
+
if (!open) return;
|
|
9868
|
+
const onKeyDown = (event) => {
|
|
9869
|
+
if (event.key === "Escape") onClose();
|
|
9870
|
+
if (event.key === "ArrowLeft" && current > 0) onChange(current - 1);
|
|
9871
|
+
if (event.key === "ArrowRight" && current < steps.length - 1)
|
|
9872
|
+
onChange(current + 1);
|
|
9873
|
+
};
|
|
9874
|
+
window.addEventListener("keydown", onKeyDown);
|
|
9875
|
+
return () => window.removeEventListener("keydown", onKeyDown);
|
|
9876
|
+
}, [open, current, steps.length, onChange, onClose]);
|
|
9877
|
+
useEffect(() => {
|
|
9878
|
+
if (open) cardRef.current?.focus();
|
|
9879
|
+
}, [open]);
|
|
9880
|
+
if (!open || !step || typeof document === "undefined") return null;
|
|
9881
|
+
const focus = displayFocus.primary;
|
|
9882
|
+
const secondaryFocus = displayFocus.secondary;
|
|
9883
|
+
const cardFocus = geometry?.stepIndex === current ? geometry.primary : focus;
|
|
9884
|
+
const holes = [focus, secondaryFocus].filter(
|
|
9885
|
+
(value) => value !== null && value.width > 0 && value.height > 0
|
|
9886
|
+
);
|
|
9887
|
+
const placeBelow = !cardFocus || cardFocus.top + cardFocus.height + 280 < window.innerHeight;
|
|
9888
|
+
const side = cardFocus && cardFocus.height > 180 ? cardFocus.left + cardFocus.width + 382 < window.innerWidth ? "right" : cardFocus.left > 382 ? "left" : null : null;
|
|
9889
|
+
const top = side && cardFocus ? Math.max(12, Math.min(cardFocus.top, window.innerHeight - 280)) : cardFocus ? placeBelow ? cardFocus.top + cardFocus.height + 12 : Math.max(12, cardFocus.top - 272) : Math.max(12, (window.innerHeight - 260) / 2);
|
|
9890
|
+
const left = side && cardFocus ? side === "right" ? cardFocus.left + cardFocus.width + 12 : cardFocus.left - 372 : cardFocus ? Math.max(12, Math.min(cardFocus.left, window.innerWidth - 382)) : Math.max(12, (window.innerWidth - 360) / 2);
|
|
9891
|
+
return createPortal(
|
|
9892
|
+
/* @__PURE__ */ jsxs(
|
|
9893
|
+
"div",
|
|
9894
|
+
{
|
|
9895
|
+
className: `canvas-react-tour${props.className ? ` ${props.className}` : ""}`,
|
|
9896
|
+
children: [
|
|
9897
|
+
/* @__PURE__ */ jsx(
|
|
9898
|
+
"div",
|
|
9899
|
+
{
|
|
9900
|
+
className: "canvas-react-tour-backdrop",
|
|
9901
|
+
style: holes.length ? { background: "transparent" } : void 0,
|
|
9902
|
+
onClick: onClose,
|
|
9903
|
+
"aria-hidden": "true"
|
|
9904
|
+
}
|
|
9905
|
+
),
|
|
9906
|
+
holes.length ? /* @__PURE__ */ jsxs(
|
|
9907
|
+
"svg",
|
|
9908
|
+
{
|
|
9909
|
+
className: "canvas-react-tour-mask",
|
|
9910
|
+
"aria-hidden": "true",
|
|
9911
|
+
width: "100%",
|
|
9912
|
+
height: "100%",
|
|
9913
|
+
children: [
|
|
9914
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId.current, maskUnits: "userSpaceOnUse", children: [
|
|
9915
|
+
/* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white" }),
|
|
9916
|
+
[focus, secondaryFocus].map((hole, index) => /* @__PURE__ */ jsx(
|
|
9917
|
+
"rect",
|
|
9918
|
+
{
|
|
9919
|
+
"data-tour-mask-hole": index,
|
|
9920
|
+
x: hole?.left ?? 0,
|
|
9921
|
+
y: hole?.top ?? 0,
|
|
9922
|
+
width: hole?.width ?? 0,
|
|
9923
|
+
height: hole?.height ?? 0,
|
|
9924
|
+
rx: "8",
|
|
9925
|
+
fill: "black"
|
|
7357
9926
|
},
|
|
7358
|
-
|
|
9927
|
+
index
|
|
9928
|
+
))
|
|
9929
|
+
] }) }),
|
|
9930
|
+
/* @__PURE__ */ jsx(
|
|
9931
|
+
"rect",
|
|
9932
|
+
{
|
|
9933
|
+
width: "100%",
|
|
9934
|
+
height: "100%",
|
|
9935
|
+
fill: "rgba(15, 23, 42, 0.56)",
|
|
9936
|
+
mask: `url(#${maskId.current})`
|
|
7359
9937
|
}
|
|
7360
|
-
)
|
|
7361
|
-
|
|
9938
|
+
)
|
|
9939
|
+
]
|
|
9940
|
+
}
|
|
9941
|
+
) : null,
|
|
9942
|
+
focus ? /* @__PURE__ */ jsx(
|
|
9943
|
+
"div",
|
|
9944
|
+
{
|
|
9945
|
+
className: "canvas-react-tour-focus",
|
|
9946
|
+
style: focus,
|
|
9947
|
+
"aria-hidden": "true"
|
|
9948
|
+
}
|
|
9949
|
+
) : null,
|
|
9950
|
+
secondaryFocus ? /* @__PURE__ */ jsx(
|
|
9951
|
+
"div",
|
|
9952
|
+
{
|
|
9953
|
+
className: "canvas-react-tour-focus canvas-react-tour-focus-secondary",
|
|
9954
|
+
style: secondaryFocus,
|
|
9955
|
+
"aria-hidden": "true"
|
|
9956
|
+
}
|
|
9957
|
+
) : null,
|
|
9958
|
+
/* @__PURE__ */ jsxs(
|
|
9959
|
+
"div",
|
|
9960
|
+
{
|
|
9961
|
+
ref: cardRef,
|
|
9962
|
+
className: "canvas-react-tour-card",
|
|
9963
|
+
role: "dialog",
|
|
9964
|
+
"aria-modal": "true",
|
|
9965
|
+
"aria-label": "\u64CD\u4F5C\u6307\u5F15",
|
|
9966
|
+
tabIndex: -1,
|
|
9967
|
+
style: { top, left },
|
|
9968
|
+
children: [
|
|
9969
|
+
/* @__PURE__ */ jsxs("div", { className: "canvas-react-tour-heading", children: [
|
|
9970
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
9971
|
+
current + 1,
|
|
9972
|
+
" / ",
|
|
9973
|
+
steps.length
|
|
9974
|
+
] }),
|
|
9975
|
+
/* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": "\u5173\u95ED\u6307\u5F15", children: "\xD7" })
|
|
9976
|
+
] }),
|
|
9977
|
+
/* @__PURE__ */ jsxs("div", { className: "canvas-react-tour-content", children: [
|
|
9978
|
+
/* @__PURE__ */ jsx("h3", { children: step.title }),
|
|
9979
|
+
/* @__PURE__ */ jsx("div", { className: "canvas-react-tour-description", children: step.description })
|
|
9980
|
+
] }, current),
|
|
9981
|
+
/* @__PURE__ */ jsx("div", { className: "canvas-react-tour-progress", "aria-label": "\u6307\u5F15\u8FDB\u5EA6", children: steps.map((_, index) => /* @__PURE__ */ jsx(
|
|
7362
9982
|
"button",
|
|
7363
9983
|
{
|
|
7364
|
-
...restOkButtonProps,
|
|
7365
9984
|
type: "button",
|
|
7366
|
-
className:
|
|
7367
|
-
|
|
7368
|
-
|
|
7369
|
-
|
|
7370
|
-
|
|
7371
|
-
|
|
7372
|
-
|
|
7373
|
-
|
|
7374
|
-
|
|
7375
|
-
|
|
7376
|
-
|
|
7377
|
-
|
|
7378
|
-
|
|
7379
|
-
|
|
7380
|
-
|
|
7381
|
-
|
|
7382
|
-
|
|
7383
|
-
|
|
7384
|
-
|
|
7385
|
-
|
|
7386
|
-
|
|
7387
|
-
|
|
7388
|
-
|
|
9985
|
+
className: index === current ? "active" : "",
|
|
9986
|
+
"aria-label": `\u7B2C ${index + 1} \u6B65`,
|
|
9987
|
+
"aria-current": index === current ? "step" : void 0,
|
|
9988
|
+
onClick: () => onChange(index)
|
|
9989
|
+
},
|
|
9990
|
+
index
|
|
9991
|
+
)) }),
|
|
9992
|
+
onPlayingChange && steps.length > 1 ? /* @__PURE__ */ jsxs("label", { className: "canvas-react-tour-start-step", children: [
|
|
9993
|
+
"\u4ECE\u7B2C",
|
|
9994
|
+
/* @__PURE__ */ jsx(
|
|
9995
|
+
"input",
|
|
9996
|
+
{
|
|
9997
|
+
type: "number",
|
|
9998
|
+
min: 1,
|
|
9999
|
+
max: steps.length,
|
|
10000
|
+
step: 1,
|
|
10001
|
+
value: startStep,
|
|
10002
|
+
onChange: (event) => setStartStep(event.target.value),
|
|
10003
|
+
"aria-label": "\u64AD\u653E\u8D77\u59CB\u6B65\u9AA4"
|
|
10004
|
+
}
|
|
10005
|
+
),
|
|
10006
|
+
"/ ",
|
|
10007
|
+
steps.length,
|
|
10008
|
+
" \u6B65\u5F00\u59CB\u64AD\u653E"
|
|
10009
|
+
] }) : null,
|
|
10010
|
+
/* @__PURE__ */ jsxs("div", { className: "canvas-react-tour-actions", children: [
|
|
10011
|
+
/* @__PURE__ */ jsx(
|
|
10012
|
+
"button",
|
|
10013
|
+
{
|
|
10014
|
+
type: "button",
|
|
10015
|
+
disabled: current === 0,
|
|
10016
|
+
onClick: () => onChange(current - 1),
|
|
10017
|
+
children: "\u4E0A\u4E00\u6B65"
|
|
10018
|
+
}
|
|
10019
|
+
),
|
|
10020
|
+
onPlayingChange ? /* @__PURE__ */ jsx("button", { type: "button", onClick: playFromSelectedStep, children: playing ? "\u6682\u505C" : current === steps.length - 1 && startStep === "1" ? "\u91CD\u64AD" : "\u64AD\u653E" }) : null,
|
|
10021
|
+
/* @__PURE__ */ jsx(
|
|
10022
|
+
"button",
|
|
10023
|
+
{
|
|
10024
|
+
type: "button",
|
|
10025
|
+
onClick: () => current === steps.length - 1 ? onClose() : onChange(current + 1),
|
|
10026
|
+
children: current === steps.length - 1 ? "\u5B8C\u6210" : "\u4E0B\u4E00\u6B65"
|
|
10027
|
+
}
|
|
10028
|
+
)
|
|
10029
|
+
] })
|
|
10030
|
+
]
|
|
10031
|
+
}
|
|
10032
|
+
)
|
|
10033
|
+
]
|
|
7389
10034
|
}
|
|
7390
|
-
)
|
|
7391
|
-
|
|
7392
|
-
|
|
7393
|
-
function isPromiseLike2(value) {
|
|
7394
|
-
return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
|
|
10035
|
+
),
|
|
10036
|
+
document.fullscreenElement ?? document.body
|
|
10037
|
+
);
|
|
7395
10038
|
}
|
|
7396
10039
|
|
|
7397
10040
|
// src/components/quarter/style.css
|
|
@@ -8068,7 +10711,7 @@ function resolveResizablePanelSizes(params) {
|
|
|
8068
10711
|
safeBeforeMax - startBeforeSize,
|
|
8069
10712
|
startAfterSize - safeAfterMin
|
|
8070
10713
|
);
|
|
8071
|
-
const safeDelta =
|
|
10714
|
+
const safeDelta = clamp4(
|
|
8072
10715
|
Number.isFinite(delta) ? delta : 0,
|
|
8073
10716
|
minDelta,
|
|
8074
10717
|
maxDelta
|
|
@@ -8120,7 +10763,7 @@ function normalizeOptionalSize(value, minSize, maxSize) {
|
|
|
8120
10763
|
if (typeof value !== "number" || !Number.isFinite(value)) {
|
|
8121
10764
|
return void 0;
|
|
8122
10765
|
}
|
|
8123
|
-
return
|
|
10766
|
+
return clamp4(value, minSize, maxSize);
|
|
8124
10767
|
}
|
|
8125
10768
|
function normalizePositiveNumber(value, fallback) {
|
|
8126
10769
|
return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback;
|
|
@@ -8128,7 +10771,7 @@ function normalizePositiveNumber(value, fallback) {
|
|
|
8128
10771
|
function normalizeMaxSize(value, minSize) {
|
|
8129
10772
|
return typeof value === "number" && Number.isFinite(value) ? Math.max(value, minSize) : Number.POSITIVE_INFINITY;
|
|
8130
10773
|
}
|
|
8131
|
-
function
|
|
10774
|
+
function clamp4(value, min, max) {
|
|
8132
10775
|
if (min > max) {
|
|
8133
10776
|
return min;
|
|
8134
10777
|
}
|
|
@@ -8212,7 +10855,7 @@ function createCascaderSelection(options) {
|
|
|
8212
10855
|
}
|
|
8213
10856
|
|
|
8214
10857
|
// src/components/cascader/style.css
|
|
8215
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-cascader {\n width: 100%;\n min-width: 0;\n}\n.canvas-react-cascader > .canvas-react-input-affix-wrapper {\n width: 100%;\n}\n.canvas-react-cascader-menus {\n display: flex;\n max-width: calc(100vw - 24px);\n overflow: auto;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n}\n.canvas-react-cascader-menu {\n flex: 0 0 auto;\n min-width: 120px;\n max-width: 320px;\n max-height: min(256px, calc(100vh - 48px));\n overflow: auto;\n padding: 4px;\n}\n.canvas-react-cascader-menu + .canvas-react-cascader-menu {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-cascader-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 5px 10px;\n line-height: 22px;\n border-radius: var(--canvas-react-radius-sm);\n cursor: pointer;\n white-space: nowrap;\n}\n.canvas-react-cascader-check {\n display: inline-flex;\n flex: 0 0 auto;\n margin-right: -12px;\n}\n.canvas-react-cascader-check > * {\n pointer-events: none;\n}\n.canvas-react-cascader-option > span:not(.canvas-react-cascader-check):not(.canvas-react-cascader-chevron) {\n flex: 1;\n}\n.canvas-react-cascader-option[aria-selected=true] {\n color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-cascader-option[data-active=true] {\n background: var(--canvas-react-color-bg-hover, #f5f5f5);\n}\n.canvas-react-cascader-option[aria-disabled=true] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.canvas-react-cascader-empty {\n padding: 8px 10px;\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-cascader-chevron {\n width: 7px;\n height: 7px;\n flex: 0 0 auto;\n margin-left: 8px;\n border-top: 1.5px solid
|
|
10858
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-cascader {\n width: 100%;\n min-width: 0;\n}\n.canvas-react-cascader > .canvas-react-input-affix-wrapper {\n width: 100%;\n}\n.canvas-react-cascader-popup {\n --canvas-react-color-bg-hover: color-mix( in srgb, var(--canvas-react-color-primary) 10%, var(--canvas-react-color-bg) );\n --canvas-react-color-bg-active: color-mix( in srgb, var(--canvas-react-color-primary) 18%, var(--canvas-react-color-bg) );\n}\n.canvas-react-cascader-menus {\n display: flex;\n max-width: calc(100vw - 24px);\n overflow: auto;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n}\n.canvas-react-cascader-menu {\n flex: 0 0 auto;\n min-width: 120px;\n max-width: 320px;\n max-height: min(256px, calc(100vh - 48px));\n overflow: auto;\n padding: 4px;\n}\n.canvas-react-cascader-menu + .canvas-react-cascader-menu {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-cascader-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 5px 10px;\n line-height: 22px;\n border-radius: var(--canvas-react-radius-sm);\n cursor: pointer;\n white-space: nowrap;\n}\n.canvas-react-cascader-check {\n display: inline-flex;\n flex: 0 0 auto;\n margin-right: -12px;\n}\n.canvas-react-cascader-check > * {\n pointer-events: none;\n}\n.canvas-react-cascader-option > span:not(.canvas-react-cascader-check):not(.canvas-react-cascader-chevron) {\n flex: 1;\n}\n.canvas-react-cascader-option[aria-selected=true] {\n color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-cascader-option[data-active=true] {\n background: var(--canvas-react-color-bg-hover, #f5f5f5);\n}\n.canvas-react-cascader-option[aria-disabled=true] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.canvas-react-cascader-empty {\n padding: 8px 10px;\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-cascader-chevron {\n width: 7px;\n height: 7px;\n flex: 0 0 auto;\n margin-left: 8px;\n border-top: 1.5px solid var(--canvas-react-color-text-muted);\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg);\n transform-origin: center;\n transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.canvas-react-cascader-option:not([aria-disabled=true]):hover .canvas-react-cascader-chevron,\n.canvas-react-cascader-option[data-expanded=true] .canvas-react-cascader-chevron {\n border-color: var(--canvas-react-color-text);\n transform: rotate(135deg);\n}\n');
|
|
8216
10859
|
function resolvePath(options, value) {
|
|
8217
10860
|
const path = [];
|
|
8218
10861
|
for (const part of value) {
|
|
@@ -9582,6 +12225,91 @@ function compareTimeValue(left, right) {
|
|
|
9582
12225
|
const rightSeconds = Number(rightValue.hour) * 3600 + Number(rightValue.minute) * 60 + Number(rightValue.second);
|
|
9583
12226
|
return leftSeconds - rightSeconds;
|
|
9584
12227
|
}
|
|
12228
|
+
|
|
12229
|
+
// src/components/waterfall/style.css
|
|
12230
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-waterfall {\n display: block;\n direction: rtl;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n box-sizing: border-box;\n}\n.canvas-react-waterfall-item {\n direction: ltr;\n display: inline-block;\n width: 100%;\n break-inside: avoid;\n vertical-align: top;\n}\n.canvas-react-waterfall:has(.canvas-react-waterfall-rows) {\n overflow: hidden;\n direction: ltr;\n}\n.canvas-react-waterfall-rows {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n min-width: 100%;\n overflow: hidden;\n}\n.canvas-react-waterfall-track {\n display: flex;\n flex: 0 0 auto;\n gap: var(--canvas-react-waterfall-column-gap, 16px);\n min-height: 1px;\n min-width: 100%;\n width: max-content;\n animation: canvas-react-waterfall-scroll var(--canvas-react-waterfall-duration, 28s) linear infinite;\n will-change: transform;\n}\n.canvas-react-waterfall-copy {\n display: flex;\n flex: 0 0 auto;\n gap: var(--canvas-react-waterfall-column-gap, 16px);\n}\n.canvas-react-waterfall-copy > .canvas-react-waterfall-item {\n flex: 0 0 var(--canvas-react-waterfall-column-width, 280px);\n width: var(--canvas-react-waterfall-column-width, 280px);\n}\n@keyframes canvas-react-waterfall-scroll {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(calc(-50% - var(--canvas-react-waterfall-column-gap, 16px) / 2));\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-waterfall-track {\n animation: none;\n }\n}\n');
|
|
12231
|
+
function ReactWaterfall({
|
|
12232
|
+
columnWidth = 280,
|
|
12233
|
+
columnGap = 16,
|
|
12234
|
+
rowGap = 16,
|
|
12235
|
+
fill = "balance",
|
|
12236
|
+
animated = false,
|
|
12237
|
+
duration = 28,
|
|
12238
|
+
rows = 1,
|
|
12239
|
+
className,
|
|
12240
|
+
style,
|
|
12241
|
+
children,
|
|
12242
|
+
...props
|
|
12243
|
+
}) {
|
|
12244
|
+
return /* @__PURE__ */ jsx(
|
|
12245
|
+
"div",
|
|
12246
|
+
{
|
|
12247
|
+
...props,
|
|
12248
|
+
className: joinClassNames(
|
|
12249
|
+
`${REACT_COMPONENT_PREFIX}-waterfall`,
|
|
12250
|
+
className
|
|
12251
|
+
),
|
|
12252
|
+
style: {
|
|
12253
|
+
...animated ? {} : {
|
|
12254
|
+
columnWidth,
|
|
12255
|
+
columnGap,
|
|
12256
|
+
columnFill: fill
|
|
12257
|
+
},
|
|
12258
|
+
...typeof columnWidth === "number" ? { "--canvas-react-waterfall-column-width": `${columnWidth}px` } : {},
|
|
12259
|
+
...typeof columnGap === "number" ? { "--canvas-react-waterfall-column-gap": `${columnGap}px` } : {},
|
|
12260
|
+
...style
|
|
12261
|
+
},
|
|
12262
|
+
children: animated ? /* @__PURE__ */ jsx("div", { className: `${REACT_COMPONENT_PREFIX}-waterfall-rows`, children: buildRows(children, rows).map((row, rowIndex) => {
|
|
12263
|
+
const rowDuration = Array.isArray(duration) ? duration[rowIndex] ?? duration[duration.length - 1] ?? 28 : duration;
|
|
12264
|
+
return /* @__PURE__ */ jsx(
|
|
12265
|
+
"div",
|
|
12266
|
+
{
|
|
12267
|
+
className: `${REACT_COMPONENT_PREFIX}-waterfall-track`,
|
|
12268
|
+
style: {
|
|
12269
|
+
marginBlockEnd: rowGap,
|
|
12270
|
+
"--canvas-react-waterfall-duration": `${rowDuration}s`
|
|
12271
|
+
},
|
|
12272
|
+
children: [0, 1].map((copy) => /* @__PURE__ */ jsx(
|
|
12273
|
+
"div",
|
|
12274
|
+
{
|
|
12275
|
+
className: `${REACT_COMPONENT_PREFIX}-waterfall-copy`,
|
|
12276
|
+
children: row.map((child, itemIndex) => /* @__PURE__ */ jsx(
|
|
12277
|
+
"div",
|
|
12278
|
+
{
|
|
12279
|
+
className: `${REACT_COMPONENT_PREFIX}-waterfall-item`,
|
|
12280
|
+
children: child
|
|
12281
|
+
},
|
|
12282
|
+
`${copy}-${itemIndex}`
|
|
12283
|
+
))
|
|
12284
|
+
},
|
|
12285
|
+
copy
|
|
12286
|
+
))
|
|
12287
|
+
},
|
|
12288
|
+
`row-${rowIndex}`
|
|
12289
|
+
);
|
|
12290
|
+
}) }) : Children.map(children, (child) => /* @__PURE__ */ jsx(
|
|
12291
|
+
"div",
|
|
12292
|
+
{
|
|
12293
|
+
className: `${REACT_COMPONENT_PREFIX}-waterfall-item`,
|
|
12294
|
+
style: { marginBlockEnd: rowGap },
|
|
12295
|
+
children: child
|
|
12296
|
+
}
|
|
12297
|
+
))
|
|
12298
|
+
}
|
|
12299
|
+
);
|
|
12300
|
+
}
|
|
12301
|
+
function buildRows(children, rowCount) {
|
|
12302
|
+
const items = Children.toArray(children);
|
|
12303
|
+
const safeRowCount = Math.max(
|
|
12304
|
+
1,
|
|
12305
|
+
Math.min(Math.floor(rowCount) || 1, items.length || 1)
|
|
12306
|
+
);
|
|
12307
|
+
const rows = Array.from({ length: safeRowCount }, () => []);
|
|
12308
|
+
items.forEach((item, index) => {
|
|
12309
|
+
rows[index % safeRowCount]?.push(item);
|
|
12310
|
+
});
|
|
12311
|
+
return rows;
|
|
12312
|
+
}
|
|
9585
12313
|
var ReactYearPicker = forwardRef(
|
|
9586
12314
|
function ReactYearPicker2(props, ref) {
|
|
9587
12315
|
const {
|
|
@@ -9907,4 +12635,351 @@ function resolveDecadeStart6(year) {
|
|
|
9907
12635
|
return Math.floor(year / 10) * 10;
|
|
9908
12636
|
}
|
|
9909
12637
|
|
|
9910
|
-
|
|
12638
|
+
// src/components/collapse-panel/style.css
|
|
12639
|
+
styleInject(".canvas-react-collapse-panel {\n min-width: 0;\n}\n.canvas-react-collapse-panel-trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: 600;\n text-align: start;\n cursor: pointer;\n}\n.canvas-react-collapse-panel-trigger:hover {\n background: rgba(148, 163, 184, 0.08);\n}\n.canvas-react-collapse-panel-trigger:focus-visible {\n outline: 2px solid #1677ff;\n outline-offset: -2px;\n}\n.canvas-react-collapse-panel-trigger:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.canvas-react-collapse-panel-title {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.canvas-react-collapse-panel-icon {\n flex-shrink: 0;\n transition: transform 160ms ease;\n}\n.canvas-react-collapse-panel-trigger[aria-expanded=true] .canvas-react-collapse-panel-icon {\n transform: rotate(90deg);\n}\n.canvas-react-collapse-panel-content {\n padding: 0 12px 12px;\n min-width: 0;\n}\n.canvas-react-collapse-panel-content[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-collapse-panel-icon {\n transition: none;\n }\n}\n.canvas-react-collapse-motion {\n display: grid;\n grid-template-rows: 0fr;\n visibility: hidden;\n transition: grid-template-rows 180ms ease, visibility 0s linear 180ms;\n}\n.canvas-react-collapse-motion.is-open {\n grid-template-rows: 1fr;\n visibility: visible;\n transition: grid-template-rows 180ms ease, visibility 0s;\n}\n.canvas-react-collapse-motion-inner {\n min-height: 0;\n overflow: hidden;\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-collapse-motion {\n transition: none;\n }\n}\n");
|
|
12640
|
+
function ReactCollapsePanel({
|
|
12641
|
+
title,
|
|
12642
|
+
open,
|
|
12643
|
+
defaultOpen = false,
|
|
12644
|
+
disabled = false,
|
|
12645
|
+
onOpenChange,
|
|
12646
|
+
className,
|
|
12647
|
+
contentClassName,
|
|
12648
|
+
children,
|
|
12649
|
+
...rest
|
|
12650
|
+
}) {
|
|
12651
|
+
const [internalOpen, setInternalOpen] = useState(defaultOpen);
|
|
12652
|
+
const expanded = open ?? internalOpen;
|
|
12653
|
+
const prefix = `${REACT_COMPONENT_PREFIX}-collapse-panel`;
|
|
12654
|
+
return /* @__PURE__ */ jsxs("section", { ...rest, className: joinClassNames(prefix, className), children: [
|
|
12655
|
+
/* @__PURE__ */ jsxs(
|
|
12656
|
+
"button",
|
|
12657
|
+
{
|
|
12658
|
+
type: "button",
|
|
12659
|
+
className: `${prefix}-trigger`,
|
|
12660
|
+
"aria-expanded": expanded,
|
|
12661
|
+
disabled,
|
|
12662
|
+
onClick: () => {
|
|
12663
|
+
if (open === void 0) setInternalOpen(!expanded);
|
|
12664
|
+
onOpenChange?.(!expanded);
|
|
12665
|
+
},
|
|
12666
|
+
children: [
|
|
12667
|
+
/* @__PURE__ */ jsx(ReactRightOutlined, { "aria-hidden": "true", className: `${prefix}-icon` }),
|
|
12668
|
+
/* @__PURE__ */ jsx("span", { className: `${prefix}-title`, children: title })
|
|
12669
|
+
]
|
|
12670
|
+
}
|
|
12671
|
+
),
|
|
12672
|
+
/* @__PURE__ */ jsx(
|
|
12673
|
+
"div",
|
|
12674
|
+
{
|
|
12675
|
+
hidden: !expanded,
|
|
12676
|
+
className: joinClassNames(`${prefix}-content`, contentClassName),
|
|
12677
|
+
children
|
|
12678
|
+
}
|
|
12679
|
+
)
|
|
12680
|
+
] });
|
|
12681
|
+
}
|
|
12682
|
+
|
|
12683
|
+
// src/components/sortable-list/style.css
|
|
12684
|
+
styleInject("body.canvas-react-sorting,\nbody.canvas-react-sorting * {\n cursor: grabbing !important;\n user-select: none !important;\n}\n.canvas-react-sortable-dragging {\n opacity: 0.28;\n}\n.canvas-react-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n overflow: hidden;\n animation: canvas-sort-lift 140ms ease-out;\n}\n@keyframes canvas-sort-lift {\n from {\n opacity: 0.5;\n transform: scale(0.98);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-sort-overlay {\n animation: none;\n }\n [data-sortable-key] {\n transition: none !important;\n }\n}\n");
|
|
12685
|
+
function resolvePortalContainer(host) {
|
|
12686
|
+
const doc = host?.ownerDocument ?? document;
|
|
12687
|
+
const fullscreen = doc.fullscreenElement;
|
|
12688
|
+
return fullscreen instanceof HTMLElement && host && fullscreen.contains(host) ? fullscreen : doc.body;
|
|
12689
|
+
}
|
|
12690
|
+
function ReactSortableList(props) {
|
|
12691
|
+
const { items, onOrderChange } = props;
|
|
12692
|
+
const virtualRef = useRef(null);
|
|
12693
|
+
const rootRef = useRef(null);
|
|
12694
|
+
const dragRef = useRef(null);
|
|
12695
|
+
const [dragState, setDragState] = useState(null);
|
|
12696
|
+
useEffect(
|
|
12697
|
+
() => () => {
|
|
12698
|
+
document.body.classList.remove("canvas-react-sorting");
|
|
12699
|
+
},
|
|
12700
|
+
[]
|
|
12701
|
+
);
|
|
12702
|
+
useEffect(() => {
|
|
12703
|
+
if (!dragState) return;
|
|
12704
|
+
const scrollContainer = props.virtual ? virtualRef.current?.element : props.scrollContainerRef?.current;
|
|
12705
|
+
let frameId = 0;
|
|
12706
|
+
let lastTime = null;
|
|
12707
|
+
const updateTarget = () => {
|
|
12708
|
+
const current = dragRef.current;
|
|
12709
|
+
if (!current || !current.active) return;
|
|
12710
|
+
const target = resolveClosestSortableItem({
|
|
12711
|
+
items,
|
|
12712
|
+
parentKey: current.source.parentKey,
|
|
12713
|
+
layouts: current.layouts,
|
|
12714
|
+
// 保留拖拽开始时的布局，补偿滚动位移，避免受行交换动画影响。
|
|
12715
|
+
overlayCenterY: current.pointerY - current.offsetY + current.height / 2 + current.rootTop - (props.virtual ? (virtualRef.current?.element?.getBoundingClientRect().top ?? current.rootTop) - (virtualRef.current?.element?.scrollTop ?? 0) : rootRef.current?.getBoundingClientRect().top ?? current.rootTop)
|
|
12716
|
+
});
|
|
12717
|
+
if (target) {
|
|
12718
|
+
current.target = target;
|
|
12719
|
+
}
|
|
12720
|
+
setDragState({
|
|
12721
|
+
active: current.active,
|
|
12722
|
+
sourceKey: current.source.key,
|
|
12723
|
+
targetKey: current.target.key,
|
|
12724
|
+
pointerY: current.pointerY
|
|
12725
|
+
});
|
|
12726
|
+
};
|
|
12727
|
+
const handleMove = (event) => {
|
|
12728
|
+
const current = dragRef.current;
|
|
12729
|
+
if (!current || event.pointerId !== current.pointerId) return;
|
|
12730
|
+
if (!current.active) {
|
|
12731
|
+
if (Math.hypot(
|
|
12732
|
+
event.clientX - current.startX,
|
|
12733
|
+
event.clientY - current.startY
|
|
12734
|
+
) < (props.dragThreshold ?? 4))
|
|
12735
|
+
return;
|
|
12736
|
+
current.active = true;
|
|
12737
|
+
document.body.classList.add("canvas-react-sorting");
|
|
12738
|
+
props.onDragStart?.(current.source);
|
|
12739
|
+
}
|
|
12740
|
+
current.pointerY = event.clientY;
|
|
12741
|
+
updateTarget();
|
|
12742
|
+
};
|
|
12743
|
+
const tick = (time) => {
|
|
12744
|
+
const current = dragRef.current;
|
|
12745
|
+
if (!current) return;
|
|
12746
|
+
const elapsed = lastTime == null ? 0 : Math.min(time - lastTime, 50);
|
|
12747
|
+
lastTime = time;
|
|
12748
|
+
if (scrollContainer && current.active) {
|
|
12749
|
+
const rect = scrollContainer.getBoundingClientRect();
|
|
12750
|
+
const top = rect.top + scrollContainer.clientTop;
|
|
12751
|
+
const height = scrollContainer.clientHeight;
|
|
12752
|
+
const edge = Math.min(40, height / 2);
|
|
12753
|
+
const bottom = top + height;
|
|
12754
|
+
const direction = edge <= 0 ? 0 : current.pointerY < top + edge ? -Math.min(1, (top + edge - current.pointerY) / edge) : current.pointerY > bottom - edge ? Math.min(1, (current.pointerY - bottom + edge) / edge) : 0;
|
|
12755
|
+
if (direction) {
|
|
12756
|
+
scrollContainer.scrollTop = Math.max(
|
|
12757
|
+
0,
|
|
12758
|
+
Math.min(
|
|
12759
|
+
scrollContainer.scrollHeight - height,
|
|
12760
|
+
scrollContainer.scrollTop + direction * elapsed * 0.5
|
|
12761
|
+
)
|
|
12762
|
+
);
|
|
12763
|
+
updateTarget();
|
|
12764
|
+
}
|
|
12765
|
+
}
|
|
12766
|
+
frameId = requestAnimationFrame(tick);
|
|
12767
|
+
};
|
|
12768
|
+
const finish = (commit) => {
|
|
12769
|
+
const current = dragRef.current;
|
|
12770
|
+
cancelAnimationFrame(frameId);
|
|
12771
|
+
if (commit && current?.active && current.source.key !== current.target.key) {
|
|
12772
|
+
const siblings = items.filter(
|
|
12773
|
+
(item) => item.parentKey === current.source.parentKey
|
|
12774
|
+
);
|
|
12775
|
+
const orderedKeys = resolveNextSortableOrder(
|
|
12776
|
+
siblings.map((item) => item.key),
|
|
12777
|
+
current.source.key,
|
|
12778
|
+
current.target.key
|
|
12779
|
+
);
|
|
12780
|
+
if (orderedKeys) {
|
|
12781
|
+
onOrderChange(current.source.parentKey, orderedKeys);
|
|
12782
|
+
}
|
|
12783
|
+
}
|
|
12784
|
+
dragRef.current = null;
|
|
12785
|
+
setDragState(null);
|
|
12786
|
+
document.body.classList.remove("canvas-react-sorting");
|
|
12787
|
+
};
|
|
12788
|
+
if (props.disabled || !items.some((item) => item.key === dragRef.current?.source.key)) {
|
|
12789
|
+
finish(false);
|
|
12790
|
+
return;
|
|
12791
|
+
}
|
|
12792
|
+
const handleEnd = (event) => {
|
|
12793
|
+
if (event.pointerId !== dragRef.current?.pointerId) return;
|
|
12794
|
+
handleMove(event);
|
|
12795
|
+
finish(true);
|
|
12796
|
+
};
|
|
12797
|
+
const handleCancel = (event) => {
|
|
12798
|
+
if (event.pointerId === dragRef.current?.pointerId) finish(false);
|
|
12799
|
+
};
|
|
12800
|
+
const handleBlur = () => finish(false);
|
|
12801
|
+
const handleKey = (event) => {
|
|
12802
|
+
if (event.key === "Escape") {
|
|
12803
|
+
event.preventDefault();
|
|
12804
|
+
finish(false);
|
|
12805
|
+
}
|
|
12806
|
+
};
|
|
12807
|
+
frameId = requestAnimationFrame(tick);
|
|
12808
|
+
scrollContainer?.addEventListener("scroll", updateTarget);
|
|
12809
|
+
window.addEventListener("pointermove", handleMove);
|
|
12810
|
+
window.addEventListener("pointerup", handleEnd);
|
|
12811
|
+
window.addEventListener("pointercancel", handleCancel);
|
|
12812
|
+
window.addEventListener("blur", handleBlur);
|
|
12813
|
+
window.addEventListener("keydown", handleKey);
|
|
12814
|
+
return () => {
|
|
12815
|
+
cancelAnimationFrame(frameId);
|
|
12816
|
+
scrollContainer?.removeEventListener("scroll", updateTarget);
|
|
12817
|
+
window.removeEventListener("pointermove", handleMove);
|
|
12818
|
+
window.removeEventListener("pointerup", handleEnd);
|
|
12819
|
+
window.removeEventListener("pointercancel", handleCancel);
|
|
12820
|
+
window.removeEventListener("blur", handleBlur);
|
|
12821
|
+
window.removeEventListener("keydown", handleKey);
|
|
12822
|
+
};
|
|
12823
|
+
}, [
|
|
12824
|
+
dragState != null,
|
|
12825
|
+
items,
|
|
12826
|
+
onOrderChange,
|
|
12827
|
+
props.scrollContainerRef,
|
|
12828
|
+
props.disabled
|
|
12829
|
+
]);
|
|
12830
|
+
const sourceIndex = dragState?.active ? items.findIndex((item) => item.key === dragState.sourceKey) : -1;
|
|
12831
|
+
const targetIndex = dragState?.active ? items.findIndex((item) => item.key === dragState.targetKey) : -1;
|
|
12832
|
+
const renderRow = (item, index, position) => {
|
|
12833
|
+
const style = resolveSortableTransform(
|
|
12834
|
+
index,
|
|
12835
|
+
sourceIndex,
|
|
12836
|
+
targetIndex,
|
|
12837
|
+
dragRef.current?.height ?? 0
|
|
12838
|
+
);
|
|
12839
|
+
return /* @__PURE__ */ jsx(
|
|
12840
|
+
"div",
|
|
12841
|
+
{
|
|
12842
|
+
"data-sortable-key": item.key,
|
|
12843
|
+
className: dragState?.active && dragState.sourceKey === item.key ? "canvas-react-sortable-dragging" : "",
|
|
12844
|
+
style: { ...position, ...style },
|
|
12845
|
+
children: props.renderItem(item, {
|
|
12846
|
+
onPointerDown: (event) => {
|
|
12847
|
+
if (props.disabled || event.button !== 0 || dragRef.current) return;
|
|
12848
|
+
const row = event.currentTarget.closest(
|
|
12849
|
+
"[data-sortable-key]"
|
|
12850
|
+
);
|
|
12851
|
+
if (!row) return;
|
|
12852
|
+
const rect = row.getBoundingClientRect();
|
|
12853
|
+
dragRef.current = {
|
|
12854
|
+
active: false,
|
|
12855
|
+
startX: event.clientX,
|
|
12856
|
+
startY: event.clientY,
|
|
12857
|
+
source: item,
|
|
12858
|
+
target: item,
|
|
12859
|
+
layouts: props.virtual ? items.map((entry, i) => ({
|
|
12860
|
+
key: entry.key,
|
|
12861
|
+
centerY: (virtualRef.current?.element?.getBoundingClientRect().top ?? 0) - (virtualRef.current?.element?.scrollTop ?? 0) + (i + 0.5) * props.virtual.itemHeight
|
|
12862
|
+
})) : collectSortableItemLayouts(rootRef.current),
|
|
12863
|
+
offsetY: event.clientY - rect.top,
|
|
12864
|
+
width: rect.width,
|
|
12865
|
+
left: rect.left,
|
|
12866
|
+
height: rect.height,
|
|
12867
|
+
pointerId: event.pointerId,
|
|
12868
|
+
pointerY: event.clientY,
|
|
12869
|
+
rootTop: props.virtual ? (virtualRef.current?.element?.getBoundingClientRect().top ?? 0) - (virtualRef.current?.element?.scrollTop ?? 0) : rootRef.current?.getBoundingClientRect().top ?? 0
|
|
12870
|
+
};
|
|
12871
|
+
setDragState({
|
|
12872
|
+
active: false,
|
|
12873
|
+
sourceKey: item.key,
|
|
12874
|
+
targetKey: item.key,
|
|
12875
|
+
pointerY: event.clientY
|
|
12876
|
+
});
|
|
12877
|
+
event.preventDefault();
|
|
12878
|
+
}
|
|
12879
|
+
})
|
|
12880
|
+
},
|
|
12881
|
+
item.key
|
|
12882
|
+
);
|
|
12883
|
+
};
|
|
12884
|
+
return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: props.className, children: [
|
|
12885
|
+
props.virtual ? /* @__PURE__ */ jsx(
|
|
12886
|
+
ReactVirtualList,
|
|
12887
|
+
{
|
|
12888
|
+
ref: virtualRef,
|
|
12889
|
+
items,
|
|
12890
|
+
height: props.virtual.height,
|
|
12891
|
+
itemHeight: props.virtual.itemHeight,
|
|
12892
|
+
overscan: props.virtual.overscan ?? 6,
|
|
12893
|
+
itemKey: (item) => item.key,
|
|
12894
|
+
renderItem: (item, index, meta) => renderRow(item, index, meta.style)
|
|
12895
|
+
}
|
|
12896
|
+
) : items.map((item, index) => renderRow(item, index)),
|
|
12897
|
+
dragState?.active && dragRef.current ? createPortal(
|
|
12898
|
+
/* @__PURE__ */ jsx(
|
|
12899
|
+
"div",
|
|
12900
|
+
{
|
|
12901
|
+
className: "canvas-react-sort-overlay",
|
|
12902
|
+
"aria-hidden": "true",
|
|
12903
|
+
style: {
|
|
12904
|
+
left: dragRef.current.left,
|
|
12905
|
+
top: dragState.pointerY - dragRef.current.offsetY,
|
|
12906
|
+
width: dragRef.current.width,
|
|
12907
|
+
height: dragRef.current.height
|
|
12908
|
+
},
|
|
12909
|
+
children: props.renderItem(dragRef.current.source, {
|
|
12910
|
+
onPointerDown: (event) => event.preventDefault()
|
|
12911
|
+
})
|
|
12912
|
+
}
|
|
12913
|
+
),
|
|
12914
|
+
resolvePortalContainer(rootRef.current)
|
|
12915
|
+
) : null
|
|
12916
|
+
] });
|
|
12917
|
+
}
|
|
12918
|
+
function resolveNextSortableOrder(currentKeys, sourceKey, targetKey) {
|
|
12919
|
+
const sourceIndex = currentKeys.indexOf(sourceKey);
|
|
12920
|
+
const targetIndex = currentKeys.indexOf(targetKey);
|
|
12921
|
+
if (sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) {
|
|
12922
|
+
return null;
|
|
12923
|
+
}
|
|
12924
|
+
const nextKeys = [...currentKeys];
|
|
12925
|
+
const [source] = nextKeys.splice(sourceIndex, 1);
|
|
12926
|
+
nextKeys.splice(targetIndex, 0, source);
|
|
12927
|
+
return nextKeys;
|
|
12928
|
+
}
|
|
12929
|
+
function collectSortableItemLayouts(root) {
|
|
12930
|
+
if (!root) return [];
|
|
12931
|
+
return Array.from(
|
|
12932
|
+
root.querySelectorAll(":scope > [data-sortable-key]")
|
|
12933
|
+
).map((element) => {
|
|
12934
|
+
const rect = element.getBoundingClientRect();
|
|
12935
|
+
return {
|
|
12936
|
+
key: element.dataset.sortableKey ?? "",
|
|
12937
|
+
centerY: rect.top + rect.height / 2
|
|
12938
|
+
};
|
|
12939
|
+
});
|
|
12940
|
+
}
|
|
12941
|
+
function resolveClosestSortableItem(params) {
|
|
12942
|
+
let closestItem = null;
|
|
12943
|
+
let closestDistance = Number.POSITIVE_INFINITY;
|
|
12944
|
+
const itemsByKey = new Map(params.items.map((item) => [item.key, item]));
|
|
12945
|
+
params.layouts.forEach((layout) => {
|
|
12946
|
+
const item = itemsByKey.get(layout.key);
|
|
12947
|
+
if (!item || item.parentKey !== params.parentKey) return;
|
|
12948
|
+
const distance = Math.abs(params.overlayCenterY - layout.centerY);
|
|
12949
|
+
if (distance < closestDistance) {
|
|
12950
|
+
closestDistance = distance;
|
|
12951
|
+
closestItem = item;
|
|
12952
|
+
}
|
|
12953
|
+
});
|
|
12954
|
+
return closestItem;
|
|
12955
|
+
}
|
|
12956
|
+
function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
|
|
12957
|
+
let translateY = 0;
|
|
12958
|
+
if (sourceIndex < targetIndex && index > sourceIndex && index <= targetIndex) {
|
|
12959
|
+
translateY = -height;
|
|
12960
|
+
} else if (sourceIndex > targetIndex && index >= targetIndex && index < sourceIndex) {
|
|
12961
|
+
translateY = height;
|
|
12962
|
+
}
|
|
12963
|
+
return {
|
|
12964
|
+
transform: translateY ? `translate3d(0, ${translateY}px, 0)` : void 0,
|
|
12965
|
+
transition: sourceIndex >= 0 ? "transform 180ms ease" : void 0
|
|
12966
|
+
};
|
|
12967
|
+
}
|
|
12968
|
+
function ReactCollapseMotion({
|
|
12969
|
+
open,
|
|
12970
|
+
children
|
|
12971
|
+
}) {
|
|
12972
|
+
return /* @__PURE__ */ jsx(
|
|
12973
|
+
"div",
|
|
12974
|
+
{
|
|
12975
|
+
className: `canvas-react-collapse-motion${open ? " is-open" : ""}`,
|
|
12976
|
+
"aria-hidden": !open,
|
|
12977
|
+
ref: (node) => {
|
|
12978
|
+
node?.toggleAttribute("inert", !open);
|
|
12979
|
+
},
|
|
12980
|
+
children: /* @__PURE__ */ jsx("div", { className: "canvas-react-collapse-motion-inner", children })
|
|
12981
|
+
}
|
|
12982
|
+
);
|
|
12983
|
+
}
|
|
12984
|
+
|
|
12985
|
+
export { ReactAccountBookFilled as AccountBookFilled, ReactAccountBookOutlined as AccountBookOutlined, ReactAccountBookTwoTone as AccountBookTwoTone, ReactAimOutlined as AimOutlined, ReactAlertFilled as AlertFilled, ReactAlertOutlined as AlertOutlined, ReactAlertTwoTone as AlertTwoTone, ReactAlibabaOutlined as AlibabaOutlined, ReactAlignCenterOutlined as AlignCenterOutlined, ReactAlignLeftOutlined as AlignLeftOutlined, ReactAlignRightOutlined as AlignRightOutlined, ReactAlipayCircleFilled as AlipayCircleFilled, ReactAlipayCircleOutlined as AlipayCircleOutlined, ReactAlipayOutlined as AlipayOutlined, ReactAlipaySquareFilled as AlipaySquareFilled, ReactAliwangwangFilled as AliwangwangFilled, ReactAliwangwangOutlined as AliwangwangOutlined, ReactAliyunOutlined as AliyunOutlined, ReactAmazonCircleFilled as AmazonCircleFilled, ReactAmazonOutlined as AmazonOutlined, ReactAmazonSquareFilled as AmazonSquareFilled, ReactAndroidFilled as AndroidFilled, ReactAndroidOutlined as AndroidOutlined, ReactAntCloudOutlined as AntCloudOutlined, ReactAntDesignOutlined as AntDesignOutlined, ReactAnthropicFilled as AnthropicFilled, ReactApartmentOutlined as ApartmentOutlined, ReactApiFilled as ApiFilled, ReactApiOutlined as ApiOutlined, ReactApiTwoTone as ApiTwoTone, ReactAppleFilled as AppleFilled, ReactAppleOutlined as AppleOutlined, ReactAppstoreAddOutlined as AppstoreAddOutlined, ReactAppstoreFilled as AppstoreFilled, ReactAppstoreOutlined as AppstoreOutlined, ReactAppstoreTwoTone as AppstoreTwoTone, ReactAreaChartOutlined as AreaChartOutlined, ReactArrowDownOutlined as ArrowDownOutlined, ReactArrowLeftOutlined as ArrowLeftOutlined, ReactArrowRightOutlined as ArrowRightOutlined, ReactArrowUpOutlined as ArrowUpOutlined, ReactArrowsAltOutlined as ArrowsAltOutlined, ReactAudioFilled as AudioFilled, ReactAudioMutedOutlined as AudioMutedOutlined, ReactAudioOutlined as AudioOutlined, ReactAudioTwoTone as AudioTwoTone, ReactAuditOutlined as AuditOutlined, ReactBackwardFilled as BackwardFilled, ReactBackwardOutlined as BackwardOutlined, ReactBaiduOutlined as BaiduOutlined, ReactBankFilled as BankFilled, ReactBankOutlined as BankOutlined, ReactBankTwoTone as BankTwoTone, ReactBarChartOutlined as BarChartOutlined, ReactBarcodeOutlined as BarcodeOutlined, ReactBarsOutlined as BarsOutlined, ReactBehanceCircleFilled as BehanceCircleFilled, ReactBehanceOutlined as BehanceOutlined, ReactBehanceSquareFilled as BehanceSquareFilled, ReactBehanceSquareOutlined as BehanceSquareOutlined, ReactBellFilled as BellFilled, ReactBellOutlined as BellOutlined, ReactBellTwoTone as BellTwoTone, ReactBgColorsOutlined as BgColorsOutlined, ReactBilibiliFilled as BilibiliFilled, ReactBilibiliOutlined as BilibiliOutlined, ReactBlockOutlined as BlockOutlined, ReactBoldOutlined as BoldOutlined, ReactBookFilled as BookFilled, ReactBookOutlined as BookOutlined, ReactBookTwoTone as BookTwoTone, ReactBorderBottomOutlined as BorderBottomOutlined, ReactBorderHorizontalOutlined as BorderHorizontalOutlined, ReactBorderInnerOutlined as BorderInnerOutlined, ReactBorderLeftOutlined as BorderLeftOutlined, ReactBorderOuterOutlined as BorderOuterOutlined, ReactBorderOutlined as BorderOutlined, ReactBorderRightOutlined as BorderRightOutlined, ReactBorderTopOutlined as BorderTopOutlined, ReactBorderVerticleOutlined as BorderVerticleOutlined, ReactBorderlessTableOutlined as BorderlessTableOutlined, ReactBoxPlotFilled as BoxPlotFilled, ReactBoxPlotOutlined as BoxPlotOutlined, ReactBoxPlotTwoTone as BoxPlotTwoTone, ReactBranchesOutlined as BranchesOutlined, ReactBugFilled as BugFilled, ReactBugOutlined as BugOutlined, ReactBugTwoTone as BugTwoTone, ReactBuildFilled as BuildFilled, ReactBuildOutlined as BuildOutlined, ReactBuildTwoTone as BuildTwoTone, ReactBulbFilled as BulbFilled, ReactBulbOutlined as BulbOutlined, ReactBulbTwoTone as BulbTwoTone, ReactCalculatorFilled as CalculatorFilled, ReactCalculatorOutlined as CalculatorOutlined, ReactCalculatorTwoTone as CalculatorTwoTone, ReactCalendarFilled as CalendarFilled, ReactCalendarOutlined as CalendarOutlined, ReactCalendarTwoTone as CalendarTwoTone, ReactCameraFilled as CameraFilled, ReactCameraOutlined as CameraOutlined, ReactCameraTwoTone as CameraTwoTone, ReactCarFilled as CarFilled, ReactCarOutlined as CarOutlined, ReactCarTwoTone as CarTwoTone, ReactCaretDownFilled as CaretDownFilled, ReactCaretDownOutlined as CaretDownOutlined, ReactCaretLeftFilled as CaretLeftFilled, ReactCaretLeftOutlined as CaretLeftOutlined, ReactCaretRightFilled as CaretRightFilled, ReactCaretRightOutlined as CaretRightOutlined, ReactCaretUpFilled as CaretUpFilled, ReactCaretUpOutlined as CaretUpOutlined, ReactCarryOutFilled as CarryOutFilled, ReactCarryOutOutlined as CarryOutOutlined, ReactCarryOutTwoTone as CarryOutTwoTone, ReactCheckCircleFilled as CheckCircleFilled, ReactCheckCircleOutlined as CheckCircleOutlined, ReactCheckCircleTwoTone as CheckCircleTwoTone, ReactCheckOutlined as CheckOutlined, ReactCheckSquareFilled as CheckSquareFilled, ReactCheckSquareOutlined as CheckSquareOutlined, ReactCheckSquareTwoTone as CheckSquareTwoTone, ReactChromeFilled as ChromeFilled, ReactChromeOutlined as ChromeOutlined, ReactCiCircleFilled as CiCircleFilled, ReactCiCircleOutlined as CiCircleOutlined, ReactCiCircleTwoTone as CiCircleTwoTone, ReactCiOutlined as CiOutlined, ReactCiTwoTone as CiTwoTone, ReactClaudeFilled as ClaudeFilled, ReactClearOutlined as ClearOutlined, ReactClockCircleFilled as ClockCircleFilled, ReactClockCircleOutlined as ClockCircleOutlined, ReactClockCircleTwoTone as ClockCircleTwoTone, ReactCloseCircleFilled as CloseCircleFilled, ReactCloseCircleOutlined as CloseCircleOutlined, ReactCloseCircleTwoTone as CloseCircleTwoTone, ReactCloseOutlined as CloseOutlined, ReactCloseSquareFilled as CloseSquareFilled, ReactCloseSquareOutlined as CloseSquareOutlined, ReactCloseSquareTwoTone as CloseSquareTwoTone, ReactCloudDownloadOutlined as CloudDownloadOutlined, ReactCloudFilled as CloudFilled, ReactCloudOutlined as CloudOutlined, ReactCloudServerOutlined as CloudServerOutlined, ReactCloudSyncOutlined as CloudSyncOutlined, ReactCloudTwoTone as CloudTwoTone, ReactCloudUploadOutlined as CloudUploadOutlined, ReactClusterOutlined as ClusterOutlined, ReactCodeFilled as CodeFilled, ReactCodeOutlined as CodeOutlined, ReactCodeSandboxCircleFilled as CodeSandboxCircleFilled, ReactCodeSandboxOutlined as CodeSandboxOutlined, ReactCodeSandboxSquareFilled as CodeSandboxSquareFilled, ReactCodeTwoTone as CodeTwoTone, ReactCodepenCircleFilled as CodepenCircleFilled, ReactCodepenCircleOutlined as CodepenCircleOutlined, ReactCodepenOutlined as CodepenOutlined, ReactCodepenSquareFilled as CodepenSquareFilled, ReactCoffeeOutlined as CoffeeOutlined, ReactColumnHeightOutlined as ColumnHeightOutlined, ReactColumnWidthOutlined as ColumnWidthOutlined, ReactCommentOutlined as CommentOutlined, ReactCompassFilled as CompassFilled, ReactCompassOutlined as CompassOutlined, ReactCompassTwoTone as CompassTwoTone, ReactCompressOutlined as CompressOutlined, ReactConfigProvider as ConfigProvider, ReactConsoleSqlOutlined as ConsoleSqlOutlined, ReactContactsFilled as ContactsFilled, ReactContactsOutlined as ContactsOutlined, ReactContactsTwoTone as ContactsTwoTone, ReactContainerFilled as ContainerFilled, ReactContainerOutlined as ContainerOutlined, ReactContainerTwoTone as ContainerTwoTone, ReactControlFilled as ControlFilled, ReactControlOutlined as ControlOutlined, ReactControlTwoTone as ControlTwoTone, ReactCopyFilled as CopyFilled, ReactCopyOutlined as CopyOutlined, ReactCopyTwoTone as CopyTwoTone, ReactCopyrightCircleFilled as CopyrightCircleFilled, ReactCopyrightCircleOutlined as CopyrightCircleOutlined, ReactCopyrightCircleTwoTone as CopyrightCircleTwoTone, ReactCopyrightOutlined as CopyrightOutlined, ReactCopyrightTwoTone as CopyrightTwoTone, ReactCreditCardFilled as CreditCardFilled, ReactCreditCardOutlined as CreditCardOutlined, ReactCreditCardTwoTone as CreditCardTwoTone, ReactCrownFilled as CrownFilled, ReactCrownOutlined as CrownOutlined, ReactCrownTwoTone as CrownTwoTone, ReactCustomerServiceFilled as CustomerServiceFilled, ReactCustomerServiceOutlined as CustomerServiceOutlined, ReactCustomerServiceTwoTone as CustomerServiceTwoTone, ReactDashOutlined as DashOutlined, ReactDashboardFilled as DashboardFilled, ReactDashboardOutlined as DashboardOutlined, ReactDashboardTwoTone as DashboardTwoTone, ReactDatabaseFilled as DatabaseFilled, ReactDatabaseOutlined as DatabaseOutlined, ReactDatabaseTwoTone as DatabaseTwoTone, ReactDeepSeekFilled as DeepSeekFilled, ReactDeleteColumnOutlined as DeleteColumnOutlined, ReactDeleteFilled as DeleteFilled, ReactDeleteOutlined as DeleteOutlined, ReactDeleteRowOutlined as DeleteRowOutlined, ReactDeleteTwoTone as DeleteTwoTone, ReactDeliveredProcedureOutlined as DeliveredProcedureOutlined, ReactDeploymentUnitOutlined as DeploymentUnitOutlined, ReactDesktopOutlined as DesktopOutlined, ReactDiffFilled as DiffFilled, ReactDiffOutlined as DiffOutlined, ReactDiffTwoTone as DiffTwoTone, ReactDingdingOutlined as DingdingOutlined, ReactDingtalkCircleFilled as DingtalkCircleFilled, ReactDingtalkOutlined as DingtalkOutlined, ReactDingtalkSquareFilled as DingtalkSquareFilled, ReactDisconnectOutlined as DisconnectOutlined, ReactDiscordFilled as DiscordFilled, ReactDiscordOutlined as DiscordOutlined, ReactDislikeFilled as DislikeFilled, ReactDislikeOutlined as DislikeOutlined, ReactDislikeTwoTone as DislikeTwoTone, ReactDockerOutlined as DockerOutlined, ReactDollarCircleFilled as DollarCircleFilled, ReactDollarCircleOutlined as DollarCircleOutlined, ReactDollarCircleTwoTone as DollarCircleTwoTone, ReactDollarOutlined as DollarOutlined, ReactDollarTwoTone as DollarTwoTone, ReactDotChartOutlined as DotChartOutlined, ReactDotNetOutlined as DotNetOutlined, ReactDoubleLeftOutlined as DoubleLeftOutlined, ReactDoubleRightOutlined as DoubleRightOutlined, ReactDownCircleFilled as DownCircleFilled, ReactDownCircleOutlined as DownCircleOutlined, ReactDownCircleTwoTone as DownCircleTwoTone, ReactDownOutlined as DownOutlined, ReactDownSquareFilled as DownSquareFilled, ReactDownSquareOutlined as DownSquareOutlined, ReactDownSquareTwoTone as DownSquareTwoTone, ReactDownloadOutlined as DownloadOutlined, ReactDragOutlined as DragOutlined, ReactDribbbleCircleFilled as DribbbleCircleFilled, ReactDribbbleOutlined as DribbbleOutlined, ReactDribbbleSquareFilled as DribbbleSquareFilled, ReactDribbbleSquareOutlined as DribbbleSquareOutlined, ReactDropboxCircleFilled as DropboxCircleFilled, ReactDropboxOutlined as DropboxOutlined, ReactDropboxSquareFilled as DropboxSquareFilled, ReactEditFilled as EditFilled, ReactEditOutlined as EditOutlined, ReactEditTwoTone as EditTwoTone, ReactElevenLabsFilled as ElevenLabsFilled, ReactEllipsisOutlined as EllipsisOutlined, ReactEnterOutlined as EnterOutlined, ReactEnvironmentFilled as EnvironmentFilled, ReactEnvironmentOutlined as EnvironmentOutlined, ReactEnvironmentTwoTone as EnvironmentTwoTone, ReactEuroCircleFilled as EuroCircleFilled, ReactEuroCircleOutlined as EuroCircleOutlined, ReactEuroCircleTwoTone as EuroCircleTwoTone, ReactEuroOutlined as EuroOutlined, ReactEuroTwoTone as EuroTwoTone, ReactExceptionOutlined as ExceptionOutlined, ReactExclamationCircleFilled as ExclamationCircleFilled, ReactExclamationCircleOutlined as ExclamationCircleOutlined, ReactExclamationCircleTwoTone as ExclamationCircleTwoTone, ReactExclamationOutlined as ExclamationOutlined, ReactExpandAltOutlined as ExpandAltOutlined, ReactExpandOutlined as ExpandOutlined, ReactExperimentFilled as ExperimentFilled, ReactExperimentOutlined as ExperimentOutlined, ReactExperimentTwoTone as ExperimentTwoTone, ReactExportOutlined as ExportOutlined, ReactEyeFilled as EyeFilled, ReactEyeInvisibleFilled as EyeInvisibleFilled, ReactEyeInvisibleOutlined as EyeInvisibleOutlined, ReactEyeInvisibleTwoTone as EyeInvisibleTwoTone, ReactEyeOutlined as EyeOutlined, ReactEyeTwoTone as EyeTwoTone, ReactFacebookFilled as FacebookFilled, ReactFacebookOutlined as FacebookOutlined, ReactFallOutlined as FallOutlined, ReactFastBackwardFilled as FastBackwardFilled, ReactFastBackwardOutlined as FastBackwardOutlined, ReactFastForwardFilled as FastForwardFilled, ReactFastForwardOutlined as FastForwardOutlined, ReactFieldBinaryOutlined as FieldBinaryOutlined, ReactFieldNumberOutlined as FieldNumberOutlined, ReactFieldStringOutlined as FieldStringOutlined, ReactFieldTimeOutlined as FieldTimeOutlined, ReactFileAddFilled as FileAddFilled, ReactFileAddOutlined as FileAddOutlined, ReactFileAddTwoTone as FileAddTwoTone, ReactFileDoneOutlined as FileDoneOutlined, ReactFileExcelFilled as FileExcelFilled, ReactFileExcelOutlined as FileExcelOutlined, ReactFileExcelTwoTone as FileExcelTwoTone, ReactFileExclamationFilled as FileExclamationFilled, ReactFileExclamationOutlined as FileExclamationOutlined, ReactFileExclamationTwoTone as FileExclamationTwoTone, ReactFileFilled as FileFilled, ReactFileGifOutlined as FileGifOutlined, ReactFileImageFilled as FileImageFilled, ReactFileImageOutlined as FileImageOutlined, ReactFileImageTwoTone as FileImageTwoTone, ReactFileJpgOutlined as FileJpgOutlined, ReactFileMarkdownFilled as FileMarkdownFilled, ReactFileMarkdownOutlined as FileMarkdownOutlined, ReactFileMarkdownTwoTone as FileMarkdownTwoTone, ReactFileOutlined as FileOutlined, ReactFilePdfFilled as FilePdfFilled, ReactFilePdfOutlined as FilePdfOutlined, ReactFilePdfTwoTone as FilePdfTwoTone, ReactFilePptFilled as FilePptFilled, ReactFilePptOutlined as FilePptOutlined, ReactFilePptTwoTone as FilePptTwoTone, ReactFileProtectOutlined as FileProtectOutlined, ReactFileSearchOutlined as FileSearchOutlined, ReactFileSyncOutlined as FileSyncOutlined, ReactFileTextFilled as FileTextFilled, ReactFileTextOutlined as FileTextOutlined, ReactFileTextTwoTone as FileTextTwoTone, ReactFileTwoTone as FileTwoTone, ReactFileUnknownFilled as FileUnknownFilled, ReactFileUnknownOutlined as FileUnknownOutlined, ReactFileUnknownTwoTone as FileUnknownTwoTone, ReactFileWordFilled as FileWordFilled, ReactFileWordOutlined as FileWordOutlined, ReactFileWordTwoTone as FileWordTwoTone, ReactFileZipFilled as FileZipFilled, ReactFileZipOutlined as FileZipOutlined, ReactFileZipTwoTone as FileZipTwoTone, ReactFilterFilled as FilterFilled, ReactFilterOutlined as FilterOutlined, ReactFilterTwoTone as FilterTwoTone, ReactFireFilled as FireFilled, ReactFireOutlined as FireOutlined, ReactFireTwoTone as FireTwoTone, ReactFlagFilled as FlagFilled, ReactFlagOutlined as FlagOutlined, ReactFlagTwoTone as FlagTwoTone, ReactFolderAddFilled as FolderAddFilled, ReactFolderAddOutlined as FolderAddOutlined, ReactFolderAddTwoTone as FolderAddTwoTone, ReactFolderFilled as FolderFilled, ReactFolderOpenFilled as FolderOpenFilled, ReactFolderOpenOutlined as FolderOpenOutlined, ReactFolderOpenTwoTone as FolderOpenTwoTone, ReactFolderOutlined as FolderOutlined, ReactFolderTwoTone as FolderTwoTone, ReactFolderViewOutlined as FolderViewOutlined, ReactFontColorsOutlined as FontColorsOutlined, ReactFontSizeOutlined as FontSizeOutlined, ReactForkOutlined as ForkOutlined, ReactFormOutlined as FormOutlined, ReactFormatPainterFilled as FormatPainterFilled, ReactFormatPainterOutlined as FormatPainterOutlined, ReactForwardFilled as ForwardFilled, ReactForwardOutlined as ForwardOutlined, ReactFrownFilled as FrownFilled, ReactFrownOutlined as FrownOutlined, ReactFrownTwoTone as FrownTwoTone, ReactFullscreenExitOutlined as FullscreenExitOutlined, ReactFullscreenOutlined as FullscreenOutlined, ReactFunctionOutlined as FunctionOutlined, ReactFundFilled as FundFilled, ReactFundOutlined as FundOutlined, ReactFundProjectionScreenOutlined as FundProjectionScreenOutlined, ReactFundTwoTone as FundTwoTone, ReactFundViewOutlined as FundViewOutlined, ReactFunnelPlotFilled as FunnelPlotFilled, ReactFunnelPlotOutlined as FunnelPlotOutlined, ReactFunnelPlotTwoTone as FunnelPlotTwoTone, ReactGatewayOutlined as GatewayOutlined, ReactGeminiFilled as GeminiFilled, ReactGifOutlined as GifOutlined, ReactGiftFilled as GiftFilled, ReactGiftOutlined as GiftOutlined, ReactGiftTwoTone as GiftTwoTone, ReactGithubFilled as GithubFilled, ReactGithubOutlined as GithubOutlined, ReactGitlabFilled as GitlabFilled, ReactGitlabOutlined as GitlabOutlined, ReactGlobalOutlined as GlobalOutlined, ReactGoldFilled as GoldFilled, ReactGoldOutlined as GoldOutlined, ReactGoldTwoTone as GoldTwoTone, ReactGoldenFilled as GoldenFilled, ReactGoogleCircleFilled as GoogleCircleFilled, ReactGoogleOutlined as GoogleOutlined, ReactGooglePlusCircleFilled as GooglePlusCircleFilled, ReactGooglePlusOutlined as GooglePlusOutlined, ReactGooglePlusSquareFilled as GooglePlusSquareFilled, ReactGoogleSquareFilled as GoogleSquareFilled, ReactGroupOutlined as GroupOutlined, ReactHarmonyOSOutlined as HarmonyOSOutlined, ReactHddFilled as HddFilled, ReactHddOutlined as HddOutlined, ReactHddTwoTone as HddTwoTone, ReactHeartFilled as HeartFilled, ReactHeartOutlined as HeartOutlined, ReactHeartTwoTone as HeartTwoTone, ReactHeatMapOutlined as HeatMapOutlined, ReactHighlightFilled as HighlightFilled, ReactHighlightOutlined as HighlightOutlined, ReactHighlightTwoTone as HighlightTwoTone, ReactHistoryOutlined as HistoryOutlined, ReactHolderOutlined as HolderOutlined, ReactHomeFilled as HomeFilled, ReactHomeOutlined as HomeOutlined, ReactHomeTwoTone as HomeTwoTone, ReactHourglassFilled as HourglassFilled, ReactHourglassOutlined as HourglassOutlined, ReactHourglassTwoTone as HourglassTwoTone, ReactHtml5Filled as Html5Filled, ReactHtml5Outlined as Html5Outlined, ReactHtml5TwoTone as Html5TwoTone, ReactHuggingFaceFilled as HuggingFaceFilled, ReactIdcardFilled as IdcardFilled, ReactIdcardOutlined as IdcardOutlined, ReactIdcardTwoTone as IdcardTwoTone, ReactIeCircleFilled as IeCircleFilled, ReactIeOutlined as IeOutlined, ReactIeSquareFilled as IeSquareFilled, ReactImportOutlined as ImportOutlined, ReactInboxOutlined as InboxOutlined, ReactInfoCircleFilled as InfoCircleFilled, ReactInfoCircleOutlined as InfoCircleOutlined, ReactInfoCircleTwoTone as InfoCircleTwoTone, ReactInfoOutlined as InfoOutlined, ReactInsertRowAboveOutlined as InsertRowAboveOutlined, ReactInsertRowBelowOutlined as InsertRowBelowOutlined, ReactInsertRowLeftOutlined as InsertRowLeftOutlined, ReactInsertRowRightOutlined as InsertRowRightOutlined, ReactInstagramFilled as InstagramFilled, ReactInstagramOutlined as InstagramOutlined, ReactInsuranceFilled as InsuranceFilled, ReactInsuranceOutlined as InsuranceOutlined, ReactInsuranceTwoTone as InsuranceTwoTone, ReactInteractionFilled as InteractionFilled, ReactInteractionOutlined as InteractionOutlined, ReactInteractionTwoTone as InteractionTwoTone, ReactIssuesCloseOutlined as IssuesCloseOutlined, ReactItalicOutlined as ItalicOutlined, ReactJavaOutlined as JavaOutlined, ReactJavaScriptOutlined as JavaScriptOutlined, ReactKeyOutlined as KeyOutlined, ReactKubernetesOutlined as KubernetesOutlined, ReactLaptopOutlined as LaptopOutlined, ReactLayoutFilled as LayoutFilled, ReactLayoutOutlined as LayoutOutlined, ReactLayoutTwoTone as LayoutTwoTone, ReactLeftCircleFilled as LeftCircleFilled, ReactLeftCircleOutlined as LeftCircleOutlined, ReactLeftCircleTwoTone as LeftCircleTwoTone, ReactLeftOutlined as LeftOutlined, ReactLeftSquareFilled as LeftSquareFilled, ReactLeftSquareOutlined as LeftSquareOutlined, ReactLeftSquareTwoTone as LeftSquareTwoTone, ReactLikeFilled as LikeFilled, ReactLikeOutlined as LikeOutlined, ReactLikeTwoTone as LikeTwoTone, ReactLineChartOutlined as LineChartOutlined, ReactLineHeightOutlined as LineHeightOutlined, ReactLineOutlined as LineOutlined, ReactLinkOutlined as LinkOutlined, ReactLinkedinFilled as LinkedinFilled, ReactLinkedinOutlined as LinkedinOutlined, ReactLinuxOutlined as LinuxOutlined, ReactLoading3QuartersOutlined as Loading3QuartersOutlined, ReactLoadingOutlined as LoadingOutlined, ReactLockFilled as LockFilled, ReactLockOutlined as LockOutlined, ReactLockTwoTone as LockTwoTone, ReactLoginOutlined as LoginOutlined, ReactLogoutOutlined as LogoutOutlined, ReactMacCommandFilled as MacCommandFilled, ReactMacCommandOutlined as MacCommandOutlined, ReactMailFilled as MailFilled, ReactMailOutlined as MailOutlined, ReactMailTwoTone as MailTwoTone, ReactManOutlined as ManOutlined, ReactMastodonFilled as MastodonFilled, ReactMedicineBoxFilled as MedicineBoxFilled, ReactMedicineBoxOutlined as MedicineBoxOutlined, ReactMedicineBoxTwoTone as MedicineBoxTwoTone, ReactMediumCircleFilled as MediumCircleFilled, ReactMediumOutlined as MediumOutlined, ReactMediumSquareFilled as MediumSquareFilled, ReactMediumWorkmarkOutlined as MediumWorkmarkOutlined, ReactMehFilled as MehFilled, ReactMehOutlined as MehOutlined, ReactMehTwoTone as MehTwoTone, ReactMenuFoldOutlined as MenuFoldOutlined, ReactMenuOutlined as MenuOutlined, ReactMenuUnfoldOutlined as MenuUnfoldOutlined, ReactMergeCellsOutlined as MergeCellsOutlined, ReactMergeFilled as MergeFilled, ReactMergeOutlined as MergeOutlined, ReactMessageFilled as MessageFilled, ReactMessageOutlined as MessageOutlined, ReactMessageTwoTone as MessageTwoTone, ReactMetaFilled as MetaFilled, ReactMinusCircleFilled as MinusCircleFilled, ReactMinusCircleOutlined as MinusCircleOutlined, ReactMinusCircleTwoTone as MinusCircleTwoTone, ReactMinusOutlined as MinusOutlined, ReactMinusSquareFilled as MinusSquareFilled, ReactMinusSquareOutlined as MinusSquareOutlined, ReactMinusSquareTwoTone as MinusSquareTwoTone, ReactMistralFilled as MistralFilled, ReactMobileFilled as MobileFilled, ReactMobileOutlined as MobileOutlined, ReactMobileTwoTone as MobileTwoTone, ReactMoneyCollectFilled as MoneyCollectFilled, ReactMoneyCollectOutlined as MoneyCollectOutlined, ReactMoneyCollectTwoTone as MoneyCollectTwoTone, ReactMonitorOutlined as MonitorOutlined, ReactMoonFilled as MoonFilled, ReactMoonOutlined as MoonOutlined, ReactMoreOutlined as MoreOutlined, ReactMutedFilled as MutedFilled, ReactMutedOutlined as MutedOutlined, ReactNetflixFilled as NetflixFilled, ReactNodeCollapseOutlined as NodeCollapseOutlined, ReactNodeExpandOutlined as NodeExpandOutlined, ReactNodeIndexOutlined as NodeIndexOutlined, ReactNotificationFilled as NotificationFilled, ReactNotificationOutlined as NotificationOutlined, ReactNotificationTwoTone as NotificationTwoTone, ReactNumberOutlined as NumberOutlined, ReactOllamaFilled as OllamaFilled, ReactOneToOneOutlined as OneToOneOutlined, ReactOpenAIFilled as OpenAIFilled, ReactOpenAIOutlined as OpenAIOutlined, ReactOrderedListOutlined as OrderedListOutlined, ReactPaperClipOutlined as PaperClipOutlined, ReactPartitionOutlined as PartitionOutlined, ReactPauseCircleFilled as PauseCircleFilled, ReactPauseCircleOutlined as PauseCircleOutlined, ReactPauseCircleTwoTone as PauseCircleTwoTone, ReactPauseOutlined as PauseOutlined, ReactPayCircleFilled as PayCircleFilled, ReactPayCircleOutlined as PayCircleOutlined, ReactPercentageOutlined as PercentageOutlined, ReactPerplexityFilled as PerplexityFilled, ReactPhoneFilled as PhoneFilled, ReactPhoneOutlined as PhoneOutlined, ReactPhoneTwoTone as PhoneTwoTone, ReactPicCenterOutlined as PicCenterOutlined, ReactPicLeftOutlined as PicLeftOutlined, ReactPicRightOutlined as PicRightOutlined, ReactPictureFilled as PictureFilled, ReactPictureOutlined as PictureOutlined, ReactPictureTwoTone as PictureTwoTone, ReactPieChartFilled as PieChartFilled, ReactPieChartOutlined as PieChartOutlined, ReactPieChartTwoTone as PieChartTwoTone, ReactPinterestFilled as PinterestFilled, ReactPinterestOutlined as PinterestOutlined, ReactPlayCircleFilled as PlayCircleFilled, ReactPlayCircleOutlined as PlayCircleOutlined, ReactPlayCircleTwoTone as PlayCircleTwoTone, ReactPlaySquareFilled as PlaySquareFilled, ReactPlaySquareOutlined as PlaySquareOutlined, ReactPlaySquareTwoTone as PlaySquareTwoTone, ReactPlusCircleFilled as PlusCircleFilled, ReactPlusCircleOutlined as PlusCircleOutlined, ReactPlusCircleTwoTone as PlusCircleTwoTone, ReactPlusOutlined as PlusOutlined, ReactPlusSquareFilled as PlusSquareFilled, ReactPlusSquareOutlined as PlusSquareOutlined, ReactPlusSquareTwoTone as PlusSquareTwoTone, ReactPoundCircleFilled as PoundCircleFilled, ReactPoundCircleOutlined as PoundCircleOutlined, ReactPoundCircleTwoTone as PoundCircleTwoTone, ReactPoundOutlined as PoundOutlined, ReactPoweroffOutlined as PoweroffOutlined, ReactPrinterFilled as PrinterFilled, ReactPrinterOutlined as PrinterOutlined, ReactPrinterTwoTone as PrinterTwoTone, ReactProductFilled as ProductFilled, ReactProductOutlined as ProductOutlined, ReactProfileFilled as ProfileFilled, ReactProfileOutlined as ProfileOutlined, ReactProfileTwoTone as ProfileTwoTone, ReactProjectFilled as ProjectFilled, ReactProjectOutlined as ProjectOutlined, ReactProjectTwoTone as ProjectTwoTone, ReactPropertySafetyFilled as PropertySafetyFilled, ReactPropertySafetyOutlined as PropertySafetyOutlined, ReactPropertySafetyTwoTone as PropertySafetyTwoTone, ReactPullRequestOutlined as PullRequestOutlined, ReactPushpinFilled as PushpinFilled, ReactPushpinOutlined as PushpinOutlined, ReactPushpinTwoTone as PushpinTwoTone, ReactPythonOutlined as PythonOutlined, ReactQqCircleFilled as QqCircleFilled, ReactQqOutlined as QqOutlined, ReactQqSquareFilled as QqSquareFilled, ReactQrcodeOutlined as QrcodeOutlined, ReactQuestionCircleFilled as QuestionCircleFilled, ReactQuestionCircleOutlined as QuestionCircleOutlined, ReactQuestionCircleTwoTone as QuestionCircleTwoTone, ReactQuestionOutlined as QuestionOutlined, ReactQwenFilled as QwenFilled, REACT_COMPONENT_PREFIX, ReactRadarChartOutlined as RadarChartOutlined, ReactRadiusBottomleftOutlined as RadiusBottomleftOutlined, ReactRadiusBottomrightOutlined as RadiusBottomrightOutlined, ReactRadiusSettingOutlined as RadiusSettingOutlined, ReactRadiusUpleftOutlined as RadiusUpleftOutlined, ReactRadiusUprightOutlined as RadiusUprightOutlined, ReactAccountBookFilled, ReactAccountBookOutlined, ReactAccountBookTwoTone, ReactAimOutlined, ReactAlertFilled, ReactAlertOutlined, ReactAlertTwoTone, ReactAlibabaOutlined, ReactAlignCenterOutlined, ReactAlignLeftOutlined, ReactAlignRightOutlined, ReactAlipayCircleFilled, ReactAlipayCircleOutlined, ReactAlipayOutlined, ReactAlipaySquareFilled, ReactAliwangwangFilled, ReactAliwangwangOutlined, ReactAliyunOutlined, ReactAmazonCircleFilled, ReactAmazonOutlined, ReactAmazonSquareFilled, ReactAndroidFilled, ReactAndroidOutlined, ReactAntCloudOutlined, ReactAntDesignOutlined, ReactAnthropicFilled, ReactApartmentOutlined, ReactApiFilled, ReactApiOutlined, ReactApiTwoTone, ReactAppleFilled, ReactAppleOutlined, ReactAppstoreAddOutlined, ReactAppstoreFilled, ReactAppstoreOutlined, ReactAppstoreTwoTone, ReactAreaChartOutlined, ReactArrowDownOutlined, ReactArrowLeftOutlined, ReactArrowRightOutlined, ReactArrowUpOutlined, ReactArrowsAltOutlined, ReactAudioFilled, ReactAudioMutedOutlined, ReactAudioOutlined, ReactAudioTwoTone, ReactAuditOutlined, ReactAutoComplete, ReactBackwardFilled, ReactBackwardOutlined, ReactBaiduOutlined, ReactBankFilled, ReactBankOutlined, ReactBankTwoTone, ReactBarChartOutlined, ReactBarcodeOutlined, ReactBarsOutlined, ReactBehanceCircleFilled, ReactBehanceOutlined, ReactBehanceSquareFilled, ReactBehanceSquareOutlined, ReactBellFilled, ReactBellOutlined, ReactBellTwoTone, ReactBgColorsOutlined, ReactBilibiliFilled, ReactBilibiliOutlined, ReactBlockOutlined, ReactBoldOutlined, ReactBookFilled, ReactBookOutlined, ReactBookTwoTone, ReactBorderBottomOutlined, ReactBorderHorizontalOutlined, ReactBorderInnerOutlined, ReactBorderLeftOutlined, ReactBorderOuterOutlined, ReactBorderOutlined, ReactBorderRightOutlined, ReactBorderTopOutlined, ReactBorderVerticleOutlined, ReactBorderlessTableOutlined, ReactBoxPlotFilled, ReactBoxPlotOutlined, ReactBoxPlotTwoTone, ReactBranchesOutlined, ReactBugFilled, ReactBugOutlined, ReactBugTwoTone, ReactBuildFilled, ReactBuildOutlined, ReactBuildTwoTone, ReactBulbFilled, ReactBulbOutlined, ReactBulbTwoTone, ReactButton, ReactCalculatorFilled, ReactCalculatorOutlined, ReactCalculatorTwoTone, ReactCalendarFilled, ReactCalendarOutlined, ReactCalendarTwoTone, ReactCameraFilled, ReactCameraOutlined, ReactCameraTwoTone, ReactCarFilled, ReactCarOutlined, ReactCarTwoTone, ReactCaretDownFilled, ReactCaretDownOutlined, ReactCaretLeftFilled, ReactCaretLeftOutlined, ReactCaretRightFilled, ReactCaretRightOutlined, ReactCaretUpFilled, ReactCaretUpOutlined, ReactCarryOutFilled, ReactCarryOutOutlined, ReactCarryOutTwoTone, ReactCascader, ReactCheckCircleFilled, ReactCheckCircleOutlined, ReactCheckCircleTwoTone, ReactCheckOutlined, ReactCheckSquareFilled, ReactCheckSquareOutlined, ReactCheckSquareTwoTone, ReactCheckbox, ReactChromeFilled, ReactChromeOutlined, ReactCiCircleFilled, ReactCiCircleOutlined, ReactCiCircleTwoTone, ReactCiOutlined, ReactCiTwoTone, ReactClaudeFilled, ReactClearOutlined, ReactClockCircleFilled, ReactClockCircleOutlined, ReactClockCircleTwoTone, ReactCloseCircleFilled, ReactCloseCircleOutlined, ReactCloseCircleTwoTone, ReactCloseOutlined, ReactCloseSquareFilled, ReactCloseSquareOutlined, ReactCloseSquareTwoTone, ReactCloudDownloadOutlined, ReactCloudFilled, ReactCloudOutlined, ReactCloudServerOutlined, ReactCloudSyncOutlined, ReactCloudTwoTone, ReactCloudUploadOutlined, ReactClusterOutlined, ReactCodeFilled, ReactCodeOutlined, ReactCodeSandboxCircleFilled, ReactCodeSandboxOutlined, ReactCodeSandboxSquareFilled, ReactCodeTwoTone, ReactCodepenCircleFilled, ReactCodepenCircleOutlined, ReactCodepenOutlined, ReactCodepenSquareFilled, ReactCoffeeOutlined, ReactCol, ReactCollapseMotion, ReactCollapsePanel, ReactColorPicker, ReactColumnHeightOutlined, ReactColumnWidthOutlined, ReactCommentOutlined, ReactCompassFilled, ReactCompassOutlined, ReactCompassTwoTone, ReactCompressOutlined, ReactConfigProvider, ReactConsoleSqlOutlined, ReactContactsFilled, ReactContactsOutlined, ReactContactsTwoTone, ReactContainerFilled, ReactContainerOutlined, ReactContainerTwoTone, ReactContentScaleProvider, ReactControlFilled, ReactControlOutlined, ReactControlTwoTone, ReactCopyFilled, ReactCopyOutlined, ReactCopyTwoTone, ReactCopyrightCircleFilled, ReactCopyrightCircleOutlined, ReactCopyrightCircleTwoTone, ReactCopyrightOutlined, ReactCopyrightTwoTone, ReactCreditCardFilled, ReactCreditCardOutlined, ReactCreditCardTwoTone, ReactCrownFilled, ReactCrownOutlined, ReactCrownTwoTone, ReactCustomerServiceFilled, ReactCustomerServiceOutlined, ReactCustomerServiceTwoTone, ReactDashOutlined, ReactDashboardFilled, ReactDashboardOutlined, ReactDashboardTwoTone, ReactDatabaseFilled, ReactDatabaseOutlined, ReactDatabaseTwoTone, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactDeepSeekFilled, ReactDeleteColumnOutlined, ReactDeleteFilled, ReactDeleteOutlined, ReactDeleteRowOutlined, ReactDeleteTwoTone, ReactDeliveredProcedureOutlined, ReactDeploymentUnitOutlined, ReactDesktopOutlined, ReactDiffFilled, ReactDiffOutlined, ReactDiffTwoTone, ReactDingdingOutlined, ReactDingtalkCircleFilled, ReactDingtalkOutlined, ReactDingtalkSquareFilled, ReactDisconnectOutlined, ReactDiscordFilled, ReactDiscordOutlined, ReactDislikeFilled, ReactDislikeOutlined, ReactDislikeTwoTone, ReactDockerOutlined, ReactDollarCircleFilled, ReactDollarCircleOutlined, ReactDollarCircleTwoTone, ReactDollarOutlined, ReactDollarTwoTone, ReactDotChartOutlined, ReactDotNetOutlined, ReactDoubleLeftOutlined, ReactDoubleRightOutlined, ReactDownCircleFilled, ReactDownCircleOutlined, ReactDownCircleTwoTone, ReactDownOutlined, ReactDownSquareFilled, ReactDownSquareOutlined, ReactDownSquareTwoTone, ReactDownloadOutlined, ReactDragOutlined, ReactDrawer, ReactDribbbleCircleFilled, ReactDribbbleOutlined, ReactDribbbleSquareFilled, ReactDribbbleSquareOutlined, ReactDropboxCircleFilled, ReactDropboxOutlined, ReactDropboxSquareFilled, ReactDropdown, ReactEditFilled, ReactEditOutlined, ReactEditTwoTone, ReactElevenLabsFilled, ReactEllipsisOutlined, ReactEnterOutlined, ReactEnvironmentFilled, ReactEnvironmentOutlined, ReactEnvironmentTwoTone, ReactEuroCircleFilled, ReactEuroCircleOutlined, ReactEuroCircleTwoTone, ReactEuroOutlined, ReactEuroTwoTone, ReactExceptionOutlined, ReactExclamationCircleFilled, ReactExclamationCircleOutlined, ReactExclamationCircleTwoTone, ReactExclamationOutlined, ReactExpandAltOutlined, ReactExpandOutlined, ReactExperimentFilled, ReactExperimentOutlined, ReactExperimentTwoTone, ReactExportOutlined, ReactEyeFilled, ReactEyeInvisibleFilled, ReactEyeInvisibleOutlined, ReactEyeInvisibleTwoTone, ReactEyeOutlined, ReactEyeTwoTone, ReactFacebookFilled, ReactFacebookOutlined, ReactFallOutlined, ReactFastBackwardFilled, ReactFastBackwardOutlined, ReactFastForwardFilled, ReactFastForwardOutlined, ReactFieldBinaryOutlined, ReactFieldNumberOutlined, ReactFieldStringOutlined, ReactFieldTimeOutlined, ReactFileAddFilled, ReactFileAddOutlined, ReactFileAddTwoTone, ReactFileDoneOutlined, ReactFileExcelFilled, ReactFileExcelOutlined, ReactFileExcelTwoTone, ReactFileExclamationFilled, ReactFileExclamationOutlined, ReactFileExclamationTwoTone, ReactFileFilled, ReactFileGifOutlined, ReactFileImageFilled, ReactFileImageOutlined, ReactFileImageTwoTone, ReactFileJpgOutlined, ReactFileMarkdownFilled, ReactFileMarkdownOutlined, ReactFileMarkdownTwoTone, ReactFileOutlined, ReactFilePdfFilled, ReactFilePdfOutlined, ReactFilePdfTwoTone, ReactFilePptFilled, ReactFilePptOutlined, ReactFilePptTwoTone, ReactFileProtectOutlined, ReactFileSearchOutlined, ReactFileSyncOutlined, ReactFileTextFilled, ReactFileTextOutlined, ReactFileTextTwoTone, ReactFileTwoTone, ReactFileUnknownFilled, ReactFileUnknownOutlined, ReactFileUnknownTwoTone, ReactFileWordFilled, ReactFileWordOutlined, ReactFileWordTwoTone, ReactFileZipFilled, ReactFileZipOutlined, ReactFileZipTwoTone, ReactFilterFilled, ReactFilterOutlined, ReactFilterPanel, ReactFilterTwoTone, ReactFireFilled, ReactFireOutlined, ReactFireTwoTone, ReactFlagFilled, ReactFlagOutlined, ReactFlagTwoTone, ReactFlex, ReactFolderAddFilled, ReactFolderAddOutlined, ReactFolderAddTwoTone, ReactFolderFilled, ReactFolderOpenFilled, ReactFolderOpenOutlined, ReactFolderOpenTwoTone, ReactFolderOutlined, ReactFolderTwoTone, ReactFolderViewOutlined, ReactFontColorsOutlined, ReactFontSizeOutlined, ReactForkOutlined, ReactForm, ReactFormItem, ReactFormOutlined, ReactFormatPainterFilled, ReactFormatPainterOutlined, ReactForwardFilled, ReactForwardOutlined, ReactFrownFilled, ReactFrownOutlined, ReactFrownTwoTone, ReactFullscreenExitOutlined, ReactFullscreenOutlined, ReactFunctionOutlined, ReactFundFilled, ReactFundOutlined, ReactFundProjectionScreenOutlined, ReactFundTwoTone, ReactFundViewOutlined, ReactFunnelPlotFilled, ReactFunnelPlotOutlined, ReactFunnelPlotTwoTone, ReactGatewayOutlined, ReactGeminiFilled, ReactGifOutlined, ReactGiftFilled, ReactGiftOutlined, ReactGiftTwoTone, ReactGithubFilled, ReactGithubOutlined, ReactGitlabFilled, ReactGitlabOutlined, ReactGlobalOutlined, ReactGoldFilled, ReactGoldOutlined, ReactGoldTwoTone, ReactGoldenFilled, ReactGoogleCircleFilled, ReactGoogleOutlined, ReactGooglePlusCircleFilled, ReactGooglePlusOutlined, ReactGooglePlusSquareFilled, ReactGoogleSquareFilled, ReactGroupOutlined, ReactHarmonyOSOutlined, ReactHddFilled, ReactHddOutlined, ReactHddTwoTone, ReactHeartFilled, ReactHeartOutlined, ReactHeartTwoTone, ReactHeatMapOutlined, ReactHighlightFilled, ReactHighlightOutlined, ReactHighlightTwoTone, ReactHistoryOutlined, ReactHolderOutlined, ReactHomeFilled, ReactHomeOutlined, ReactHomeTwoTone, ReactHourglassFilled, ReactHourglassOutlined, ReactHourglassTwoTone, ReactHtml5Filled, ReactHtml5Outlined, ReactHtml5TwoTone, ReactHuggingFaceFilled, ReactIcon, ReactIdcardFilled, ReactIdcardOutlined, ReactIdcardTwoTone, ReactIeCircleFilled, ReactIeOutlined, ReactIeSquareFilled, ReactImagePreview, ReactImportOutlined, ReactInboxOutlined, ReactInfoCircleFilled, ReactInfoCircleOutlined, ReactInfoCircleTwoTone, ReactInfoOutlined, ReactInput, ReactInputNumber, ReactInputRange, ReactInsertRowAboveOutlined, ReactInsertRowBelowOutlined, ReactInsertRowLeftOutlined, ReactInsertRowRightOutlined, ReactInstagramFilled, ReactInstagramOutlined, ReactInsuranceFilled, ReactInsuranceOutlined, ReactInsuranceTwoTone, ReactInteractionFilled, ReactInteractionOutlined, ReactInteractionTwoTone, ReactIssuesCloseOutlined, ReactItalicOutlined, ReactJavaOutlined, ReactJavaScriptOutlined, ReactKeyOutlined, ReactKubernetesOutlined, ReactLaptopOutlined, ReactLayoutFilled, ReactLayoutOutlined, ReactLayoutTwoTone, ReactLeftCircleFilled, ReactLeftCircleOutlined, ReactLeftCircleTwoTone, ReactLeftOutlined, ReactLeftSquareFilled, ReactLeftSquareOutlined, ReactLeftSquareTwoTone, ReactLikeFilled, ReactLikeOutlined, ReactLikeTwoTone, ReactLineChartOutlined, ReactLineHeightOutlined, ReactLineOutlined, ReactLinkOutlined, ReactLinkedinFilled, ReactLinkedinOutlined, ReactLinuxOutlined, ReactLoading3QuartersOutlined, ReactLoadingOutlined, ReactLockFilled, ReactLockOutlined, ReactLockTwoTone, ReactLoginOutlined, ReactLogoutOutlined, ReactMacCommandFilled, ReactMacCommandOutlined, ReactMailFilled, ReactMailOutlined, ReactMailTwoTone, ReactManOutlined, ReactMastodonFilled, ReactMedicineBoxFilled, ReactMedicineBoxOutlined, ReactMedicineBoxTwoTone, ReactMediumCircleFilled, ReactMediumOutlined, ReactMediumSquareFilled, ReactMediumWorkmarkOutlined, ReactMehFilled, ReactMehOutlined, ReactMehTwoTone, ReactMenuFoldOutlined, ReactMenuOutlined, ReactMenuUnfoldOutlined, ReactMergeCellsOutlined, ReactMergeFilled, ReactMergeOutlined, ReactMessageFilled, ReactMessageOutlined, ReactMessageTwoTone, ReactMetaFilled, ReactMinusCircleFilled, ReactMinusCircleOutlined, ReactMinusCircleTwoTone, ReactMinusOutlined, ReactMinusSquareFilled, ReactMinusSquareOutlined, ReactMinusSquareTwoTone, ReactMistralFilled, ReactMobileFilled, ReactMobileOutlined, ReactMobileTwoTone, ReactModal, ReactMoneyCollectFilled, ReactMoneyCollectOutlined, ReactMoneyCollectTwoTone, ReactMonitorOutlined, ReactMonthPicker, ReactMoonFilled, ReactMoonOutlined, ReactMoreOutlined, ReactMutedFilled, ReactMutedOutlined, ReactNetflixFilled, ReactNodeCollapseOutlined, ReactNodeExpandOutlined, ReactNodeIndexOutlined, ReactNotificationFilled, ReactNotificationOutlined, ReactNotificationTwoTone, ReactNumberOutlined, ReactOllamaFilled, ReactOneToOneOutlined, ReactOpenAIFilled, ReactOpenAIOutlined, ReactOrderedListOutlined, ReactPagination, ReactPaperClipOutlined, ReactPartitionOutlined, ReactPauseCircleFilled, ReactPauseCircleOutlined, ReactPauseCircleTwoTone, ReactPauseOutlined, ReactPayCircleFilled, ReactPayCircleOutlined, ReactPercentageOutlined, ReactPerplexityFilled, ReactPhoneFilled, ReactPhoneOutlined, ReactPhoneTwoTone, ReactPicCenterOutlined, ReactPicLeftOutlined, ReactPicRightOutlined, ReactPictureFilled, ReactPictureOutlined, ReactPictureTwoTone, ReactPieChartFilled, ReactPieChartOutlined, ReactPieChartTwoTone, ReactPinterestFilled, ReactPinterestOutlined, ReactPlayCircleFilled, ReactPlayCircleOutlined, ReactPlayCircleTwoTone, ReactPlaySquareFilled, ReactPlaySquareOutlined, ReactPlaySquareTwoTone, ReactPlusCircleFilled, ReactPlusCircleOutlined, ReactPlusCircleTwoTone, ReactPlusOutlined, ReactPlusSquareFilled, ReactPlusSquareOutlined, ReactPlusSquareTwoTone, ReactPopconfirm, ReactPopup, ReactPoundCircleFilled, ReactPoundCircleOutlined, ReactPoundCircleTwoTone, ReactPoundOutlined, ReactPoweroffOutlined, ReactPrinterFilled, ReactPrinterOutlined, ReactPrinterTwoTone, ReactProductFilled, ReactProductOutlined, ReactProfileFilled, ReactProfileOutlined, ReactProfileTwoTone, ReactProgress, ReactProjectFilled, ReactProjectOutlined, ReactProjectTwoTone, ReactPropertySafetyFilled, ReactPropertySafetyOutlined, ReactPropertySafetyTwoTone, ReactPullRequestOutlined, ReactPushpinFilled, ReactPushpinOutlined, ReactPushpinTwoTone, ReactPythonOutlined, ReactQqCircleFilled, ReactQqOutlined, ReactQqSquareFilled, ReactQrcodeOutlined, ReactQuarterPicker, ReactQuestionCircleFilled, ReactQuestionCircleOutlined, ReactQuestionCircleTwoTone, ReactQuestionOutlined, ReactQwenFilled, ReactRadarChartOutlined, ReactRadio, ReactRadiusBottomleftOutlined, ReactRadiusBottomrightOutlined, ReactRadiusSettingOutlined, ReactRadiusUpleftOutlined, ReactRadiusUprightOutlined, ReactReadFilled, ReactReadOutlined, ReactReconciliationFilled, ReactReconciliationOutlined, ReactReconciliationTwoTone, ReactRedEnvelopeFilled, ReactRedEnvelopeOutlined, ReactRedEnvelopeTwoTone, ReactRedditCircleFilled, ReactRedditOutlined, ReactRedditSquareFilled, ReactRedoOutlined, ReactReloadOutlined, ReactReplicateFilled, ReactResizablePanels, ReactRestFilled, ReactRestOutlined, ReactRestTwoTone, ReactRetweetOutlined, ReactRightCircleFilled, ReactRightCircleOutlined, ReactRightCircleTwoTone, ReactRightOutlined, ReactRightSquareFilled, ReactRightSquareOutlined, ReactRightSquareTwoTone, ReactRiseOutlined, ReactRobotFilled, ReactRobotOutlined, ReactRocketFilled, ReactRocketOutlined, ReactRocketTwoTone, ReactRollbackOutlined, ReactRotateLeftOutlined, ReactRotateRightOutlined, ReactRow, ReactRubyOutlined, ReactSafetyCertificateFilled, ReactSafetyCertificateOutlined, ReactSafetyCertificateTwoTone, ReactSafetyOutlined, ReactSaveFilled, ReactSaveOutlined, ReactSaveTwoTone, ReactScanOutlined, ReactScheduleFilled, ReactScheduleOutlined, ReactScheduleTwoTone, ReactScissorOutlined, ReactScrollbarPositionDialog, ReactScrollbarSettingsDialog, ReactSearchOutlined, ReactSecurityScanFilled, ReactSecurityScanOutlined, ReactSecurityScanTwoTone, ReactSelect, ReactSelectOutlined, ReactSendOutlined, ReactSettingFilled, ReactSettingOutlined, ReactSettingTwoTone, ReactShakeOutlined, ReactShareAltOutlined, ReactShopFilled, ReactShopOutlined, ReactShopTwoTone, ReactShoppingCartOutlined, ReactShoppingFilled, ReactShoppingOutlined, ReactShoppingTwoTone, ReactShrinkOutlined, ReactSignalFilled, ReactSignatureFilled, ReactSignatureOutlined, ReactSisternodeOutlined, ReactSketchCircleFilled, ReactSketchOutlined, ReactSketchSquareFilled, ReactSkinFilled, ReactSkinOutlined, ReactSkinTwoTone, ReactSkypeFilled, ReactSkypeOutlined, ReactSlackCircleFilled, ReactSlackOutlined, ReactSlackSquareFilled, ReactSlackSquareOutlined, ReactSlidersFilled, ReactSlidersOutlined, ReactSlidersTwoTone, ReactSmallDashOutlined, ReactSmileFilled, ReactSmileOutlined, ReactSmileTwoTone, ReactSnapchatFilled, ReactSnippetsFilled, ReactSnippetsOutlined, ReactSnippetsTwoTone, ReactSolutionOutlined, ReactSortAscendingOutlined, ReactSortDescendingOutlined, ReactSortableList, ReactSoundFilled, ReactSoundOutlined, ReactSoundTwoTone, ReactSplitCellsOutlined, ReactSpotifyFilled, ReactSpotifyOutlined, ReactStarFilled, ReactStarOutlined, ReactStarTwoTone, ReactStepBackwardFilled, ReactStepBackwardOutlined, ReactStepForwardFilled, ReactStepForwardOutlined, ReactStockOutlined, ReactStopFilled, ReactStopOutlined, ReactStopTwoTone, ReactStrikethroughOutlined, ReactSubnodeOutlined, ReactSunFilled, ReactSunOutlined, ReactSwapLeftOutlined, ReactSwapOutlined, ReactSwapRightOutlined, ReactSwitcherFilled, ReactSwitcherOutlined, ReactSwitcherTwoTone, ReactSyncOutlined, ReactTableOutlined, ReactTabletFilled, ReactTabletOutlined, ReactTabletTwoTone, ReactTagFilled, ReactTagOutlined, ReactTagTwoTone, ReactTagsFilled, ReactTagsOutlined, ReactTagsTwoTone, ReactTaobaoCircleFilled, ReactTaobaoCircleOutlined, ReactTaobaoOutlined, ReactTaobaoSquareFilled, ReactTeamOutlined, ReactTelegramFilled, ReactTextArea, ReactThreadsFilled, ReactThunderboltFilled, ReactThunderboltOutlined, ReactThunderboltTwoTone, ReactTikTokFilled, ReactTikTokOutlined, ReactTimePicker, ReactTimeRangePicker, ReactToTopOutlined, ReactToolFilled, ReactToolOutlined, ReactToolTwoTone, ReactTooltip, ReactTour, ReactTrademarkCircleFilled, ReactTrademarkCircleOutlined, ReactTrademarkCircleTwoTone, ReactTrademarkOutlined, ReactTransactionOutlined, ReactTransition, ReactTranslationOutlined, ReactTreeSelect, ReactTrophyFilled, ReactTrophyOutlined, ReactTrophyTwoTone, ReactTruckFilled, ReactTruckOutlined, ReactTwitchFilled, ReactTwitchOutlined, ReactTwitterCircleFilled, ReactTwitterOutlined, ReactTwitterSquareFilled, ReactUnderlineOutlined, ReactUndoOutlined, ReactUngroupOutlined, ReactUnlockFilled, ReactUnlockOutlined, ReactUnlockTwoTone, ReactUnorderedListOutlined, ReactUpCircleFilled, ReactUpCircleOutlined, ReactUpCircleTwoTone, ReactUpOutlined, ReactUpSquareFilled, ReactUpSquareOutlined, ReactUpSquareTwoTone, ReactUploadOutlined, ReactUsbFilled, ReactUsbOutlined, ReactUsbTwoTone, ReactUserAddOutlined, ReactUserDeleteOutlined, ReactUserOutlined, ReactUserSwitchOutlined, ReactUsergroupAddOutlined, ReactUsergroupDeleteOutlined, ReactVerifiedOutlined, ReactVerticalAlignBottomOutlined, ReactVerticalAlignMiddleOutlined, ReactVerticalAlignTopOutlined, ReactVerticalLeftOutlined, ReactVerticalRightOutlined, ReactVideoCameraAddOutlined, ReactVideoCameraFilled, ReactVideoCameraOutlined, ReactVideoCameraTwoTone, ReactVirtualList, ReactWalletFilled, ReactWalletOutlined, ReactWalletTwoTone, ReactWarningFilled, ReactWarningOutlined, ReactWarningTwoTone, ReactWaterfall, ReactWechatFilled, ReactWechatOutlined, ReactWechatWorkFilled, ReactWechatWorkOutlined, ReactWeiboCircleFilled, ReactWeiboCircleOutlined, ReactWeiboOutlined, ReactWeiboSquareFilled, ReactWeiboSquareOutlined, ReactWhatsAppOutlined, ReactWifiOutlined, ReactWindowsFilled, ReactWindowsOutlined, ReactWomanOutlined, ReactXFilled, ReactXOutlined, ReactYahooFilled, ReactYahooOutlined, ReactYearPicker, ReactYoutubeFilled, ReactYoutubeOutlined, ReactYuqueFilled, ReactYuqueOutlined, ReactZhihuCircleFilled, ReactZhihuOutlined, ReactZhihuSquareFilled, ReactZoomInOutlined, ReactZoomOutOutlined, ReactReadFilled as ReadFilled, ReactReadOutlined as ReadOutlined, ReactReconciliationFilled as ReconciliationFilled, ReactReconciliationOutlined as ReconciliationOutlined, ReactReconciliationTwoTone as ReconciliationTwoTone, ReactRedEnvelopeFilled as RedEnvelopeFilled, ReactRedEnvelopeOutlined as RedEnvelopeOutlined, ReactRedEnvelopeTwoTone as RedEnvelopeTwoTone, ReactRedditCircleFilled as RedditCircleFilled, ReactRedditOutlined as RedditOutlined, ReactRedditSquareFilled as RedditSquareFilled, ReactRedoOutlined as RedoOutlined, ReactReloadOutlined as ReloadOutlined, ReactReplicateFilled as ReplicateFilled, ReactRestFilled as RestFilled, ReactRestOutlined as RestOutlined, ReactRestTwoTone as RestTwoTone, ReactRetweetOutlined as RetweetOutlined, ReactRightCircleFilled as RightCircleFilled, ReactRightCircleOutlined as RightCircleOutlined, ReactRightCircleTwoTone as RightCircleTwoTone, ReactRightOutlined as RightOutlined, ReactRightSquareFilled as RightSquareFilled, ReactRightSquareOutlined as RightSquareOutlined, ReactRightSquareTwoTone as RightSquareTwoTone, ReactRiseOutlined as RiseOutlined, ReactRobotFilled as RobotFilled, ReactRobotOutlined as RobotOutlined, ReactRocketFilled as RocketFilled, ReactRocketOutlined as RocketOutlined, ReactRocketTwoTone as RocketTwoTone, ReactRollbackOutlined as RollbackOutlined, ReactRotateLeftOutlined as RotateLeftOutlined, ReactRotateRightOutlined as RotateRightOutlined, ReactRubyOutlined as RubyOutlined, ReactSafetyCertificateFilled as SafetyCertificateFilled, ReactSafetyCertificateOutlined as SafetyCertificateOutlined, ReactSafetyCertificateTwoTone as SafetyCertificateTwoTone, ReactSafetyOutlined as SafetyOutlined, ReactSaveFilled as SaveFilled, ReactSaveOutlined as SaveOutlined, ReactSaveTwoTone as SaveTwoTone, ReactScanOutlined as ScanOutlined, ReactScheduleFilled as ScheduleFilled, ReactScheduleOutlined as ScheduleOutlined, ReactScheduleTwoTone as ScheduleTwoTone, ReactScissorOutlined as ScissorOutlined, ReactSearchOutlined as SearchOutlined, ReactSecurityScanFilled as SecurityScanFilled, ReactSecurityScanOutlined as SecurityScanOutlined, ReactSecurityScanTwoTone as SecurityScanTwoTone, ReactSelectOutlined as SelectOutlined, ReactSendOutlined as SendOutlined, ReactSettingFilled as SettingFilled, ReactSettingOutlined as SettingOutlined, ReactSettingTwoTone as SettingTwoTone, ReactShakeOutlined as ShakeOutlined, ReactShareAltOutlined as ShareAltOutlined, ReactShopFilled as ShopFilled, ReactShopOutlined as ShopOutlined, ReactShopTwoTone as ShopTwoTone, ReactShoppingCartOutlined as ShoppingCartOutlined, ReactShoppingFilled as ShoppingFilled, ReactShoppingOutlined as ShoppingOutlined, ReactShoppingTwoTone as ShoppingTwoTone, ReactShrinkOutlined as ShrinkOutlined, ReactSignalFilled as SignalFilled, ReactSignatureFilled as SignatureFilled, ReactSignatureOutlined as SignatureOutlined, ReactSisternodeOutlined as SisternodeOutlined, ReactSketchCircleFilled as SketchCircleFilled, ReactSketchOutlined as SketchOutlined, ReactSketchSquareFilled as SketchSquareFilled, ReactSkinFilled as SkinFilled, ReactSkinOutlined as SkinOutlined, ReactSkinTwoTone as SkinTwoTone, ReactSkypeFilled as SkypeFilled, ReactSkypeOutlined as SkypeOutlined, ReactSlackCircleFilled as SlackCircleFilled, ReactSlackOutlined as SlackOutlined, ReactSlackSquareFilled as SlackSquareFilled, ReactSlackSquareOutlined as SlackSquareOutlined, ReactSlidersFilled as SlidersFilled, ReactSlidersOutlined as SlidersOutlined, ReactSlidersTwoTone as SlidersTwoTone, ReactSmallDashOutlined as SmallDashOutlined, ReactSmileFilled as SmileFilled, ReactSmileOutlined as SmileOutlined, ReactSmileTwoTone as SmileTwoTone, ReactSnapchatFilled as SnapchatFilled, ReactSnippetsFilled as SnippetsFilled, ReactSnippetsOutlined as SnippetsOutlined, ReactSnippetsTwoTone as SnippetsTwoTone, ReactSolutionOutlined as SolutionOutlined, ReactSortAscendingOutlined as SortAscendingOutlined, ReactSortDescendingOutlined as SortDescendingOutlined, ReactSoundFilled as SoundFilled, ReactSoundOutlined as SoundOutlined, ReactSoundTwoTone as SoundTwoTone, ReactSplitCellsOutlined as SplitCellsOutlined, ReactSpotifyFilled as SpotifyFilled, ReactSpotifyOutlined as SpotifyOutlined, ReactStarFilled as StarFilled, ReactStarOutlined as StarOutlined, ReactStarTwoTone as StarTwoTone, ReactStepBackwardFilled as StepBackwardFilled, ReactStepBackwardOutlined as StepBackwardOutlined, ReactStepForwardFilled as StepForwardFilled, ReactStepForwardOutlined as StepForwardOutlined, ReactStockOutlined as StockOutlined, ReactStopFilled as StopFilled, ReactStopOutlined as StopOutlined, ReactStopTwoTone as StopTwoTone, ReactStrikethroughOutlined as StrikethroughOutlined, ReactSubnodeOutlined as SubnodeOutlined, ReactSunFilled as SunFilled, ReactSunOutlined as SunOutlined, ReactSwapLeftOutlined as SwapLeftOutlined, ReactSwapOutlined as SwapOutlined, ReactSwapRightOutlined as SwapRightOutlined, ReactSwitcherFilled as SwitcherFilled, ReactSwitcherOutlined as SwitcherOutlined, ReactSwitcherTwoTone as SwitcherTwoTone, ReactSyncOutlined as SyncOutlined, ReactTableOutlined as TableOutlined, ReactTabletFilled as TabletFilled, ReactTabletOutlined as TabletOutlined, ReactTabletTwoTone as TabletTwoTone, ReactTagFilled as TagFilled, ReactTagOutlined as TagOutlined, ReactTagTwoTone as TagTwoTone, ReactTagsFilled as TagsFilled, ReactTagsOutlined as TagsOutlined, ReactTagsTwoTone as TagsTwoTone, ReactTaobaoCircleFilled as TaobaoCircleFilled, ReactTaobaoCircleOutlined as TaobaoCircleOutlined, ReactTaobaoOutlined as TaobaoOutlined, ReactTaobaoSquareFilled as TaobaoSquareFilled, ReactTeamOutlined as TeamOutlined, ReactTelegramFilled as TelegramFilled, ReactThreadsFilled as ThreadsFilled, ReactThunderboltFilled as ThunderboltFilled, ReactThunderboltOutlined as ThunderboltOutlined, ReactThunderboltTwoTone as ThunderboltTwoTone, ReactTikTokFilled as TikTokFilled, ReactTikTokOutlined as TikTokOutlined, ReactToTopOutlined as ToTopOutlined, ReactToolFilled as ToolFilled, ReactToolOutlined as ToolOutlined, ReactToolTwoTone as ToolTwoTone, ReactTrademarkCircleFilled as TrademarkCircleFilled, ReactTrademarkCircleOutlined as TrademarkCircleOutlined, ReactTrademarkCircleTwoTone as TrademarkCircleTwoTone, ReactTrademarkOutlined as TrademarkOutlined, ReactTransactionOutlined as TransactionOutlined, ReactTranslationOutlined as TranslationOutlined, ReactTrophyFilled as TrophyFilled, ReactTrophyOutlined as TrophyOutlined, ReactTrophyTwoTone as TrophyTwoTone, ReactTruckFilled as TruckFilled, ReactTruckOutlined as TruckOutlined, ReactTwitchFilled as TwitchFilled, ReactTwitchOutlined as TwitchOutlined, ReactTwitterCircleFilled as TwitterCircleFilled, ReactTwitterOutlined as TwitterOutlined, ReactTwitterSquareFilled as TwitterSquareFilled, ReactUnderlineOutlined as UnderlineOutlined, ReactUndoOutlined as UndoOutlined, ReactUngroupOutlined as UngroupOutlined, ReactUnlockFilled as UnlockFilled, ReactUnlockOutlined as UnlockOutlined, ReactUnlockTwoTone as UnlockTwoTone, ReactUnorderedListOutlined as UnorderedListOutlined, ReactUpCircleFilled as UpCircleFilled, ReactUpCircleOutlined as UpCircleOutlined, ReactUpCircleTwoTone as UpCircleTwoTone, ReactUpOutlined as UpOutlined, ReactUpSquareFilled as UpSquareFilled, ReactUpSquareOutlined as UpSquareOutlined, ReactUpSquareTwoTone as UpSquareTwoTone, ReactUploadOutlined as UploadOutlined, ReactUsbFilled as UsbFilled, ReactUsbOutlined as UsbOutlined, ReactUsbTwoTone as UsbTwoTone, ReactUserAddOutlined as UserAddOutlined, ReactUserDeleteOutlined as UserDeleteOutlined, ReactUserOutlined as UserOutlined, ReactUserSwitchOutlined as UserSwitchOutlined, ReactUsergroupAddOutlined as UsergroupAddOutlined, ReactUsergroupDeleteOutlined as UsergroupDeleteOutlined, ReactVerifiedOutlined as VerifiedOutlined, ReactVerticalAlignBottomOutlined as VerticalAlignBottomOutlined, ReactVerticalAlignMiddleOutlined as VerticalAlignMiddleOutlined, ReactVerticalAlignTopOutlined as VerticalAlignTopOutlined, ReactVerticalLeftOutlined as VerticalLeftOutlined, ReactVerticalRightOutlined as VerticalRightOutlined, ReactVideoCameraAddOutlined as VideoCameraAddOutlined, ReactVideoCameraFilled as VideoCameraFilled, ReactVideoCameraOutlined as VideoCameraOutlined, ReactVideoCameraTwoTone as VideoCameraTwoTone, ReactWalletFilled as WalletFilled, ReactWalletOutlined as WalletOutlined, ReactWalletTwoTone as WalletTwoTone, ReactWarningFilled as WarningFilled, ReactWarningOutlined as WarningOutlined, ReactWarningTwoTone as WarningTwoTone, ReactWechatFilled as WechatFilled, ReactWechatOutlined as WechatOutlined, ReactWechatWorkFilled as WechatWorkFilled, ReactWechatWorkOutlined as WechatWorkOutlined, ReactWeiboCircleFilled as WeiboCircleFilled, ReactWeiboCircleOutlined as WeiboCircleOutlined, ReactWeiboOutlined as WeiboOutlined, ReactWeiboSquareFilled as WeiboSquareFilled, ReactWeiboSquareOutlined as WeiboSquareOutlined, ReactWhatsAppOutlined as WhatsAppOutlined, ReactWifiOutlined as WifiOutlined, ReactWindowsFilled as WindowsFilled, ReactWindowsOutlined as WindowsOutlined, ReactWomanOutlined as WomanOutlined, ReactXFilled as XFilled, ReactXOutlined as XOutlined, ReactYahooFilled as YahooFilled, ReactYahooOutlined as YahooOutlined, ReactYoutubeFilled as YoutubeFilled, ReactYoutubeOutlined as YoutubeOutlined, ReactYuqueFilled as YuqueFilled, ReactYuqueOutlined as YuqueOutlined, ReactZhihuCircleFilled as ZhihuCircleFilled, ReactZhihuOutlined as ZhihuOutlined, ReactZhihuSquareFilled as ZhihuSquareFilled, ReactZoomInOutlined as ZoomInOutlined, ReactZoomOutOutlined as ZoomOutOutlined, getSharedScrollbarSettings, reactIconNames, reactMessage, resolveClosestSortableItem, resolveNextSortableOrder, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactConfig, useReactConfigStyle, useReactContentScale, useReactForm, useReactFormWatch, useReactMessage, useReactTransition };
|