UNPKG

1.13 kBJavaScriptView Raw
1import React from 'react';
2import PropTypes from 'prop-types';
3import classNames from 'classnames';
4import { mapToCssModules, tagPropType } from './utils';
5
6const 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
16const defaultProps = {
17 tag: 'div',
18 type: 'border',
19 children: 'Loading...'
20};
21
22const 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
55Spinner.propTypes = propTypes;
56Spinner.defaultProps = defaultProps;
57
58export default Spinner;