All files / components/LoadingIndicator LoadingIndicator.jsx

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
 
 
 
 
 
 
120x
 
 
 
 
 
 
120x
 
 
 
 
 
 
 
 
120x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
 
14x
 
14x
14x
 
14x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import _ from 'lodash';
import { lucidClassNames } from '../../util/style-helpers';
import { createClass, getFirst, rejectTypes } from '../../util/component-types';
import OverlayWrapper from '../OverlayWrapper/OverlayWrapper';
import LoadingMessage from '../LoadingMessage/LoadingMessage';
 
const cx = lucidClassNames.bind('&-LoadingIndicator');
 
const {
	bool,
	node,
	oneOf,
	string,
} = React.PropTypes;
 
/**
 *
 * {"categories": ["communication"], "madeFrom": ["OverlayWrapper", "LoadingMessage"]}
 *
 * A loading indicator wrapper with optional overlay.
 *
 */
const LoadingIndicator = createClass({
	displayName: 'LoadingIndicator',
	propTypes: {
		/**
		 * Set this to `false` if you don't want the semi-transparent overlay over
		 * the wrapped content
		 */
		hasOverlay: bool,
		/**
		 * Class names that are appended to the defaults.
		 */
		className: string,
		/**
		 * Any valid React children.
		 */
		children: node,
		/**
		 * Controls the visibility of the `LoadingMessage` and overlay.
		 */
		isLoading: bool,
		/**
		 * Style variations for the overlay behind the loading indicator.
		 */
		overlayKind: oneOf([
			'light',
			'dark',
		]),
	},
 
	components: { LoadingMessage },
 
	getDefaultProps() {
		return {
			hasOverlay: true,
			isLoading: false,
			overlayKind: 'light',
		};
	},
 
	render() {
		const {
			props,
			props: {
				children,
				className,
				isLoading,
			},
		} = this;
 
		const { LoadingMessage } = LoadingIndicator;
 
		const messageElement = getFirst(props, LoadingMessage, <LoadingMessage />);
		const otherChildren = rejectTypes(children, LoadingMessage);
 
		return (
			<OverlayWrapper
				{..._.omit(props, ['children', 'className', 'isLoading'])}
				className={cx('&', className)}
				isVisible={isLoading}
			>
				{otherChildren}
				<OverlayWrapper.Message>{messageElement}</OverlayWrapper.Message>
			</OverlayWrapper>
		);
	},
});
 
export default LoadingIndicator;