-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.tsx
113 lines (106 loc) · 2.47 KB
/
index.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import 'antd/lib/button/style/index.css'
import 'antd/lib/spin/style/index.css'
import { ButtonProps as AntDButtonProps } from 'antd/es/button'
import classnames from 'classnames'
import { CommonComponentProps } from '../types'
import { createUseStyles } from 'react-jss'
import { generateButtonStyles } from './utils'
import { getDataTestAttributeProp } from '../utils'
import { LoadingOutlined } from '@ant-design/icons'
import { Skeleton } from '../Skeleton'
import { Button as AntDButton, Spin } from 'antd'
import React, { FC, ReactNode } from 'react'
import { styleguide, ThemeType } from '../assets/styles'
const {
colors: { blacks }
} = styleguide
const { dark, light } = ThemeType
const useStyles = createUseStyles({
'@global': {
[`.${dark} button`]: generateButtonStyles(dark),
button: generateButtonStyles(light)
}
})
export interface ButtonProps extends CommonComponentProps {
/**
* Required click handler.
*/
onClick: () => void
/**
* Button children to render including button text.
*/
children: ReactNode
/**
* Whether button is of primary type. **Note**: Setting primary to true will override background color set by classes.
*/
primary?: boolean
/**
* Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events).
*/
disabled?: boolean
/**
* Renders a skeleton for the button.
*/
loading?: boolean
/**
* Renders an animated loading icon next to the children.
*/
pending?: boolean
/**
* Skeleton loader height.
*/
skeletonHeight?: number
/**
* Skeleton loader width.
*/
skeletonWidth?: number
/**
* Array of classes to pass to button.
*/
classes?: string[]
}
export const Button: FC<ButtonProps> = ({
children,
classes = [],
dataTag,
disabled = false,
loading = false,
onClick,
pending = false,
primary = false,
skeletonHeight = 32,
skeletonWidth = 75
}: ButtonProps) => {
const antDProps: AntDButtonProps = {
className: classnames(classes),
disabled: pending || disabled,
onClick,
type: primary ? 'primary' : 'default'
}
useStyles()
return loading ? (
<Skeleton height={skeletonHeight} width={skeletonWidth} />
) : (
<AntDButton
{...antDProps}
{...getDataTestAttributeProp('button', dataTag)}
>
{pending && (
<span style={{ paddingRight: 8 }}>
<Spin
indicator={
<LoadingOutlined
spin
style={{
color: blacks['lighten-50'],
fontSize: 16
}}
/>
}
/>
</span>
)}
{children}
</AntDButton>
)
}