-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
LoadingIndicator.tsx
81 lines (77 loc) · 2.83 KB
/
LoadingIndicator.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
72
73
74
75
76
77
78
79
80
81
import app from '../../common/app';
import Component, { ComponentAttrs } from '../Component';
import classList from '../utils/classList';
export interface LoadingIndicatorAttrs extends ComponentAttrs {
/**
* Custom classes for the loading indicator's container.
*/
className?: string;
/**
* Custom classes for the loading indicator's container.
*/
containerClassName?: string;
/**
* Optional size for the loading indicator.
*/
size?: 'large' | 'medium' | 'small';
/**
* Optional attributes to apply to the loading indicator's container.
*/
containerAttrs?: Partial<ComponentAttrs>;
/**
* Display type of the spinner.
*
* @default 'block'
*/
display?: 'block' | 'inline' | 'unset';
}
/**
* The `LoadingIndicator` component displays a simple CSS-based loading spinner.
*
* To set a custom color, use the CSS `color` property.
*
* To increase spacing around the spinner, use the CSS `height` property on the
* spinner's **container**. Setting the `display` attribute to `block` will set
* a height of `100px` by default.
*
* To apply a custom size to the loading indicator, set the `--size` and
* `--thickness` CSS custom properties on the loading indicator container.
*
* If you *really* want to change how this looks as part of your custom theme,
* you can override the `border-radius` and `border` then set either a
* background image, or use `content: "\<glyph>"` (e.g. `content: "\f1ce"`)
* and `font-family: 'Font Awesome 5 Free'` to set an FA icon if you'd rather.
*
* ### Attrs
*
* - `containerClassName` Class name(s) to apply to the indicator's parent
* - `className` Class name(s) to apply to the indicator itself
* - `display` Determines how the spinner should be displayed (`inline`, `block` (default) or `unset`)
* - `size` Size of the loading indicator (`small`, `medium` or `large`)
* - `containerAttrs` Optional attrs to be applied to the container DOM element
*
* All other attrs will be assigned as attributes on the DOM element.
*/
export default class LoadingIndicator extends Component<LoadingIndicatorAttrs> {
view() {
const { display = 'block', size = 'medium', containerClassName, className, ...attrs } = this.attrs;
const completeClassName = classList('LoadingIndicator', className);
const completeContainerClassName = classList(
'LoadingIndicator-container',
display !== 'unset' && `LoadingIndicator-container--${display}`,
size && `LoadingIndicator-container--${size}`,
containerClassName
);
return (
<div
aria-label={app.translator.trans('core.lib.loading_indicator.accessible_label')}
role="status"
{...attrs.containerAttrs}
data-size={size}
className={completeContainerClassName}
>
<div aria-hidden="true" className={completeClassName} {...attrs} />
</div>
);
}
}