diff options
Diffstat (limited to 'packages/forms/src/button')
-rw-r--r-- | packages/forms/src/button/index.tsx | 34 |
1 files changed, 13 insertions, 21 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index b81154a43..8eba17415 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import Icon from '@mdi/react'; | 1 | import Icon from '@mdi/react'; |
2 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import CSS from 'csstype'; | 4 | import * as CSS from 'csstype'; |
5 | import React, { Component } from 'react'; | 5 | import React, { Component } from 'react'; |
6 | import injectStyle, { withTheme } from 'react-jss'; | 6 | import injectStyle, { withTheme } from 'react-jss'; |
7 | import Loader from 'react-loader'; | 7 | import Loader from 'react-loader'; |
@@ -14,7 +14,7 @@ interface IProps extends IFormField, IWithStyle { | |||
14 | className?: string; | 14 | className?: string; |
15 | disabled?: boolean; | 15 | disabled?: boolean; |
16 | id?: string; | 16 | id?: string; |
17 | type?: "button" | "reset" | "submit" | undefined; | 17 | type?: 'button' | 'reset' | 'submit' | undefined; |
18 | onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void; | 18 | onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void; |
19 | buttonType?: ButtonType; | 19 | buttonType?: ButtonType; |
20 | stretch?: boolean; | 20 | stretch?: boolean; |
@@ -34,13 +34,13 @@ const styles = (theme: Theme) => ({ | |||
34 | borderRadius: theme.borderRadiusSmall, | 34 | borderRadius: theme.borderRadiusSmall, |
35 | border: 'none', | 35 | border: 'none', |
36 | display: 'inline-flex', | 36 | display: 'inline-flex', |
37 | position: 'relative' as CSS.PositionProperty, | 37 | position: 'relative' as CSS.Property.Position, |
38 | transition: 'background .5s, opacity 0.3s', | 38 | transition: 'background .5s, opacity 0.3s', |
39 | textAlign: 'center' as CSS.TextAlignProperty, | 39 | textAlign: 'center' as CSS.Property.TextAlign, |
40 | outline: 'none', | 40 | outline: 'none', |
41 | alignItems: 'center', | 41 | alignItems: 'center', |
42 | padding: 0, | 42 | padding: 0, |
43 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, | 43 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.Property.Width<string>, |
44 | fontSize: theme.uiFontSize, | 44 | fontSize: theme.uiFontSize, |
45 | textDecoration: 'none', | 45 | textDecoration: 'none', |
46 | // height: theme.buttonHeight, | 46 | // height: theme.buttonHeight, |
@@ -113,7 +113,7 @@ const styles = (theme: Theme) => ({ | |||
113 | opacity: theme.inputDisabledOpacity, | 113 | opacity: theme.inputDisabledOpacity, |
114 | }, | 114 | }, |
115 | loader: { | 115 | loader: { |
116 | position: 'relative' as CSS.PositionProperty, | 116 | position: 'relative' as CSS.Property.Position, |
117 | width: 20, | 117 | width: 20, |
118 | height: 18, | 118 | height: 18, |
119 | zIndex: 9999, | 119 | zIndex: 9999, |
@@ -123,9 +123,9 @@ const styles = (theme: Theme) => ({ | |||
123 | height: 20, | 123 | height: 20, |
124 | overflow: 'hidden', | 124 | overflow: 'hidden', |
125 | transition: 'all 0.3s', | 125 | transition: 'all 0.3s', |
126 | marginLeft: (props: IProps): number => !props.busy ? 10 : 20, | 126 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), |
127 | marginRight: (props: IProps): number => !props.busy ? -10 : -20, | 127 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), |
128 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', | 128 | position: (props: IProps): CSS.Property.Position => props.stretch ? 'absolute' : 'inherit', |
129 | }, | 129 | }, |
130 | icon: { | 130 | icon: { |
131 | margin: [1, 10, 0, -5], | 131 | margin: [1, 10, 0, -5], |
@@ -155,7 +155,7 @@ class ButtonComponent extends Component<IProps> { | |||
155 | if (this.props.busy) { | 155 | if (this.props.busy) { |
156 | setTimeout(() => { | 156 | setTimeout(() => { |
157 | this.setState({ busy: nextProps.busy }); | 157 | this.setState({ busy: nextProps.busy }); |
158 | }, 300); | 158 | }, 300); |
159 | } else { | 159 | } else { |
160 | this.setState({ busy: nextProps.busy }); | 160 | this.setState({ busy: nextProps.busy }); |
161 | } | 161 | } |
@@ -180,9 +180,7 @@ class ButtonComponent extends Component<IProps> { | |||
180 | target, | 180 | target, |
181 | } = this.props; | 181 | } = this.props; |
182 | 182 | ||
183 | const { | 183 | const { busy } = this.state; |
184 | busy, | ||
185 | } = this.state; | ||
186 | 184 | ||
187 | let showLoader = false; | 185 | let showLoader = false; |
188 | if (loaded) { | 186 | if (loaded) { |
@@ -207,19 +205,13 @@ class ButtonComponent extends Component<IProps> { | |||
207 | )} | 205 | )} |
208 | </div> | 206 | </div> |
209 | <div className={classes.label}> | 207 | <div className={classes.label}> |
210 | {icon && ( | 208 | {icon && <Icon path={icon} size={0.8} className={classes.icon} />} |
211 | <Icon | ||
212 | path={icon} | ||
213 | size={0.8} | ||
214 | className={classes.icon} | ||
215 | /> | ||
216 | )} | ||
217 | {label} | 209 | {label} |
218 | </div> | 210 | </div> |
219 | </> | 211 | </> |
220 | ); | 212 | ); |
221 | 213 | ||
222 | let wrapperComponent = null; | 214 | let wrapperComponent: JSX.Element; |
223 | 215 | ||
224 | if (!href) { | 216 | if (!href) { |
225 | wrapperComponent = ( | 217 | wrapperComponent = ( |