aboutsummaryrefslogtreecommitdiffstats
path: root/packages/forms/src/button/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/forms/src/button/index.tsx')
-rw-r--r--packages/forms/src/button/index.tsx29
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';
8import { IFormField, IWithStyle } from '../typings/generic'; 8import { IFormField, IWithStyle } from '../typings/generic';
9import { Theme } from '../../../theme'; 9import { Theme } from '../../../theme';
10 10
11type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted'; 11type ButtonType =
12 | 'primary'
13 | 'secondary'
14 | 'success'
15 | 'danger'
16 | 'warning'
17 | 'inverted';
12 18
13interface IProps extends IFormField, IWithStyle { 19interface 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
28interface IState {
29 busy: boolean;
30}
31
32const styles = (theme: Theme) => ({ 38const 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;