add progress-bar
This commit is contained in:
parent
87ffac9a52
commit
e1c1096458
4 changed files with 61 additions and 15 deletions
|
@ -1,10 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Spinner from 'component/spinner';
|
import Spinner from 'component/spinner';
|
||||||
|
import ProgressBar from 'component/common/progress-bar';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
spinner: boolean,
|
|
||||||
status: string,
|
status: string,
|
||||||
|
spinner: boolean,
|
||||||
|
progress?: number,
|
||||||
};
|
};
|
||||||
|
|
||||||
class LoadingScreen extends React.PureComponent<Props> {
|
class LoadingScreen extends React.PureComponent<Props> {
|
||||||
|
@ -17,8 +19,8 @@ class LoadingScreen extends React.PureComponent<Props> {
|
||||||
return (
|
return (
|
||||||
<div className="content__loading">
|
<div className="content__loading">
|
||||||
{spinner && <Spinner light />}
|
{spinner && <Spinner light />}
|
||||||
|
{progress && <ProgressBar progress={progress}/>}
|
||||||
<span className="content__loading-text">{status}</span>
|
{status && <span className="content__loading-text">{status}</span>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
23
src/renderer/component/common/progress-bar.jsx
Normal file
23
src/renderer/component/common/progress-bar.jsx
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
progress: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
class progressBar extends React.PureComponent<Props> {
|
||||||
|
static defaultProps = {
|
||||||
|
progress: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { progress } = this.props;
|
||||||
|
return (
|
||||||
|
<div className="progress-bar">
|
||||||
|
<div className="progress-bar__progress" style={{width: progress}}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoadingScreen;
|
|
@ -19,8 +19,12 @@ type Props = {
|
||||||
class ThreeViewer extends React.PureComponent<Props> {
|
class ThreeViewer extends React.PureComponent<Props> {
|
||||||
constructor(props: Props) {
|
constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
const { theme } = this.props;
|
||||||
|
|
||||||
//Main container
|
//Main container
|
||||||
this.viewer = React.createRef();
|
this.viewer = React.createRef();
|
||||||
|
|
||||||
// Object colors
|
// Object colors
|
||||||
this.materialColors = {
|
this.materialColors = {
|
||||||
red: '#e74c3c',
|
red: '#e74c3c',
|
||||||
|
@ -29,12 +33,7 @@ class ThreeViewer extends React.PureComponent<Props> {
|
||||||
orange: '#f39c12',
|
orange: '#f39c12',
|
||||||
};
|
};
|
||||||
|
|
||||||
this.state = {
|
// Viewer themes
|
||||||
error: null,
|
|
||||||
isReady: false,
|
|
||||||
isLoading: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.themes = {
|
this.themes = {
|
||||||
dark: {
|
dark: {
|
||||||
gridColor: '#414e5c',
|
gridColor: '#414e5c',
|
||||||
|
@ -51,8 +50,14 @@ class ThreeViewer extends React.PureComponent<Props> {
|
||||||
};
|
};
|
||||||
|
|
||||||
// Select current theme
|
// Select current theme
|
||||||
const { theme } = this.props;
|
|
||||||
this.theme = this.themes[theme] || this.themes.light;
|
this.theme = this.themes[theme] || this.themes.light;
|
||||||
|
|
||||||
|
// State
|
||||||
|
this.state = {
|
||||||
|
error: null,
|
||||||
|
isReady: false,
|
||||||
|
isLoading: false,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
createOrbitControls(camera, canvas) {
|
createOrbitControls(camera, canvas) {
|
||||||
|
@ -186,8 +191,8 @@ class ThreeViewer extends React.PureComponent<Props> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleProgress(url, currentItem, totalItems) {
|
handleProgress(url, currentItem, totalItems) {
|
||||||
// Handle progress
|
const progress = (currentItem / totalItems) * 100;
|
||||||
// TODO: Show progressbar...
|
this.setState({progress});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleColorChange(color) {
|
handleColorChange(color) {
|
||||||
|
@ -255,15 +260,15 @@ class ThreeViewer extends React.PureComponent<Props> {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isReady, isLoading, error } = this.state;
|
const { error, progress, isReady, isLoading } = this.state;
|
||||||
const loadingMessage = 'Rendering model.';
|
const loadingMessage = 'Rendering model.';
|
||||||
const showViewer = isReady && !error;
|
const showViewer = isReady && !error;
|
||||||
const showLoading = isLoading && !error;
|
const showLoading = isLoading && !error;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{error && <LoadingScreen status={error} />}
|
{error && <LoadingScreen status={error} spinner={false} />}
|
||||||
{showLoading && <LoadingScreen status={loadingMessage} />}
|
{showLoading && <LoadingScreen status={loadingMessage} spinner={false} progress={progress} />}
|
||||||
<div style={{ opacity: isReady ? 1 : 0 }} className="three-viewer" ref={this.viewer} />
|
<div style={{ opacity: isReady ? 1 : 0 }} className="three-viewer" ref={this.viewer} />
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|
16
src/renderer/scss/component/_progress-bar.scss
Normal file
16
src/renderer/scss/component/_progress-bar.scss
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
.progress-bar {
|
||||||
|
width: 75%;
|
||||||
|
height: 5px;
|
||||||
|
display: block;
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar__progress {
|
||||||
|
width: 20px;
|
||||||
|
height: 5px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue