/
Loader.tsx
70 lines (61 loc) · 1.44 KB
/
Loader.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
import React from 'react';
import {
DefaultProps,
MantineNumberSize,
MantineColor,
MantineTheme,
useMantineTheme,
useComponentDefaultProps,
} from '@mantine/styles';
import { Box } from '../Box';
import { Bars } from './loaders/Bars';
import { Oval } from './loaders/Oval';
import { Dots } from './loaders/Dots';
const LOADERS = {
bars: Bars,
oval: Oval,
dots: Dots,
};
const sizes = {
xs: 18,
sm: 22,
md: 36,
lg: 44,
xl: 58,
};
export interface LoaderProps extends DefaultProps, React.ComponentPropsWithoutRef<'svg'> {
/** Defines width of loader */
size?: MantineNumberSize;
/** Loader color from theme */
color?: MantineColor;
/** Loader appearance */
variant?: MantineTheme['loader'];
}
const defaultProps: Partial<LoaderProps> = {
size: 'md',
};
export function Loader(props: LoaderProps) {
const { size, color, variant, ...others } = useComponentDefaultProps(
'Loader',
defaultProps,
props
);
const theme = useMantineTheme();
const defaultLoader = variant in LOADERS ? variant : theme.loader;
return (
<Box
role="presentation"
component={LOADERS[defaultLoader] || LOADERS.bars}
size={theme.fn.size({ size, sizes })}
color={
theme.fn.variant({
variant: 'filled',
primaryFallback: false,
color: color || theme.primaryColor,
}).background
}
{...others}
/>
);
}
Loader.displayName = '@mantine/core/Loader';