@chayns-components/typewriter 5.0.0-beta.103 → 5.0.0-beta.104

package/lib/components/typewriter/Typewriter.d.ts

@@ -14,6 +14,11 @@ export type TypewriterProps = {
      * The text to type
      */
     children: ReactElement | ReactElement[] | string | string[];
+    /**
+     * Function that is executed when the typewriter animation has finished. This function will not
+     * be executed if multiple texts are used.
+     */
+    onFinish?: VoidFunction;
     /**
      * Waiting time before the typewriter resets the content if multiple texts are given
      */
@@ -25,7 +30,8 @@ export type TypewriterProps = {
      */
     shouldSortChildrenRandomly?: boolean;
     /**
-     * Specifies whether the reset of the text should be animated with a backspace animation for multiple texts.
+     * Specifies whether the reset of the text should be animated with a backspace animation for
+     * multiple texts.
      */
     shouldUseResetAnimation?: boolean;
     /**

package/lib/components/typewriter/Typewriter.js

@@ -10,23 +10,25 @@ var _Typewriter = require("./Typewriter.styles");
 var _utils = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-let TypewriterResetDelay;
-exports.TypewriterResetDelay = TypewriterResetDelay;
-(function (TypewriterResetDelay) {
+// noinspection JSUnusedGlobalSymbols
+let TypewriterResetDelay = /*#__PURE__*/function (TypewriterResetDelay) {
   TypewriterResetDelay[TypewriterResetDelay["Slow"] = 4000] = "Slow";
   TypewriterResetDelay[TypewriterResetDelay["Medium"] = 2000] = "Medium";
   TypewriterResetDelay[TypewriterResetDelay["Fast"] = 1000] = "Fast";
-})(TypewriterResetDelay || (exports.TypewriterResetDelay = TypewriterResetDelay = {}));
-let TypewriterSpeed;
-exports.TypewriterSpeed = TypewriterSpeed;
-(function (TypewriterSpeed) {
+  return TypewriterResetDelay;
+}({}); // noinspection JSUnusedGlobalSymbols
+exports.TypewriterResetDelay = TypewriterResetDelay;
+let TypewriterSpeed = /*#__PURE__*/function (TypewriterSpeed) {
   TypewriterSpeed[TypewriterSpeed["Slow"] = 40] = "Slow";
   TypewriterSpeed[TypewriterSpeed["Medium"] = 30] = "Medium";
   TypewriterSpeed[TypewriterSpeed["Fast"] = 20] = "Fast";
-})(TypewriterSpeed || (exports.TypewriterSpeed = TypewriterSpeed = {}));
+  return TypewriterSpeed;
+}({});
+exports.TypewriterSpeed = TypewriterSpeed;
 const Typewriter = _ref => {
   let {
     children,
+    onFinish,
     resetDelay = TypewriterResetDelay.Medium,
     shouldSortChildrenRandomly = false,
     shouldUseResetAnimation = false,
@@ -119,6 +121,11 @@ const Typewriter = _ref => {
       setShownCharCount(0);
     }
   }, [charactersCount]);
