Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit078bea0

Browse files
authored
Merge pull requestcoderoad#288 from coderoad/feature/loading-screen-processes
Feature/loading screen processes
2 parentse96a2cd +8bbf13d commit078bea0

File tree

8 files changed

+60
-37
lines changed

8 files changed

+60
-37
lines changed

‎web-app/src/Routes.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ const Routes = () => {
2525
<Router>
2626
{/* Setup */}
2727
<Route path={['Setup.Startup', 'Setup.ValidateSetup']}>
28-
<LoadingPage text="Launching..." />
28+
<LoadingPage text="Launching..."processes={context.processes}/>
2929
</Route>
3030
<Route path="Setup.Start">
3131
<StartPage send={send} context={context} />
3232
</Route>
3333
<Route path={['Setup.LoadTutorialSummary', 'Setup.LoadTutorialData', 'Setup.SetupNewTutorial']}>
34-
<LoadingPage text="Loading Tutorial..."/>
34+
<LoadingPage text="Loading Tutorial..."processes={context.processes} />]
3535
</Route>
3636
<Route path="Setup.SelectTutorial">
3737
<SelectTutorialPage send={send} context={context} />
@@ -41,7 +41,7 @@ const Routes = () => {
4141
</Route>
4242
{/* Tutorial */}
4343
<Route path={['Tutorial.LoadNext', 'Tutorial.Level.Load']}>
44-
<LoadingPage text="Loading Level..." />
44+
<LoadingPage text="Loading Level..."processes={context.processes}/>
4545
</Route>
4646
<Route path="Tutorial.Level">
4747
<LevelSummaryPage send={send} context={context} />

‎web-app/src/components/Loading/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { Loading } from '@alifd/next'
22
import * as React from 'react'
33

44
interface Props {
5-
text: string
5+
message: string
66
}
77

8-
const LoadingComponent = ({text }: Props) => {
9-
return <Loading tip={text} />
8+
const LoadingComponent = ({message }: Props) => {
9+
return <Loading tip={message} />
1010
}
1111

1212
export default LoadingComponent

‎web-app/src/components/ProcessMessages/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/core'
55
import TestMessage from './TestMessage'
66

77
interface Props {
8-
testStatus: T.TestStatus | null
8+
testStatus?: T.TestStatus | null
99
processes: T.ProcessEvent[]
1010
}
1111

‎web-app/src/containers/Loading/LoadingPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const styles = {
2222
const LoadingPage = ({ text }: Props) => {
2323
return (
2424
<div css={styles.page}>
25-
<Loadingtext={text} />
25+
<Loadingmessage={text} />
2626
</div>
2727
)
2828
}

‎web-app/src/containers/Loading/index.tsx

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,40 @@ import * as React from 'react'
22
import * as T from 'typings'
33
import { css, jsx } from '@emotion/core'
44
import Loading from '../../components/Loading'
5-
importMessage from '../../components/Message'
5+
importProcessMessages from 'components/ProcessMessages'
66

77
interface Props {
88
text: string
9-
context?: T.MachineContext
9+
processes?: T.ProcessEvent[]
1010
}
1111

1212
const styles = {
1313
page: {
1414
position: 'relative' as 'relative',
15-
display: 'flex',
16-
alignItems: 'center',
17-
justifyContent: 'center',
15+
display: 'flex' as 'flex',
16+
flexDirection: 'column' as 'column',
17+
alignItems: 'center' as 'center',
18+
justifyContent: 'center' as 'center',
1819
height: '100%',
1920
width: '100%',
2021
},
22+
processes: {
23+
padding: '0 1rem',
24+
position: 'fixed' as 'fixed',
25+
bottom: 0,
26+
left: 0,
27+
right: 0,
28+
},
2129
}
2230

23-
const LoadingPage = ({ text }: Props) => {
24-
const [showLoading, setShowHiding] = React.useState(false)
31+
const LoadingPage = ({ text, processes }: Props) => {
32+
const [showLoading, setShowHiding] = React.useState<boolean>(!!processes?.length)
2533

2634
React.useEffect(() => {
2735
// wait some time before showing loading indicator
2836
const timeout = setTimeout(() => {
2937
setShowHiding(true)
30-
},600)
38+
},500)
3139
return () => {
3240
clearTimeout(timeout)
3341
}
@@ -37,10 +45,14 @@ const LoadingPage = ({ text }: Props) => {
3745
if (!showLoading) {
3846
return null
3947
}
40-
4148
return (
4249
<div css={styles.page}>
43-
<Loading text={text} />
50+
<Loading message={text} />
51+
{processes && processes.length ? (
52+
<div css={styles.processes}>
53+
<ProcessMessages processes={processes} />
54+
</div>
55+
) : null}
4456
</div>
4557
)
4658
}

‎web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22
import useFetch from '../../services/hooks/useFetch'
33
import * as TT from 'typings/tutorial'
4-
importLoading from '../Loading'
4+
importLoadingPage from '../Loading'
55

66
interface Props {
77
url: string
@@ -11,7 +11,7 @@ interface Props {
1111
const LoadTutorialSummary = (props: Props) => {
1212
const { data, error, loading } = useFetch<TT.Tutorial>(props.url)
1313
if (loading) {
14-
return <Loading text="Loading tutorial summary..." />
14+
return <LoadingPage text="Loading tutorial summary..." />
1515
}
1616
if (error) {
1717
console.log(`Failed to load tutorial summary: ${error}`)

‎web-app/src/services/state/machine.ts

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,22 @@ export const createMachine = (options: any) => {
2929
processes: [],
3030
testStatus: null,
3131
},
32+
on: {
33+
// track commands
34+
COMMAND_START: {
35+
actions: ['commandStart'],
36+
},
37+
COMMAND_SUCCESS: {
38+
actions: ['commandSuccess'],
39+
},
40+
COMMAND_FAIL: {
41+
actions: ['commandFail'],
42+
},
43+
ERROR: {
44+
// TODO: missing clearError
45+
actions: ['setError'],
46+
},
47+
},
3248
states: {
3349
Setup: {
3450
initial: 'Startup',
@@ -121,22 +137,6 @@ export const createMachine = (options: any) => {
121137
Tutorial: {
122138
id: 'tutorial',
123139
initial: 'Level',
124-
on: {
125-
// track commands
126-
COMMAND_START: {
127-
actions: ['commandStart'],
128-
},
129-
COMMAND_SUCCESS: {
130-
actions: ['commandSuccess'],
131-
},
132-
COMMAND_FAIL: {
133-
actions: ['commandFail'],
134-
},
135-
ERROR: {
136-
// TODO: missing clearError
137-
actions: ['setError'],
138-
},
139-
},
140140
states: {
141141
LoadNext: {
142142
id: 'tutorial-load-next',

‎web-app/stories/Loading.stories.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import { storiesOf } from '@storybook/react'
2+
import * as T from '../../typings'
23
import React from 'react'
34
import LoadingPage from '../src/containers/Loading'
45
import SideBarDecorator from './utils/SideBarDecorator'
56

67
storiesOf('Components', module)
78
.addDecorator(SideBarDecorator)
8-
.add('Loading', () => <LoadingPage text="Content" context={{}} />)
9+
.add('Loading', () => <LoadingPage text="Content" />)
10+
.add('Loading processes', () => {
11+
const processes: T.ProcessEvent[] = [
12+
{
13+
title: 'title',
14+
description: 'description...',
15+
status: 'RUNNING',
16+
},
17+
]
18+
return <LoadingPage text="Content" processes={processes} />
19+
})

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp