@chayns-components/typewriter 5.0.53-alpha.0 → 5.0.53-alpha.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/lib/cjs/components/typewriter/{typewrite-view/animated-typewriter-text/AnimatedTypewriterText.js → AnimatedTypewriterText.js} +5 -5
- package/lib/cjs/components/typewriter/AnimatedTypewriterText.js.map +1 -0
- package/lib/cjs/components/typewriter/Typewriter.js +137 -53
- package/lib/cjs/components/typewriter/Typewriter.js.map +1 -1
- package/lib/cjs/components/typewriter/{typewrite-view/TypewriterView.styles.js → Typewriter.styles.js} +2 -2
- package/lib/cjs/components/typewriter/Typewriter.styles.js.map +1 -0
- package/lib/cjs/components/typewriter/useTypewriterAnimation.js +237 -0
- package/lib/cjs/components/typewriter/useTypewriterAnimation.js.map +1 -0
- package/lib/cjs/{utils → components/typewriter}/utils.js +24 -7
- package/lib/cjs/components/typewriter/utils.js.map +1 -0
- package/lib/esm/components/typewriter/{typewrite-view/animated-typewriter-text/AnimatedTypewriterText.js → AnimatedTypewriterText.js} +4 -4
- package/lib/esm/components/typewriter/AnimatedTypewriterText.js.map +1 -0
- package/lib/esm/components/typewriter/Typewriter.js +137 -53
- package/lib/esm/components/typewriter/Typewriter.js.map +1 -1
- package/lib/esm/components/typewriter/{typewrite-view/TypewriterView.styles.js → Typewriter.styles.js} +2 -2
- package/lib/esm/components/typewriter/Typewriter.styles.js.map +1 -0
- package/lib/esm/components/typewriter/useTypewriterAnimation.js +231 -0
- package/lib/esm/components/typewriter/useTypewriterAnimation.js.map +1 -0
- package/lib/esm/{utils → components/typewriter}/utils.js +22 -5
- package/lib/esm/components/typewriter/utils.js.map +1 -0
- package/lib/types/components/typewriter/Typewriter.d.ts +43 -34
- package/lib/types/components/typewriter/{typewrite-view/TypewriterView.styles.d.ts → Typewriter.styles.d.ts} +1 -1
- package/lib/types/components/typewriter/useTypewriterAnimation.d.ts +30 -0
- package/lib/types/{utils → components/typewriter}/utils.d.ts +4 -1
- package/package.json +3 -3
- package/lib/cjs/components/typewriter/typewrite-view/TypewriterView.js +0 -55
- package/lib/cjs/components/typewriter/typewrite-view/TypewriterView.js.map +0 -1
- package/lib/cjs/components/typewriter/typewrite-view/TypewriterView.styles.js.map +0 -1
- package/lib/cjs/components/typewriter/typewrite-view/animated-typewriter-text/AnimatedTypewriterText.js.map +0 -1
- package/lib/cjs/hooks/useChunkStreamingSpeed.js +0 -36
- package/lib/cjs/hooks/useChunkStreamingSpeed.js.map +0 -1
- package/lib/cjs/hooks/useTypewriterAnimation.js +0 -185
- package/lib/cjs/hooks/useTypewriterAnimation.js.map +0 -1
- package/lib/cjs/utils/utils.js.map +0 -1
- package/lib/esm/components/typewriter/typewrite-view/TypewriterView.js +0 -48
- package/lib/esm/components/typewriter/typewrite-view/TypewriterView.js.map +0 -1
- package/lib/esm/components/typewriter/typewrite-view/TypewriterView.styles.js.map +0 -1
- package/lib/esm/components/typewriter/typewrite-view/animated-typewriter-text/AnimatedTypewriterText.js.map +0 -1
- package/lib/esm/hooks/useChunkStreamingSpeed.js +0 -30
- package/lib/esm/hooks/useChunkStreamingSpeed.js.map +0 -1
- package/lib/esm/hooks/useTypewriterAnimation.js +0 -178
- package/lib/esm/hooks/useTypewriterAnimation.js.map +0 -1
- package/lib/esm/utils/utils.js.map +0 -1
- package/lib/types/components/typewriter/typewrite-view/TypewriterView.d.ts +0 -19
- package/lib/types/hooks/useChunkStreamingSpeed.d.ts +0 -7
- package/lib/types/hooks/useTypewriterAnimation.d.ts +0 -35
- /package/lib/types/components/typewriter/{typewrite-view/animated-typewriter-text/AnimatedTypewriterText.d.ts → AnimatedTypewriterText.d.ts} +0 -0
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var
|
|
8
|
+
var _Typewriter = require("./Typewriter.styles");
|
|
9
9
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
10
|
const AnimatedTypewriterText = ({
|
|
11
11
|
shouldHideCursor,
|
|
@@ -32,13 +32,13 @@ const AnimatedTypewriterText = ({
|
|
|
32
32
|
};
|
|
33
33
|
const lastParentWithContent = traverseNodes(ref);
|
|
34
34
|
|
|
35
|
-
// Removes
|
|
35
|
+
// Removes the cursor marker from the previous render.
|
|
36
36
|
ref.classList.remove('typewriter-lastWithContent');
|
|
37
|
-
ref.querySelectorAll('.lastWithContent').forEach(element => {
|
|
37
|
+
ref.querySelectorAll('.typewriter-lastWithContent').forEach(element => {
|
|
38
38
|
element.classList.remove('typewriter-lastWithContent');
|
|
39
39
|
});
|
|
40
40
|
|
|
41
|
-
// Adds
|
|
41
|
+
// Adds the cursor marker to the last element that still contains text.
|
|
42
42
|
if (lastParentWithContent) {
|
|
43
43
|
lastParentWithContent.classList.add('typewriter-lastWithContent');
|
|
44
44
|
} else {
|
|
@@ -46,7 +46,7 @@ const AnimatedTypewriterText = ({
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
}, [shouldHideCursor]);
|
|
49
|
-
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(
|
|
49
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
|
|
50
50
|
ref: ref => updateTypewriterCursor(ref),
|
|
51
51
|
dangerouslySetInnerHTML: {
|
|
52
52
|
__html: shownText
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedTypewriterText.js","names":["_react","_interopRequireWildcard","require","_Typewriter","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedTypewriterText","shouldHideCursor","shownText","shouldRemainSingleLine","textStyle","updateTypewriterCursor","useCallback","ref","traverseNodes","node","_node$textContent","nodeType","Node","TEXT_NODE","textContent","trim","parentElement","childNodes","Array","from","length","result","lastParentWithContent","classList","remove","querySelectorAll","forEach","element","add","useMemo","createElement","StyledTypewriterText","dangerouslySetInnerHTML","__html","$shouldRemainSingleLine","style","$isAnimatingText","_default","exports"],"sources":["../../../../src/components/typewriter/AnimatedTypewriterText.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { StyledTypewriterText } from './Typewriter.styles';\n\ntype AnimatedTypewriterTextProps = {\n shouldHideCursor: boolean;\n shownText: string;\n textStyle?: CSSPropertiesWithVars;\n shouldRemainSingleLine: boolean;\n};\n\nconst AnimatedTypewriterText: FC<AnimatedTypewriterTextProps> = ({\n shouldHideCursor,\n shownText,\n shouldRemainSingleLine,\n textStyle,\n}) => {\n const updateTypewriterCursor = useCallback(\n (ref: HTMLSpanElement | null) => {\n if (ref && !shouldHideCursor) {\n // Finds the last text node with content.\n const traverseNodes = (node: Node): HTMLElement | null => {\n if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {\n return node.parentElement;\n }\n\n const childNodes = Array.from(node.childNodes);\n for (let i = childNodes.length - 1; i >= 0; i--) {\n const result = traverseNodes(childNodes[i] as Node);\n if (result) {\n return result;\n }\n }\n\n return null;\n };\n\n const lastParentWithContent = traverseNodes(ref);\n\n // Removes the cursor marker from the previous render.\n ref.classList.remove('typewriter-lastWithContent');\n ref.querySelectorAll('.typewriter-lastWithContent').forEach((element) => {\n element.classList.remove('typewriter-lastWithContent');\n });\n\n // Adds the cursor marker to the last element that still contains text.\n if (lastParentWithContent) {\n lastParentWithContent.classList.add('typewriter-lastWithContent');\n } else {\n ref.classList.add('typewriter-lastWithContent');\n }\n }\n },\n [shouldHideCursor],\n );\n\n return useMemo(\n () => (\n <StyledTypewriterText\n ref={(ref) => updateTypewriterCursor(ref)}\n dangerouslySetInnerHTML={{ __html: shownText }}\n $shouldRemainSingleLine={shouldRemainSingleLine}\n style={textStyle}\n $isAnimatingText\n />\n ),\n [shownText, shouldRemainSingleLine, textStyle, updateTypewriterCursor],\n );\n};\n\nexport default AnimatedTypewriterText;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,14 +7,17 @@ exports.default = void 0;
|
|
|
7
7
|
var _core = require("@chayns-components/core");
|
|
8
8
|
var _chaynsApi = require("chayns-api");
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _reactDom = require("react-dom");
|
|
10
11
|
var _server = require("react-dom/server");
|
|
11
12
|
var _cursor = require("../../types/cursor");
|
|
12
13
|
var _speed = require("../../types/speed");
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var _utils = require("
|
|
14
|
+
var _AnimatedTypewriterText = _interopRequireDefault(require("./AnimatedTypewriterText"));
|
|
15
|
+
var _Typewriter = require("./Typewriter.styles");
|
|
16
|
+
var _utils = require("./utils");
|
|
17
|
+
var _useTypewriterAnimation = _interopRequireDefault(require("./useTypewriterAnimation"));
|
|
16
18
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
20
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
|
|
18
21
|
const Typewriter = ({
|
|
19
22
|
children,
|
|
20
23
|
cursorType = _cursor.CursorType.Default,
|
|
@@ -41,104 +44,185 @@ const Typewriter = ({
|
|
|
41
44
|
shouldCalcAutoSpeed = false,
|
|
42
45
|
autoSpeedBaseFactor = 2000
|
|
43
46
|
}) => {
|
|
44
|
-
var _colorScheme$
|
|
47
|
+
var _colorScheme$designSe5, _colorScheme$designSe6, _colorScheme$designSe9, _colorScheme$designSe0;
|
|
45
48
|
const [currentChildrenIndex, setCurrentChildrenIndex] = (0, _react.useState)(0);
|
|
49
|
+
const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = (0, _react.useState)(false);
|
|
50
|
+
const autoSpeed = (0, _react.useRef)();
|
|
51
|
+
const autoSteps = (0, _react.useRef)(animationSteps);
|
|
46
52
|
const functions = (0, _chaynsApi.useFunctions)();
|
|
47
53
|
const values = (0, _chaynsApi.useValues)();
|
|
48
54
|
const colorScheme = (0, _core.useColorScheme)();
|
|
55
|
+
useIsomorphicLayoutEffect(() => {
|
|
56
|
+
if (children) {
|
|
57
|
+
setHasRenderedChildrenOnce(false);
|
|
58
|
+
}
|
|
59
|
+
}, [children]);
|
|
60
|
+
(0, _react.useEffect)(() => {
|
|
61
|
+
if (!hasRenderedChildrenOnce) {
|
|
62
|
+
setHasRenderedChildrenOnce(true);
|
|
63
|
+
}
|
|
64
|
+
}, [hasRenderedChildrenOnce]);
|
|
49
65
|
const sortedChildren = (0, _react.useMemo)(() => Array.isArray(children) && shouldSortChildrenRandomly ? (0, _utils.shuffleArray)(children) : children, [children, shouldSortChildrenRandomly]);
|
|
50
66
|
const areMultipleChildrenGiven = Array.isArray(sortedChildren);
|
|
51
67
|
const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;
|
|
52
|
-
const
|
|
53
|
-
var _colorScheme$
|
|
54
|
-
|
|
68
|
+
const textContent = (0, _react.useMemo)(() => {
|
|
69
|
+
var _colorScheme$designSe3, _colorScheme$designSe4;
|
|
70
|
+
if (areMultipleChildrenGiven) {
|
|
71
|
+
const currentChildren = sortedChildren[currentChildrenIndex];
|
|
72
|
+
if (currentChildren) {
|
|
73
|
+
var _colorScheme$designSe, _colorScheme$designSe2;
|
|
74
|
+
return /*#__PURE__*/_react.default.isValidElement(currentChildren) ? (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_chaynsApi.ChaynsProvider, {
|
|
75
|
+
data: values,
|
|
76
|
+
functions: functions,
|
|
77
|
+
isModule: true
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
|
|
79
|
+
color: colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe = colorScheme.designSettings) === null || _colorScheme$designSe === void 0 ? void 0 : _colorScheme$designSe.color,
|
|
80
|
+
colorMode: colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe2 = colorScheme.designSettings) === null || _colorScheme$designSe2 === void 0 ? void 0 : _colorScheme$designSe2.colorMode,
|
|
81
|
+
style: {
|
|
82
|
+
display: 'inline'
|
|
83
|
+
}
|
|
84
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
85
|
+
className: "notranslate"
|
|
86
|
+
}, currentChildren)))) : currentChildren;
|
|
87
|
+
}
|
|
88
|
+
return '';
|
|
89
|
+
}
|
|
90
|
+
return /*#__PURE__*/_react.default.isValidElement(sortedChildren) ? (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_chaynsApi.ChaynsProvider, {
|
|
55
91
|
data: values,
|
|
56
92
|
functions: functions,
|
|
57
93
|
isModule: true
|
|
58
94
|
}, /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
|
|
59
|
-
color: colorScheme === null || colorScheme === void 0 || (_colorScheme$
|
|
60
|
-
colorMode: colorScheme === null || colorScheme === void 0 || (_colorScheme$
|
|
95
|
+
color: colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe3 = colorScheme.designSettings) === null || _colorScheme$designSe3 === void 0 ? void 0 : _colorScheme$designSe3.color,
|
|
96
|
+
colorMode: colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe4 = colorScheme.designSettings) === null || _colorScheme$designSe4 === void 0 ? void 0 : _colorScheme$designSe4.colorMode,
|
|
61
97
|
style: {
|
|
62
98
|
display: 'inline'
|
|
63
99
|
}
|
|
64
100
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
65
101
|
className: "notranslate"
|
|
66
|
-
},
|
|
67
|
-
}, [colorScheme === null || colorScheme === void 0 || (_colorScheme$
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
102
|
+
}, sortedChildren)))) : sortedChildren;
|
|
103
|
+
}, [areMultipleChildrenGiven, colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe5 = colorScheme.designSettings) === null || _colorScheme$designSe5 === void 0 ? void 0 : _colorScheme$designSe5.color, colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe6 = colorScheme.designSettings) === null || _colorScheme$designSe6 === void 0 ? void 0 : _colorScheme$designSe6.colorMode, currentChildrenIndex, functions, sortedChildren, values]);
|
|
104
|
+
const charactersCount = (0, _react.useMemo)(() => (0, _utils.getCharactersCount)(textContent), [textContent]);
|
|
105
|
+
const chunkIntervalExponentialMovingAverage = (0, _react.useRef)({
|
|
106
|
+
lastLength: charactersCount,
|
|
107
|
+
ema: charactersCount / (autoSpeedBaseFactor / 1000)
|
|
108
|
+
});
|
|
109
|
+
(0, _react.useEffect)(() => {
|
|
110
|
+
if (shouldUseResetAnimation) {
|
|
111
|
+
chunkIntervalExponentialMovingAverage.current = {
|
|
112
|
+
ema: charactersCount / (autoSpeedBaseFactor / 1000),
|
|
113
|
+
lastLength: charactersCount
|
|
114
|
+
};
|
|
72
115
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
116
|
+
chunkIntervalExponentialMovingAverage.current = (0, _utils.updateChunkStreamingSpeedEMA)({
|
|
117
|
+
currentLength: charactersCount,
|
|
118
|
+
state: chunkIntervalExponentialMovingAverage.current
|
|
119
|
+
});
|
|
120
|
+
}, [autoSpeedBaseFactor, charactersCount, shouldUseResetAnimation]);
|
|
121
|
+
(0, _react.useEffect)(() => {
|
|
122
|
+
if (!shouldCalcAutoSpeed) {
|
|
123
|
+
autoSpeed.current = undefined;
|
|
124
|
+
autoSteps.current = animationSteps;
|
|
125
|
+
return;
|
|
82
126
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
127
|
+
const {
|
|
128
|
+
speed: calculatedAutoSpeed,
|
|
129
|
+
steps
|
|
130
|
+
} = (0, _utils.calculateAutoSpeed)(chunkIntervalExponentialMovingAverage.current.ema);
|
|
131
|
+
autoSpeed.current = calculatedAutoSpeed;
|
|
132
|
+
autoSteps.current = steps;
|
|
133
|
+
}, [animationSteps, charactersCount, shouldCalcAutoSpeed]);
|
|
134
|
+
const handleSetNextChildrenIndex = (0, _react.useCallback)(() => {
|
|
135
|
+
setCurrentChildrenIndex(prevIndex => {
|
|
136
|
+
const nextIndex = prevIndex + 1;
|
|
137
|
+
return nextIndex > childrenCount - 1 ? 0 : nextIndex;
|
|
138
|
+
});
|
|
139
|
+
}, [childrenCount]);
|
|
86
140
|
const {
|
|
87
|
-
effectiveShownCharCount,
|
|
88
|
-
hasRenderedChildrenOnce,
|
|
89
141
|
handleClick,
|
|
90
|
-
|
|
91
|
-
|
|
142
|
+
isResetAnimationActive,
|
|
143
|
+
shownCharCount,
|
|
92
144
|
shouldPreventBlinkingCursor
|
|
93
145
|
} = (0, _useTypewriterAnimation.default)({
|
|
94
|
-
|
|
146
|
+
areMultipleChildrenGiven,
|
|
147
|
+
autoSpeedRef: autoSpeed,
|
|
148
|
+
autoStepsRef: autoSteps,
|
|
95
149
|
charactersCount,
|
|
96
|
-
childrenKey: children,
|
|
97
|
-
childrenCount,
|
|
98
|
-
currentTextLength: textContent.length,
|
|
99
150
|
cursorType,
|
|
100
151
|
nextTextDelay,
|
|
101
|
-
|
|
102
|
-
onFinish,
|
|
152
|
+
onAdvanceText: handleSetNextChildrenIndex,
|
|
103
153
|
onResetAnimationEnd,
|
|
104
154
|
onResetAnimationStart,
|
|
105
155
|
onTypingAnimationEnd,
|
|
106
156
|
onTypingAnimationStart,
|
|
107
157
|
resetDelay,
|
|
108
158
|
resetSpeed,
|
|
109
|
-
shouldCalcAutoSpeed,
|
|
110
|
-
shouldForceCursorAnimation,
|
|
111
159
|
shouldUseResetAnimation,
|
|
112
160
|
shouldWaitForContent,
|
|
113
161
|
speed,
|
|
114
|
-
startDelay
|
|
162
|
+
startDelay,
|
|
163
|
+
textContentLength: textContent.length
|
|
115
164
|
});
|
|
116
|
-
const
|
|
165
|
+
const isAnimatingText = shownCharCount < textContent.length || shouldForceCursorAnimation || areMultipleChildrenGiven || textContent.length === 0;
|
|
166
|
+
(0, _react.useEffect)(() => {
|
|
167
|
+
if (!isAnimatingText && typeof onFinish === 'function') {
|
|
168
|
+
onFinish();
|
|
169
|
+
}
|
|
170
|
+
}, [isAnimatingText, onFinish]);
|
|
171
|
+
const shownText = (0, _react.useMemo)(() => (0, _utils.getSubTextFromHTML)(textContent, shownCharCount), [shownCharCount, textContent]);
|
|
117
172
|
const pseudoTextHTML = (0, _react.useMemo)(() => {
|
|
118
173
|
if (pseudoChildren) {
|
|
119
|
-
|
|
174
|
+
var _colorScheme$designSe7, _colorScheme$designSe8;
|
|
175
|
+
const pseudoText = /*#__PURE__*/_react.default.isValidElement(pseudoChildren) ? (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_chaynsApi.ChaynsProvider, {
|
|
176
|
+
data: values,
|
|
177
|
+
functions: functions,
|
|
178
|
+
isModule: true
|
|
179
|
+
}, /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
|
|
180
|
+
color: colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe7 = colorScheme.designSettings) === null || _colorScheme$designSe7 === void 0 ? void 0 : _colorScheme$designSe7.color,
|
|
181
|
+
colorMode: colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe8 = colorScheme.designSettings) === null || _colorScheme$designSe8 === void 0 ? void 0 : _colorScheme$designSe8.colorMode,
|
|
182
|
+
style: {
|
|
183
|
+
display: 'inline'
|
|
184
|
+
}
|
|
185
|
+
}, pseudoChildren))) : pseudoChildren;
|
|
120
186
|
if (shouldUseAnimationHeight) {
|
|
121
|
-
return (0, _utils.getSubTextFromHTML)(pseudoText,
|
|
187
|
+
return (0, _utils.getSubTextFromHTML)(pseudoText, shownCharCount);
|
|
122
188
|
}
|
|
123
189
|
return pseudoText;
|
|
124
190
|
}
|
|
125
191
|
if (shouldUseAnimationHeight && textContent) {
|
|
126
|
-
return (0, _utils.getSubTextFromHTML)(textContent,
|
|
192
|
+
return (0, _utils.getSubTextFromHTML)(textContent, shownCharCount);
|
|
127
193
|
}
|
|
128
194
|
return textContent || '​';
|
|
129
|
-
}, [
|
|
130
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
131
|
-
cursorType: cursorType,
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
195
|
+
}, [colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe9 = colorScheme.designSettings) === null || _colorScheme$designSe9 === void 0 ? void 0 : _colorScheme$designSe9.color, colorScheme === null || colorScheme === void 0 || (_colorScheme$designSe0 = colorScheme.designSettings) === null || _colorScheme$designSe0 === void 0 ? void 0 : _colorScheme$designSe0.colorMode, functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);
|
|
196
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, {
|
|
197
|
+
$cursorType: cursorType,
|
|
198
|
+
onClick: isAnimatingText ? handleClick : undefined,
|
|
199
|
+
$isAnimatingText: isAnimatingText,
|
|
200
|
+
$shouldHideCursor: shouldHideCursor,
|
|
201
|
+
$shouldPreventBlinkAnimation: shouldPreventBlinkingCursor
|
|
202
|
+
}, isAnimatingText ? /*#__PURE__*/_react.default.createElement(_AnimatedTypewriterText.default, {
|
|
136
203
|
shouldHideCursor: shouldHideCursor,
|
|
137
|
-
shouldPreventBlinkingCursor: shouldPreventBlinkingCursor,
|
|
138
204
|
shouldRemainSingleLine: shouldRemainSingleLine,
|
|
139
205
|
shownText: shownText,
|
|
140
206
|
textStyle: textStyle
|
|
141
|
-
},
|
|
207
|
+
}) : /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
|
|
208
|
+
className: "notranslate",
|
|
209
|
+
$shouldRemainSingleLine: shouldRemainSingleLine,
|
|
210
|
+
dangerouslySetInnerHTML: typeof sortedChildren === 'string' ? {
|
|
211
|
+
__html: shownText
|
|
212
|
+
} : undefined,
|
|
213
|
+
style: textStyle
|
|
214
|
+
}, typeof sortedChildren !== 'string' ? sortedChildren : undefined), isAnimatingText && /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterPseudoText, {
|
|
215
|
+
$isAnimatingText: isAnimatingText,
|
|
216
|
+
$shouldHideCursor: shouldHideCursor,
|
|
217
|
+
dangerouslySetInnerHTML: {
|
|
218
|
+
__html: pseudoTextHTML
|
|
219
|
+
}
|
|
220
|
+
}), !hasRenderedChildrenOnce && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
|
|
221
|
+
style: {
|
|
222
|
+
position: 'absolute',
|
|
223
|
+
visibility: 'hidden'
|
|
224
|
+
}
|
|
225
|
+
}, children), document.body)), [children, cursorType, handleClick, hasRenderedChildrenOnce, isAnimatingText, pseudoTextHTML, shouldHideCursor, shouldPreventBlinkingCursor, shouldRemainSingleLine, shownText, sortedChildren, textStyle]);
|
|
142
226
|
};
|
|
143
227
|
Typewriter.displayName = 'Typewriter';
|
|
144
228
|
var _default = exports.default = Typewriter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typewriter.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_server","_cursor","_speed","_TypewriterView","_interopRequireDefault","_useTypewriterAnimation","_utils","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Typewriter","children","cursorType","CursorType","Default","nextTextDelay","TypewriterDelay","Medium","onFinish","onResetAnimationEnd","animationSteps","onResetAnimationStart","onTypingAnimationEnd","onTypingAnimationStart","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldRemainSingleLine","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","TypewriterSpeed","resetSpeed","startDelay","None","textStyle","shouldCalcAutoSpeed","autoSpeedBaseFactor","_colorScheme$designSe3","_colorScheme$designSe4","currentChildrenIndex","setCurrentChildrenIndex","useState","functions","useFunctions","values","useValues","colorScheme","useColorScheme","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","renderChildToString","useCallback","child","_colorScheme$designSe","_colorScheme$designSe2","React","isValidElement","renderToString","createElement","ChaynsProvider","data","isModule","ColorSchemeProvider","color","designSettings","colorMode","style","display","className","handleSetNextChildrenIndex","prevIndex","newIndex","textContent","currentChildren","charactersCount","getCharactersCount","effectiveShownCharCount","hasRenderedChildrenOnce","handleClick","isAnimatingText","isTypingAnimationActive","shouldPreventBlinkingCursor","useTypewriterAnimation","childrenKey","currentTextLength","onAdvanceChild","shownText","getSubTextFromHTML","pseudoTextHTML","pseudoText","undefined","displayName","_default","exports"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider, useColorScheme } from '@chayns-components/core';\nimport { ChaynsProvider, useFunctions, useValues } from 'chayns-api';\nimport React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { CursorType } from '../../types/cursor';\nimport { TypewriterDelay, TypewriterSpeed } from '../../types/speed';\nimport TypewriterView from './typewrite-view/TypewriterView';\nimport useTypewriterAnimation from '../../hooks/useTypewriterAnimation';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from '../../utils/utils';\n\nexport type TypewriterProps = {\n /**\n * The number of characters that will be animated per animation cycle.\n */\n animationSteps?: number;\n /**\n * The text to type\n */\n children: ReactElement | ReactElement[] | string | string[];\n /**\n * The type of the cursor. Use the CursorType enum for this prop.\n */\n cursorType?: CursorType;\n /**\n * The delay in milliseconds before the next text is shown.\n * This prop is only used if multiple texts are given.\n */\n nextTextDelay?: TypewriterDelay;\n /**\n * Function that is executed when the typewriter animation has finished. This function will not\n * be executed if multiple texts are used.\n */\n onFinish?: VoidFunction;\n /**\n * Function that is executed when the reset animation has finished. This function will not be\n * executed if `shouldUseResetAnimation` is not set to `true`.\n */\n onResetAnimationEnd?: VoidFunction;\n /**\n * Function that is executed when the reset animation has started. This function will not be\n * executed if `shouldUseResetAnimation` is not set to `true`.\n */\n onResetAnimationStart?: VoidFunction;\n /**\n * Function that is executed when the typing animation has finished. If multiple texts are given,\n * this function will be executed for each text.\n */\n onTypingAnimationEnd?: VoidFunction;\n /**\n * Function that is executed when the typing animation has started. If multiple texts are given,\n * this function will be executed for each text.\n */\n onTypingAnimationStart?: VoidFunction;\n /**\n * Pseudo-element to be rendered invisible during animation to define the size of the element\n * for the typewriter effect. By default, the \"children\" is used for this purpose.\n */\n pseudoChildren?: ReactElement | string;\n /**\n * Waiting time in milliseconds before the typewriter resets the text.\n * This prop is only used if multiple texts are given.\n */\n resetDelay?: TypewriterDelay;\n /**\n * The reset speed of the animation. Use the TypewriterSpeed enum for this prop.\n */\n resetSpeed?: TypewriterSpeed | number;\n /**\n * Specifies whether the cursor should be forced to animate even if no text is currently animated.\n */\n shouldForceCursorAnimation?: boolean;\n /**\n * Specifies whether the cursor should be hidden\n */\n shouldHideCursor?: boolean;\n /**\n * Whether the content should remain a single line.\n */\n shouldRemainSingleLine?: boolean;\n /**\n * Specifies whether the children should be sorted randomly if there are multiple texts.\n * This makes the typewriter start with a different text each time and also changes them\n * in a random order.\n */\n shouldSortChildrenRandomly?: boolean;\n /**\n * Specifies whether the animation should use its full height or the height of the current\n * chunk.\n */\n shouldUseAnimationHeight?: boolean;\n /**\n * Whether the animation speed should be calculated with the chunk interval.\n */\n shouldCalcAutoSpeed?: boolean;\n /**\n * Sets how long the animation should last when `shouldCalcAutoSpeed` is enabled in milliseconds.\n * When chunks are streamed, this value will only be used for the initial speed and then change to the speed characters are added at\n */\n autoSpeedBaseFactor?: number;\n /**\n * Specifies whether the reset of the text should be animated with a backspace animation for\n * multiple texts.\n */\n shouldUseResetAnimation?: boolean;\n /**\n * Whether the typewriter should wait for new content\n */\n shouldWaitForContent?: boolean;\n /**\n * The speed of the animation. Use the TypewriterSpeed enum for this prop.\n */\n speed?: TypewriterSpeed | number;\n /**\n * The delay in milliseconds before the typewriter starts typing.\n */\n startDelay?: TypewriterDelay;\n /**\n * The style of the typewriter text element\n */\n textStyle?: CSSPropertiesWithVars;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n children,\n cursorType = CursorType.Default,\n nextTextDelay = TypewriterDelay.Medium,\n onFinish,\n onResetAnimationEnd,\n animationSteps = 1,\n onResetAnimationStart,\n onTypingAnimationEnd,\n onTypingAnimationStart,\n pseudoChildren,\n resetDelay = TypewriterDelay.Medium,\n shouldForceCursorAnimation = false,\n shouldHideCursor = false,\n shouldRemainSingleLine = false,\n shouldSortChildrenRandomly = false,\n shouldUseAnimationHeight = false,\n shouldUseResetAnimation = false,\n shouldWaitForContent,\n speed = TypewriterSpeed.Medium,\n resetSpeed = speed,\n startDelay = TypewriterDelay.None,\n textStyle,\n shouldCalcAutoSpeed = false,\n autoSpeedBaseFactor = 2000,\n}) => {\n const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n\n const functions = useFunctions();\n const values = useValues();\n\n const colorScheme = useColorScheme();\n\n const sortedChildren = useMemo(\n () =>\n Array.isArray(children) && shouldSortChildrenRandomly\n ? shuffleArray<ReactElement | string>(children)\n : children,\n [children, shouldSortChildrenRandomly],\n );\n\n const areMultipleChildrenGiven = Array.isArray(sortedChildren);\n const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;\n\n const renderChildToString = useCallback(\n (child: ReactElement | ReactElement[] | string | string[]) =>\n React.isValidElement(child)\n ? renderToString(\n <ChaynsProvider data={values} functions={functions} isModule>\n <ColorSchemeProvider\n color={colorScheme?.designSettings?.color}\n colorMode={colorScheme?.designSettings?.colorMode}\n style={{ display: 'inline' }}\n >\n <span className=\"notranslate\">{child}</span>\n </ColorSchemeProvider>\n </ChaynsProvider>,\n )\n : (child as string),\n [\n colorScheme?.designSettings?.color,\n colorScheme?.designSettings?.colorMode,\n functions,\n values,\n ],\n );\n\n const handleSetNextChildrenIndex = useCallback(\n () =>\n setCurrentChildrenIndex((prevIndex) => {\n let newIndex = prevIndex + 1;\n\n if (newIndex > childrenCount - 1) {\n newIndex = 0;\n }\n\n return newIndex;\n }),\n [childrenCount],\n );\n\n const textContent = useMemo(() => {\n if (areMultipleChildrenGiven) {\n const currentChildren = sortedChildren[currentChildrenIndex];\n\n if (currentChildren) {\n return renderChildToString(currentChildren);\n }\n\n return '';\n }\n\n return renderChildToString(sortedChildren);\n }, [areMultipleChildrenGiven, currentChildrenIndex, renderChildToString, sortedChildren]);\n\n const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n const {\n effectiveShownCharCount,\n hasRenderedChildrenOnce,\n handleClick,\n isAnimatingText,\n isTypingAnimationActive,\n shouldPreventBlinkingCursor,\n } = useTypewriterAnimation({\n autoSpeedBaseFactor,\n charactersCount,\n childrenKey: children,\n childrenCount,\n currentTextLength: textContent.length,\n cursorType,\n nextTextDelay,\n onAdvanceChild: handleSetNextChildrenIndex,\n onFinish,\n onResetAnimationEnd,\n onResetAnimationStart,\n onTypingAnimationEnd,\n onTypingAnimationStart,\n resetDelay,\n resetSpeed,\n shouldCalcAutoSpeed,\n shouldForceCursorAnimation,\n shouldUseResetAnimation,\n shouldWaitForContent,\n speed,\n startDelay,\n });\n\n const shownText = useMemo(\n () => getSubTextFromHTML(textContent, effectiveShownCharCount) || '​',\n [effectiveShownCharCount, textContent],\n );\n\n const pseudoTextHTML = useMemo(() => {\n if (pseudoChildren) {\n const pseudoText = renderChildToString(pseudoChildren);\n\n if (shouldUseAnimationHeight) {\n return getSubTextFromHTML(pseudoText, effectiveShownCharCount);\n }\n\n return pseudoText;\n }\n\n if (shouldUseAnimationHeight && textContent) {\n return getSubTextFromHTML(textContent, effectiveShownCharCount);\n }\n\n return textContent || '​';\n }, [\n effectiveShownCharCount,\n pseudoChildren,\n renderChildToString,\n shouldUseAnimationHeight,\n textContent,\n ]);\n\n return (\n <TypewriterView\n cursorType={cursorType}\n handleClick={isTypingAnimationActive ? handleClick : undefined}\n hasRenderedChildrenOnce={hasRenderedChildrenOnce}\n isAnimatingText={isAnimatingText}\n pseudoTextHTML={pseudoTextHTML}\n shouldHideCursor={shouldHideCursor}\n shouldPreventBlinkingCursor={shouldPreventBlinkingCursor}\n shouldRemainSingleLine={shouldRemainSingleLine}\n shownText={shownText}\n textStyle={textStyle}\n >\n {sortedChildren}\n </TypewriterView>\n );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAEA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,uBAAA,GAAAD,sBAAA,CAAAR,OAAA;AACA,IAAAU,MAAA,GAAAV,OAAA;AAAyF,SAAAQ,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAZ,uBAAA,YAAAA,CAAAQ,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAkHzF,MAAMgB,UAA+B,GAAGA,CAAC;EACrCC,QAAQ;EACRC,UAAU,GAAGC,kBAAU,CAACC,OAAO;EAC/BC,aAAa,GAAGC,sBAAe,CAACC,MAAM;EACtCC,QAAQ;EACRC,mBAAmB;EACnBC,cAAc,GAAG,CAAC;EAClBC,qBAAqB;EACrBC,oBAAoB;EACpBC,sBAAsB;EACtBC,cAAc;EACdC,UAAU,GAAGT,sBAAe,CAACC,MAAM;EACnCS,0BAA0B,GAAG,KAAK;EAClCC,gBAAgB,GAAG,KAAK;EACxBC,sBAAsB,GAAG,KAAK;EAC9BC,0BAA0B,GAAG,KAAK;EAClCC,wBAAwB,GAAG,KAAK;EAChCC,uBAAuB,GAAG,KAAK;EAC/BC,oBAAoB;EACpBC,KAAK,GAAGC,sBAAe,CAACjB,MAAM;EAC9BkB,UAAU,GAAGF,KAAK;EAClBG,UAAU,GAAGpB,sBAAe,CAACqB,IAAI;EACjCC,SAAS;EACTC,mBAAmB,GAAG,KAAK;EAC3BC,mBAAmB,GAAG;AAC1B,CAAC,KAAK;EAAA,IAAAC,sBAAA,EAAAC,sBAAA;EACF,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAEnE,MAAMC,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAChC,MAAMC,MAAM,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE1B,MAAMC,WAAW,GAAG,IAAAC,oBAAc,EAAC,CAAC;EAEpC,MAAMC,cAAc,GAAG,IAAAC,cAAO,EAC1B,MACIC,KAAK,CAACC,OAAO,CAAC5C,QAAQ,CAAC,IAAIkB,0BAA0B,GAC/C,IAAA2B,mBAAY,EAAwB7C,QAAQ,CAAC,GAC7CA,QAAQ,EAClB,CAACA,QAAQ,EAAEkB,0BAA0B,CACzC,CAAC;EAED,MAAM4B,wBAAwB,GAAGH,KAAK,CAACC,OAAO,CAACH,cAAc,CAAC;EAC9D,MAAMM,aAAa,GAAGD,wBAAwB,GAAGL,cAAc,CAACO,MAAM,GAAG,CAAC;EAE1E,MAAMC,mBAAmB,GAAG,IAAAC,kBAAW,EAClCC,KAAwD;IAAA,IAAAC,qBAAA,EAAAC,sBAAA;IAAA,OACrD,aAAAC,cAAK,CAACC,cAAc,CAACJ,KAAK,CAAC,GACrB,IAAAK,sBAAc,eACVrF,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAACvF,UAAA,CAAAwF,cAAc;MAACC,IAAI,EAAEtB,MAAO;MAACF,SAAS,EAAEA,SAAU;MAACyB,QAAQ;IAAA,gBACxDzF,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAACzF,KAAA,CAAA6F,mBAAmB;MAChBC,KAAK,EAAEvB,WAAW,aAAXA,WAAW,gBAAAa,qBAAA,GAAXb,WAAW,CAAEwB,cAAc,cAAAX,qBAAA,uBAA3BA,qBAAA,CAA6BU,KAAM;MAC1CE,SAAS,EAAEzB,WAAW,aAAXA,WAAW,gBAAAc,sBAAA,GAAXd,WAAW,CAAEwB,cAAc,cAAAV,sBAAA,uBAA3BA,sBAAA,CAA6BW,SAAU;MAClDC,KAAK,EAAE;QAAEC,OAAO,EAAE;MAAS;IAAE,gBAE7B/F,MAAA,CAAAW,OAAA,CAAA2E,aAAA;MAAMU,SAAS,EAAC;IAAa,GAAEhB,KAAY,CAC1B,CACT,CACpB,CAAC,GACAA,KAAgB;EAAA,GAC3B,CACIZ,WAAW,aAAXA,WAAW,gBAAAT,sBAAA,GAAXS,WAAW,CAAEwB,cAAc,cAAAjC,sBAAA,uBAA3BA,sBAAA,CAA6BgC,KAAK,EAClCvB,WAAW,aAAXA,WAAW,gBAAAR,sBAAA,GAAXQ,WAAW,CAAEwB,cAAc,cAAAhC,sBAAA,uBAA3BA,sBAAA,CAA6BiC,SAAS,EACtC7B,SAAS,EACTE,MAAM,CAEd,CAAC;EAED,MAAM+B,0BAA0B,GAAG,IAAAlB,kBAAW,EAC1C,MACIjB,uBAAuB,CAAEoC,SAAS,IAAK;IACnC,IAAIC,QAAQ,GAAGD,SAAS,GAAG,CAAC;IAE5B,IAAIC,QAAQ,GAAGvB,aAAa,GAAG,CAAC,EAAE;MAC9BuB,QAAQ,GAAG,CAAC;IAChB;IAEA,OAAOA,QAAQ;EACnB,CAAC,CAAC,EACN,CAACvB,aAAa,CAClB,CAAC;EAED,MAAMwB,WAAW,GAAG,IAAA7B,cAAO,EAAC,MAAM;IAC9B,IAAII,wBAAwB,EAAE;MAC1B,MAAM0B,eAAe,GAAG/B,cAAc,CAACT,oBAAoB,CAAC;MAE5D,IAAIwC,eAAe,EAAE;QACjB,OAAOvB,mBAAmB,CAACuB,eAAe,CAAC;MAC/C;MAEA,OAAO,EAAE;IACb;IAEA,OAAOvB,mBAAmB,CAACR,cAAc,CAAC;EAC9C,CAAC,EAAE,CAACK,wBAAwB,EAAEd,oBAAoB,EAAEiB,mBAAmB,EAAER,cAAc,CAAC,CAAC;EAEzF,MAAMgC,eAAe,GAAG,IAAA/B,cAAO,EAAC,MAAM,IAAAgC,yBAAkB,EAACH,WAAW,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAErF,MAAM;IACFI,uBAAuB;IACvBC,uBAAuB;IACvBC,WAAW;IACXC,eAAe;IACfC,uBAAuB;IACvBC;EACJ,CAAC,GAAG,IAAAC,+BAAsB,EAAC;IACvBpD,mBAAmB;IACnB4C,eAAe;IACfS,WAAW,EAAElF,QAAQ;IACrB+C,aAAa;IACboC,iBAAiB,EAAEZ,WAAW,CAACvB,MAAM;IACrC/C,UAAU;IACVG,aAAa;IACbgF,cAAc,EAAEhB,0BAA0B;IAC1C7D,QAAQ;IACRC,mBAAmB;IACnBE,qBAAqB;IACrBC,oBAAoB;IACpBC,sBAAsB;IACtBE,UAAU;IACVU,UAAU;IACVI,mBAAmB;IACnBb,0BAA0B;IAC1BK,uBAAuB;IACvBC,oBAAoB;IACpBC,KAAK;IACLG;EACJ,CAAC,CAAC;EAEF,MAAM4D,SAAS,GAAG,IAAA3C,cAAO,EACrB,MAAM,IAAA4C,yBAAkB,EAACf,WAAW,EAAEI,uBAAuB,CAAC,IAAI,SAAS,EAC3E,CAACA,uBAAuB,EAAEJ,WAAW,CACzC,CAAC;EAED,MAAMgB,cAAc,GAAG,IAAA7C,cAAO,EAAC,MAAM;IACjC,IAAI7B,cAAc,EAAE;MAChB,MAAM2E,UAAU,GAAGvC,mBAAmB,CAACpC,cAAc,CAAC;MAEtD,IAAIM,wBAAwB,EAAE;QAC1B,OAAO,IAAAmE,yBAAkB,EAACE,UAAU,EAAEb,uBAAuB,CAAC;MAClE;MAEA,OAAOa,UAAU;IACrB;IAEA,IAAIrE,wBAAwB,IAAIoD,WAAW,EAAE;MACzC,OAAO,IAAAe,yBAAkB,EAACf,WAAW,EAAEI,uBAAuB,CAAC;IACnE;IAEA,OAAOJ,WAAW,IAAI,SAAS;EACnC,CAAC,EAAE,CACCI,uBAAuB,EACvB9D,cAAc,EACdoC,mBAAmB,EACnB9B,wBAAwB,EACxBoD,WAAW,CACd,CAAC;EAEF,oBACIpG,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAACjF,eAAA,CAAAM,OAAc;IACXmB,UAAU,EAAEA,UAAW;IACvB4E,WAAW,EAAEE,uBAAuB,GAAGF,WAAW,GAAGY,SAAU;IAC/Db,uBAAuB,EAAEA,uBAAwB;IACjDE,eAAe,EAAEA,eAAgB;IACjCS,cAAc,EAAEA,cAAe;IAC/BvE,gBAAgB,EAAEA,gBAAiB;IACnCgE,2BAA2B,EAAEA,2BAA4B;IACzD/D,sBAAsB,EAAEA,sBAAuB;IAC/CoE,SAAS,EAAEA,SAAU;IACrB1D,SAAS,EAAEA;EAAU,GAEpBc,cACW,CAAC;AAEzB,CAAC;AAED1C,UAAU,CAAC2F,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9G,OAAA,GAEvBiB,UAAU","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Typewriter.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_reactDom","_server","_cursor","_speed","_AnimatedTypewriterText","_interopRequireDefault","_Typewriter","_utils","_useTypewriterAnimation","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","Typewriter","children","cursorType","CursorType","Default","nextTextDelay","TypewriterDelay","Medium","onFinish","onResetAnimationEnd","animationSteps","onResetAnimationStart","onTypingAnimationEnd","onTypingAnimationStart","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldRemainSingleLine","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","TypewriterSpeed","resetSpeed","startDelay","None","textStyle","shouldCalcAutoSpeed","autoSpeedBaseFactor","_colorScheme$designSe5","_colorScheme$designSe6","_colorScheme$designSe9","_colorScheme$designSe0","currentChildrenIndex","setCurrentChildrenIndex","useState","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","autoSpeed","useRef","autoSteps","functions","useFunctions","values","useValues","colorScheme","useColorScheme","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","_colorScheme$designSe3","_colorScheme$designSe4","currentChildren","_colorScheme$designSe","_colorScheme$designSe2","React","isValidElement","renderToString","createElement","ChaynsProvider","data","isModule","ColorSchemeProvider","color","designSettings","colorMode","style","display","className","charactersCount","getCharactersCount","chunkIntervalExponentialMovingAverage","lastLength","ema","current","updateChunkStreamingSpeedEMA","currentLength","state","undefined","calculatedAutoSpeed","steps","calculateAutoSpeed","handleSetNextChildrenIndex","useCallback","prevIndex","nextIndex","handleClick","isResetAnimationActive","shownCharCount","shouldPreventBlinkingCursor","useTypewriterAnimation","autoSpeedRef","autoStepsRef","onAdvanceText","textContentLength","isAnimatingText","shownText","getSubTextFromHTML","pseudoTextHTML","_colorScheme$designSe7","_colorScheme$designSe8","pseudoText","StyledTypewriter","$cursorType","onClick","$isAnimatingText","$shouldHideCursor","$shouldPreventBlinkAnimation","StyledTypewriterText","$shouldRemainSingleLine","dangerouslySetInnerHTML","__html","StyledTypewriterPseudoText","createPortal","position","visibility","document","body","displayName","_default","exports"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider, useColorScheme } from '@chayns-components/core';\nimport { ChaynsProvider, useFunctions, useValues } from 'chayns-api';\nimport React, {\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { CursorType } from '../../types/cursor';\nimport { TypewriterDelay, TypewriterSpeed } from '../../types/speed';\nimport AnimatedTypewriterText from './AnimatedTypewriterText';\nimport {\n StyledTypewriter,\n StyledTypewriterPseudoText,\n StyledTypewriterText,\n} from './Typewriter.styles';\nimport {\n calculateAutoSpeed,\n ChunkStreamingSpeedState,\n getCharactersCount,\n getSubTextFromHTML,\n shuffleArray,\n updateChunkStreamingSpeedEMA,\n} from './utils';\nimport useTypewriterAnimation from './useTypewriterAnimation';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport type TypewriterProps = {\n /**\n * The number of characters that will be animated per animation step.\n *\n * The step is advanced by the requestAnimationFrame-driven scheduler. When\n * `shouldCalcAutoSpeed` is enabled, the component may override this value dynamically.\n */\n animationSteps?: number;\n /**\n * The content to type.\n *\n * Strings are animated directly. React elements and arrays are rendered to HTML first so the\n * typewriter can preserve nested markup and inline components.\n */\n children: ReactElement | ReactElement[] | string | string[];\n /**\n * The type of the cursor. Use the `CursorType` enum for this prop.\n */\n cursorType?: CursorType;\n /**\n * The delay in milliseconds before the next text is shown.\n *\n * This prop is only used when `children` is an array.\n */\n nextTextDelay?: TypewriterDelay;\n /**\n * Function that is executed when the entire typewriter animation has finished.\n *\n * This callback is not used while more texts are still queued.\n */\n onFinish?: VoidFunction;\n /**\n * Function that is executed when the reset animation has finished.\n *\n * This callback only runs when `shouldUseResetAnimation` is enabled.\n */\n onResetAnimationEnd?: VoidFunction;\n /**\n * Function that is executed when the reset animation has started.\n *\n * This callback only runs when `shouldUseResetAnimation` is enabled.\n */\n onResetAnimationStart?: VoidFunction;\n /**\n * Function that is executed when the typing animation has finished.\n *\n * If multiple texts are given, this function will be executed for each text.\n */\n onTypingAnimationEnd?: VoidFunction;\n /**\n * Function that is executed when the typing animation has started.\n *\n * If multiple texts are given, this function will be executed for each text.\n */\n onTypingAnimationStart?: VoidFunction;\n /**\n * Invisible content that defines the reserved layout size while the animation is running.\n *\n * When omitted, the visible `children` are used as the layout template.\n */\n pseudoChildren?: ReactElement | string;\n /**\n * Waiting time in milliseconds before the typewriter resets the text.\n *\n * This prop is only used when `children` is an array.\n */\n resetDelay?: TypewriterDelay;\n /**\n * The reset speed of the animation. Use the `TypewriterSpeed` enum for this prop.\n */\n resetSpeed?: TypewriterSpeed | number;\n /**\n * Keeps the cursor animated even if the current text is not actively changing.\n */\n shouldForceCursorAnimation?: boolean;\n /**\n * Hides the cursor entirely.\n */\n shouldHideCursor?: boolean;\n /**\n * Keeps the content on a single line and applies ellipsis overflow handling.\n */\n shouldRemainSingleLine?: boolean;\n /**\n * Randomizes the order of `children` when multiple texts are provided.\n */\n shouldSortChildrenRandomly?: boolean;\n /**\n * Makes the hidden sizing text follow the currently revealed chunk instead of the full content.\n */\n shouldUseAnimationHeight?: boolean;\n /**\n * Derives the typing cadence from the observed streaming rate.\n */\n shouldCalcAutoSpeed?: boolean;\n /**\n * Base factor used to initialize the auto-speed EMA.\n */\n autoSpeedBaseFactor?: number;\n /**\n * Animates the reset between multiple texts with a backspace-like effect.\n */\n shouldUseResetAnimation?: boolean;\n /**\n * Keeps the typewriter active while waiting for new content to arrive.\n */\n shouldWaitForContent?: boolean;\n /**\n * The speed of the animation. Use the `TypewriterSpeed` enum for this prop.\n */\n speed?: TypewriterSpeed | number;\n /**\n * The delay in milliseconds before the typewriter starts typing.\n */\n startDelay?: TypewriterDelay;\n /**\n * Inline styles for the visible text element.\n */\n textStyle?: CSSPropertiesWithVars;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n children,\n cursorType = CursorType.Default,\n nextTextDelay = TypewriterDelay.Medium,\n onFinish,\n onResetAnimationEnd,\n animationSteps = 1,\n onResetAnimationStart,\n onTypingAnimationEnd,\n onTypingAnimationStart,\n pseudoChildren,\n resetDelay = TypewriterDelay.Medium,\n shouldForceCursorAnimation = false,\n shouldHideCursor = false,\n shouldRemainSingleLine = false,\n shouldSortChildrenRandomly = false,\n shouldUseAnimationHeight = false,\n shouldUseResetAnimation = false,\n shouldWaitForContent,\n speed = TypewriterSpeed.Medium,\n resetSpeed = speed,\n startDelay = TypewriterDelay.None,\n textStyle,\n shouldCalcAutoSpeed = false,\n autoSpeedBaseFactor = 2000,\n}) => {\n const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n const autoSpeed = useRef<number>();\n const autoSteps = useRef<number>(animationSteps);\n\n const functions = useFunctions();\n const values = useValues();\n\n const colorScheme = useColorScheme();\n\n useIsomorphicLayoutEffect(() => {\n if (children) {\n setHasRenderedChildrenOnce(false);\n }\n }, [children]);\n\n useEffect(() => {\n if (!hasRenderedChildrenOnce) {\n setHasRenderedChildrenOnce(true);\n }\n }, [hasRenderedChildrenOnce]);\n\n const sortedChildren = useMemo(\n () =>\n Array.isArray(children) && shouldSortChildrenRandomly\n ? shuffleArray<ReactElement | string>(children)\n : children,\n [children, shouldSortChildrenRandomly],\n );\n\n const areMultipleChildrenGiven = Array.isArray(sortedChildren);\n const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;\n\n const textContent = useMemo(() => {\n if (areMultipleChildrenGiven) {\n const currentChildren = sortedChildren[currentChildrenIndex];\n\n if (currentChildren) {\n return React.isValidElement(currentChildren)\n ? renderToString(\n <ChaynsProvider data={values} functions={functions} isModule>\n <ColorSchemeProvider\n color={colorScheme?.designSettings?.color}\n colorMode={colorScheme?.designSettings?.colorMode}\n style={{ display: 'inline' }}\n >\n <span className=\"notranslate\">{currentChildren}</span>\n </ColorSchemeProvider>\n </ChaynsProvider>,\n )\n : (currentChildren as string);\n }\n\n return '';\n }\n\n return React.isValidElement(sortedChildren)\n ? renderToString(\n <ChaynsProvider data={values} functions={functions} isModule>\n <ColorSchemeProvider\n color={colorScheme?.designSettings?.color}\n colorMode={colorScheme?.designSettings?.colorMode}\n style={{ display: 'inline' }}\n >\n <span className=\"notranslate\">{sortedChildren}</span>\n </ColorSchemeProvider>\n </ChaynsProvider>,\n )\n : (sortedChildren as string);\n }, [\n areMultipleChildrenGiven,\n colorScheme?.designSettings?.color,\n colorScheme?.designSettings?.colorMode,\n currentChildrenIndex,\n functions,\n sortedChildren,\n values,\n ]);\n\n const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n const chunkIntervalExponentialMovingAverage = useRef<ChunkStreamingSpeedState>({\n lastLength: charactersCount,\n ema: charactersCount / (autoSpeedBaseFactor / 1000),\n });\n\n useEffect(() => {\n if (shouldUseResetAnimation) {\n chunkIntervalExponentialMovingAverage.current = {\n ema: charactersCount / (autoSpeedBaseFactor / 1000),\n lastLength: charactersCount,\n };\n }\n chunkIntervalExponentialMovingAverage.current = updateChunkStreamingSpeedEMA({\n currentLength: charactersCount,\n state: chunkIntervalExponentialMovingAverage.current,\n });\n }, [autoSpeedBaseFactor, charactersCount, shouldUseResetAnimation]);\n\n useEffect(() => {\n if (!shouldCalcAutoSpeed) {\n autoSpeed.current = undefined;\n autoSteps.current = animationSteps;\n return;\n }\n const { speed: calculatedAutoSpeed, steps } = calculateAutoSpeed(\n chunkIntervalExponentialMovingAverage.current.ema,\n );\n\n autoSpeed.current = calculatedAutoSpeed;\n autoSteps.current = steps;\n }, [animationSteps, charactersCount, shouldCalcAutoSpeed]);\n\n const handleSetNextChildrenIndex = useCallback(() => {\n setCurrentChildrenIndex((prevIndex) => {\n const nextIndex = prevIndex + 1;\n\n return nextIndex > childrenCount - 1 ? 0 : nextIndex;\n });\n }, [childrenCount]);\n\n const { handleClick, isResetAnimationActive, shownCharCount, shouldPreventBlinkingCursor } =\n useTypewriterAnimation({\n areMultipleChildrenGiven,\n autoSpeedRef: autoSpeed,\n autoStepsRef: autoSteps,\n charactersCount,\n cursorType,\n nextTextDelay,\n onAdvanceText: handleSetNextChildrenIndex,\n onResetAnimationEnd,\n onResetAnimationStart,\n onTypingAnimationEnd,\n onTypingAnimationStart,\n resetDelay,\n resetSpeed,\n shouldUseResetAnimation,\n shouldWaitForContent,\n speed,\n startDelay,\n textContentLength: textContent.length,\n });\n\n const isAnimatingText =\n shownCharCount < textContent.length ||\n shouldForceCursorAnimation ||\n areMultipleChildrenGiven ||\n textContent.length === 0;\n\n useEffect(() => {\n if (!isAnimatingText && typeof onFinish === 'function') {\n onFinish();\n }\n }, [isAnimatingText, onFinish]);\n\n const shownText = useMemo(\n () => getSubTextFromHTML(textContent, shownCharCount),\n [shownCharCount, textContent],\n );\n\n const pseudoTextHTML = useMemo(() => {\n if (pseudoChildren) {\n const pseudoText = React.isValidElement(pseudoChildren)\n ? renderToString(\n <ChaynsProvider data={values} functions={functions} isModule>\n <ColorSchemeProvider\n color={colorScheme?.designSettings?.color}\n colorMode={colorScheme?.designSettings?.colorMode}\n style={{ display: 'inline' }}\n >\n {pseudoChildren}\n </ColorSchemeProvider>\n </ChaynsProvider>,\n )\n : (pseudoChildren as string);\n\n if (shouldUseAnimationHeight) {\n return getSubTextFromHTML(pseudoText, shownCharCount);\n }\n\n return pseudoText;\n }\n\n if (shouldUseAnimationHeight && textContent) {\n return getSubTextFromHTML(textContent, shownCharCount);\n }\n\n return textContent || '​';\n }, [\n colorScheme?.designSettings?.color,\n colorScheme?.designSettings?.colorMode,\n functions,\n pseudoChildren,\n shouldUseAnimationHeight,\n shownCharCount,\n textContent,\n values,\n ]);\n\n return useMemo(\n () => (\n <StyledTypewriter\n $cursorType={cursorType}\n onClick={isAnimatingText ? handleClick : undefined}\n $isAnimatingText={isAnimatingText}\n $shouldHideCursor={shouldHideCursor}\n $shouldPreventBlinkAnimation={shouldPreventBlinkingCursor}\n >\n {isAnimatingText ? (\n <AnimatedTypewriterText\n shouldHideCursor={shouldHideCursor}\n shouldRemainSingleLine={shouldRemainSingleLine}\n shownText={shownText}\n textStyle={textStyle}\n />\n ) : (\n <StyledTypewriterText\n className=\"notranslate\"\n $shouldRemainSingleLine={shouldRemainSingleLine}\n dangerouslySetInnerHTML={\n typeof sortedChildren === 'string' ? { __html: shownText } : undefined\n }\n style={textStyle}\n >\n {typeof sortedChildren !== 'string' ? sortedChildren : undefined}\n </StyledTypewriterText>\n )}\n {isAnimatingText && (\n <StyledTypewriterPseudoText\n $isAnimatingText={isAnimatingText}\n $shouldHideCursor={shouldHideCursor}\n dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\n />\n )}\n {/*\n The following is needed because some components like the CodeHighlighter will not render correct\n if the element is not rendered on a client before...\n */}\n {!hasRenderedChildrenOnce &&\n createPortal(\n <div style={{ position: 'absolute', visibility: 'hidden' }}>\n {children}\n </div>,\n document.body,\n )}\n </StyledTypewriter>\n ),\n [\n children,\n cursorType,\n handleClick,\n hasRenderedChildrenOnce,\n isAnimatingText,\n pseudoTextHTML,\n shouldHideCursor,\n shouldPreventBlinkingCursor,\n shouldRemainSingleLine,\n shownText,\n sortedChildren,\n textStyle,\n ],\n );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AAUA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAEA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,uBAAA,GAAAC,sBAAA,CAAAT,OAAA;AACA,IAAAU,WAAA,GAAAV,OAAA;AAKA,IAAAW,MAAA,GAAAX,OAAA;AAQA,IAAAY,uBAAA,GAAAH,sBAAA,CAAAT,OAAA;AAA8D,SAAAS,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAd,uBAAA,YAAAA,CAAAU,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAE9D,MAAMgB,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGC,sBAAe,GAAGC,gBAAS;AA2H7F,MAAMC,UAA+B,GAAGA,CAAC;EACrCC,QAAQ;EACRC,UAAU,GAAGC,kBAAU,CAACC,OAAO;EAC/BC,aAAa,GAAGC,sBAAe,CAACC,MAAM;EACtCC,QAAQ;EACRC,mBAAmB;EACnBC,cAAc,GAAG,CAAC;EAClBC,qBAAqB;EACrBC,oBAAoB;EACpBC,sBAAsB;EACtBC,cAAc;EACdC,UAAU,GAAGT,sBAAe,CAACC,MAAM;EACnCS,0BAA0B,GAAG,KAAK;EAClCC,gBAAgB,GAAG,KAAK;EACxBC,sBAAsB,GAAG,KAAK;EAC9BC,0BAA0B,GAAG,KAAK;EAClCC,wBAAwB,GAAG,KAAK;EAChCC,uBAAuB,GAAG,KAAK;EAC/BC,oBAAoB;EACpBC,KAAK,GAAGC,sBAAe,CAACjB,MAAM;EAC9BkB,UAAU,GAAGF,KAAK;EAClBG,UAAU,GAAGpB,sBAAe,CAACqB,IAAI;EACjCC,SAAS;EACTC,mBAAmB,GAAG,KAAK;EAC3BC,mBAAmB,GAAG;AAC1B,CAAC,KAAK;EAAA,IAAAC,sBAAA,EAAAC,sBAAA,EAAAC,sBAAA,EAAAC,sBAAA;EACF,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EACnE,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAC7E,MAAMG,SAAS,GAAG,IAAAC,aAAM,EAAS,CAAC;EAClC,MAAMC,SAAS,GAAG,IAAAD,aAAM,EAAS/B,cAAc,CAAC;EAEhD,MAAMiC,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAChC,MAAMC,MAAM,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE1B,MAAMC,WAAW,GAAG,IAAAC,oBAAc,EAAC,CAAC;EAEpCpD,yBAAyB,CAAC,MAAM;IAC5B,IAAIK,QAAQ,EAAE;MACVsC,0BAA0B,CAAC,KAAK,CAAC;IACrC;EACJ,CAAC,EAAE,CAACtC,QAAQ,CAAC,CAAC;EAEd,IAAAF,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACuC,uBAAuB,EAAE;MAC1BC,0BAA0B,CAAC,IAAI,CAAC;IACpC;EACJ,CAAC,EAAE,CAACD,uBAAuB,CAAC,CAAC;EAE7B,MAAMW,cAAc,GAAG,IAAAC,cAAO,EAC1B,MACIC,KAAK,CAACC,OAAO,CAACnD,QAAQ,CAAC,IAAIkB,0BAA0B,GAC/C,IAAAkC,mBAAY,EAAwBpD,QAAQ,CAAC,GAC7CA,QAAQ,EAClB,CAACA,QAAQ,EAAEkB,0BAA0B,CACzC,CAAC;EAED,MAAMmC,wBAAwB,GAAGH,KAAK,CAACC,OAAO,CAACH,cAAc,CAAC;EAC9D,MAAMM,aAAa,GAAGD,wBAAwB,GAAGL,cAAc,CAACO,MAAM,GAAG,CAAC;EAE1E,MAAMC,WAAW,GAAG,IAAAP,cAAO,EAAC,MAAM;IAAA,IAAAQ,sBAAA,EAAAC,sBAAA;IAC9B,IAAIL,wBAAwB,EAAE;MAC1B,MAAMM,eAAe,GAAGX,cAAc,CAACd,oBAAoB,CAAC;MAE5D,IAAIyB,eAAe,EAAE;QAAA,IAAAC,qBAAA,EAAAC,sBAAA;QACjB,OAAO,aAAAC,cAAK,CAACC,cAAc,CAACJ,eAAe,CAAC,GACtC,IAAAK,sBAAc,eACVnG,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAACrG,UAAA,CAAAsG,cAAc;UAACC,IAAI,EAAEvB,MAAO;UAACF,SAAS,EAAEA,SAAU;UAAC0B,QAAQ;QAAA,gBACxDvG,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAACvG,KAAA,CAAA2G,mBAAmB;UAChBC,KAAK,EAAExB,WAAW,aAAXA,WAAW,gBAAAc,qBAAA,GAAXd,WAAW,CAAEyB,cAAc,cAAAX,qBAAA,uBAA3BA,qBAAA,CAA6BU,KAAM;UAC1CE,SAAS,EAAE1B,WAAW,aAAXA,WAAW,gBAAAe,sBAAA,GAAXf,WAAW,CAAEyB,cAAc,cAAAV,sBAAA,uBAA3BA,sBAAA,CAA6BW,SAAU;UAClDC,KAAK,EAAE;YAAEC,OAAO,EAAE;UAAS;QAAE,gBAE7B7G,MAAA,CAAAa,OAAA,CAAAuF,aAAA;UAAMU,SAAS,EAAC;QAAa,GAAEhB,eAAsB,CACpC,CACT,CACpB,CAAC,GACAA,eAA0B;MACrC;MAEA,OAAO,EAAE;IACb;IAEA,OAAO,aAAAG,cAAK,CAACC,cAAc,CAACf,cAAc,CAAC,GACrC,IAAAgB,sBAAc,eACVnG,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAACrG,UAAA,CAAAsG,cAAc;MAACC,IAAI,EAAEvB,MAAO;MAACF,SAAS,EAAEA,SAAU;MAAC0B,QAAQ;IAAA,gBACxDvG,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAACvG,KAAA,CAAA2G,mBAAmB;MAChBC,KAAK,EAAExB,WAAW,aAAXA,WAAW,gBAAAW,sBAAA,GAAXX,WAAW,CAAEyB,cAAc,cAAAd,sBAAA,uBAA3BA,sBAAA,CAA6Ba,KAAM;MAC1CE,SAAS,EAAE1B,WAAW,aAAXA,WAAW,gBAAAY,sBAAA,GAAXZ,WAAW,CAAEyB,cAAc,cAAAb,sBAAA,uBAA3BA,sBAAA,CAA6Bc,SAAU;MAClDC,KAAK,EAAE;QAAEC,OAAO,EAAE;MAAS;IAAE,gBAE7B7G,MAAA,CAAAa,OAAA,CAAAuF,aAAA;MAAMU,SAAS,EAAC;IAAa,GAAE3B,cAAqB,CACnC,CACT,CACpB,CAAC,GACAA,cAAyB;EACpC,CAAC,EAAE,CACCK,wBAAwB,EACxBP,WAAW,aAAXA,WAAW,gBAAAhB,sBAAA,GAAXgB,WAAW,CAAEyB,cAAc,cAAAzC,sBAAA,uBAA3BA,sBAAA,CAA6BwC,KAAK,EAClCxB,WAAW,aAAXA,WAAW,gBAAAf,sBAAA,GAAXe,WAAW,CAAEyB,cAAc,cAAAxC,sBAAA,uBAA3BA,sBAAA,CAA6ByC,SAAS,EACtCtC,oBAAoB,EACpBQ,SAAS,EACTM,cAAc,EACdJ,MAAM,CACT,CAAC;EAEF,MAAMgC,eAAe,GAAG,IAAA3B,cAAO,EAAC,MAAM,IAAA4B,yBAAkB,EAACrB,WAAW,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EACrF,MAAMsB,qCAAqC,GAAG,IAAAtC,aAAM,EAA2B;IAC3EuC,UAAU,EAAEH,eAAe;IAC3BI,GAAG,EAAEJ,eAAe,IAAI/C,mBAAmB,GAAG,IAAI;EACtD,CAAC,CAAC;EAEF,IAAA/B,gBAAS,EAAC,MAAM;IACZ,IAAIsB,uBAAuB,EAAE;MACzB0D,qCAAqC,CAACG,OAAO,GAAG;QAC5CD,GAAG,EAAEJ,eAAe,IAAI/C,mBAAmB,GAAG,IAAI,CAAC;QACnDkD,UAAU,EAAEH;MAChB,CAAC;IACL;IACAE,qCAAqC,CAACG,OAAO,GAAG,IAAAC,mCAA4B,EAAC;MACzEC,aAAa,EAAEP,eAAe;MAC9BQ,KAAK,EAAEN,qCAAqC,CAACG;IACjD,CAAC,CAAC;EACN,CAAC,EAAE,CAACpD,mBAAmB,EAAE+C,eAAe,EAAExD,uBAAuB,CAAC,CAAC;EAEnE,IAAAtB,gBAAS,EAAC,MAAM;IACZ,IAAI,CAAC8B,mBAAmB,EAAE;MACtBW,SAAS,CAAC0C,OAAO,GAAGI,SAAS;MAC7B5C,SAAS,CAACwC,OAAO,GAAGxE,cAAc;MAClC;IACJ;IACA,MAAM;MAAEa,KAAK,EAAEgE,mBAAmB;MAAEC;IAAM,CAAC,GAAG,IAAAC,yBAAkB,EAC5DV,qCAAqC,CAACG,OAAO,CAACD,GAClD,CAAC;IAEDzC,SAAS,CAAC0C,OAAO,GAAGK,mBAAmB;IACvC7C,SAAS,CAACwC,OAAO,GAAGM,KAAK;EAC7B,CAAC,EAAE,CAAC9E,cAAc,EAAEmE,eAAe,EAAEhD,mBAAmB,CAAC,CAAC;EAE1D,MAAM6D,0BAA0B,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjDvD,uBAAuB,CAAEwD,SAAS,IAAK;MACnC,MAAMC,SAAS,GAAGD,SAAS,GAAG,CAAC;MAE/B,OAAOC,SAAS,GAAGtC,aAAa,GAAG,CAAC,GAAG,CAAC,GAAGsC,SAAS;IACxD,CAAC,CAAC;EACN,CAAC,EAAE,CAACtC,aAAa,CAAC,CAAC;EAEnB,MAAM;IAAEuC,WAAW;IAAEC,sBAAsB;IAAEC,cAAc;IAAEC;EAA4B,CAAC,GACtF,IAAAC,+BAAsB,EAAC;IACnB5C,wBAAwB;IACxB6C,YAAY,EAAE3D,SAAS;IACvB4D,YAAY,EAAE1D,SAAS;IACvBmC,eAAe;IACf3E,UAAU;IACVG,aAAa;IACbgG,aAAa,EAAEX,0BAA0B;IACzCjF,mBAAmB;IACnBE,qBAAqB;IACrBC,oBAAoB;IACpBC,sBAAsB;IACtBE,UAAU;IACVU,UAAU;IACVJ,uBAAuB;IACvBC,oBAAoB;IACpBC,KAAK;IACLG,UAAU;IACV4E,iBAAiB,EAAE7C,WAAW,CAACD;EACnC,CAAC,CAAC;EAEN,MAAM+C,eAAe,GACjBP,cAAc,GAAGvC,WAAW,CAACD,MAAM,IACnCxC,0BAA0B,IAC1BsC,wBAAwB,IACxBG,WAAW,CAACD,MAAM,KAAK,CAAC;EAE5B,IAAAzD,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACwG,eAAe,IAAI,OAAO/F,QAAQ,KAAK,UAAU,EAAE;MACpDA,QAAQ,CAAC,CAAC;IACd;EACJ,CAAC,EAAE,CAAC+F,eAAe,EAAE/F,QAAQ,CAAC,CAAC;EAE/B,MAAMgG,SAAS,GAAG,IAAAtD,cAAO,EACrB,MAAM,IAAAuD,yBAAkB,EAAChD,WAAW,EAAEuC,cAAc,CAAC,EACrD,CAACA,cAAc,EAAEvC,WAAW,CAChC,CAAC;EAED,MAAMiD,cAAc,GAAG,IAAAxD,cAAO,EAAC,MAAM;IACjC,IAAIpC,cAAc,EAAE;MAAA,IAAA6F,sBAAA,EAAAC,sBAAA;MAChB,MAAMC,UAAU,GAAG,aAAA9C,cAAK,CAACC,cAAc,CAAClD,cAAc,CAAC,GACjD,IAAAmD,sBAAc,eACVnG,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAACrG,UAAA,CAAAsG,cAAc;QAACC,IAAI,EAAEvB,MAAO;QAACF,SAAS,EAAEA,SAAU;QAAC0B,QAAQ;MAAA,gBACxDvG,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAACvG,KAAA,CAAA2G,mBAAmB;QAChBC,KAAK,EAAExB,WAAW,aAAXA,WAAW,gBAAA4D,sBAAA,GAAX5D,WAAW,CAAEyB,cAAc,cAAAmC,sBAAA,uBAA3BA,sBAAA,CAA6BpC,KAAM;QAC1CE,SAAS,EAAE1B,WAAW,aAAXA,WAAW,gBAAA6D,sBAAA,GAAX7D,WAAW,CAAEyB,cAAc,cAAAoC,sBAAA,uBAA3BA,sBAAA,CAA6BnC,SAAU;QAClDC,KAAK,EAAE;UAAEC,OAAO,EAAE;QAAS;MAAE,GAE5B7D,cACgB,CACT,CACpB,CAAC,GACAA,cAAyB;MAEhC,IAAIM,wBAAwB,EAAE;QAC1B,OAAO,IAAAqF,yBAAkB,EAACI,UAAU,EAAEb,cAAc,CAAC;MACzD;MAEA,OAAOa,UAAU;IACrB;IAEA,IAAIzF,wBAAwB,IAAIqC,WAAW,EAAE;MACzC,OAAO,IAAAgD,yBAAkB,EAAChD,WAAW,EAAEuC,cAAc,CAAC;IAC1D;IAEA,OAAOvC,WAAW,IAAI,SAAS;EACnC,CAAC,EAAE,CACCV,WAAW,aAAXA,WAAW,gBAAAd,sBAAA,GAAXc,WAAW,CAAEyB,cAAc,cAAAvC,sBAAA,uBAA3BA,sBAAA,CAA6BsC,KAAK,EAClCxB,WAAW,aAAXA,WAAW,gBAAAb,sBAAA,GAAXa,WAAW,CAAEyB,cAAc,cAAAtC,sBAAA,uBAA3BA,sBAAA,CAA6BuC,SAAS,EACtC9B,SAAS,EACT7B,cAAc,EACdM,wBAAwB,EACxB4E,cAAc,EACdvC,WAAW,EACXZ,MAAM,CACT,CAAC;EAEF,OAAO,IAAAK,cAAO,EACV,mBACIpF,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAAC5F,WAAA,CAAAwI,gBAAgB;IACbC,WAAW,EAAE7G,UAAW;IACxB8G,OAAO,EAAET,eAAe,GAAGT,WAAW,GAAGR,SAAU;IACnD2B,gBAAgB,EAAEV,eAAgB;IAClCW,iBAAiB,EAAEjG,gBAAiB;IACpCkG,4BAA4B,EAAElB;EAA4B,GAEzDM,eAAe,gBACZzI,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAAC9F,uBAAA,CAAAO,OAAsB;IACnBsC,gBAAgB,EAAEA,gBAAiB;IACnCC,sBAAsB,EAAEA,sBAAuB;IAC/CsF,SAAS,EAAEA,SAAU;IACrB5E,SAAS,EAAEA;EAAU,CACxB,CAAC,gBAEF9D,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAAC5F,WAAA,CAAA8I,oBAAoB;IACjBxC,SAAS,EAAC,aAAa;IACvByC,uBAAuB,EAAEnG,sBAAuB;IAChDoG,uBAAuB,EACnB,OAAOrE,cAAc,KAAK,QAAQ,GAAG;MAAEsE,MAAM,EAAEf;IAAU,CAAC,GAAGlB,SAChE;IACDZ,KAAK,EAAE9C;EAAU,GAEhB,OAAOqB,cAAc,KAAK,QAAQ,GAAGA,cAAc,GAAGqC,SACrC,CACzB,EACAiB,eAAe,iBACZzI,MAAA,CAAAa,OAAA,CAAAuF,aAAA,CAAC5F,WAAA,CAAAkJ,0BAA0B;IACvBP,gBAAgB,EAAEV,eAAgB;IAClCW,iBAAiB,EAAEjG,gBAAiB;IACpCqG,uBAAuB,EAAE;MAAEC,MAAM,EAAEb;IAAe;EAAE,CACvD,CACJ,EAKA,CAACpE,uBAAuB,iBACrB,IAAAmF,sBAAY,eACR3J,MAAA,CAAAa,OAAA,CAAAuF,aAAA;IAAKQ,KAAK,EAAE;MAAEgD,QAAQ,EAAE,UAAU;MAAEC,UAAU,EAAE;IAAS;EAAE,GACtD1H,QACA,CAAC,EACN2H,QAAQ,CAACC,IACb,CACU,CACrB,EACD,CACI5H,QAAQ,EACRC,UAAU,EACV4F,WAAW,EACXxD,uBAAuB,EACvBiE,eAAe,EACfG,cAAc,EACdzF,gBAAgB,EAChBgF,2BAA2B,EAC3B/E,sBAAsB,EACtBsF,SAAS,EACTvD,cAAc,EACdrB,SAAS,CAEjB,CAAC;AACL,CAAC;AAED5B,UAAU,CAAC8H,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArJ,OAAA,GAEvBqB,UAAU","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.StyledTypewriterText = exports.StyledTypewriterPseudoText = exports.StyledTypewriter = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
-
var _cursor = require("
|
|
8
|
+
var _cursor = require("../../types/cursor");
|
|
9
9
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
10
|
const typewriterCursorElement = ({
|
|
11
11
|
$cursorType,
|
|
@@ -101,4 +101,4 @@ const StyledTypewriterText = exports.StyledTypewriterText = _styledComponents.de
|
|
|
101
101
|
width: 100%;
|
|
102
102
|
`}
|
|
103
103
|
`;
|
|
104
|
-
//# sourceMappingURL=
|
|
104
|
+
//# sourceMappingURL=Typewriter.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Typewriter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_cursor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","typewriterCursorElement","$cursorType","$isAnimatingText","$shouldHideCursor","$shouldPreventBlinkAnimation","CursorType","Thin","css","blinkAnimation","theme","text","StyledTypewriter","exports","styled","div","keyframes","StyledTypewriterPseudoText","span","StyledTypewriterText","$shouldRemainSingleLine"],"sources":["../../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\nimport { CursorType } from '../../types/cursor';\nimport type { TypewriterProps } from './Typewriter';\n\ntype StyledTypewriterProps = WithTheme<{\n $cursorType: TypewriterProps['cursorType'];\n $isAnimatingText: boolean;\n $shouldHideCursor: TypewriterProps['shouldHideCursor'];\n $shouldPreventBlinkAnimation: boolean;\n}>;\n\nconst typewriterCursorElement = ({\n $cursorType,\n $isAnimatingText,\n $shouldHideCursor,\n $shouldPreventBlinkAnimation,\n}: StyledTypewriterProps) => {\n if (!$isAnimatingText || $shouldHideCursor) {\n return '';\n }\n\n if ($cursorType === CursorType.Thin) {\n return css`\n .typewriter-lastWithContent {\n &:after {\n animation: ${$shouldPreventBlinkAnimation ? 'none' : blinkAnimation} 1s steps(2, start) infinite;\n color: inherit;\n content: '|';\n font-size: 25px;\n position: relative;\n line-height: 0;\n vertical-align: baseline;\n }\n `;\n }\n\n return css`\n .typewriter-lastWithContent {\n &:after {\n animation: ${blinkAnimation} 1s steps(2, start) infinite;\n color: ${({ theme }) => (theme as { text: string }).text};\n content: '▋';\n margin-left: 0.25rem;\n opacity: 0.85;\n position: relative;\n vertical-align: baseline;\n }\n }\n `;\n};\n\nexport const StyledTypewriter = styled.div<StyledTypewriterProps>`\n align-items: inherit;\n display: flex;\n position: relative;\n width: 100%;\n ${typewriterCursorElement}\n`;\n\nconst blinkAnimation = keyframes`\n 100% {\n visibility: hidden;\n }\n`;\n\ntype StyledTypewriterPseudoTextProps = WithTheme<{\n $isAnimatingText?: boolean;\n $shouldHideCursor: TypewriterProps['shouldHideCursor'];\n}>;\n\nexport const StyledTypewriterPseudoText = styled.span<StyledTypewriterPseudoTextProps>`\n opacity: 0;\n pointer-events: none;\n user-select: none;\n width: fit-content;\n\n ${({ $isAnimatingText, $shouldHideCursor }) =>\n $isAnimatingText &&\n !$shouldHideCursor &&\n css`\n &:after {\n animation: ${blinkAnimation} 1s steps(2, start) infinite;\n color: inherit;\n content: '|';\n font-size: 25px;\n position: relative;\n line-height: 0;\n vertical-align: baseline;\n }\n `}\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n $isAnimatingText?: boolean;\n $shouldRemainSingleLine: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n color: inherit;\n position: ${({ $isAnimatingText }) => ($isAnimatingText ? 'absolute' : 'relative')};\n width: fit-content;\n\n ${({ $isAnimatingText }) =>\n $isAnimatingText &&\n css`\n pointer-events: none;\n `}\n\n ${({ $shouldRemainSingleLine }) =>\n $shouldRemainSingleLine &&\n css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n `}\n`;\n"],"mappings":"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","ignoreList":[]}
|