diff options
Diffstat (limited to 'packages')
-rw-r--r-- | packages/forms/package.json | 1 | ||||
-rw-r--r-- | packages/forms/src/button/index.tsx | 34 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 6 | ||||
-rw-r--r-- | packages/forms/src/textarea/styles.ts | 4 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 6 |
5 files changed, 22 insertions, 29 deletions
diff --git a/packages/forms/package.json b/packages/forms/package.json index a5b8752aa..29e19b8c7 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json | |||
@@ -26,6 +26,7 @@ | |||
26 | "@mdi/js": "^3.3.92", | 26 | "@mdi/js": "^3.3.92", |
27 | "@mdi/react": "^1.1.0", | 27 | "@mdi/react": "^1.1.0", |
28 | "@meetfranz/theme": "file:../theme", | 28 | "@meetfranz/theme": "file:../theme", |
29 | "csstype": "^3.0.8", | ||
29 | "react-html-attributes": "^1.4.3", | 30 | "react-html-attributes": "^1.4.3", |
30 | "react-loader": "2.4.7" | 31 | "react-loader": "2.4.7" |
31 | }, | 32 | }, |
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 = ( |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index e2ab30a4f..99b0685a8 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import CSS from 'csstype'; | 2 | import * as CSS from 'csstype'; |
3 | 3 | ||
4 | const prefixStyles = (theme: Theme) => ({ | 4 | const prefixStyles = (theme: Theme) => ({ |
5 | background: theme.inputPrefixBackground, | 5 | background: theme.inputPrefixBackground, |
@@ -13,7 +13,7 @@ export default (theme: Theme) => ({ | |||
13 | label: { | 13 | label: { |
14 | '& > div': { | 14 | '& > div': { |
15 | marginTop: 5, | 15 | marginTop: 5, |
16 | } | 16 | }, |
17 | }, | 17 | }, |
18 | disabled: { | 18 | disabled: { |
19 | opacity: theme.inputDisabledOpacity, | 19 | opacity: theme.inputDisabledOpacity, |
@@ -85,7 +85,7 @@ export default (theme: Theme) => ({ | |||
85 | background: theme.inputBackground, | 85 | background: theme.inputBackground, |
86 | border: theme.inputBorder, | 86 | border: theme.inputBorder, |
87 | borderRadius: theme.borderRadiusSmall, | 87 | borderRadius: theme.borderRadiusSmall, |
88 | boxSizing: 'border-box' as CSS.BoxSizingProperty, | 88 | boxSizing: 'border-box' as CSS.Property.BoxSizing, |
89 | display: 'flex', | 89 | display: 'flex', |
90 | height: theme.inputHeight, | 90 | height: theme.inputHeight, |
91 | order: 1, | 91 | order: 1, |
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts index c1cbd76a5..f1fb09367 100644 --- a/packages/forms/src/textarea/styles.ts +++ b/packages/forms/src/textarea/styles.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import CSS from 'csstype'; | 2 | import * as CSS from 'csstype'; |
3 | 3 | ||
4 | export default (theme: Theme) => ({ | 4 | export default (theme: Theme) => ({ |
5 | label: { | 5 | label: { |
@@ -42,7 +42,7 @@ export default (theme: Theme) => ({ | |||
42 | background: theme.inputBackground, | 42 | background: theme.inputBackground, |
43 | border: theme.inputBorder, | 43 | border: theme.inputBorder, |
44 | borderRadius: theme.borderRadiusSmall, | 44 | borderRadius: theme.borderRadiusSmall, |
45 | boxSizing: 'border-box' as CSS.BoxSizingProperty, | 45 | boxSizing: 'border-box' as CSS.Property.BoxSizing, |
46 | display: 'flex', | 46 | display: 'flex', |
47 | order: 1, | 47 | order: 1, |
48 | width: '100%', | 48 | width: '100%', |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index ea335f281..50716450b 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 3 | import * as CSS from 'csstype'; |
4 | import React, { Component } from 'react'; | 4 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 5 | import injectStyle from 'react-jss'; |
6 | 6 | ||
@@ -22,7 +22,7 @@ const styles = (theme: Theme) => ({ | |||
22 | background: theme.toggleBackground, | 22 | background: theme.toggleBackground, |
23 | borderRadius: theme.borderRadius, | 23 | borderRadius: theme.borderRadius, |
24 | height: theme.toggleHeight, | 24 | height: theme.toggleHeight, |
25 | position: 'relative' as CSS.PositionProperty, | 25 | position: 'relative' as CSS.Property.Position, |
26 | width: theme.toggleWidth, | 26 | width: theme.toggleWidth, |
27 | }, | 27 | }, |
28 | button: { | 28 | button: { |
@@ -33,7 +33,7 @@ const styles = (theme: Theme) => ({ | |||
33 | height: theme.toggleHeight - 2, | 33 | height: theme.toggleHeight - 2, |
34 | left: 1, | 34 | left: 1, |
35 | top: 1, | 35 | top: 1, |
36 | position: 'absolute' as CSS.PositionProperty, | 36 | position: 'absolute' as CSS.Property.Position, |
37 | transition: 'all .5s', | 37 | transition: 'all .5s', |
38 | }, | 38 | }, |
39 | buttonActive: { | 39 | buttonActive: { |