-
Notifications
You must be signed in to change notification settings - Fork 4
/
button.component.tsx
70 lines (62 loc) · 1.99 KB
/
button.component.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 PT from 'prop-types';
import SpinnerIcon from '@scaleflex/icons/spinner';
import { intrinsicComponent, objectValues } from '../../utils/functions';
import Badge from '../badge';
import type { ButtonProps } from './button.props';
import { ButtonSize, ButtonColor } from '../../utils/types';
import { getIconSize } from './button.utils';
import Styled from './button.styles';
const Button = intrinsicComponent<ButtonProps, HTMLButtonElement>(
({ children, icon, badge, color, size, loading, disabled, ...rest }: ButtonProps, ref): JSX.Element => (
<Styled.Button type="button" {...rest} disabled={loading || disabled} color={color} size={size} ref={ref}>
{icon && (
<Styled.Icon $loading={loading}>
{typeof icon === 'function' ? (
loading ? (
<SpinnerIcon size={getIconSize(size)} />
) : (
icon({ size: getIconSize(size) })
)
) : // eslint-disable-next-line unicorn/no-nested-ternary
loading ? (
<SpinnerIcon size={getIconSize(size)} />
) : (
icon
)}
</Styled.Icon>
)}
{loading && !icon && (
<Styled.Icon $loading={loading}>
<SpinnerIcon size={getIconSize(size)} />
</Styled.Icon>
)}
<Styled.Label>{children}</Styled.Label>
{badge && (
<Styled.Badge>
<Badge
inline
size={14}
fontSize={10}
padding="0 1px"
badgeContent={badge}
color={color === ButtonColor.Primary ? 'white' : 'secondary'}
/>
</Styled.Badge>
)}
</Styled.Button>
)
);
Button.defaultProps = {
size: ButtonSize.Md,
color: ButtonColor.Secondary,
};
Button.propTypes = {
size: PT.oneOf(objectValues(ButtonSize)),
color: PT.oneOf(objectValues(ButtonColor)),
icon: PT.oneOfType([PT.node, PT.func]),
badge: PT.node,
loading: PT.bool,
disabled: PT.bool,
};
export default Button;