2018-05-07 06:50:55 +02:00
|
|
|
// @flow
|
|
|
|
import * as React from 'react';
|
|
|
|
import classnames from 'classnames';
|
|
|
|
import { DARK_THEME, LIGHT_THEME } from 'constants/themes';
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
dark?: boolean, // always a dark spinner
|
|
|
|
light?: boolean, // always a light spinner
|
|
|
|
theme: string,
|
2018-08-13 18:23:01 +02:00
|
|
|
type: ?string,
|
2018-05-07 06:50:55 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const Spinner = (props: Props) => {
|
2018-08-13 18:23:01 +02:00
|
|
|
const { dark, light, theme, type } = props;
|
2018-05-07 06:50:55 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={classnames('spinner', {
|
|
|
|
'spinner--dark': !light && (dark || theme === LIGHT_THEME),
|
|
|
|
'spinner--light': !dark && (light || theme === DARK_THEME),
|
2018-08-13 18:23:01 +02:00
|
|
|
'spinner--splash': type === 'splash',
|
2018-08-28 17:35:24 +02:00
|
|
|
'spinner--small': type === 'small',
|
2018-05-07 06:50:55 +02:00
|
|
|
})}
|
|
|
|
>
|
|
|
|
<div className="rect rect1" />
|
|
|
|
<div className="rect rect2" />
|
|
|
|
<div className="rect rect3" />
|
|
|
|
<div className="rect rect4" />
|
|
|
|
<div className="rect rect5" />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Spinner.defaultProps = {
|
|
|
|
dark: false,
|
|
|
|
light: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Spinner;
|