diff options
author | 2019-01-15 11:15:33 +0100 | |
---|---|---|
committer | 2019-01-15 11:15:33 +0100 | |
commit | 48675c4fa91f0e5c0a77027bfb796b16c5621a2f (patch) | |
tree | 99aab6269b5b30267b120003f207b6e60cabbb62 /packages/forms/src/button/index.tsx | |
parent | add types (diff) | |
download | ferdium-app-48675c4fa91f0e5c0a77027bfb796b16c5621a2f.tar.gz ferdium-app-48675c4fa91f0e5c0a77027bfb796b16c5621a2f.tar.zst ferdium-app-48675c4fa91f0e5c0a77027bfb796b16c5621a2f.zip |
Add mdi icons to buttons
Diffstat (limited to 'packages/forms/src/button/index.tsx')
-rw-r--r-- | packages/forms/src/button/index.tsx | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index c4a138b16..d2c5ad96d 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -1,3 +1,5 @@ | |||
1 | import * as mdiIcons from '@mdi/js'; | ||
2 | import Icon from '@mdi/react'; | ||
1 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 5 | import CSS from 'csstype'; |
@@ -15,6 +17,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormFiel | |||
15 | stretch?: boolean; | 17 | stretch?: boolean; |
16 | loaded?: boolean; | 18 | loaded?: boolean; |
17 | busy?: boolean; | 19 | busy?: boolean; |
20 | icon?: keyof typeof mdiIcons; | ||
18 | } | 21 | } |
19 | 22 | ||
20 | interface IState { | 23 | interface IState { |
@@ -38,27 +41,50 @@ const styles = (theme: Theme) => ({ | |||
38 | label: { | 41 | label: { |
39 | margin: '10px 20px', | 42 | margin: '10px 20px', |
40 | width: '100%', | 43 | width: '100%', |
44 | display: 'flex', | ||
45 | alignItems: 'center', | ||
46 | justifyContent: 'center', | ||
41 | }, | 47 | }, |
42 | primary: { | 48 | primary: { |
43 | background: theme.buttonPrimaryBackground, | 49 | background: theme.buttonPrimaryBackground, |
44 | color: theme.buttonPrimaryTextColor, | 50 | color: theme.buttonPrimaryTextColor, |
51 | |||
52 | '& svg': { | ||
53 | fill: theme.buttonPrimaryTextColor, | ||
54 | }, | ||
45 | }, | 55 | }, |
46 | secondary: { | 56 | secondary: { |
47 | background: theme.buttonSecondaryBackground, | 57 | background: theme.buttonSecondaryBackground, |
48 | color: theme.buttonSecondaryTextColor, | 58 | color: theme.buttonSecondaryTextColor, |
59 | |||
60 | '& svg': { | ||
61 | fill: theme.buttonSecondaryTextColor, | ||
62 | }, | ||
49 | }, | 63 | }, |
50 | danger: { | 64 | danger: { |
51 | background: theme.buttonDangerBackground, | 65 | background: theme.buttonDangerBackground, |
52 | color: theme.buttonDangerTextColor, | 66 | color: theme.buttonDangerTextColor, |
67 | |||
68 | '& svg': { | ||
69 | fill: theme.buttonDangerTextColor, | ||
70 | }, | ||
53 | }, | 71 | }, |
54 | warning: { | 72 | warning: { |
55 | background: theme.buttonWarningBackground, | 73 | background: theme.buttonWarningBackground, |
56 | color: theme.buttonWarningTextColor, | 74 | color: theme.buttonWarningTextColor, |
75 | |||
76 | '& svg': { | ||
77 | fill: theme.buttonWarningTextColor, | ||
78 | }, | ||
57 | }, | 79 | }, |
58 | inverted: { | 80 | inverted: { |
59 | background: theme.buttonInvertedBackground, | 81 | background: theme.buttonInvertedBackground, |
60 | color: theme.buttonInvertedTextColor, | 82 | color: theme.buttonInvertedTextColor, |
61 | border: theme.buttonInvertedBorder, | 83 | border: theme.buttonInvertedBorder, |
84 | |||
85 | '& svg': { | ||
86 | fill: theme.buttonInvertedTextColor, | ||
87 | }, | ||
62 | }, | 88 | }, |
63 | disabled: { | 89 | disabled: { |
64 | opacity: theme.inputDisabledOpacity, | 90 | opacity: theme.inputDisabledOpacity, |
@@ -78,6 +104,10 @@ const styles = (theme: Theme) => ({ | |||
78 | marginRight: (props: IProps): number => !props.busy ? -10 : -20, | 104 | marginRight: (props: IProps): number => !props.busy ? -10 : -20, |
79 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', | 105 | position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', |
80 | }, | 106 | }, |
107 | icon: { | ||
108 | marginLeft: -5, | ||
109 | marginRight: 10, | ||
110 | }, | ||
81 | }); | 111 | }); |
82 | 112 | ||
83 | @observer | 113 | @observer |
@@ -122,6 +152,7 @@ class ButtonComponent extends Component<IProps> { | |||
122 | onClick, | 152 | onClick, |
123 | buttonType, | 153 | buttonType, |
124 | loaded, | 154 | loaded, |
155 | icon: iconName, | ||
125 | busy: busyProp, | 156 | busy: busyProp, |
126 | } = this.props; | 157 | } = this.props; |
127 | 158 | ||
@@ -129,6 +160,13 @@ class ButtonComponent extends Component<IProps> { | |||
129 | busy, | 160 | busy, |
130 | } = this.state; | 161 | } = this.state; |
131 | 162 | ||
163 | let icon = ''; | ||
164 | if (iconName && mdiIcons[iconName]) { | ||
165 | icon = mdiIcons[iconName]; | ||
166 | } else if (iconName && !mdiIcons[iconName]) { | ||
167 | console.warn(`Icon '${iconName}' was not found`); | ||
168 | } | ||
169 | |||
132 | let showLoader = false; | 170 | let showLoader = false; |
133 | if (loaded) { | 171 | if (loaded) { |
134 | showLoader = !loaded; | 172 | showLoader = !loaded; |
@@ -162,6 +200,13 @@ class ButtonComponent extends Component<IProps> { | |||
162 | )} | 200 | )} |
163 | </div> | 201 | </div> |
164 | <div className={classes.label}> | 202 | <div className={classes.label}> |
203 | {icon && ( | ||
204 | <Icon | ||
205 | path={icon} | ||
206 | size={1} | ||
207 | className={classes.icon} | ||
208 | /> | ||
209 | )} | ||
165 | {label} | 210 | {label} |
166 | </div> | 211 | </div> |
167 | </button> | 212 | </button> |