diff options
Diffstat (limited to 'src/components/ui/AppLoader')
-rw-r--r-- | src/components/ui/AppLoader/index.tsx | 68 | ||||
-rw-r--r-- | src/components/ui/AppLoader/styles.ts | 9 |
2 files changed, 40 insertions, 37 deletions
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx index caa7e381d..f4d9b8e73 100644 --- a/src/components/ui/AppLoader/index.tsx +++ b/src/components/ui/AppLoader/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | 3 | import withStyles, { WithStylesProps } from 'react-jss'; | |
4 | import injectStyle from 'react-jss'; | 4 | import { Theme } from '../../../themes'; |
5 | import FullscreenLoader from '../FullscreenLoader'; | 5 | import FullscreenLoader from '../FullscreenLoader'; |
6 | import shuffleArray from '../../../helpers/array-helpers'; | 6 | import shuffleArray from '../../../helpers/array-helpers'; |
7 | 7 | ||
@@ -18,24 +18,27 @@ const textList = shuffleArray([ | |||
18 | 'Fixing bugs', | 18 | 'Fixing bugs', |
19 | ]); | 19 | ]); |
20 | 20 | ||
21 | type Props = { | 21 | interface IProps extends WithStylesProps<typeof styles> { |
22 | classes: typeof styles; | 22 | theme: Theme; |
23 | theme: any; | 23 | texts?: string[]; |
24 | texts: string[]; | 24 | } |
25 | }; | ||
26 | |||
27 | class AppLoader extends Component<Props> { | ||
28 | static defaultProps = { | ||
29 | texts: textList, | ||
30 | }; | ||
31 | 25 | ||
32 | state = { | 26 | interface IState { |
33 | step: 0, | 27 | step: number; |
34 | }; | 28 | } |
35 | 29 | ||
30 | class AppLoader extends Component<IProps, IState> { | ||
36 | interval: NodeJS.Timeout | null = null; | 31 | interval: NodeJS.Timeout | null = null; |
37 | 32 | ||
38 | componentDidMount() { | 33 | constructor(props: IProps) { |
34 | super(props); | ||
35 | |||
36 | this.state = { | ||
37 | step: 0, | ||
38 | }; | ||
39 | } | ||
40 | |||
41 | componentDidMount(): void { | ||
39 | this.interval = setInterval(() => { | 42 | this.interval = setInterval(() => { |
40 | this.setState((prevState: { step: number }) => ({ | 43 | this.setState((prevState: { step: number }) => ({ |
41 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, | 44 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, |
@@ -43,14 +46,14 @@ class AppLoader extends Component<Props> { | |||
43 | }, 2500); | 46 | }, 2500); |
44 | } | 47 | } |
45 | 48 | ||
46 | componentWillUnmount() { | 49 | componentWillUnmount(): void { |
47 | if (this.interval) { | 50 | if (this.interval) { |
48 | clearInterval(this.interval); | 51 | clearInterval(this.interval); |
49 | } | 52 | } |
50 | } | 53 | } |
51 | 54 | ||
52 | render() { | 55 | render(): ReactElement { |
53 | const { classes, theme, texts } = this.props; | 56 | const { classes, theme, texts = textList } = this.props; |
54 | const { step } = this.state; | 57 | const { step } = this.state; |
55 | 58 | ||
56 | return ( | 59 | return ( |
@@ -58,20 +61,21 @@ class AppLoader extends Component<Props> { | |||
58 | className={classes.component} | 61 | className={classes.component} |
59 | spinnerColor={theme.colorAppLoaderSpinner} | 62 | spinnerColor={theme.colorAppLoaderSpinner} |
60 | > | 63 | > |
61 | {texts.map((text, i) => ( | 64 | {texts && |
62 | <span | 65 | texts.map((text, i) => ( |
63 | key={text} | 66 | <span |
64 | className={classnames({ | 67 | key={text} |
65 | [`${classes.slogan}`]: true, | 68 | className={classnames({ |
66 | [`${classes.visible}`]: step === i, | 69 | [`${classes.slogan}`]: true, |
67 | })} | 70 | [`${classes.visible}`]: step === i, |
68 | > | 71 | })} |
69 | {text} | 72 | > |
70 | </span> | 73 | {text} |
71 | ))} | 74 | </span> |
75 | ))} | ||
72 | </FullscreenLoader> | 76 | </FullscreenLoader> |
73 | ); | 77 | ); |
74 | } | 78 | } |
75 | } | 79 | } |
76 | 80 | ||
77 | export default injectStyle(styles, { injectTheme: true })(AppLoader); | 81 | export default withStyles(styles, { injectTheme: true })(AppLoader); |
diff --git a/src/components/ui/AppLoader/styles.ts b/src/components/ui/AppLoader/styles.ts index 9891e0387..6bf3b4f3c 100644 --- a/src/components/ui/AppLoader/styles.ts +++ b/src/components/ui/AppLoader/styles.ts | |||
@@ -1,8 +1,7 @@ | |||
1 | let sloganTransition = 'none'; | 1 | const sloganTransition = |
2 | 2 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | |
3 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | 3 | ? 'opacity 1s ease' |
4 | sloganTransition = 'opacity 1s ease'; | 4 | : 'none'; |
5 | } | ||
6 | 5 | ||
7 | export default { | 6 | export default { |
8 | component: { | 7 | component: { |