forked from mantinedev/mantine
/
ActionIcon.tsx
98 lines (80 loc) · 2.46 KB
/
ActionIcon.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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React, { forwardRef } from 'react';
import {
DefaultProps,
MantineNumberSize,
MantineColor,
Selectors,
useComponentDefaultProps,
MantineGradient,
} from '@mantine/styles';
import { createPolymorphicComponent } from '@mantine/utils';
import { UnstyledButton } from '../UnstyledButton';
import useStyles, { sizes, ActionIconVariant, ActionIconStylesParams } from './ActionIcon.styles';
import { Loader, LoaderProps } from '../Loader';
export type ActionIconStylesNames = Selectors<typeof useStyles>;
export interface ActionIconProps
extends DefaultProps<ActionIconStylesNames, ActionIconStylesParams> {
/** Icon */
children?: React.ReactNode;
/** Controls appearance */
variant?: ActionIconVariant;
/** Key of theme.colors */
color?: MantineColor;
/** Controls gradient settings in gradient variant only */
gradient?: MantineGradient;
/** Button border-radius from theme or number to set border-radius in px */
radius?: MantineNumberSize;
/** Predefined icon size or number to set width and height in px */
size?: MantineNumberSize;
/** Props spread to Loader component */
loaderProps?: LoaderProps;
/** Indicates loading state */
loading?: boolean;
/** Indicates disabled state */
disabled?: boolean;
}
const defaultProps: Partial<ActionIconProps> = {
color: 'gray',
size: 'md',
variant: 'subtle',
loading: false,
};
export const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>((props, ref) => {
const {
className,
color,
children,
radius,
size,
variant,
gradient,
disabled,
loaderProps,
loading,
unstyled,
...others
} = useComponentDefaultProps('ActionIcon', defaultProps, props);
const { classes, cx, theme } = useStyles(
{ size, radius, color, variant, gradient },
{ name: 'ActionIcon', unstyled }
);
const colors = theme.fn.variant({ color, variant });
const loader = (
<Loader color={colors.color} size={theme.fn.size({ size, sizes }) - 12} {...loaderProps} />
);
return (
<UnstyledButton
className={cx(classes.root, className)}
ref={ref}
disabled={disabled || loading}
data-disabled={disabled || undefined}
data-loading={loading || undefined}
unstyled={unstyled}
{...others}
>
{loading ? loader : children}
</UnstyledButton>
);
});
_ActionIcon.displayName = '@mantine/core/ActionIcon';
export const ActionIcon = createPolymorphicComponent<'button', ActionIconProps>(_ActionIcon);