diff options
Diffstat (limited to 'packages/forms/src/button/index.tsx')
-rw-r--r-- | packages/forms/src/button/index.tsx | 29 |
1 files changed, 19 insertions, 10 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index ecb2876ca..c08c4e97d 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -8,14 +8,24 @@ import Loader from 'react-loader'; | |||
8 | import { IFormField, IWithStyle } from '../typings/generic'; | 8 | import { IFormField, IWithStyle } from '../typings/generic'; |
9 | import { Theme } from '../../../theme'; | 9 | import { Theme } from '../../../theme'; |
10 | 10 | ||
11 | type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted'; | 11 | type ButtonType = |
12 | | 'primary' | ||
13 | | 'secondary' | ||
14 | | 'success' | ||
15 | | 'danger' | ||
16 | | 'warning' | ||
17 | | 'inverted'; | ||
12 | 18 | ||
13 | interface IProps extends IFormField, IWithStyle { | 19 | interface IProps extends IFormField, IWithStyle { |
14 | className?: string; | 20 | className?: string; |
15 | disabled?: boolean; | 21 | disabled?: boolean; |
16 | id?: string; | 22 | id?: string; |
17 | type?: 'button' | 'reset' | 'submit' | undefined; | 23 | type?: 'button' | 'reset' | 'submit' | undefined; |
18 | onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void; | 24 | onClick: ( |
25 | event: | ||
26 | | React.MouseEvent<HTMLButtonElement> | ||
27 | | React.MouseEvent<HTMLAnchorElement>, | ||
28 | ) => void; | ||
19 | buttonType?: ButtonType; | 29 | buttonType?: ButtonType; |
20 | stretch?: boolean; | 30 | stretch?: boolean; |
21 | loaded?: boolean; | 31 | loaded?: boolean; |
@@ -25,10 +35,6 @@ interface IProps extends IFormField, IWithStyle { | |||
25 | target?: string; | 35 | target?: string; |
26 | } | 36 | } |
27 | 37 | ||
28 | interface IState { | ||
29 | busy: boolean; | ||
30 | } | ||
31 | |||
32 | const styles = (theme: Theme) => ({ | 38 | const styles = (theme: Theme) => ({ |
33 | button: { | 39 | button: { |
34 | borderRadius: theme.borderRadiusSmall, | 40 | borderRadius: theme.borderRadiusSmall, |
@@ -40,7 +46,8 @@ const styles = (theme: Theme) => ({ | |||
40 | outline: 'none', | 46 | outline: 'none', |
41 | alignItems: 'center', | 47 | alignItems: 'center', |
42 | padding: 0, | 48 | padding: 0, |
43 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as Property.Width<string>, | 49 | width: (props: IProps) => |
50 | (props.stretch ? '100%' : 'auto') as Property.Width<string>, | ||
44 | fontSize: theme.uiFontSize, | 51 | fontSize: theme.uiFontSize, |
45 | textDecoration: 'none', | 52 | textDecoration: 'none', |
46 | // height: theme.buttonHeight, | 53 | // height: theme.buttonHeight, |
@@ -125,7 +132,8 @@ const styles = (theme: Theme) => ({ | |||
125 | transition: 'all 0.3s', | 132 | transition: 'all 0.3s', |
126 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), | 133 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), |
127 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), | 134 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), |
128 | position: (props: IProps): Property.Position => props.stretch ? 'absolute' : 'inherit', | 135 | position: (props: IProps): Property.Position => |
136 | props.stretch ? 'absolute' : 'inherit', | ||
129 | }, | 137 | }, |
130 | icon: { | 138 | icon: { |
131 | margin: [1, 10, 0, -5], | 139 | margin: [1, 10, 0, -5], |
@@ -175,7 +183,6 @@ class ButtonComponent extends Component<IProps> { | |||
175 | buttonType, | 183 | buttonType, |
176 | loaded, | 184 | loaded, |
177 | icon, | 185 | icon, |
178 | busy: busyProp, | ||
179 | href, | 186 | href, |
180 | target, | 187 | target, |
181 | } = this.props; | 188 | } = this.props; |
@@ -185,7 +192,9 @@ class ButtonComponent extends Component<IProps> { | |||
185 | let showLoader = false; | 192 | let showLoader = false; |
186 | if (loaded) { | 193 | if (loaded) { |
187 | showLoader = !loaded; | 194 | showLoader = !loaded; |
188 | console.warn('Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead'); | 195 | console.warn( |
196 | 'Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead', | ||
197 | ); | ||
189 | } | 198 | } |
190 | if (busy) { | 199 | if (busy) { |
191 | showLoader = busy; | 200 | showLoader = busy; |