@chayns-components/typewriter 5.0.0-beta.939 → 5.0.0-beta.940

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.
@@ -9,9 +9,10 @@ var _chaynsApi = require("chayns-api");
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _reactDom = require("react-dom");
11
11
  var _server = require("react-dom/server");
12
+ var _cursor = require("../../types/cursor");
13
+ var _AnimatedTypewriterText = _interopRequireDefault(require("./AnimatedTypewriterText"));
12
14
  var _Typewriter = require("./Typewriter.styles");
13
15
  var _utils = require("./utils");
14
- var _AnimatedTypewriterText = _interopRequireDefault(require("./AnimatedTypewriterText"));
15
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
17
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,8 +38,13 @@ let TypewriterSpeed = exports.TypewriterSpeed = /*#__PURE__*/function (Typewrite
37
38
  }({});
38
39
  const Typewriter = ({
39
40
  children,
41
+ cursorType = _cursor.CursorType.Default,
40
42
  nextTextDelay = TypewriterDelay.Medium,
41
43
  onFinish,
44
+ onResetAnimationEnd,
45
+ onResetAnimationStart,
46
+ onTypingAnimationEnd,
47
+ onTypingAnimationStart,
42
48
  pseudoChildren,
43
49
  resetDelay = TypewriterDelay.Medium,
44
50
  shouldForceCursorAnimation = false,
@@ -121,11 +127,17 @@ const Typewriter = ({
121
127
  if (shouldStopAnimation || charactersCount === 0) {
122
128
  setShownCharCount(textContent.length);
123
129
  } else if (isResetAnimationActive) {
130
+ if (typeof onResetAnimationStart === 'function') {
131
+ onResetAnimationStart();
132
+ }
124
133
  interval = window.setInterval(() => {
125
134
  setShownCharCount(prevState => {
126
135
  const nextState = prevState - 1;
127
136
  if (nextState === 0) {
128
137
  window.clearInterval(interval);
138
+ if (typeof onResetAnimationEnd === 'function') {
139
+ onResetAnimationEnd();
140
+ }
129
141
  if (areMultipleChildrenGiven) {
130
142
  setTimeout(() => {
131
143
  setIsResetAnimationActive(false);
@@ -138,11 +150,17 @@ const Typewriter = ({
138
150
  }, resetSpeed);
139
151
  } else {
140
152
  const setInterval = () => {
153
+ if (typeof onTypingAnimationStart === 'function') {
154
+ onTypingAnimationStart();
155
+ }
141
156
  interval = window.setInterval(() => {
142
157
  setShownCharCount(prevState => {
143
158
  let nextState = Math.min(prevState + 1, charactersCount);
144
159
  if (nextState >= charactersCount && !shouldWaitForContent) {
145
160
  window.clearInterval(interval);
161
+ if (typeof onTypingAnimationEnd === 'function') {
162
+ onTypingAnimationEnd();
163
+ }
146
164
 
147
165
  /**
148
166
  * At this point, the next value for "shownCharCount" is deliberately set to
@@ -205,6 +223,7 @@ const Typewriter = ({
205
223
  return textContent || '​';
206
224
  }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);
207
225
  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, {
226
+ $cursorType: cursorType,
208
227
  onClick: isAnimatingText ? handleClick : undefined,
209
228
  $isAnimatingText: isAnimatingText,
210
229
  $shouldHideCursor: shouldHideCursor
@@ -223,7 +242,7 @@ const Typewriter = ({
223
242
  position: 'absolute',
224
243
  visibility: 'hidden'
225
244
  }
226
- }, children), document.body)), [children, handleClick, hasRenderedChildrenOnce, isAnimatingText, pseudoTextHTML, shouldHideCursor, shownText, sortedChildren, textStyle]);
245
+ }, children), document.body)), [children, cursorType, handleClick, hasRenderedChildrenOnce, isAnimatingText, pseudoTextHTML, shouldHideCursor, shownText, sortedChildren, textStyle]);
227
246
  };
228
247
  Typewriter.displayName = 'Typewriter';
229
248
  var _default = exports.default = Typewriter;
@@ -1 +1 @@
1
- {"version":3,"file":"Typewriter.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_reactDom","_server","_Typewriter","_utils","_AnimatedTypewriterText","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","TypewriterDelay","exports","TypewriterSpeed","Typewriter","children","nextTextDelay","Medium","onFinish","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","resetSpeed","startDelay","None","textStyle","currentChildrenIndex","setCurrentChildrenIndex","useState","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","functions","useFunctions","values","useValues","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","React","isValidElement","renderToString","createElement","ChaynsProvider","data","isModule","ColorSchemeProvider","color","colorMode","style","display","charactersCount","getCharactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","handleClick","useCallback","event","stopPropagation","preventDefault","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","Math","min","shownText","getSubTextFromHTML","pseudoTextHTML","pseudoText","StyledTypewriter","onClick","undefined","$isAnimatingText","$shouldHideCursor","StyledTypewriterText","StyledTypewriterPseudoText","dangerouslySetInnerHTML","__html","createPortal","position","visibility","document","body","displayName","_default"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import {ColorSchemeProvider} 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 {\n StyledTypewriter,\n StyledTypewriterPseudoText,\n StyledTypewriterText,\n} from './Typewriter.styles';\nimport {getCharactersCount, getSubTextFromHTML, shuffleArray} from './utils';\nimport AnimatedTypewriterText from \"./AnimatedTypewriterText\";\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n ExtraSlow = 4000,\n Slow = 2000,\n Medium = 1000,\n Fast = 500,\n ExtraFast = 250,\n None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n ExtraSlow = 40,\n Slow = 20,\n Medium = 10,\n Fast = 5,\n ExtraFast = 2.5,\n}\n\nexport type TypewriterProps = {\n /**\n * The text to type\n */\n children: ReactElement | ReactElement[] | string | string[];\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 * 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 * 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 * 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?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n children,\n nextTextDelay = TypewriterDelay.Medium,\n onFinish,\n pseudoChildren,\n resetDelay = TypewriterDelay.Medium,\n shouldForceCursorAnimation = false,\n shouldHideCursor = 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 }) => {\n const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n const functions = useFunctions();\n const values = useValues();\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=\"#005EB8\"\n colorMode={0}\n style={{display: 'inline'}}\n >\n {currentChildren}\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=\"#005EB8\"\n colorMode={0}\n style={{display: 'inline'}}\n >\n {sortedChildren}\n </ColorSchemeProvider>\n </ChaynsProvider>,\n )\n : (sortedChildren as string);\n }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);\n\n const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n const [shownCharCount, setShownCharCount] = useState(\n charactersCount > 0 ? 0 : textContent.length,\n );\n const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n const isAnimatingText =\n shownCharCount < textContent.length ||\n shouldForceCursorAnimation ||\n areMultipleChildrenGiven ||\n textContent.length === 0;\n\n const handleClick = useCallback((event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n setShouldStopAnimation(true);\n }, []);\n\n const handleSetNextChildrenIndex = useCallback(\n () =>\n setCurrentChildrenIndex(() => {\n let newIndex = currentChildrenIndex + 1;\n\n if (newIndex > childrenCount - 1) {\n newIndex = 0;\n }\n\n return newIndex;\n }),\n [childrenCount, currentChildrenIndex],\n );\n\n useEffect(() => {\n let interval: number | undefined;\n\n if (shouldStopAnimation || charactersCount === 0) {\n setShownCharCount(textContent.length);\n } else if (isResetAnimationActive) {\n interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n const nextState = prevState - 1;\n\n if (nextState === 0) {\n window.clearInterval(interval);\n\n if (areMultipleChildrenGiven) {\n setTimeout(() => {\n setIsResetAnimationActive(false);\n handleSetNextChildrenIndex();\n }, nextTextDelay);\n }\n }\n\n return nextState;\n });\n }, resetSpeed);\n } else {\n const setInterval = () => {\n interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n let nextState = Math.min(prevState + 1, charactersCount);\n\n if (nextState >= charactersCount && !shouldWaitForContent) {\n window.clearInterval(interval);\n\n /**\n * At this point, the next value for \"shownCharCount\" is deliberately set to\n * the length of the textContent in order to correctly display HTML elements\n * after the last letter.\n */\n nextState = textContent.length;\n\n if (areMultipleChildrenGiven) {\n setTimeout(() => {\n if (shouldUseResetAnimation) {\n setIsResetAnimationActive(true);\n } else {\n setShownCharCount(0);\n setTimeout(handleSetNextChildrenIndex, nextTextDelay);\n }\n }, resetDelay);\n }\n }\n\n return nextState;\n });\n }, speed);\n };\n\n if (startDelay) {\n setTimeout(setInterval, startDelay);\n } else {\n setInterval();\n }\n }\n\n return () => {\n window.clearInterval(interval);\n };\n }, [resetSpeed,\n speed,\n resetDelay,\n childrenCount,\n charactersCount,\n textContent.length,\n shouldStopAnimation,\n shouldWaitForContent,\n isResetAnimationActive,\n shouldUseResetAnimation,\n areMultipleChildrenGiven,\n handleSetNextChildrenIndex,\n nextTextDelay,\n startDelay,\n ]);\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=\"#005EB8\"\n colorMode={0}\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 || '&#8203;';\n }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);\n\n return useMemo(\n () => (\n <StyledTypewriter\n onClick={isAnimatingText ? handleClick : undefined}\n $isAnimatingText={isAnimatingText}\n $shouldHideCursor={shouldHideCursor}\n >\n {isAnimatingText ? (\n <AnimatedTypewriterText\n shouldHideCursor={shouldHideCursor}\n shownText={shownText}\n textStyle={textStyle}\n />\n ) : (\n <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n )}\n {isAnimatingText && (\n <StyledTypewriterPseudoText\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 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 handleClick,\n hasRenderedChildrenOnce,\n isAnimatingText,\n pseudoTextHTML,\n shouldHideCursor,\n shownText,\n sortedChildren,\n textStyle,\n ],\n );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Typewriter.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_reactDom","_server","_cursor","_AnimatedTypewriterText","_interopRequireDefault","_Typewriter","_utils","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","TypewriterDelay","exports","TypewriterSpeed","Typewriter","children","cursorType","CursorType","Default","nextTextDelay","Medium","onFinish","onResetAnimationEnd","onResetAnimationStart","onTypingAnimationEnd","onTypingAnimationStart","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","resetSpeed","startDelay","None","textStyle","currentChildrenIndex","setCurrentChildrenIndex","useState","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","functions","useFunctions","values","useValues","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","React","isValidElement","renderToString","createElement","ChaynsProvider","data","isModule","ColorSchemeProvider","color","colorMode","style","display","charactersCount","getCharactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","handleClick","useCallback","event","stopPropagation","preventDefault","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","Math","min","shownText","getSubTextFromHTML","pseudoTextHTML","pseudoText","StyledTypewriter","$cursorType","onClick","undefined","$isAnimatingText","$shouldHideCursor","StyledTypewriterText","StyledTypewriterPseudoText","dangerouslySetInnerHTML","__html","createPortal","position","visibility","document","body","displayName","_default"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider } 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 useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport { CursorType } from '../../types/cursor';\nimport AnimatedTypewriterText from './AnimatedTypewriterText';\nimport {\n StyledTypewriter,\n StyledTypewriterPseudoText,\n StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n ExtraSlow = 4000,\n Slow = 2000,\n Medium = 1000,\n Fast = 500,\n ExtraFast = 250,\n None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n ExtraSlow = 40,\n Slow = 20,\n Medium = 10,\n Fast = 5,\n ExtraFast = 2.5,\n}\n\nexport type TypewriterProps = {\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 * 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 * 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?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n children,\n cursorType = CursorType.Default,\n nextTextDelay = TypewriterDelay.Medium,\n onFinish,\n onResetAnimationEnd,\n onResetAnimationStart,\n onTypingAnimationEnd,\n onTypingAnimationStart,\n pseudoChildren,\n resetDelay = TypewriterDelay.Medium,\n shouldForceCursorAnimation = false,\n shouldHideCursor = 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}) => {\n const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n const functions = useFunctions();\n const values = useValues();\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=\"#005EB8\"\n colorMode={0}\n style={{ display: 'inline' }}\n >\n {currentChildren}\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=\"#005EB8\"\n colorMode={0}\n style={{ display: 'inline' }}\n >\n {sortedChildren}\n </ColorSchemeProvider>\n </ChaynsProvider>,\n )\n : (sortedChildren as string);\n }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);\n\n const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n const [shownCharCount, setShownCharCount] = useState(\n charactersCount > 0 ? 0 : textContent.length,\n );\n const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n const isAnimatingText =\n shownCharCount < textContent.length ||\n shouldForceCursorAnimation ||\n areMultipleChildrenGiven ||\n textContent.length === 0;\n\n const handleClick = useCallback((event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n setShouldStopAnimation(true);\n }, []);\n\n const handleSetNextChildrenIndex = useCallback(\n () =>\n setCurrentChildrenIndex(() => {\n let newIndex = currentChildrenIndex + 1;\n\n if (newIndex > childrenCount - 1) {\n newIndex = 0;\n }\n\n return newIndex;\n }),\n [childrenCount, currentChildrenIndex],\n );\n\n useEffect(() => {\n let interval: number | undefined;\n\n if (shouldStopAnimation || charactersCount === 0) {\n setShownCharCount(textContent.length);\n } else if (isResetAnimationActive) {\n if (typeof onResetAnimationStart === 'function') {\n onResetAnimationStart();\n }\n\n interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n const nextState = prevState - 1;\n\n if (nextState === 0) {\n window.clearInterval(interval);\n\n if (typeof onResetAnimationEnd === 'function') {\n onResetAnimationEnd();\n }\n\n if (areMultipleChildrenGiven) {\n setTimeout(() => {\n setIsResetAnimationActive(false);\n handleSetNextChildrenIndex();\n }, nextTextDelay);\n }\n }\n\n return nextState;\n });\n }, resetSpeed);\n } else {\n const setInterval = () => {\n if (typeof onTypingAnimationStart === 'function') {\n onTypingAnimationStart();\n }\n\n interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n let nextState = Math.min(prevState + 1, charactersCount);\n\n if (nextState >= charactersCount && !shouldWaitForContent) {\n window.clearInterval(interval);\n\n if (typeof onTypingAnimationEnd === 'function') {\n onTypingAnimationEnd();\n }\n\n /**\n * At this point, the next value for \"shownCharCount\" is deliberately set to\n * the length of the textContent in order to correctly display HTML elements\n * after the last letter.\n */\n nextState = textContent.length;\n\n if (areMultipleChildrenGiven) {\n setTimeout(() => {\n if (shouldUseResetAnimation) {\n setIsResetAnimationActive(true);\n } else {\n setShownCharCount(0);\n setTimeout(handleSetNextChildrenIndex, nextTextDelay);\n }\n }, resetDelay);\n }\n }\n\n return nextState;\n });\n }, speed);\n };\n\n if (startDelay) {\n setTimeout(setInterval, startDelay);\n } else {\n setInterval();\n }\n }\n\n return () => {\n window.clearInterval(interval);\n };\n }, [\n resetSpeed,\n speed,\n resetDelay,\n childrenCount,\n charactersCount,\n textContent.length,\n shouldStopAnimation,\n shouldWaitForContent,\n isResetAnimationActive,\n shouldUseResetAnimation,\n areMultipleChildrenGiven,\n handleSetNextChildrenIndex,\n nextTextDelay,\n startDelay,\n ]);\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=\"#005EB8\"\n colorMode={0}\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 || '&#8203;';\n }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);\n\n return useMemo(\n () => (\n <StyledTypewriter\n $cursorType={cursorType}\n onClick={isAnimatingText ? handleClick : undefined}\n $isAnimatingText={isAnimatingText}\n $shouldHideCursor={shouldHideCursor}\n >\n {isAnimatingText ? (\n <AnimatedTypewriterText\n shouldHideCursor={shouldHideCursor}\n shownText={shownText}\n textStyle={textStyle}\n />\n ) : (\n <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n )}\n {isAnimatingText && (\n <StyledTypewriterPseudoText\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 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 shownText,\n sortedChildren,\n textStyle,\n ],\n );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}
@@ -5,26 +5,47 @@ 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("../../types/cursor");
8
9
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
9
10
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
10
11
  const typewriterCursorElement = ({
12
+ $cursorType,
11
13
  $isAnimatingText,
12
14
  $shouldHideCursor
13
- }) => $isAnimatingText && !$shouldHideCursor && (0, _styledComponents.css)`
14
- .typewriter-lastWithContent {
15
- &:after {
16
- animation: ${blinkAnimation} 1s steps(2, start) infinite;
17
- color: ${({
18
- theme
19
- }) => theme.text};
20
- content: '▋';
21
- margin-left: 0.25rem;
22
- opacity: 0.85;
23
- position: relative;
24
- vertical-align: baseline;
15
+ }) => {
16
+ if (!$isAnimatingText || $shouldHideCursor) {
17
+ return '';
18
+ }
19
+ if ($cursorType === _cursor.CursorType.Thin) {
20
+ return (0, _styledComponents.css)`
21
+ .typewriter-lastWithContent {
22
+ &:after {
23
+ animation: ${blinkAnimation} 1s steps(2, start) infinite;
24
+ color: inherit;
25
+ content: '|';
26
+ font-size: 25px;
27
+ position: relative;
28
+ line-height: 0;
29
+ vertical-align: baseline;
30
+ }
31
+ `;
32
+ }
33
+ return (0, _styledComponents.css)`
34
+ .typewriter-lastWithContent {
35
+ &:after {
36
+ animation: ${blinkAnimation} 1s steps(2, start) infinite;
37
+ color: ${({
38
+ theme
39
+ }) => theme.text};
40
+ content: '▋';
41
+ margin-left: 0.25rem;
42
+ opacity: 0.85;
43
+ position: relative;
44
+ vertical-align: baseline;
45
+ }
25
46
  }
26
- }
27
47
  `;
48
+ };
28
49
  const StyledTypewriter = exports.StyledTypewriter = _styledComponents.default.div`
29
50
  align-items: inherit;
30
51
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"file":"Typewriter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","typewriterCursorElement","$isAnimatingText","$shouldHideCursor","css","blinkAnimation","theme","text","StyledTypewriter","exports","styled","div","keyframes","StyledTypewriterPseudoText","span","StyledTypewriterText"],"sources":["../../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\n\nconst typewriterCursorElement = ({\n $isAnimatingText,\n $shouldHideCursor,\n}: {\n $isAnimatingText?: boolean;\n $shouldHideCursor?: boolean;\n}) =>\n $isAnimatingText &&\n !$shouldHideCursor &&\n css`\n .typewriter-lastWithContent {\n &:after {\n animation: ${blinkAnimation} 1s steps(2, start) infinite;\n color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n content: '▋';\n margin-left: 0.25rem;\n opacity: 0.85;\n position: relative;\n vertical-align: baseline;\n }\n }\n `;\n\ntype StyledTypewriterProps = WithTheme<{\n $isAnimatingText?: boolean;\n $shouldHideCursor?: boolean;\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\nexport const StyledTypewriterPseudoText = styled.span`\n opacity: 0;\n pointer-events: none;\n user-select: none;\n width: 100%;\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n $isAnimatingText?: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n color: inherit;\n position: ${({ $isAnimatingText }) => ($isAnimatingText ? 'absolute' : 'relative')};\n width: 100%;\n\n ${({ $isAnimatingText }) =>\n $isAnimatingText &&\n css`\n pointer-events: none;\n `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA2D,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE3D,MAAMW,uBAAuB,GAAGA,CAAC;EAC7BC,gBAAgB;EAChBC;AAIJ,CAAC,KACGD,gBAAgB,IAChB,CAACC,iBAAiB,IAClB,IAAAC,qBAAG;AACP;AACA;AACA,uBAAuBC,cAAc;AACrC,mBAAmB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AAOE,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAA0B;AACjE;AACA;AACA;AACA;AACA,MAAMV,uBAAuB;AAC7B,CAAC;AAED,MAAMI,cAAc,GAAG,IAAAO,2BAAS;AAChC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAJ,OAAA,CAAAI,0BAAA,GAAGH,yBAAM,CAACI,IAAI;AACrD;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,oBAAoB,GAAAN,OAAA,CAAAM,oBAAA,GAAGL,yBAAM,CAACI,IAA+B;AAC1E;AACA,gBAAgB,CAAC;EAAEZ;AAAiB,CAAC,KAAMA,gBAAgB,GAAG,UAAU,GAAG,UAAW;AACtF;AACA;AACA,MAAM,CAAC;EAAEA;AAAiB,CAAC,KACnBA,gBAAgB,IAChB,IAAAE,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Typewriter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_cursor","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","typewriterCursorElement","$cursorType","$isAnimatingText","$shouldHideCursor","CursorType","Thin","css","blinkAnimation","theme","text","StyledTypewriter","exports","styled","div","keyframes","StyledTypewriterPseudoText","span","StyledTypewriterText"],"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}>;\n\nconst typewriterCursorElement = ({\n $cursorType,\n $isAnimatingText,\n $shouldHideCursor,\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: ${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 }: StyledTypewriterTextProps) => theme.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\nexport const StyledTypewriterPseudoText = styled.span`\n opacity: 0;\n pointer-events: none;\n user-select: none;\n width: 100%;\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n $isAnimatingText?: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n color: inherit;\n position: ${({ $isAnimatingText }) => ($isAnimatingText ? 'absolute' : 'relative')};\n width: 100%;\n\n ${({ $isAnimatingText }) =>\n $isAnimatingText &&\n css`\n pointer-events: none;\n `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAgD,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAShD,MAAMW,uBAAuB,GAAGA,CAAC;EAC7BC,WAAW;EACXC,gBAAgB;EAChBC;AACmB,CAAC,KAAK;EACzB,IAAI,CAACD,gBAAgB,IAAIC,iBAAiB,EAAE;IACxC,OAAO,EAAE;EACb;EAEA,IAAIF,WAAW,KAAKG,kBAAU,CAACC,IAAI,EAAE;IACjC,OAAO,IAAAC,qBAAG;AAClB;AACA;AACA,iCAAiCC,cAAc;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;EACL;EAEA,OAAO,IAAAD,qBAAG;AACd;AACA;AACA,6BAA6BC,cAAc;AAC3C,yBAAyB,CAAC;IAAEC;EAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,CAAC;AAEM,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAA0B;AACjE;AACA;AACA;AACA;AACA,MAAMb,uBAAuB;AAC7B,CAAC;AAED,MAAMO,cAAc,GAAG,IAAAO,2BAAS;AAChC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAJ,OAAA,CAAAI,0BAAA,GAAGH,yBAAM,CAACI,IAAI;AACrD;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,oBAAoB,GAAAN,OAAA,CAAAM,oBAAA,GAAGL,yBAAM,CAACI,IAA+B;AAC1E;AACA,gBAAgB,CAAC;EAAEd;AAAiB,CAAC,KAAMA,gBAAgB,GAAG,UAAU,GAAG,UAAW;AACtF;AACA;AACA,MAAM,CAAC;EAAEA;AAAiB,CAAC,KACnBA,gBAAgB,IAChB,IAAAI,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
package/lib/cjs/index.js CHANGED
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "CursorType", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _cursor.CursorType;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "Typewriter", {
7
13
  enumerable: true,
8
14
  get: function () {
@@ -22,6 +28,7 @@ Object.defineProperty(exports, "TypewriterSpeed", {
22
28
  }
23
29
  });
24
30
  var _Typewriter = _interopRequireWildcard(require("./components/typewriter/Typewriter"));
31
+ var _cursor = require("./types/cursor");
25
32
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
26
33
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
27
34
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_Typewriter","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set"],"sources":["../../src/index.ts"],"sourcesContent":["export {\n default as Typewriter,\n TypewriterDelay,\n TypewriterSpeed,\n} from './components/typewriter/Typewriter';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,uBAAA,CAAAC,OAAA;AAI4C,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_Typewriter","_interopRequireWildcard","require","_cursor","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set"],"sources":["../../src/index.ts"],"sourcesContent":["export {\n default as Typewriter,\n TypewriterDelay,\n TypewriterSpeed,\n} from './components/typewriter/Typewriter';\nexport { CursorType } from './types/cursor';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,uBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAD,OAAA;AAA4C,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA","ignoreList":[]}
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.CursorType = void 0;
7
+ let CursorType = exports.CursorType = /*#__PURE__*/function (CursorType) {
8
+ CursorType["Default"] = "default";
9
+ CursorType["Thin"] = "thin";
10
+ return CursorType;
11
+ }({});
12
+ //# sourceMappingURL=cursor.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cursor.js","names":["CursorType","exports"],"sources":["../../../src/types/cursor.ts"],"sourcesContent":["export enum CursorType {\n Default = 'default',\n Thin = 'thin',\n}\n"],"mappings":";;;;;;IAAYA,UAAU,GAAAC,OAAA,CAAAD,UAAA,0BAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA","ignoreList":[]}
@@ -3,9 +3,10 @@ import { ChaynsProvider, useFunctions, useValues } from 'chayns-api';
3
3
  import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
4
4
  import { createPortal } from 'react-dom';
5
5
  import { renderToString } from 'react-dom/server';
6
+ import { CursorType } from '../../types/cursor';
7
+ import AnimatedTypewriterText from './AnimatedTypewriterText';
6
8
  import { StyledTypewriter, StyledTypewriterPseudoText, StyledTypewriterText } from './Typewriter.styles';
7
9
  import { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';
8
- import AnimatedTypewriterText from "./AnimatedTypewriterText";
9
10
  const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
10
11
 
11
12
  // noinspection JSUnusedGlobalSymbols
@@ -31,8 +32,13 @@ export let TypewriterSpeed = /*#__PURE__*/function (TypewriterSpeed) {
31
32
  const Typewriter = _ref => {
32
33
  let {
33
34
  children,
35
+ cursorType = CursorType.Default,
34
36
  nextTextDelay = TypewriterDelay.Medium,
35
37
  onFinish,
38
+ onResetAnimationEnd,
39
+ onResetAnimationStart,
40
+ onTypingAnimationEnd,
41
+ onTypingAnimationStart,
36
42
  pseudoChildren,
37
43
  resetDelay = TypewriterDelay.Medium,
38
44
  shouldForceCursorAnimation = false,
@@ -115,11 +121,17 @@ const Typewriter = _ref => {
115
121
  if (shouldStopAnimation || charactersCount === 0) {
116
122
  setShownCharCount(textContent.length);
117
123
  } else if (isResetAnimationActive) {
124
+ if (typeof onResetAnimationStart === 'function') {
125
+ onResetAnimationStart();
126
+ }
118
127
  interval = window.setInterval(() => {
119
128
  setShownCharCount(prevState => {
120
129
  const nextState = prevState - 1;
121
130
  if (nextState === 0) {
122
131
  window.clearInterval(interval);
132
+ if (typeof onResetAnimationEnd === 'function') {
133
+ onResetAnimationEnd();
134
+ }
123
135
  if (areMultipleChildrenGiven) {
124
136
  setTimeout(() => {
125
137
  setIsResetAnimationActive(false);
@@ -132,11 +144,17 @@ const Typewriter = _ref => {
132
144
  }, resetSpeed);
133
145
  } else {
134
146
  const setInterval = () => {
147
+ if (typeof onTypingAnimationStart === 'function') {
148
+ onTypingAnimationStart();
149
+ }
135
150
  interval = window.setInterval(() => {
136
151
  setShownCharCount(prevState => {
137
152
  let nextState = Math.min(prevState + 1, charactersCount);
138
153
  if (nextState >= charactersCount && !shouldWaitForContent) {
139
154
  window.clearInterval(interval);
155
+ if (typeof onTypingAnimationEnd === 'function') {
156
+ onTypingAnimationEnd();
157
+ }
140
158
 
141
159
  /**
142
160
  * At this point, the next value for "shownCharCount" is deliberately set to
@@ -199,6 +217,7 @@ const Typewriter = _ref => {
199
217
  return textContent || '&#8203;';
200
218
  }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);
201
219
  return useMemo(() => /*#__PURE__*/React.createElement(StyledTypewriter, {
220
+ $cursorType: cursorType,
202
221
  onClick: isAnimatingText ? handleClick : undefined,
203
222
  $isAnimatingText: isAnimatingText,
204
223
  $shouldHideCursor: shouldHideCursor
@@ -217,7 +236,7 @@ const Typewriter = _ref => {
217
236
  position: 'absolute',
218
237
  visibility: 'hidden'
219
238
  }
220
- }, children), document.body)), [children, handleClick, hasRenderedChildrenOnce, isAnimatingText, pseudoTextHTML, shouldHideCursor, shownText, sortedChildren, textStyle]);
239
+ }, children), document.body)), [children, cursorType, handleClick, hasRenderedChildrenOnce, isAnimatingText, pseudoTextHTML, shouldHideCursor, shownText, sortedChildren, textStyle]);
221
240
  };
222
241
  Typewriter.displayName = 'Typewriter';
223
242
  export default Typewriter;
@@ -1 +1 @@
1
- {"version":3,"file":"Typewriter.js","names":["ColorSchemeProvider","ChaynsProvider","useFunctions","useValues","React","useCallback","useEffect","useLayoutEffect","useMemo","useState","createPortal","renderToString","StyledTypewriter","StyledTypewriterPseudoText","StyledTypewriterText","getCharactersCount","getSubTextFromHTML","shuffleArray","AnimatedTypewriterText","useIsomorphicLayoutEffect","window","TypewriterDelay","TypewriterSpeed","Typewriter","_ref","children","nextTextDelay","Medium","onFinish","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","resetSpeed","startDelay","None","textStyle","currentChildrenIndex","setCurrentChildrenIndex","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","functions","values","sortedChildren","Array","isArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","isValidElement","createElement","data","isModule","color","colorMode","style","display","charactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","handleClick","event","stopPropagation","preventDefault","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","Math","min","shownText","pseudoTextHTML","pseudoText","onClick","undefined","$isAnimatingText","$shouldHideCursor","dangerouslySetInnerHTML","__html","position","visibility","document","body","displayName"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import {ColorSchemeProvider} 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 {\n StyledTypewriter,\n StyledTypewriterPseudoText,\n StyledTypewriterText,\n} from './Typewriter.styles';\nimport {getCharactersCount, getSubTextFromHTML, shuffleArray} from './utils';\nimport AnimatedTypewriterText from \"./AnimatedTypewriterText\";\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n ExtraSlow = 4000,\n Slow = 2000,\n Medium = 1000,\n Fast = 500,\n ExtraFast = 250,\n None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n ExtraSlow = 40,\n Slow = 20,\n Medium = 10,\n Fast = 5,\n ExtraFast = 2.5,\n}\n\nexport type TypewriterProps = {\n /**\n * The text to type\n */\n children: ReactElement | ReactElement[] | string | string[];\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 * 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 * 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 * 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?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n children,\n nextTextDelay = TypewriterDelay.Medium,\n onFinish,\n pseudoChildren,\n resetDelay = TypewriterDelay.Medium,\n shouldForceCursorAnimation = false,\n shouldHideCursor = 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 }) => {\n const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n const functions = useFunctions();\n const values = useValues();\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=\"#005EB8\"\n colorMode={0}\n style={{display: 'inline'}}\n >\n {currentChildren}\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=\"#005EB8\"\n colorMode={0}\n style={{display: 'inline'}}\n >\n {sortedChildren}\n </ColorSchemeProvider>\n </ChaynsProvider>,\n )\n : (sortedChildren as string);\n }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);\n\n const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n const [shownCharCount, setShownCharCount] = useState(\n charactersCount > 0 ? 0 : textContent.length,\n );\n const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n const isAnimatingText =\n shownCharCount < textContent.length ||\n shouldForceCursorAnimation ||\n areMultipleChildrenGiven ||\n textContent.length === 0;\n\n const handleClick = useCallback((event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n setShouldStopAnimation(true);\n }, []);\n\n const handleSetNextChildrenIndex = useCallback(\n () =>\n setCurrentChildrenIndex(() => {\n let newIndex = currentChildrenIndex + 1;\n\n if (newIndex > childrenCount - 1) {\n newIndex = 0;\n }\n\n return newIndex;\n }),\n [childrenCount, currentChildrenIndex],\n );\n\n useEffect(() => {\n let interval: number | undefined;\n\n if (shouldStopAnimation || charactersCount === 0) {\n setShownCharCount(textContent.length);\n } else if (isResetAnimationActive) {\n interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n const nextState = prevState - 1;\n\n if (nextState === 0) {\n window.clearInterval(interval);\n\n if (areMultipleChildrenGiven) {\n setTimeout(() => {\n setIsResetAnimationActive(false);\n handleSetNextChildrenIndex();\n }, nextTextDelay);\n }\n }\n\n return nextState;\n });\n }, resetSpeed);\n } else {\n const setInterval = () => {\n interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n let nextState = Math.min(prevState + 1, charactersCount);\n\n if (nextState >= charactersCount && !shouldWaitForContent) {\n window.clearInterval(interval);\n\n /**\n * At this point, the next value for \"shownCharCount\" is deliberately set to\n * the length of the textContent in order to correctly display HTML elements\n * after the last letter.\n */\n nextState = textContent.length;\n\n if (areMultipleChildrenGiven) {\n setTimeout(() => {\n if (shouldUseResetAnimation) {\n setIsResetAnimationActive(true);\n } else {\n setShownCharCount(0);\n setTimeout(handleSetNextChildrenIndex, nextTextDelay);\n }\n }, resetDelay);\n }\n }\n\n return nextState;\n });\n }, speed);\n };\n\n if (startDelay) {\n setTimeout(setInterval, startDelay);\n } else {\n setInterval();\n }\n }\n\n return () => {\n window.clearInterval(interval);\n };\n }, [resetSpeed,\n speed,\n resetDelay,\n childrenCount,\n charactersCount,\n textContent.length,\n shouldStopAnimation,\n shouldWaitForContent,\n isResetAnimationActive,\n shouldUseResetAnimation,\n areMultipleChildrenGiven,\n handleSetNextChildrenIndex,\n nextTextDelay,\n startDelay,\n ]);\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=\"#005EB8\"\n colorMode={0}\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 || '&#8203;';\n }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);\n\n return useMemo(\n () => (\n <StyledTypewriter\n onClick={isAnimatingText ? handleClick : undefined}\n $isAnimatingText={isAnimatingText}\n $shouldHideCursor={shouldHideCursor}\n >\n {isAnimatingText ? (\n <AnimatedTypewriterText\n shouldHideCursor={shouldHideCursor}\n shownText={shownText}\n textStyle={textStyle}\n />\n ) : (\n <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n )}\n {isAnimatingText && (\n <StyledTypewriterPseudoText\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 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 handleClick,\n hasRenderedChildrenOnce,\n isAnimatingText,\n pseudoTextHTML,\n shouldHideCursor,\n shownText,\n sortedChildren,\n textStyle,\n ],\n );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Typewriter.js","names":["ColorSchemeProvider","ChaynsProvider","useFunctions","useValues","React","useCallback","useEffect","useLayoutEffect","useMemo","useState","createPortal","renderToString","CursorType","AnimatedTypewriterText","StyledTypewriter","StyledTypewriterPseudoText","StyledTypewriterText","getCharactersCount","getSubTextFromHTML","shuffleArray","useIsomorphicLayoutEffect","window","TypewriterDelay","TypewriterSpeed","Typewriter","_ref","children","cursorType","Default","nextTextDelay","Medium","onFinish","onResetAnimationEnd","onResetAnimationStart","onTypingAnimationEnd","onTypingAnimationStart","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","resetSpeed","startDelay","None","textStyle","currentChildrenIndex","setCurrentChildrenIndex","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","functions","values","sortedChildren","Array","isArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","isValidElement","createElement","data","isModule","color","colorMode","style","display","charactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","handleClick","event","stopPropagation","preventDefault","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","Math","min","shownText","pseudoTextHTML","pseudoText","$cursorType","onClick","undefined","$isAnimatingText","$shouldHideCursor","dangerouslySetInnerHTML","__html","position","visibility","document","body","displayName"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider } 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 useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport { CursorType } from '../../types/cursor';\nimport AnimatedTypewriterText from './AnimatedTypewriterText';\nimport {\n StyledTypewriter,\n StyledTypewriterPseudoText,\n StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n ExtraSlow = 4000,\n Slow = 2000,\n Medium = 1000,\n Fast = 500,\n ExtraFast = 250,\n None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n ExtraSlow = 40,\n Slow = 20,\n Medium = 10,\n Fast = 5,\n ExtraFast = 2.5,\n}\n\nexport type TypewriterProps = {\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 * 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 * 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?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n children,\n cursorType = CursorType.Default,\n nextTextDelay = TypewriterDelay.Medium,\n onFinish,\n onResetAnimationEnd,\n onResetAnimationStart,\n onTypingAnimationEnd,\n onTypingAnimationStart,\n pseudoChildren,\n resetDelay = TypewriterDelay.Medium,\n shouldForceCursorAnimation = false,\n shouldHideCursor = 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}) => {\n const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n const functions = useFunctions();\n const values = useValues();\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=\"#005EB8\"\n colorMode={0}\n style={{ display: 'inline' }}\n >\n {currentChildren}\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=\"#005EB8\"\n colorMode={0}\n style={{ display: 'inline' }}\n >\n {sortedChildren}\n </ColorSchemeProvider>\n </ChaynsProvider>,\n )\n : (sortedChildren as string);\n }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);\n\n const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n const [shownCharCount, setShownCharCount] = useState(\n charactersCount > 0 ? 0 : textContent.length,\n );\n const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n const isAnimatingText =\n shownCharCount < textContent.length ||\n shouldForceCursorAnimation ||\n areMultipleChildrenGiven ||\n textContent.length === 0;\n\n const handleClick = useCallback((event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n setShouldStopAnimation(true);\n }, []);\n\n const handleSetNextChildrenIndex = useCallback(\n () =>\n setCurrentChildrenIndex(() => {\n let newIndex = currentChildrenIndex + 1;\n\n if (newIndex > childrenCount - 1) {\n newIndex = 0;\n }\n\n return newIndex;\n }),\n [childrenCount, currentChildrenIndex],\n );\n\n useEffect(() => {\n let interval: number | undefined;\n\n if (shouldStopAnimation || charactersCount === 0) {\n setShownCharCount(textContent.length);\n } else if (isResetAnimationActive) {\n if (typeof onResetAnimationStart === 'function') {\n onResetAnimationStart();\n }\n\n interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n const nextState = prevState - 1;\n\n if (nextState === 0) {\n window.clearInterval(interval);\n\n if (typeof onResetAnimationEnd === 'function') {\n onResetAnimationEnd();\n }\n\n if (areMultipleChildrenGiven) {\n setTimeout(() => {\n setIsResetAnimationActive(false);\n handleSetNextChildrenIndex();\n }, nextTextDelay);\n }\n }\n\n return nextState;\n });\n }, resetSpeed);\n } else {\n const setInterval = () => {\n if (typeof onTypingAnimationStart === 'function') {\n onTypingAnimationStart();\n }\n\n interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n let nextState = Math.min(prevState + 1, charactersCount);\n\n if (nextState >= charactersCount && !shouldWaitForContent) {\n window.clearInterval(interval);\n\n if (typeof onTypingAnimationEnd === 'function') {\n onTypingAnimationEnd();\n }\n\n /**\n * At this point, the next value for \"shownCharCount\" is deliberately set to\n * the length of the textContent in order to correctly display HTML elements\n * after the last letter.\n */\n nextState = textContent.length;\n\n if (areMultipleChildrenGiven) {\n setTimeout(() => {\n if (shouldUseResetAnimation) {\n setIsResetAnimationActive(true);\n } else {\n setShownCharCount(0);\n setTimeout(handleSetNextChildrenIndex, nextTextDelay);\n }\n }, resetDelay);\n }\n }\n\n return nextState;\n });\n }, speed);\n };\n\n if (startDelay) {\n setTimeout(setInterval, startDelay);\n } else {\n setInterval();\n }\n }\n\n return () => {\n window.clearInterval(interval);\n };\n }, [\n resetSpeed,\n speed,\n resetDelay,\n childrenCount,\n charactersCount,\n textContent.length,\n shouldStopAnimation,\n shouldWaitForContent,\n isResetAnimationActive,\n shouldUseResetAnimation,\n areMultipleChildrenGiven,\n handleSetNextChildrenIndex,\n nextTextDelay,\n startDelay,\n ]);\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=\"#005EB8\"\n colorMode={0}\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 || '&#8203;';\n }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);\n\n return useMemo(\n () => (\n <StyledTypewriter\n $cursorType={cursorType}\n onClick={isAnimatingText ? handleClick : undefined}\n $isAnimatingText={isAnimatingText}\n $shouldHideCursor={shouldHideCursor}\n >\n {isAnimatingText ? (\n <AnimatedTypewriterText\n shouldHideCursor={shouldHideCursor}\n shownText={shownText}\n textStyle={textStyle}\n />\n ) : (\n <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n )}\n {isAnimatingText && (\n <StyledTypewriterPseudoText\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 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 shownText,\n sortedChildren,\n textStyle,\n ],\n );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}
@@ -1,26 +1,45 @@
1
1
  import styled, { css, keyframes } from 'styled-components';
2
+ import { CursorType } from '../../types/cursor';
2
3
  const typewriterCursorElement = _ref => {
3
4
  let {
5
+ $cursorType,
4
6
  $isAnimatingText,
5
7
  $shouldHideCursor
6
8
  } = _ref;
7
- return $isAnimatingText && !$shouldHideCursor && css`
8
- .typewriter-lastWithContent {
9
- &:after {
10
- animation: ${blinkAnimation} 1s steps(2, start) infinite;
11
- color: ${_ref2 => {
9
+ if (!$isAnimatingText || $shouldHideCursor) {
10
+ return '';
11
+ }
12
+ if ($cursorType === CursorType.Thin) {
13
+ return css`
14
+ .typewriter-lastWithContent {
15
+ &:after {
16
+ animation: ${blinkAnimation} 1s steps(2, start) infinite;
17
+ color: inherit;
18
+ content: '|';
19
+ font-size: 25px;
20
+ position: relative;
21
+ line-height: 0;
22
+ vertical-align: baseline;
23
+ }
24
+ `;
25
+ }
26
+ return css`
27
+ .typewriter-lastWithContent {
28
+ &:after {
29
+ animation: ${blinkAnimation} 1s steps(2, start) infinite;
30
+ color: ${_ref2 => {
12
31
  let {
13
32
  theme
14
33
  } = _ref2;
15
34
  return theme.text;
16
35
  }};
17
- content: '▋';
18
- margin-left: 0.25rem;
19
- opacity: 0.85;
20
- position: relative;
21
- vertical-align: baseline;
36
+ content: '▋';
37
+ margin-left: 0.25rem;
38
+ opacity: 0.85;
39
+ position: relative;
40
+ vertical-align: baseline;
41
+ }
22
42
  }
23
- }
24
43
  `;
25
44
  };
26
45
  export const StyledTypewriter = styled.div`
@@ -1 +1 @@
1
- {"version":3,"file":"Typewriter.styles.js","names":["styled","css","keyframes","typewriterCursorElement","_ref","$isAnimatingText","$shouldHideCursor","blinkAnimation","_ref2","theme","text","StyledTypewriter","div","StyledTypewriterPseudoText","span","StyledTypewriterText","_ref3","_ref4"],"sources":["../../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\n\nconst typewriterCursorElement = ({\n $isAnimatingText,\n $shouldHideCursor,\n}: {\n $isAnimatingText?: boolean;\n $shouldHideCursor?: boolean;\n}) =>\n $isAnimatingText &&\n !$shouldHideCursor &&\n css`\n .typewriter-lastWithContent {\n &:after {\n animation: ${blinkAnimation} 1s steps(2, start) infinite;\n color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n content: '▋';\n margin-left: 0.25rem;\n opacity: 0.85;\n position: relative;\n vertical-align: baseline;\n }\n }\n `;\n\ntype StyledTypewriterProps = WithTheme<{\n $isAnimatingText?: boolean;\n $shouldHideCursor?: boolean;\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\nexport const StyledTypewriterPseudoText = styled.span`\n opacity: 0;\n pointer-events: none;\n user-select: none;\n width: 100%;\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n $isAnimatingText?: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n color: inherit;\n position: ${({ $isAnimatingText }) => ($isAnimatingText ? 'absolute' : 'relative')};\n width: 100%;\n\n ${({ $isAnimatingText }) =>\n $isAnimatingText &&\n css`\n pointer-events: none;\n `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAE1D,MAAMC,uBAAuB,GAAGC,IAAA;EAAA,IAAC;IAC7BC,gBAAgB;IAChBC;EAIJ,CAAC,GAAAF,IAAA;EAAA,OACGC,gBAAgB,IAChB,CAACC,iBAAiB,IAClBL,GAAG;AACP;AACA;AACA,uBAAuBM,cAAc;AACrC,mBAAmBC,KAAA;IAAA,IAAC;MAAEC;IAAiC,CAAC,GAAAD,KAAA;IAAA,OAAKC,KAAK,CAACC,IAAI;EAAA;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AAAA;AAOL,OAAO,MAAMC,gBAAgB,GAAGX,MAAM,CAACY,GAA0B;AACjE;AACA;AACA;AACA;AACA,MAAMT,uBAAuB;AAC7B,CAAC;AAED,MAAMI,cAAc,GAAGL,SAAS;AAChC;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMW,0BAA0B,GAAGb,MAAM,CAACc,IAAI;AACrD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGf,MAAM,CAACc,IAA+B;AAC1E;AACA,gBAAgBE,KAAA;EAAA,IAAC;IAAEX;EAAiB,CAAC,GAAAW,KAAA;EAAA,OAAMX,gBAAgB,GAAG,UAAU,GAAG,UAAU;AAAA,CAAC;AACtF;AACA;AACA,MAAMY,KAAA;EAAA,IAAC;IAAEZ;EAAiB,CAAC,GAAAY,KAAA;EAAA,OACnBZ,gBAAgB,IAChBJ,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Typewriter.styles.js","names":["styled","css","keyframes","CursorType","typewriterCursorElement","_ref","$cursorType","$isAnimatingText","$shouldHideCursor","Thin","blinkAnimation","_ref2","theme","text","StyledTypewriter","div","StyledTypewriterPseudoText","span","StyledTypewriterText","_ref3","_ref4"],"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}>;\n\nconst typewriterCursorElement = ({\n $cursorType,\n $isAnimatingText,\n $shouldHideCursor,\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: ${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 }: StyledTypewriterTextProps) => theme.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\nexport const StyledTypewriterPseudoText = styled.span`\n opacity: 0;\n pointer-events: none;\n user-select: none;\n width: 100%;\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n $isAnimatingText?: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n color: inherit;\n position: ${({ $isAnimatingText }) => ($isAnimatingText ? 'absolute' : 'relative')};\n width: 100%;\n\n ${({ $isAnimatingText }) =>\n $isAnimatingText &&\n css`\n pointer-events: none;\n `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,UAAU,QAAQ,oBAAoB;AAS/C,MAAMC,uBAAuB,GAAGC,IAAA,IAIH;EAAA,IAJI;IAC7BC,WAAW;IACXC,gBAAgB;IAChBC;EACmB,CAAC,GAAAH,IAAA;EACpB,IAAI,CAACE,gBAAgB,IAAIC,iBAAiB,EAAE;IACxC,OAAO,EAAE;EACb;EAEA,IAAIF,WAAW,KAAKH,UAAU,CAACM,IAAI,EAAE;IACjC,OAAOR,GAAG;AAClB;AACA;AACA,iCAAiCS,cAAc;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;EACL;EAEA,OAAOT,GAAG;AACd;AACA;AACA,6BAA6BS,cAAc;AAC3C,yBAAyBC,KAAA;IAAA,IAAC;MAAEC;IAAiC,CAAC,GAAAD,KAAA;IAAA,OAAKC,KAAK,CAACC,IAAI;EAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAAGd,MAAM,CAACe,GAA0B;AACjE;AACA;AACA;AACA;AACA,MAAMX,uBAAuB;AAC7B,CAAC;AAED,MAAMM,cAAc,GAAGR,SAAS;AAChC;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMc,0BAA0B,GAAGhB,MAAM,CAACiB,IAAI;AACrD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGlB,MAAM,CAACiB,IAA+B;AAC1E;AACA,gBAAgBE,KAAA;EAAA,IAAC;IAAEZ;EAAiB,CAAC,GAAAY,KAAA;EAAA,OAAMZ,gBAAgB,GAAG,UAAU,GAAG,UAAU;AAAA,CAAC;AACtF;AACA;AACA,MAAMa,KAAA;EAAA,IAAC;IAAEb;EAAiB,CAAC,GAAAa,KAAA;EAAA,OACnBb,gBAAgB,IAChBN,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
package/lib/esm/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as Typewriter, TypewriterDelay, TypewriterSpeed } from './components/typewriter/Typewriter';
2
+ export { CursorType } from './types/cursor';
2
3
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["default","Typewriter","TypewriterDelay","TypewriterSpeed"],"sources":["../../src/index.ts"],"sourcesContent":["export {\n default as Typewriter,\n TypewriterDelay,\n TypewriterSpeed,\n} from './components/typewriter/Typewriter';\n"],"mappings":"AAAA,SACIA,OAAO,IAAIC,UAAU,EACrBC,eAAe,EACfC,eAAe,QACZ,oCAAoC","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["default","Typewriter","TypewriterDelay","TypewriterSpeed","CursorType"],"sources":["../../src/index.ts"],"sourcesContent":["export {\n default as Typewriter,\n TypewriterDelay,\n TypewriterSpeed,\n} from './components/typewriter/Typewriter';\nexport { CursorType } from './types/cursor';\n"],"mappings":"AAAA,SACIA,OAAO,IAAIC,UAAU,EACrBC,eAAe,EACfC,eAAe,QACZ,oCAAoC;AAC3C,SAASC,UAAU,QAAQ,gBAAgB","ignoreList":[]}
@@ -0,0 +1,6 @@
1
+ export let CursorType = /*#__PURE__*/function (CursorType) {
2
+ CursorType["Default"] = "default";
3
+ CursorType["Thin"] = "thin";
4
+ return CursorType;
5
+ }({});
6
+ //# sourceMappingURL=cursor.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cursor.js","names":["CursorType"],"sources":["../../../src/types/cursor.ts"],"sourcesContent":["export enum CursorType {\n Default = 'default',\n Thin = 'thin',\n}\n"],"mappings":"AAAA,WAAYA,UAAU,0BAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA","ignoreList":[]}
@@ -1,4 +1,5 @@
1
1
  import React, { FC, ReactElement } from 'react';
2
+ import { CursorType } from '../../types/cursor';
2
3
  export declare enum TypewriterDelay {
3
4
  ExtraSlow = 4000,
4
5
  Slow = 2000,
@@ -19,6 +20,10 @@ export type TypewriterProps = {
19
20
  * The text to type
20
21
  */
21
22
  children: ReactElement | ReactElement[] | string | string[];
23
+ /**
24
+ * The type of the cursor. Use the CursorType enum for this prop.
25
+ */
26
+ cursorType?: CursorType;
22
27
  /**
23
28
  * The delay in milliseconds before the next text is shown.
24
29
  * This prop is only used if multiple texts are given.
@@ -29,6 +34,26 @@ export type TypewriterProps = {
29
34
  * be executed if multiple texts are used.
30
35
  */
31
36
  onFinish?: VoidFunction;
37
+ /**
38
+ * Function that is executed when the reset animation has finished. This function will not be
39
+ * executed if `shouldUseResetAnimation` is not set to `true`.
40
+ */
41
+ onResetAnimationEnd?: VoidFunction;
42
+ /**
43
+ * Function that is executed when the reset animation has started. This function will not be
44
+ * executed if `shouldUseResetAnimation` is not set to `true`.
45
+ */
46
+ onResetAnimationStart?: VoidFunction;
47
+ /**
48
+ * Function that is executed when the typing animation has finished. If multiple texts are given,
49
+ * this function will be executed for each text.
50
+ */
51
+ onTypingAnimationEnd?: VoidFunction;
52
+ /**
53
+ * Function that is executed when the typing animation has started. If multiple texts are given,
54
+ * this function will be executed for each text.
55
+ */
56
+ onTypingAnimationStart?: VoidFunction;
32
57
  /**
33
58
  * Pseudo-element to be rendered invisible during animation to define the size of the element
34
59
  * for the typewriter effect. By default, the "children" is used for this purpose.
@@ -1,7 +1,9 @@
1
1
  import type { WithTheme } from '@chayns-components/core';
2
+ import type { TypewriterProps } from './Typewriter';
2
3
  type StyledTypewriterProps = WithTheme<{
3
- $isAnimatingText?: boolean;
4
- $shouldHideCursor?: boolean;
4
+ $cursorType: TypewriterProps['cursorType'];
5
+ $isAnimatingText: boolean;
6
+ $shouldHideCursor: TypewriterProps['shouldHideCursor'];
5
7
  }>;
6
8
  export declare const StyledTypewriter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTypewriterProps>> & string;
7
9
  export declare const StyledTypewriterPseudoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
@@ -1 +1,2 @@
1
1
  export { default as Typewriter, TypewriterDelay, TypewriterSpeed, } from './components/typewriter/Typewriter';
2
+ export { CursorType } from './types/cursor';
@@ -0,0 +1,4 @@
1
+ export declare enum CursorType {
2
+ Default = "default",
3
+ Thin = "thin"
4
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/typewriter",
3
- "version": "5.0.0-beta.939",
3
+ "version": "5.0.0-beta.940",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -56,7 +56,7 @@
56
56
  "@babel/preset-env": "^7.26.0",
57
57
  "@babel/preset-react": "^7.26.3",
58
58
  "@babel/preset-typescript": "^7.26.0",
59
- "@types/react": "^18.3.16",
59
+ "@types/react": "^18.3.18",
60
60
  "@types/react-dom": "^18.3.5",
61
61
  "@types/styled-components": "^5.1.34",
62
62
  "@types/uuid": "^10.0.0",
@@ -69,7 +69,7 @@
69
69
  "typescript": "^5.7.2"
70
70
  },
71
71
  "dependencies": {
72
- "@chayns-components/core": "^5.0.0-beta.939"
72
+ "@chayns-components/core": "^5.0.0-beta.940"
73
73
  },
74
74
  "peerDependencies": {
75
75
  "chayns-api": ">=1.0.73",
@@ -81,5 +81,5 @@
81
81
  "publishConfig": {
82
82
  "access": "public"
83
83
  },
84
- "gitHead": "ea5b042c9c4b694d4f0c4a97482d62219b15a450"
84
+ "gitHead": "8cdbd6072312b59f71698401b5eab20214a48c62"
85
85
  }