1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import * as _ from 'lodash';
import * as React from 'react';
import Typist from 'react-typist';
import { Text, TextProps } from 'ts/components/ui/text';
import 'react-typist/dist/Typist.css';
export interface TypedTextProps extends TextProps {
textList: string[];
shouldRepeat?: boolean;
wordDelayMs?: number;
avgKeystrokeDelayMs?: number;
stdKeystrokeDelay?: number;
}
export interface TypedTextState {
cycleCount: number;
}
export class TypedText extends React.Component<TypedTextProps, TypedTextState> {
public static defaultProps = {
shouldRepeat: false,
avgKeystrokeDelayMs: 90,
wordDelayMs: 1000,
};
public state = {
cycleCount: 0,
};
public render(): React.ReactNode {
const {
textList,
shouldRepeat,
wordDelayMs,
avgKeystrokeDelayMs,
stdKeystrokeDelay,
// tslint:disable-next-line
...textProps
} = this.props;
const { cycleCount } = this.state;
if (_.isEmpty(textList)) {
return null;
}
const typistChildren: React.ReactNode[] = [];
_.forEach(textList, text => {
typistChildren.push(
<Text key={`text-${text}-${cycleCount}`} {...textProps}>
{text}
</Text>,
);
if (wordDelayMs) {
typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
}
typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
});
return (
<Typist
avgTypingDelay={avgKeystrokeDelayMs}
stdTypingDelay={stdKeystrokeDelay}
className="inline"
key={`typist-key-${cycleCount}`}
onTypingDone={this._onTypingDone.bind(this)}
>
{typistChildren}
</Typist>
);
}
private _onTypingDone(): void {
if (this.props.shouldRepeat) {
this.setState({
cycleCount: this.state.cycleCount + 1,
});
}
}
}
|
