All files / components/loader LoaderCmp.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
2x
2x
2x
 
 
5x
 
 
 
5x
 
 
 
5x
 
 
 
 
 
5x
2x
1x
 
 
 
 
 
 
 
 
 
5x
//todo: transitions
//todo: animation
 
import * as React from 'react';
 
interface IProps {
  readonly shadowColor?: string;
  readonly shadowDeep?: string;
  readonly children?: any;
  readonly [otherAttrs: string]: any; // Needed to add attributes to react components whitout typescript errors
}
 
export default class Loader extends React.PureComponent<IProps> {
 
  private loaderElement: HTMLDivElement;
 
  private containerStyle: any = {
    zIndex: 11,
    position: 'absolute',
    width: '100%',
    top: '41%',
    textAlign: 'center',
  };
 
  private contentStyle: any = {
    color: 'black',
    backgroundColor: 'white',
    display: 'block',
    margin: 'auto',
    padding: '20px',
    borderRadius: '4px',
    fontFamily: 'verdana, sans-serif',
    fontSize: 'small',
    width: '70px',
    textAlign: 'center'
  };
 
  public constructor(props: IProps) {
    super(props);
    const shadowColor = this.props.shadowColor || 'grey';
    const shadowDeep = this.props.shadowDeep || '10';
    this.contentStyle.boxShadow = `${shadowColor} 0 0 ${shadowDeep}px 0`;
  }
 
  public hide() {
    this.loaderElement.style.display = 'none';
  }
 
  public show() {
    this.loaderElement.style.display = 'block';
  }
 
  public hideWhen(entity: AFrame.Entity, eventName: string = 'loaded'): void {
    entity && entity.addEventListener(eventName, () => {
      this.hide();
    })
  }
 
  public render() {
    return(
      <div id="loader-element" ref={ (loader: HTMLDivElement) => this.loaderElement = loader }
        style={ this.containerStyle } className="fade-in">
        <div style={ this.contentStyle }>
          {/* IMPORTANT: loader icon must be preloaded in "index.html" header */}
          <img id="loader-image" src="img/history3.svg" style={ {verticalAlign: 'middle'} } />
          <div style={ {paddingTop: '5px'} }>{ this.props.children }</div>
        </div>
      </div>
    )
  }
}