@chayns-components/typewriter 5.0.0-beta.48 → 5.0.0-beta.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/typewriter/Typewriter.js +4 -5
- package/lib/components/typewriter/Typewriter.js.map +1 -1
- package/lib/components/typewriter/Typewriter.styles.d.ts +1 -2
- package/lib/components/typewriter/Typewriter.styles.js +25 -9
- package/lib/components/typewriter/Typewriter.styles.js.map +1 -1
- package/lib/components/typewriter/utils.d.ts +10 -0
- package/lib/components/typewriter/utils.js +10 -0
- package/lib/components/typewriter/utils.js.map +1 -1
- package/package.json +4 -4
|
@@ -25,19 +25,18 @@ const Typewriter = _ref => {
|
|
|
25
25
|
}
|
|
26
26
|
return nextState;
|
|
27
27
|
});
|
|
28
|
-
},
|
|
28
|
+
}, 35);
|
|
29
29
|
return () => {
|
|
30
30
|
window.clearInterval(interval);
|
|
31
31
|
};
|
|
32
32
|
}, [children.length]);
|
|
33
33
|
const isAnimatingText = shownCharCount !== children.length;
|
|
34
34
|
return /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, null, /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
|
|
35
|
-
shouldUseAbsolutePosition: isAnimatingText
|
|
36
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
37
35
|
dangerouslySetInnerHTML: {
|
|
38
36
|
__html: shownText
|
|
39
|
-
}
|
|
40
|
-
|
|
37
|
+
},
|
|
38
|
+
isAnimatingText: isAnimatingText
|
|
39
|
+
}), isAnimatingText && /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterPseudoText, null, children));
|
|
41
40
|
};
|
|
42
41
|
Typewriter.displayName = 'Typewriter';
|
|
43
42
|
var _default = Typewriter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typewriter.js","names":["Typewriter","children","shownCharCount","setShownCharCount","useState","shownText","useMemo","getSubTextFromHTML","useEffect","interval","window","setInterval","prevState","nextState","length","clearInterval","isAnimatingText","__html","displayName"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport {\n StyledTypewriter,\n
|
|
1
|
+
{"version":3,"file":"Typewriter.js","names":["Typewriter","children","shownCharCount","setShownCharCount","useState","shownText","useMemo","getSubTextFromHTML","useEffect","interval","window","setInterval","prevState","nextState","length","clearInterval","isAnimatingText","__html","displayName"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport {\n StyledTypewriter,\n StyledTypewriterPseudoText,\n StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getSubTextFromHTML } from './utils';\n\nexport type TypewriterProps = {\n /**\n * The text to type\n */\n children: string;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({ children }) => {\n const [shownCharCount, setShownCharCount] = useState(0);\n\n const shownText = useMemo(\n () => getSubTextFromHTML(children, shownCharCount),\n [children, shownCharCount]\n );\n\n useEffect(() => {\n setShownCharCount(0);\n\n const interval = window.setInterval(() => {\n setShownCharCount((prevState) => {\n const nextState = prevState + 1;\n\n if (nextState === children.length) {\n window.clearInterval(interval);\n }\n\n return nextState;\n });\n }, 35);\n\n return () => {\n window.clearInterval(interval);\n };\n }, [children.length]);\n\n const isAnimatingText = shownCharCount !== children.length;\n\n return (\n <StyledTypewriter>\n <StyledTypewriterText\n dangerouslySetInnerHTML={{ __html: shownText }}\n isAnimatingText={isAnimatingText}\n />\n {isAnimatingText && <StyledTypewriterPseudoText>{children}</StyledTypewriterPseudoText>}\n </StyledTypewriter>\n );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":";;;;;;AAAA;AACA;AAKA;AAA6C;AAAA;AAS7C,MAAMA,UAA+B,GAAG,QAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC;EACjD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAEvD,MAAMC,SAAS,GAAG,IAAAC,cAAO,EACrB,MAAM,IAAAC,yBAAkB,EAACN,QAAQ,EAAEC,cAAc,CAAC,EAClD,CAACD,QAAQ,EAAEC,cAAc,CAAC,CAC7B;EAED,IAAAM,gBAAS,EAAC,MAAM;IACZL,iBAAiB,CAAC,CAAC,CAAC;IAEpB,MAAMM,QAAQ,GAAGC,MAAM,CAACC,WAAW,CAAC,MAAM;MACtCR,iBAAiB,CAAES,SAAS,IAAK;QAC7B,MAAMC,SAAS,GAAGD,SAAS,GAAG,CAAC;QAE/B,IAAIC,SAAS,KAAKZ,QAAQ,CAACa,MAAM,EAAE;UAC/BJ,MAAM,CAACK,aAAa,CAACN,QAAQ,CAAC;QAClC;QAEA,OAAOI,SAAS;MACpB,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,MAAM;MACTH,MAAM,CAACK,aAAa,CAACN,QAAQ,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACR,QAAQ,CAACa,MAAM,CAAC,CAAC;EAErB,MAAME,eAAe,GAAGd,cAAc,KAAKD,QAAQ,CAACa,MAAM;EAE1D,oBACI,6BAAC,4BAAgB,qBACb,6BAAC,gCAAoB;IACjB,uBAAuB,EAAE;MAAEG,MAAM,EAAEZ;IAAU,CAAE;IAC/C,eAAe,EAAEW;EAAgB,EACnC,EACDA,eAAe,iBAAI,6BAAC,sCAA0B,QAAEf,QAAQ,CAA8B,CACxE;AAE3B,CAAC;AAEDD,UAAU,CAACkB,WAAW,GAAG,YAAY;AAAC,eAEvBlB,UAAU;AAAA"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
export declare const StyledTypewriter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const StyledTypewriterCursor: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
3
2
|
export declare const StyledTypewriterPseudoText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
3
|
type StyledTypewriterTextProps = {
|
|
5
|
-
|
|
4
|
+
isAnimatingText: boolean;
|
|
6
5
|
};
|
|
7
6
|
export declare const StyledTypewriterText: import("styled-components").StyledComponent<"div", any, StyledTypewriterTextProps, never>;
|
|
8
7
|
export {};
|
|
@@ -3,18 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledTypewriterText = exports.StyledTypewriterPseudoText = exports.
|
|
7
|
-
var _styledComponents =
|
|
8
|
-
function
|
|
6
|
+
exports.StyledTypewriterText = exports.StyledTypewriterPseudoText = exports.StyledTypewriter = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
+
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); }
|
|
9
|
+
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; }
|
|
9
10
|
const StyledTypewriter = _styledComponents.default.div`
|
|
10
11
|
position: relative;
|
|
11
12
|
`;
|
|
12
13
|
exports.StyledTypewriter = StyledTypewriter;
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
const blinkAnimation = (0, _styledComponents.keyframes)`
|
|
15
|
+
100% {
|
|
16
|
+
visibility: hidden;
|
|
17
|
+
}
|
|
16
18
|
`;
|
|
17
|
-
exports.StyledTypewriterCursor = StyledTypewriterCursor;
|
|
18
19
|
const StyledTypewriterPseudoText = _styledComponents.default.div`
|
|
19
20
|
opacity: 0;
|
|
20
21
|
pointer-events: none;
|
|
@@ -24,10 +25,25 @@ exports.StyledTypewriterPseudoText = StyledTypewriterPseudoText;
|
|
|
24
25
|
const StyledTypewriterText = _styledComponents.default.div`
|
|
25
26
|
position: ${_ref => {
|
|
26
27
|
let {
|
|
27
|
-
|
|
28
|
+
isAnimatingText
|
|
28
29
|
} = _ref;
|
|
29
|
-
return
|
|
30
|
+
return isAnimatingText ? 'absolute' : 'relative';
|
|
30
31
|
}};
|
|
32
|
+
|
|
33
|
+
${_ref2 => {
|
|
34
|
+
let {
|
|
35
|
+
isAnimatingText
|
|
36
|
+
} = _ref2;
|
|
37
|
+
return isAnimatingText && (0, _styledComponents.css)`
|
|
38
|
+
&:after {
|
|
39
|
+
animation: ${blinkAnimation} 1s steps(5, start) infinite;
|
|
40
|
+
content: '▋';
|
|
41
|
+
margin-left: 0.25rem;
|
|
42
|
+
opacity: 0.85;
|
|
43
|
+
vertical-align: baseline;
|
|
44
|
+
}
|
|
45
|
+
`;
|
|
46
|
+
}}
|
|
31
47
|
`;
|
|
32
48
|
exports.StyledTypewriterText = StyledTypewriterText;
|
|
33
49
|
//# sourceMappingURL=Typewriter.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typewriter.styles.js","names":["StyledTypewriter","styled","div","
|
|
1
|
+
{"version":3,"file":"Typewriter.styles.js","names":["StyledTypewriter","styled","div","blinkAnimation","keyframes","StyledTypewriterPseudoText","StyledTypewriterText","isAnimatingText","css"],"sources":["../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nexport const StyledTypewriter = styled.div`\n position: relative;\n`;\n\nconst blinkAnimation = keyframes`\n 100% {\n visibility: hidden;\n }\n`;\n\nexport const StyledTypewriterPseudoText = styled.div`\n opacity: 0;\n pointer-events: none;\n user-select: none;\n`;\n\ntype StyledTypewriterTextProps = {\n isAnimatingText: boolean;\n};\n\nexport const StyledTypewriterText = styled.div<StyledTypewriterTextProps>`\n position: ${({ isAnimatingText }) => (isAnimatingText ? 'absolute' : 'relative')};\n\n ${({ isAnimatingText }) =>\n isAnimatingText &&\n css`\n &:after {\n animation: ${blinkAnimation} 1s steps(5, start) infinite;\n content: '▋';\n margin-left: 0.25rem;\n opacity: 0.85;\n vertical-align: baseline;\n }\n `}\n`;\n"],"mappings":";;;;;;AAAA;AAA2D;AAAA;AAEpD,MAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAI;AAC3C;AACA,CAAC;AAAC;AAEF,MAAMC,cAAc,GAAG,IAAAC,2BAAS,CAAC;AACjC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAGJ,yBAAM,CAACC,GAAI;AACrD;AACA;AACA;AACA,CAAC;AAAC;AAMK,MAAMI,oBAAoB,GAAGL,yBAAM,CAACC,GAA+B;AAC1E,gBAAgB;EAAA,IAAC;IAAEK;EAAgB,CAAC;EAAA,OAAMA,eAAe,GAAG,UAAU,GAAG,UAAU;AAAA,CAAE;AACrF;AACA,MAAM;EAAA,IAAC;IAAEA;EAAgB,CAAC;EAAA,OAClBA,eAAe,IACf,IAAAC,qBAAG,CAAC;AACZ;AACA,6BAA6BL,cAAe;AAC5C;AACA;AACA;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAAC"}
|
|
@@ -1 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This function extracts a part of the text from an HTML text. The HTML elements themselves are
|
|
3
|
+
* returned in the result. In addition, the function ensures that the closing tag of the Bold HTML
|
|
4
|
+
* element is also returned for text that is cut off in the middle of a Bold element, for example.
|
|
5
|
+
*
|
|
6
|
+
* @param html - The text from which a part should be taken
|
|
7
|
+
* @param length - The length of the text to be extracted
|
|
8
|
+
*
|
|
9
|
+
* @return string - The text part with the specified length - additionally the HTML elements are added
|
|
10
|
+
*/
|
|
1
11
|
export declare const getSubTextFromHTML: (html: string, length: number) => string;
|
|
@@ -4,6 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getSubTextFromHTML = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* This function extracts a part of the text from an HTML text. The HTML elements themselves are
|
|
9
|
+
* returned in the result. In addition, the function ensures that the closing tag of the Bold HTML
|
|
10
|
+
* element is also returned for text that is cut off in the middle of a Bold element, for example.
|
|
11
|
+
*
|
|
12
|
+
* @param html - The text from which a part should be taken
|
|
13
|
+
* @param length - The length of the text to be extracted
|
|
14
|
+
*
|
|
15
|
+
* @return string - The text part with the specified length - additionally the HTML elements are added
|
|
16
|
+
*/
|
|
7
17
|
const getSubTextFromHTML = (html, length) => {
|
|
8
18
|
const div = document.createElement('div');
|
|
9
19
|
div.innerHTML = html;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","node","nodeType","textContent","nodeText","substring","nodeName","toLowerCase","i","childNodes","childNode"],"sources":["../../../src/components/typewriter/utils.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","node","nodeType","textContent","nodeText","substring","nodeName","toLowerCase","i","childNodes","childNode"],"sources":["../../../src/components/typewriter/utils.ts"],"sourcesContent":["/**\n * This function extracts a part of the text from an HTML text. The HTML elements themselves are\n * returned in the result. In addition, the function ensures that the closing tag of the Bold HTML\n * element is also returned for text that is cut off in the middle of a Bold element, for example.\n *\n * @param html - The text from which a part should be taken\n * @param length - The length of the text to be extracted\n *\n * @return string - The text part with the specified length - additionally the HTML elements are added\n */\nexport const getSubTextFromHTML = (html: string, length: number): string => {\n const div = document.createElement('div');\n\n div.innerHTML = html;\n\n let text = '';\n let currLength = 0;\n\n const traverse = (node: Node): boolean => {\n if (node.nodeType === 3 && typeof node.textContent === 'string') {\n const nodeText = node.textContent;\n\n if (currLength + nodeText.length <= length) {\n text += nodeText;\n currLength += nodeText.length;\n } else {\n text += nodeText.substring(0, length - currLength);\n\n return false;\n }\n } else if (node.nodeType === 1) {\n const nodeName = node.nodeName.toLowerCase();\n\n text += `<${nodeName}>`;\n\n for (let i = 0; i < node.childNodes.length; i++) {\n const childNode = node.childNodes[i];\n\n if (childNode && !traverse(childNode)) {\n return false;\n }\n }\n\n text += `</${nodeName}>`;\n }\n\n return true;\n };\n\n for (let i = 0; i < div.childNodes.length; i++) {\n const childNode = div.childNodes[i];\n\n if (childNode && !traverse(childNode)) {\n return text;\n }\n }\n\n return text;\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAG,CAACC,IAAY,EAAEC,MAAc,KAAa;EACxE,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEzCF,GAAG,CAACG,SAAS,GAAGL,IAAI;EAEpB,IAAIM,IAAI,GAAG,EAAE;EACb,IAAIC,UAAU,GAAG,CAAC;EAElB,MAAMC,QAAQ,GAAIC,IAAU,IAAc;IACtC,IAAIA,IAAI,CAACC,QAAQ,KAAK,CAAC,IAAI,OAAOD,IAAI,CAACE,WAAW,KAAK,QAAQ,EAAE;MAC7D,MAAMC,QAAQ,GAAGH,IAAI,CAACE,WAAW;MAEjC,IAAIJ,UAAU,GAAGK,QAAQ,CAACX,MAAM,IAAIA,MAAM,EAAE;QACxCK,IAAI,IAAIM,QAAQ;QAChBL,UAAU,IAAIK,QAAQ,CAACX,MAAM;MACjC,CAAC,MAAM;QACHK,IAAI,IAAIM,QAAQ,CAACC,SAAS,CAAC,CAAC,EAAEZ,MAAM,GAAGM,UAAU,CAAC;QAElD,OAAO,KAAK;MAChB;IACJ,CAAC,MAAM,IAAIE,IAAI,CAACC,QAAQ,KAAK,CAAC,EAAE;MAC5B,MAAMI,QAAQ,GAAGL,IAAI,CAACK,QAAQ,CAACC,WAAW,EAAE;MAE5CT,IAAI,IAAK,IAAGQ,QAAS,GAAE;MAEvB,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGP,IAAI,CAACQ,UAAU,CAAChB,MAAM,EAAEe,CAAC,EAAE,EAAE;QAC7C,MAAME,SAAS,GAAGT,IAAI,CAACQ,UAAU,CAACD,CAAC,CAAC;QAEpC,IAAIE,SAAS,IAAI,CAACV,QAAQ,CAACU,SAAS,CAAC,EAAE;UACnC,OAAO,KAAK;QAChB;MACJ;MAEAZ,IAAI,IAAK,KAAIQ,QAAS,GAAE;IAC5B;IAEA,OAAO,IAAI;EACf,CAAC;EAED,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGd,GAAG,CAACe,UAAU,CAAChB,MAAM,EAAEe,CAAC,EAAE,EAAE;IAC5C,MAAME,SAAS,GAAGhB,GAAG,CAACe,UAAU,CAACD,CAAC,CAAC;IAEnC,IAAIE,SAAS,IAAI,CAACV,QAAQ,CAACU,SAAS,CAAC,EAAE;MACnC,OAAOZ,IAAI;IACf;EACJ;EAEA,OAAOA,IAAI;AACf,CAAC;AAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/typewriter",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.49",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
"@types/styled-components": "^5.1.26",
|
|
44
44
|
"@types/uuid": "^9.0.0",
|
|
45
45
|
"babel-loader": "^8.3.0",
|
|
46
|
-
"lerna": "^4.
|
|
46
|
+
"lerna": "^6.4.1",
|
|
47
47
|
"react": "^17.0.2",
|
|
48
48
|
"react-dom": "^17.0.2",
|
|
49
|
-
"typescript": "^4.9.
|
|
49
|
+
"typescript": "^4.9.5"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@chayns/colors": "^2.0.0",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "376044a409abbca705e52b40d3cc0ec5ba0cffbc"
|
|
66
66
|
}
|