diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-10-14 13:24:58 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-14 13:24:58 +0200 |
commit | fe1ba2ad6affeb6c0e97c73171d8fa3f31dde73e (patch) | |
tree | 10caa332d957421e982c7ddd0c94623d5d62314d /src/components/ui/AppLoader/index.tsx | |
parent | chore: convert various JS to TS (#2062) (diff) | |
download | ferdium-app-fe1ba2ad6affeb6c0e97c73171d8fa3f31dde73e.tar.gz ferdium-app-fe1ba2ad6affeb6c0e97c73171d8fa3f31dde73e.tar.zst ferdium-app-fe1ba2ad6affeb6c0e97c73171d8fa3f31dde73e.zip |
chore: convert files to TS (#2066)
Diffstat (limited to 'src/components/ui/AppLoader/index.tsx')
-rw-r--r-- | src/components/ui/AppLoader/index.tsx | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx new file mode 100644 index 000000000..c7c290a57 --- /dev/null +++ b/src/components/ui/AppLoader/index.tsx | |||
@@ -0,0 +1,80 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import injectSheet, { withTheme } from 'react-jss'; | ||
3 | import classnames from 'classnames'; | ||
4 | |||
5 | import FullscreenLoader from '../FullscreenLoader'; | ||
6 | import { shuffleArray } from '../../../helpers/array-helpers'; | ||
7 | |||
8 | import styles from './styles'; | ||
9 | |||
10 | // TODO: Need to externalize for i18n | ||
11 | const textList = shuffleArray([ | ||
12 | 'Adding free features', | ||
13 | 'Making application usable', | ||
14 | 'Removing unproductive paywalls', | ||
15 | 'Creating custom server software', | ||
16 | 'Increasing productivity', | ||
17 | 'Listening to our userbase', | ||
18 | 'Fixing bugs', | ||
19 | ]); | ||
20 | |||
21 | type Props = { | ||
22 | classes: typeof styles; | ||
23 | theme: any; | ||
24 | texts: string[]; | ||
25 | }; | ||
26 | |||
27 | @injectSheet(styles) | ||
28 | @withTheme | ||
29 | class AppLoader extends Component<Props> { | ||
30 | static defaultProps = { | ||
31 | texts: textList, | ||
32 | }; | ||
33 | |||
34 | state = { | ||
35 | step: 0, | ||
36 | }; | ||
37 | |||
38 | interval: NodeJS.Timeout | null = null; | ||
39 | |||
40 | componentDidMount() { | ||
41 | this.interval = setInterval(() => { | ||
42 | this.setState((prevState: { step: number }) => ({ | ||
43 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, | ||
44 | })); | ||
45 | }, 2500); | ||
46 | } | ||
47 | |||
48 | componentWillUnmount() { | ||
49 | if (this.interval) { | ||
50 | clearInterval(this.interval); | ||
51 | } | ||
52 | } | ||
53 | |||
54 | render() { | ||
55 | const { classes, theme, texts } = this.props; | ||
56 | const { step } = this.state; | ||
57 | |||
58 | return ( | ||
59 | <FullscreenLoader | ||
60 | title="Ferdi" | ||
61 | className={classes.component} | ||
62 | spinnerColor={theme.colorAppLoaderSpinner} | ||
63 | > | ||
64 | {texts.map((text, i) => ( | ||
65 | <span | ||
66 | key={text} | ||
67 | className={classnames({ | ||
68 | [`${classes.slogan}`]: true, | ||
69 | [`${classes.visible}`]: step === i, | ||
70 | })} | ||
71 | > | ||
72 | {text} | ||
73 | </span> | ||
74 | ))} | ||
75 | </FullscreenLoader> | ||
76 | ); | ||
77 | } | ||
78 | } | ||
79 | |||
80 | export default AppLoader; | ||