@lobehub/ui 2.19.0 → 2.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/awesome/TypewriterEffect/TypewriterEffect.js +80 -16
- package/es/awesome/TypewriterEffect/index.d.ts +1 -1
- package/es/awesome/TypewriterEffect/type.d.ts +24 -2
- package/es/awesome/index.d.ts +1 -1
- package/es/chat/LoadingDots/LoadingDots.d.ts +4 -0
- package/es/chat/LoadingDots/LoadingDots.js +125 -0
- package/es/chat/LoadingDots/index.d.ts +2 -0
- package/es/chat/LoadingDots/index.js +1 -0
- package/es/chat/LoadingDots/style.d.ts +13 -0
- package/es/chat/LoadingDots/style.js +25 -0
- package/es/chat/LoadingDots/type.d.ts +22 -0
- package/es/chat/LoadingDots/type.js +1 -0
- package/es/chat/index.d.ts +1 -0
- package/es/chat/index.js +1 -0
- package/es/styles/theme/token/base.js +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
var _excluded = ["sentences", "as", "typingSpeed", "initialDelay", "pauseDuration", "deletingSpeed", "loop", "className", "color", "showCursor", "hideCursorWhileTyping", "cursorCharacter", "cursorClassName", "cursorColor", "cursorBlinkDuration", "cursorStyle", "textColors", "variableSpeed", "onSentenceComplete", "startOnVisible", "reverseMode"];
|
|
4
|
+
var _excluded = ["sentences", "as", "typingSpeed", "initialDelay", "pauseDuration", "deletingSpeed", "deletePauseDuration", "loop", "className", "color", "showCursor", "hideCursorWhileTyping", "cursorCharacter", "cursorClassName", "cursorColor", "cursorBlinkDuration", "cursorFade", "cursorStyle", "textColors", "variableSpeed", "onSentenceComplete", "startOnVisible", "reverseMode", "segmentMode"];
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -33,6 +33,8 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
33
33
|
pauseDuration = _ref$pauseDuration === void 0 ? 2000 : _ref$pauseDuration,
|
|
34
34
|
_ref$deletingSpeed = _ref.deletingSpeed,
|
|
35
35
|
deletingSpeed = _ref$deletingSpeed === void 0 ? 50 : _ref$deletingSpeed,
|
|
36
|
+
_ref$deletePauseDurat = _ref.deletePauseDuration,
|
|
37
|
+
deletePauseDuration = _ref$deletePauseDurat === void 0 ? 0 : _ref$deletePauseDurat,
|
|
36
38
|
_ref$loop = _ref.loop,
|
|
37
39
|
loop = _ref$loop === void 0 ? true : _ref$loop,
|
|
38
40
|
_ref$className = _ref.className,
|
|
@@ -48,6 +50,8 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
48
50
|
cursorColor = _ref.cursorColor,
|
|
49
51
|
_ref$cursorBlinkDurat = _ref.cursorBlinkDuration,
|
|
50
52
|
cursorBlinkDuration = _ref$cursorBlinkDurat === void 0 ? 0.8 : _ref$cursorBlinkDurat,
|
|
53
|
+
_ref$cursorFade = _ref.cursorFade,
|
|
54
|
+
cursorFade = _ref$cursorFade === void 0 ? true : _ref$cursorFade,
|
|
51
55
|
_ref$cursorStyle = _ref.cursorStyle,
|
|
52
56
|
cursorStyle = _ref$cursorStyle === void 0 ? 'pipe' : _ref$cursorStyle,
|
|
53
57
|
_ref$textColors = _ref.textColors,
|
|
@@ -58,6 +62,8 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
58
62
|
startOnVisible = _ref$startOnVisible === void 0 ? false : _ref$startOnVisible,
|
|
59
63
|
_ref$reverseMode = _ref.reverseMode,
|
|
60
64
|
reverseMode = _ref$reverseMode === void 0 ? false : _ref$reverseMode,
|
|
65
|
+
_ref$segmentMode = _ref.segmentMode,
|
|
66
|
+
segmentMode = _ref$segmentMode === void 0 ? 'grapheme' : _ref$segmentMode,
|
|
61
67
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
62
68
|
var _useStyles = useStyles(),
|
|
63
69
|
styles = _useStyles.styles,
|
|
@@ -82,10 +88,36 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
82
88
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
83
89
|
isVisible = _useState10[0],
|
|
84
90
|
setIsVisible = _useState10[1];
|
|
91
|
+
var _useState11 = useState(false),
|
|
92
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
93
|
+
isDeletePausing = _useState12[0],
|
|
94
|
+
setIsDeletePausing = _useState12[1];
|
|
85
95
|
var containerRef = useRef(null);
|
|
86
96
|
var textArray = useMemo(function () {
|
|
87
97
|
return Array.isArray(sentences) ? sentences : [sentences];
|
|
88
98
|
}, [sentences]);
|
|
99
|
+
|
|
100
|
+
// Helper function to split text based on segment mode
|
|
101
|
+
var splitText = useCallback(function (text) {
|
|
102
|
+
// Use Intl.Segmenter if available
|
|
103
|
+
if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
|
|
104
|
+
var segmenter = new Intl.Segmenter(undefined, {
|
|
105
|
+
granularity: segmentMode
|
|
106
|
+
});
|
|
107
|
+
return Array.from(segmenter.segment(text), function (segment) {
|
|
108
|
+
return segment.segment;
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// Fallback when Intl.Segmenter is not available
|
|
113
|
+
if (segmentMode === 'word') {
|
|
114
|
+
// Simple word splitting fallback
|
|
115
|
+
return text.split(/(\s+)/).filter(Boolean);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// Grapheme fallback
|
|
119
|
+
return Array.from(text);
|
|
120
|
+
}, [segmentMode]);
|
|
89
121
|
var getRandomSpeed = useCallback(function () {
|
|
90
122
|
if (!variableSpeed) return typingSpeed;
|
|
91
123
|
var min = variableSpeed.min,
|
|
@@ -121,7 +153,19 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
121
153
|
if (!isVisible) return;
|
|
122
154
|
var timeout;
|
|
123
155
|
var currentText = textArray[currentTextIndex];
|
|
124
|
-
|
|
156
|
+
// Split text based on segment mode
|
|
157
|
+
var textSegments = splitText(currentText);
|
|
158
|
+
var processedText = reverseMode ? textSegments.reverse().join('') : currentText;
|
|
159
|
+
|
|
160
|
+
// Handle delete pause state
|
|
161
|
+
if (isDeletePausing) {
|
|
162
|
+
timeout = setTimeout(function () {
|
|
163
|
+
setIsDeletePausing(false);
|
|
164
|
+
}, deletePauseDuration);
|
|
165
|
+
return function () {
|
|
166
|
+
return clearTimeout(timeout);
|
|
167
|
+
};
|
|
168
|
+
}
|
|
125
169
|
var executeTypingAnimation = function executeTypingAnimation() {
|
|
126
170
|
if (isDeleting) {
|
|
127
171
|
if (displayedText === '') {
|
|
@@ -136,19 +180,24 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
136
180
|
return (prev + 1) % textArray.length;
|
|
137
181
|
});
|
|
138
182
|
setCurrentCharIndex(0);
|
|
139
|
-
|
|
183
|
+
if (deletePauseDuration > 0) {
|
|
184
|
+
setIsDeletePausing(true);
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
140
187
|
} else {
|
|
141
188
|
timeout = setTimeout(function () {
|
|
142
189
|
setDisplayedText(function (prev) {
|
|
143
|
-
|
|
190
|
+
var segments = splitText(prev);
|
|
191
|
+
return segments.slice(0, -1).join('');
|
|
144
192
|
});
|
|
145
193
|
}, deletingSpeed);
|
|
146
194
|
}
|
|
147
195
|
} else {
|
|
148
|
-
|
|
196
|
+
var processedSegments = splitText(processedText);
|
|
197
|
+
if (currentCharIndex < processedSegments.length) {
|
|
149
198
|
timeout = setTimeout(function () {
|
|
150
199
|
setDisplayedText(function (prev) {
|
|
151
|
-
return prev +
|
|
200
|
+
return prev + processedSegments[currentCharIndex];
|
|
152
201
|
});
|
|
153
202
|
setCurrentCharIndex(function (prev) {
|
|
154
203
|
return prev + 1;
|
|
@@ -170,7 +219,7 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
170
219
|
return function () {
|
|
171
220
|
return clearTimeout(timeout);
|
|
172
221
|
};
|
|
173
|
-
}, [currentCharIndex, displayedText, isDeleting, typingSpeed, deletingSpeed, pauseDuration, textArray, currentTextIndex, loop, initialDelay, isVisible, reverseMode, variableSpeed, onSentenceComplete, getRandomSpeed]);
|
|
222
|
+
}, [currentCharIndex, displayedText, isDeleting, isDeletePausing, typingSpeed, deletingSpeed, deletePauseDuration, pauseDuration, textArray, currentTextIndex, loop, initialDelay, isVisible, reverseMode, variableSpeed, onSentenceComplete, getRandomSpeed, splitText]);
|
|
174
223
|
var getCursorStyle = function getCursorStyle() {
|
|
175
224
|
if (cursorCharacter) return styles.cursorCustom;
|
|
176
225
|
switch (cursorStyle) {
|
|
@@ -192,12 +241,20 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
192
241
|
}
|
|
193
242
|
}
|
|
194
243
|
};
|
|
195
|
-
var
|
|
244
|
+
var currentTextLength = splitText(textArray[currentTextIndex]).length;
|
|
245
|
+
var isTyping = currentCharIndex < currentTextLength && !isDeleting;
|
|
246
|
+
var isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;
|
|
247
|
+
var shouldHideCursor = function () {
|
|
248
|
+
if (hideCursorWhileTyping === true) return true; // 完全隐藏
|
|
249
|
+
if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏
|
|
250
|
+
if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏
|
|
251
|
+
return false;
|
|
252
|
+
}();
|
|
196
253
|
var textColor = getCurrentTextColor();
|
|
197
254
|
var finalCursorColor = getCurrentCursorColor();
|
|
198
255
|
|
|
199
|
-
// Split displayed text
|
|
200
|
-
var characters = displayedText
|
|
256
|
+
// Split displayed text for animation
|
|
257
|
+
var characters = splitText(displayedText);
|
|
201
258
|
return /*#__PURE__*/createElement(Component, _objectSpread({
|
|
202
259
|
className: cx(styles.container, className),
|
|
203
260
|
ref: containerRef
|
|
@@ -225,11 +282,11 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
225
282
|
children: char === ' ' ? "\xA0" : char
|
|
226
283
|
}, "".concat(currentTextIndex, "-").concat(index));
|
|
227
284
|
})
|
|
228
|
-
}), showCursor && /*#__PURE__*/_jsx(motion.span, {
|
|
285
|
+
}), showCursor && (cursorFade ? /*#__PURE__*/_jsx(motion.span, {
|
|
229
286
|
animate: {
|
|
230
|
-
opacity: 1
|
|
287
|
+
opacity: shouldHideCursor ? 0 : 1
|
|
231
288
|
},
|
|
232
|
-
className: cx(getCursorStyle(), cursorClassName
|
|
289
|
+
className: cx(getCursorStyle(), cursorClassName),
|
|
233
290
|
initial: {
|
|
234
291
|
opacity: 0
|
|
235
292
|
},
|
|
@@ -237,13 +294,20 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
|
|
|
237
294
|
backgroundColor: finalCursorColor
|
|
238
295
|
} : undefined,
|
|
239
296
|
transition: {
|
|
240
|
-
duration: cursorBlinkDuration,
|
|
297
|
+
duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,
|
|
241
298
|
ease: 'easeInOut',
|
|
242
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
299
|
+
repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,
|
|
243
300
|
repeatType: 'reverse'
|
|
244
301
|
},
|
|
245
302
|
children: cursorCharacter
|
|
246
|
-
})
|
|
303
|
+
}) : /*#__PURE__*/_jsx("span", {
|
|
304
|
+
className: cx(getCursorStyle(), cursorClassName),
|
|
305
|
+
style: {
|
|
306
|
+
backgroundColor: finalCursorColor,
|
|
307
|
+
opacity: shouldHideCursor ? 0 : 1
|
|
308
|
+
},
|
|
309
|
+
children: cursorCharacter
|
|
310
|
+
}))]
|
|
247
311
|
}));
|
|
248
312
|
});
|
|
249
313
|
TypewriterEffect.displayName = 'TypewriterEffect';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type { CursorStyle, TypewriterEffectProps } from './type';
|
|
1
|
+
export type { CursorStyle, SegmentMode, TypewriterEffectProps } from './type';
|
|
2
2
|
export { default } from './TypewriterEffect';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ElementType, ReactNode } from 'react';
|
|
2
2
|
export type CursorStyle = 'pipe' | 'underscore' | 'dot' | 'block';
|
|
3
|
+
export type SegmentMode = 'grapheme' | 'word';
|
|
3
4
|
export interface TypewriterEffectProps {
|
|
4
5
|
/**
|
|
5
6
|
* Custom element type for the container
|
|
@@ -32,21 +33,35 @@ export interface TypewriterEffectProps {
|
|
|
32
33
|
* Cursor color (defaults to color if not provided)
|
|
33
34
|
*/
|
|
34
35
|
cursorColor?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Cursor fade animation
|
|
38
|
+
* @default true
|
|
39
|
+
*/
|
|
40
|
+
cursorFade?: boolean;
|
|
35
41
|
/**
|
|
36
42
|
* Style of the cursor (ignored if cursorCharacter is provided)
|
|
37
43
|
* @default 'pipe'
|
|
38
44
|
*/
|
|
39
45
|
cursorStyle?: CursorStyle;
|
|
46
|
+
/**
|
|
47
|
+
* Pause duration after deleting complete before next sentence (milliseconds)
|
|
48
|
+
* @default 0
|
|
49
|
+
*/
|
|
50
|
+
deletePauseDuration?: number;
|
|
40
51
|
/**
|
|
41
52
|
* Speed of deleting characters (milliseconds per character)
|
|
42
53
|
* @default 50
|
|
43
54
|
*/
|
|
44
55
|
deletingSpeed?: number;
|
|
45
56
|
/**
|
|
46
|
-
* Hide cursor
|
|
57
|
+
* Hide cursor behavior
|
|
58
|
+
* - false: always show cursor
|
|
59
|
+
* - 'typing': hide cursor while typing
|
|
60
|
+
* - 'afterTyping': hide cursor after typing complete (during pause)
|
|
61
|
+
* - true: completely hide cursor
|
|
47
62
|
* @default false
|
|
48
63
|
*/
|
|
49
|
-
hideCursorWhileTyping?: boolean;
|
|
64
|
+
hideCursorWhileTyping?: boolean | 'typing' | 'afterTyping';
|
|
50
65
|
/**
|
|
51
66
|
* Initial delay before starting animation (milliseconds)
|
|
52
67
|
* @default 0
|
|
@@ -71,6 +86,13 @@ export interface TypewriterEffectProps {
|
|
|
71
86
|
* @default false
|
|
72
87
|
*/
|
|
73
88
|
reverseMode?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Segment mode for text splitting
|
|
91
|
+
* - 'grapheme': split by character (emoji-safe)
|
|
92
|
+
* - 'word': split by word
|
|
93
|
+
* @default 'grapheme'
|
|
94
|
+
*/
|
|
95
|
+
segmentMode?: SegmentMode;
|
|
74
96
|
/**
|
|
75
97
|
* Array of sentences to display
|
|
76
98
|
*/
|
package/es/awesome/index.d.ts
CHANGED
|
@@ -7,4 +7,4 @@ export { default as GridBackground, type GridBackgroundProps, GridShowcase, type
|
|
|
7
7
|
export { default as Hero, type HeroAction, type HeroProps } from './Hero';
|
|
8
8
|
export { default as Spotlight, type SpotlightProps } from './Spotlight';
|
|
9
9
|
export { default as SpotlightCard, type SpotlightCardProps } from './SpotlightCard';
|
|
10
|
-
export { type CursorStyle, default as TypewriterEffect, type TypewriterEffectProps, } from './TypewriterEffect';
|
|
10
|
+
export { type CursorStyle, type SegmentMode, default as TypewriterEffect, type TypewriterEffectProps, } from './TypewriterEffect';
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { memo } from 'react';
|
|
4
|
+
import { useStyles } from "./style";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
var LoadingDots = /*#__PURE__*/memo(function (_ref) {
|
|
9
|
+
var _ref$size = _ref.size,
|
|
10
|
+
size = _ref$size === void 0 ? 8 : _ref$size,
|
|
11
|
+
color = _ref.color,
|
|
12
|
+
_ref$variant = _ref.variant,
|
|
13
|
+
variant = _ref$variant === void 0 ? 'dots' : _ref$variant,
|
|
14
|
+
className = _ref.className;
|
|
15
|
+
var _useStyles = useStyles({
|
|
16
|
+
color: color,
|
|
17
|
+
size: size
|
|
18
|
+
}),
|
|
19
|
+
styles = _useStyles.styles,
|
|
20
|
+
cx = _useStyles.cx;
|
|
21
|
+
var renderDots = function renderDots() {
|
|
22
|
+
switch (variant) {
|
|
23
|
+
case 'pulse':
|
|
24
|
+
{
|
|
25
|
+
return /*#__PURE__*/_jsx("div", {
|
|
26
|
+
className: styles.pulseDot,
|
|
27
|
+
style: {
|
|
28
|
+
animationDelay: '0s'
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
case 'wave':
|
|
33
|
+
{
|
|
34
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
35
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
36
|
+
className: styles.waveDot,
|
|
37
|
+
style: {
|
|
38
|
+
animationDelay: '0s'
|
|
39
|
+
}
|
|
40
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
41
|
+
className: styles.waveDot,
|
|
42
|
+
style: {
|
|
43
|
+
animationDelay: '0.12s'
|
|
44
|
+
}
|
|
45
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
46
|
+
className: styles.waveDot,
|
|
47
|
+
style: {
|
|
48
|
+
animationDelay: '0.24s'
|
|
49
|
+
}
|
|
50
|
+
})]
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
case 'orbit':
|
|
54
|
+
{
|
|
55
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
56
|
+
className: styles.orbitContainer,
|
|
57
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
58
|
+
className: styles.orbitDot,
|
|
59
|
+
style: {
|
|
60
|
+
animationDelay: '0s'
|
|
61
|
+
}
|
|
62
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
63
|
+
className: styles.orbitDot,
|
|
64
|
+
style: {
|
|
65
|
+
animationDelay: '-0.4s'
|
|
66
|
+
}
|
|
67
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
68
|
+
className: styles.orbitDot,
|
|
69
|
+
style: {
|
|
70
|
+
animationDelay: '-0.8s'
|
|
71
|
+
}
|
|
72
|
+
})]
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
case 'typing':
|
|
76
|
+
{
|
|
77
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
78
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
79
|
+
className: styles.typingDot,
|
|
80
|
+
style: {
|
|
81
|
+
animationDelay: '0s'
|
|
82
|
+
}
|
|
83
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
84
|
+
className: styles.typingDot,
|
|
85
|
+
style: {
|
|
86
|
+
animationDelay: '0.15s'
|
|
87
|
+
}
|
|
88
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
89
|
+
className: styles.typingDot,
|
|
90
|
+
style: {
|
|
91
|
+
animationDelay: '0.3s'
|
|
92
|
+
}
|
|
93
|
+
})]
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
default:
|
|
97
|
+
{
|
|
98
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
99
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
100
|
+
className: styles.defaultDot,
|
|
101
|
+
style: {
|
|
102
|
+
animationDelay: '0s'
|
|
103
|
+
}
|
|
104
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
105
|
+
className: styles.defaultDot,
|
|
106
|
+
style: {
|
|
107
|
+
animationDelay: '0.15s'
|
|
108
|
+
}
|
|
109
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
110
|
+
className: styles.defaultDot,
|
|
111
|
+
style: {
|
|
112
|
+
animationDelay: '0.3s'
|
|
113
|
+
}
|
|
114
|
+
})]
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
return /*#__PURE__*/_jsx("div", {
|
|
120
|
+
className: cx(variant === 'orbit' ? styles.orbitWrapper : styles.container, className),
|
|
121
|
+
children: renderDots()
|
|
122
|
+
});
|
|
123
|
+
});
|
|
124
|
+
LoadingDots.displayName = 'LoadingDots';
|
|
125
|
+
export default LoadingDots;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./LoadingDots";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const useStyles: (props?: {
|
|
2
|
+
color?: string | undefined;
|
|
3
|
+
size: number;
|
|
4
|
+
} | undefined) => import("antd-style").ReturnStyles<{
|
|
5
|
+
container: import("antd-style").SerializedStyles;
|
|
6
|
+
defaultDot: import("antd-style").SerializedStyles;
|
|
7
|
+
orbitContainer: import("antd-style").SerializedStyles;
|
|
8
|
+
orbitDot: import("antd-style").SerializedStyles;
|
|
9
|
+
orbitWrapper: import("antd-style").SerializedStyles;
|
|
10
|
+
pulseDot: import("antd-style").SerializedStyles;
|
|
11
|
+
typingDot: import("antd-style").SerializedStyles;
|
|
12
|
+
waveDot: import("antd-style").SerializedStyles;
|
|
13
|
+
}>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
5
|
+
var token = _ref.token,
|
|
6
|
+
css = _ref.css;
|
|
7
|
+
var size = _ref2.size,
|
|
8
|
+
color = _ref2.color;
|
|
9
|
+
var dotColor = color || token.colorPrimary;
|
|
10
|
+
return {
|
|
11
|
+
container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n padding: ", "px;\n "])), token.paddingXS),
|
|
12
|
+
// Default variant (fade)
|
|
13
|
+
defaultDot: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: fade-animation 1.2s ease-in-out infinite;\n\n @keyframes fade-animation {\n 0%,\n 100% {\n opacity: 0.3;\n }\n\n 50% {\n opacity: 1;\n }\n }\n "])), size, size, dotColor),
|
|
14
|
+
orbitContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n width: ", "px;\n height: ", "px;\n "])), size * 4, size * 4),
|
|
15
|
+
orbitDot: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform-origin: ", "px 0;\n\n width: ", "px;\n height: ", "px;\n margin-block-start: -", "px;\n margin-inline-start: -", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: orbit-animation 1.2s linear infinite;\n\n @keyframes orbit-animation {\n 0% {\n transform: rotate(0deg) translateX(", "px);\n }\n\n 100% {\n transform: rotate(360deg) translateX(", "px);\n }\n }\n "])), size * 2, size, size, size / 2, size / 2, dotColor, size * 2, size * 2),
|
|
16
|
+
// Orbit variant
|
|
17
|
+
orbitWrapper: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n "])), size * 5, size * 5, token.paddingXS),
|
|
18
|
+
// Pulse variant
|
|
19
|
+
pulseDot: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: pulse-animation 1.2s ease-in-out infinite;\n\n @keyframes pulse-animation {\n 0%,\n 100% {\n transform: scale(0.8);\n opacity: 0.3;\n }\n\n 50% {\n transform: scale(1.3);\n opacity: 1;\n }\n }\n "])), size, size, dotColor),
|
|
20
|
+
// Typing variant
|
|
21
|
+
typingDot: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: typing-animation 1.2s ease-in-out infinite;\n\n @keyframes typing-animation {\n 0%,\n 100% {\n transform: scale(0.6);\n opacity: 0.2;\n }\n\n 25% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50%,\n 75% {\n transform: scale(0.6);\n opacity: 0.2;\n }\n }\n "])), size, size, dotColor),
|
|
22
|
+
// Wave variant
|
|
23
|
+
waveDot: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: wave-animation 1.24s ease-in-out infinite;\n\n @keyframes wave-animation {\n 0%,\n 100% {\n transform: translateY(0);\n }\n\n 25% {\n transform: translateY(-", "px);\n }\n\n 50% {\n transform: translateY(0);\n }\n }\n "])), size, size, dotColor, size * 1.5)
|
|
24
|
+
};
|
|
25
|
+
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export type LoadingDotsVariant = 'dots' | 'pulse' | 'wave' | 'orbit' | 'typing';
|
|
2
|
+
export interface LoadingDotsProps {
|
|
3
|
+
/**
|
|
4
|
+
* 自定义类名
|
|
5
|
+
*/
|
|
6
|
+
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* 点的颜色
|
|
9
|
+
* @description 如果不提供,将使用主题的 colorPrimary
|
|
10
|
+
*/
|
|
11
|
+
color?: string;
|
|
12
|
+
/**
|
|
13
|
+
* 点的大小(直径)
|
|
14
|
+
* @default 8
|
|
15
|
+
*/
|
|
16
|
+
size?: number;
|
|
17
|
+
/**
|
|
18
|
+
* 动画变体
|
|
19
|
+
* @default 'dots'
|
|
20
|
+
*/
|
|
21
|
+
variant?: LoadingDotsVariant;
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/es/chat/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export { default as ChatItem, type ChatItemProps } from './ChatItem';
|
|
|
5
5
|
export { ChatActionsBar, type ChatActionsBarProps, default as ChatList, type ChatListProps, type OnActionsClick, type OnAvatatsClick, type OnMessageChange, type RenderAction, type RenderErrorMessage, type RenderItem, type RenderMessage, type RenderMessageExtra, } from './ChatList';
|
|
6
6
|
export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
|
|
7
7
|
export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
|
|
8
|
+
export { default as LoadingDots, type LoadingDotsProps } from './LoadingDots';
|
|
8
9
|
export { default as MessageInput, type MessageInputProps } from './MessageInput';
|
|
9
10
|
export { default as MessageModal, type MessageModalProps } from './MessageModal';
|
|
10
11
|
export { default as TokenTag, type TokenTagProps } from './TokenTag';
|
package/es/chat/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export { default as ChatItem } from "./ChatItem";
|
|
|
5
5
|
export { ChatActionsBar, default as ChatList } from "./ChatList";
|
|
6
6
|
export { default as EditableMessage } from "./EditableMessage";
|
|
7
7
|
export { default as EditableMessageList } from "./EditableMessageList";
|
|
8
|
+
export { default as LoadingDots } from "./LoadingDots";
|
|
8
9
|
export { default as MessageInput } from "./MessageInput";
|
|
9
10
|
export { default as MessageModal } from "./MessageModal";
|
|
10
11
|
export { default as TokenTag } from "./TokenTag";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var FONT_EMOJI = "\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Apple Color Emoji\",\"Twemoji Mozilla\",\"Noto Color Emoji\",\"Android Emoji\"";
|
|
2
2
|
var FONT_EN = "\"HarmonyOS Sans\",\"Segoe UI\",\"SF Pro Display\",-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,\"Open Sans\",\"Helvetica Neue\",sans-serif";
|
|
3
3
|
var FONT_CN = "\"HarmonyOS Sans SC\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft Yahei UI\",\"Microsoft Yahei\",\"Source Han Sans CN\",sans-serif";
|
|
4
|
-
var FONT_CODE = "Hack,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas
|
|
4
|
+
var FONT_CODE = "Hack,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas";
|
|
5
5
|
export var baseToken = {
|
|
6
6
|
borderRadius: 8,
|
|
7
7
|
borderRadiusLG: 12,
|