1
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2
+ // NEED to allow any in order to support intrinisic element types
1
3
import { FC , SVGProps } from 'react'
2
4
import { Link } from 'react-router-dom'
3
5
import classNames from 'classnames'
@@ -32,9 +34,15 @@ export interface ButtonProps {
32
34
33
35
const Button : FC < ButtonProps > = ( props : ButtonProps ) => {
34
36
35
- const classes : string = getButtonClasses ( props )
36
- const clickHandler : ( event ?: any ) => void = getClickHandler ( props )
37
- const content : JSX . Element = getButtonContent ( props )
37
+ const classes : string = getButtonClasses (
38
+ props . className ,
39
+ props . buttonStyle ,
40
+ props . size ,
41
+ props . disable ,
42
+ props . hidden ,
43
+ )
44
+ const clickHandler : ( event ?: any ) => void = getClickHandler ( props . onClick )
45
+ const content : JSX . Element = getButtonContent ( props . buttonStyle , props . icon , props . label )
38
46
39
47
// if there is a url, this is a link button
40
48
if ( ! ! props . url ) {
@@ -79,6 +87,7 @@ const Button: FC<ButtonProps> = (props: ButtonProps) => {
79
87
onClick = { clickHandler }
80
88
tabIndex = { props . tabIndex }
81
89
title = { props . title }
90
+ // eslint-disable-next-line react/button-has-type
82
91
type = { props . type || 'button' }
83
92
id = { props . id }
84
93
value = { props . id }
@@ -105,9 +114,9 @@ const Button: FC<ButtonProps> = (props: ButtonProps) => {
105
114
}
106
115
107
116
function getButtonClasses (
108
- className : string ,
109
- buttonStyle : ButtonStyle ,
110
- size : ButtonSize ,
117
+ className ? : string ,
118
+ buttonStyle ? : ButtonStyle ,
119
+ size ? : ButtonSize ,
111
120
disable ?: boolean ,
112
121
hidden ?: boolean ,
113
122
) : string {
@@ -122,29 +131,34 @@ function getButtonClasses(
122
131
return classes
123
132
}
124
133
125
- function getButtonContent ( props : ButtonProps ) : JSX . Element {
134
+ function getButtonContent (
135
+ buttonStyle ?: ButtonStyle ,
136
+ icon ?: FC < SVGProps < SVGSVGElement > > ,
137
+ label ?: string ,
138
+ ) : JSX . Element {
126
139
127
140
// if this is a link, just add the label and the arrow icon
128
- if ( props . buttonStyle === 'link' ) {
141
+ if ( buttonStyle === 'link' ) {
129
142
return (
130
143
< >
131
- { props . label }
144
+ { label }
132
145
< IconOutline . ArrowRightIcon />
133
146
</ >
134
147
)
135
148
}
136
149
137
- const Icon : FC < SVGProps < SVGSVGElement > > | undefined = props . icon
150
+ const Icon : FC < SVGProps < SVGSVGElement > > | undefined = icon
138
151
return (
139
152
< >
140
153
{ ! ! Icon && < Icon /> }
141
- { props . label }
154
+ { label }
142
155
</ >
143
156
)
144
157
}
145
158
146
- function getClickHandler ( props : ButtonProps ) : ( event ?: any ) => void {
147
- return props . onClick || ( ( ) => undefined )
159
+ function getClickHandler ( onClick ?: ( event ?: any ) => void ) : ( ( event ?: any ) => void ) {
160
+
161
+ return onClick || ( ( ) => undefined )
148
162
}
149
163
150
164
export default Button
0 commit comments