1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import { mapToCssModules, tagPropType } from './utils';
|
5 |
|
6 | const propTypes = {
|
7 | tag: tagPropType,
|
8 | type: PropTypes.string,
|
9 | size: PropTypes.string,
|
10 | color: PropTypes.string,
|
11 | className: PropTypes.string,
|
12 | cssModule: PropTypes.object,
|
13 | children: PropTypes.string
|
14 | };
|
15 |
|
16 | const defaultProps = {
|
17 | tag: 'div',
|
18 | type: 'border',
|
19 | children: 'Loading...'
|
20 | };
|
21 |
|
22 | const Spinner = props => {
|
23 | const {
|
24 | className,
|
25 | cssModule,
|
26 | type,
|
27 | size,
|
28 | color,
|
29 | children,
|
30 | tag: Tag,
|
31 | ...attributes
|
32 | } = props;
|
33 |
|
34 | const classes = mapToCssModules(
|
35 | classNames(
|
36 | className,
|
37 | size ? `spinner-${type}-${size}` : false,
|
38 | `spinner-${type}`,
|
39 | color ? `text-${color}` : false
|
40 | ),
|
41 | cssModule
|
42 | );
|
43 |
|
44 | return (
|
45 | <Tag role="status" {...attributes} className={classes}>
|
46 | {children &&
|
47 | <span className={mapToCssModules('sr-only', cssModule)}>
|
48 | {children}
|
49 | </span>
|
50 | }
|
51 | </Tag>
|
52 | );
|
53 | };
|
54 |
|
55 | Spinner.propTypes = propTypes;
|
56 | Spinner.defaultProps = defaultProps;
|
57 |
|
58 | export default Spinner;
|