diff options
Diffstat (limited to 'src/components/ui/button/index.tsx')
-rw-r--r-- | src/components/ui/button/index.tsx | 76 |
1 files changed, 30 insertions, 46 deletions
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index a8bbfe730..c1e647bc0 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import Icon from '@mdi/react'; | 1 | import Icon from '@mdi/react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import { Property } from 'csstype'; | 3 | import { Property } from 'csstype'; |
4 | import { noop } from 'lodash'; | ||
4 | import { Component, MouseEvent } from 'react'; | 5 | import { Component, MouseEvent } from 'react'; |
5 | import withStyles, { WithStylesProps } from 'react-jss'; | 6 | import withStyles, { WithStylesProps } from 'react-jss'; |
6 | import Loader from 'react-loader'; | 7 | import Loader from 'react-loader'; |
7 | |||
8 | import { Theme } from '../../../themes'; | 8 | import { Theme } from '../../../themes'; |
9 | import { IFormField } from '../typings/generic'; | 9 | import { IFormField } from '../typings/generic'; |
10 | 10 | ||
@@ -16,24 +16,6 @@ type ButtonType = | |||
16 | | 'warning' | 16 | | 'warning' |
17 | | 'inverted'; | 17 | | 'inverted'; |
18 | 18 | ||
19 | interface IProps extends IFormField, WithStylesProps<typeof styles> { | ||
20 | className?: string; | ||
21 | label?: string; | ||
22 | disabled?: boolean; | ||
23 | id?: string; | ||
24 | type?: 'button' | 'reset' | 'submit' | undefined; | ||
25 | onClick: ( | ||
26 | event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>, | ||
27 | ) => void; | ||
28 | buttonType?: ButtonType; | ||
29 | loaded?: boolean; | ||
30 | busy?: boolean; | ||
31 | icon?: string; | ||
32 | href?: string; | ||
33 | target?: string; | ||
34 | htmlForm?: string; | ||
35 | } | ||
36 | |||
37 | let buttonTransition: string = 'none'; | 19 | let buttonTransition: string = 'none'; |
38 | let loaderContainerTransition: string = 'none'; | 20 | let loaderContainerTransition: string = 'none'; |
39 | 21 | ||
@@ -148,38 +130,38 @@ const styles = (theme: Theme) => ({ | |||
148 | }, | 130 | }, |
149 | }); | 131 | }); |
150 | 132 | ||
151 | class ButtonComponent extends Component<IProps> { | 133 | interface IProps extends IFormField, WithStylesProps<typeof styles> { |
152 | customDefaultProps: { | 134 | className?: string; |
153 | disabled: boolean; | 135 | label?: string; |
154 | type: 'button' | 'reset' | 'submit' | undefined; | 136 | disabled?: boolean; |
155 | onClick: ( | 137 | id?: string; |
156 | event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>, | 138 | type?: 'button' | 'reset' | 'submit' | undefined; |
157 | ) => void; | 139 | onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void; |
158 | buttonType: ButtonType; | 140 | buttonType?: ButtonType; |
159 | busy: boolean; | 141 | loaded?: boolean; |
160 | } = { | 142 | busy?: boolean; |
161 | type: 'button', | 143 | icon?: string; |
162 | disabled: false, | 144 | href?: string; |
163 | onClick: () => null, | 145 | target?: string; |
164 | buttonType: 'primary' as ButtonType, | 146 | htmlForm?: string; |
165 | busy: false, | 147 | } |
166 | }; | ||
167 | 148 | ||
168 | state = { | 149 | interface IState { |
169 | busy: false, | 150 | busy: boolean; |
170 | }; | 151 | } |
171 | 152 | ||
153 | class ButtonComponent extends Component<IProps, IState> { | ||
172 | constructor(props: IProps) { | 154 | constructor(props: IProps) { |
173 | super(props); | 155 | super(props); |
174 | 156 | ||
175 | this.state = { | 157 | this.state = { |
176 | busy: props.busy || false, | 158 | busy: this.props.busy || false, |
177 | }; | 159 | }; |
178 | } | 160 | } |
179 | 161 | ||
180 | static getDerivedStateFromProps(nextProps: IProps) { | 162 | static getDerivedStateFromProps(nextProps: IProps): IState { |
181 | return { | 163 | return { |
182 | busy: nextProps.busy, | 164 | busy: nextProps.busy || false, |
183 | }; | 165 | }; |
184 | } | 166 | } |
185 | 167 | ||
@@ -188,27 +170,29 @@ class ButtonComponent extends Component<IProps> { | |||
188 | classes, | 170 | classes, |
189 | className, | 171 | className, |
190 | // theme, | 172 | // theme, |
191 | disabled, | ||
192 | id, | 173 | id, |
193 | label, | 174 | label, |
194 | type, | ||
195 | onClick, | ||
196 | buttonType, | ||
197 | loaded, | 175 | loaded, |
198 | icon, | 176 | icon, |
199 | href, | 177 | href, |
200 | target, | 178 | target, |
201 | htmlForm, | 179 | htmlForm, |
202 | } = { ...this.customDefaultProps, ...this.props }; | 180 | type = 'button', |
181 | disabled = false, | ||
182 | onClick = noop, | ||
183 | buttonType = 'primary' as ButtonType, | ||
184 | } = this.props; | ||
203 | 185 | ||
204 | const { busy } = this.state; | 186 | const { busy } = this.state; |
205 | let showLoader = false; | 187 | let showLoader = false; |
188 | |||
206 | if (loaded) { | 189 | if (loaded) { |
207 | showLoader = !loaded; | 190 | showLoader = !loaded; |
208 | console.warn( | 191 | console.warn( |
209 | 'Ferdium Button prop `loaded` will be deprecated in the future. Please use `busy` instead', | 192 | 'Ferdium Button prop `loaded` will be deprecated in the future. Please use `busy` instead', |
210 | ); | 193 | ); |
211 | } | 194 | } |
195 | |||
212 | if (busy) { | 196 | if (busy) { |
213 | showLoader = busy; | 197 | showLoader = busy; |
214 | } | 198 | } |