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
<Routepath={['Setup.Startup','Setup.ValidateSetup']}>
28-
<LoadingPagetext="Launching..."/>
28+
<LoadingPagetext="Launching..."processes={context.processes}/>
2929
</Route>
3030
<Routepath="Setup.Start">
3131
<StartPagesend={send}context={context}/>
3232
</Route>
3333
<Routepath={['Setup.LoadTutorialSummary','Setup.LoadTutorialData','Setup.SetupNewTutorial']}>
34-
<LoadingPagetext="Loading Tutorial..."/>
34+
<LoadingPagetext="Loading Tutorial..."processes={context.processes}/>]
3535
</Route>
3636
<Routepath="Setup.SelectTutorial">
3737
<SelectTutorialPagesend={send}context={context}/>
@@ -41,7 +41,7 @@ const Routes = () => {
4141
</Route>
4242
{/* Tutorial */}
4343
<Routepath={['Tutorial.LoadNext','Tutorial.Level.Load']}>
44-
<LoadingPagetext="Loading Level..."/>
44+
<LoadingPagetext="Loading Level..."processes={context.processes}/>
4545
</Route>
4646
<Routepath="Tutorial.Level">
4747
<LevelSummaryPagesend={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*asReactfrom'react'
33

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

8-
constLoadingComponent=({text}:Props)=>{
9-
return<Loadingtip={text}/>
8+
constLoadingComponent=({message}:Props)=>{
9+
return<Loadingtip={message}/>
1010
}
1111

1212
exportdefaultLoadingComponent

‎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
importTestMessagefrom'./TestMessage'
66

77
interfaceProps{
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
constLoadingPage=({ text}:Props)=>{
2323
return(
2424
<divcss={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*asTfrom'typings'
33
import{css,jsx}from'@emotion/core'
44
importLoadingfrom'../../components/Loading'
5-
importMessagefrom'../../components/Message'
5+
importProcessMessagesfrom'components/ProcessMessages'
66

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

1212
conststyles={
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-
constLoadingPage=({ text}:Props)=>{
24-
const[showLoading,setShowHiding]=React.useState(false)
31+
constLoadingPage=({ 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
consttimeout=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
returnnull
3947
}
40-
4148
return(
4249
<divcss={styles.page}>
43-
<Loadingtext={text}/>
50+
<Loadingmessage={text}/>
51+
{processes&&processes.length ?(
52+
<divcss={styles.processes}>
53+
<ProcessMessagesprocesses={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*asReactfrom'react'
22
importuseFetchfrom'../../services/hooks/useFetch'
33
import*asTTfrom'typings/tutorial'
4-
importLoadingfrom'../Loading'
4+
importLoadingPagefrom'../Loading'
55

66
interfaceProps{
77
url:string
@@ -11,7 +11,7 @@ interface Props {
1111
constLoadTutorialSummary=(props:Props)=>{
1212
const{ data, error, loading}=useFetch<TT.Tutorial>(props.url)
1313
if(loading){
14-
return<Loadingtext="Loading tutorial summary..."/>
14+
return<LoadingPagetext="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*asTfrom'../../typings'
23
importReactfrom'react'
34
importLoadingPagefrom'../src/containers/Loading'
45
importSideBarDecoratorfrom'./utils/SideBarDecorator'
56

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

0 commit comments

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