+  (0, _react.useEffect)(() => {
+    if (!isAnimatingText && typeof onFinish === 'function') {
+      onFinish();
+    }
+  }, [isAnimatingText, onFinish]);
   const shownText = (0, _react.useMemo)(() => (0, _utils.getSubTextFromHTML)(textContent, shownCharCount), [shownCharCount, textContent]);
   return /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, {
     onClick: handleClick

package/lib/components/typewriter/Typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typewriter.js","names":["_react","_interopRequireWildcard","require","_server","_Typewriter","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TypewriterResetDelay","exports","TypewriterSpeed","Typewriter","_ref","children","resetDelay","Medium","shouldSortChildrenRandomly","shouldUseResetAnimation","speed","currentChildrenIndex","setCurrentChildrenIndex","useState","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","React","isValidElement","renderToString","charactersCount","getCharactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","handleClick","useCallback","handleSetNextChildrenIndex","newIndex","useEffect","interval","window","setInterval","prevState","nextState","clearInterval","setTimeout","shownText","getSubTextFromHTML","createElement","StyledTypewriter","onClick","StyledTypewriterText","dangerouslySetInnerHTML","__html","StyledTypewriterPseudoText","displayName","_default"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\nexport enum TypewriterResetDelay {\n    Slow = 4000,\n    Medium = 2000,\n    Fast = 1000,\n}\n\nexport enum TypewriterSpeed {\n    Slow = 40,\n    Medium = 30,\n    Fast = 20,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\n    /**\n     * Waiting time before the typewriter resets the content if multiple texts are given\n     */\n    resetDelay?: TypewriterResetDelay;\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 reset of the text should be animated with a backspace animation for multiple texts.\n     */\n    shouldUseResetAnimation?: boolean;\n    /**\n     * The speed of the animation. Use the TypewriterSpeed enum for this prop.\n     */\n    speed?: TypewriterSpeed;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    resetDelay = TypewriterResetDelay.Medium,\n    shouldSortChildrenRandomly = false,\n    shouldUseResetAnimation = false,\n    speed = TypewriterSpeed.Medium,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\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(currentChildren)\n                    : currentChildren;\n            }\n\n            return '';\n        }\n\n        return React.isValidElement(sortedChildren)\n            ? renderToString(sortedChildren)\n            : sortedChildren;\n    }, [areMultipleChildrenGiven, currentChildrenIndex, sortedChildren]);\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        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback(() => {\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                            }, resetDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        } else {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    let nextState = prevState + 1;\n\n                    if (nextState === charactersCount) {\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, resetDelay / 2);\n                                }\n                            }, resetDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        shouldStopAnimation,\n        speed,\n        textContent.length,\n        charactersCount,\n        isResetAnimationActive,\n        areMultipleChildrenGiven,\n        resetDelay,\n        childrenCount,\n        handleSetNextChildrenIndex,\n        shouldUseResetAnimation,\n    ]);\n\n    useEffect(() => {\n        if (charactersCount) {\n            setIsResetAnimationActive(false);\n            setShownCharCount(0);\n        }\n    }, [charactersCount]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(textContent, shownCharCount),\n        [shownCharCount, textContent]\n    );\n\n    return (\n        <StyledTypewriter onClick={handleClick}>\n            {isAnimatingText ? (\n                <StyledTypewriterText\n                    dangerouslySetInnerHTML={{ __html: shownText }}\n                    isAnimatingText\n                />\n            ) : (\n                <StyledTypewriterText>{sortedChildren}</StyledTypewriterText>\n            )}\n            {isAnimatingText && (\n                <StyledTypewriterPseudoText\n                    dangerouslySetInnerHTML={{ __html: textContent || '&#8203;' }}\n                />\n            )}\n        </StyledTypewriter>\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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"}
+{"version":3,"file":"Typewriter.js","names":["_react","_interopRequireWildcard","require","_server","_Typewriter","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TypewriterResetDelay","exports","TypewriterSpeed","Typewriter","_ref","children","onFinish","resetDelay","Medium","shouldSortChildrenRandomly","shouldUseResetAnimation","speed","currentChildrenIndex","setCurrentChildrenIndex","useState","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","React","isValidElement","renderToString","charactersCount","getCharactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","handleClick","useCallback","handleSetNextChildrenIndex","newIndex","useEffect","interval","window","setInterval","prevState","nextState","clearInterval","setTimeout","shownText","getSubTextFromHTML","createElement","StyledTypewriter","onClick","StyledTypewriterText","dangerouslySetInnerHTML","__html","StyledTypewriterPseudoText","displayName","_default"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterResetDelay {\n    Slow = 4000,\n    Medium = 2000,\n    Fast = 1000,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n    Slow = 40,\n    Medium = 30,\n    Fast = 20,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\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     * Waiting time before the typewriter resets the content if multiple texts are given\n     */\n    resetDelay?: TypewriterResetDelay;\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 reset of the text should be animated with a backspace animation for\n     * multiple texts.\n     */\n    shouldUseResetAnimation?: boolean;\n    /**\n     * The speed of the animation. Use the TypewriterSpeed enum for this prop.\n     */\n    speed?: TypewriterSpeed;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    onFinish,\n    resetDelay = TypewriterResetDelay.Medium,\n    shouldSortChildrenRandomly = false,\n    shouldUseResetAnimation = false,\n    speed = TypewriterSpeed.Medium,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\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(currentChildren)\n                    : currentChildren;\n            }\n\n            return '';\n        }\n\n        return React.isValidElement(sortedChildren)\n            ? renderToString(sortedChildren)\n            : sortedChildren;\n    }, [areMultipleChildrenGiven, currentChildrenIndex, sortedChildren]);\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        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback(() => {\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                            }, resetDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        } else {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    let nextState = prevState + 1;\n\n                    if (nextState === charactersCount) {\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, resetDelay / 2);\n                                }\n                            }, resetDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        shouldStopAnimation,\n        speed,\n        textContent.length,\n        charactersCount,\n        isResetAnimationActive,\n        areMultipleChildrenGiven,\n        resetDelay,\n        childrenCount,\n        handleSetNextChildrenIndex,\n        shouldUseResetAnimation,\n    ]);\n\n    useEffect(() => {\n        if (charactersCount) {\n            setIsResetAnimationActive(false);\n            setShownCharCount(0);\n        }\n    }, [charactersCount]);\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    return (\n        <StyledTypewriter onClick={handleClick}>\n            {isAnimatingText ? (\n                <StyledTypewriterText\n                    dangerouslySetInnerHTML={{ __html: shownText }}\n                    isAnimatingText\n                />\n            ) : (\n                <StyledTypewriterText>{sortedChildren}</StyledTypewriterText>\n            )}\n            {isAnimatingText && (\n                <StyledTypewriterPseudoText\n                    dangerouslySetInnerHTML={{ __html: textContent || '&#8203;' }}\n                />\n            )}\n        </StyledTypewriter>\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/typewriter",
-    "version": "5.0.0-beta.103",
+    "version": "5.0.0-beta.104",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -34,22 +34,22 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.3",
-        "@babel/preset-env": "^7.20.2",
+        "@babel/core": "^7.21.4",
+        "@babel/preset-env": "^7.21.4",
         "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.21.0",
-        "@types/react": "^17.0.53",
+        "@babel/preset-typescript": "^7.21.4",
+        "@types/react": "^17.0.58",
         "@types/react-dom": "^17.0.19",
         "@types/styled-components": "^5.1.26",
         "@types/uuid": "^9.0.1",
         "babel-loader": "^8.3.0",
-        "lerna": "^6.5.1",
+        "lerna": "^6.6.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "typescript": "^4.9.5"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.98",
+        "@chayns-components/core": "^5.0.0-beta.104",
         "@chayns/colors": "^2.0.0",
         "clsx": "^1.2.1",
         "framer-motion": "^6.5.1",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5c33441135ab4b03adc14e0840321608b820fd19"
+    "gitHead": "14f15be7baf4fd754b013d36f1b88b2f9a8c4f77"
 }