diff options
Diffstat (limited to 'packages/ui/src/infobox/index.tsx')
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 49 |
1 files changed, 20 insertions, 29 deletions
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index bd62fc4ea..961262001 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -3,8 +3,8 @@ import classnames from 'classnames'; | |||
3 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
5 | 5 | ||
6 | import { Icon } from '..'; | ||
6 | import { Theme } from '../../../theme'; | 7 | import { Theme } from '../../../theme'; |
7 | import { Icon } from '../'; | ||
8 | import { IWithStyle } from '../typings/generic'; | 8 | import { IWithStyle } from '../typings/generic'; |
9 | 9 | ||
10 | interface IProps extends IWithStyle { | 10 | interface IProps extends IWithStyle { |
@@ -27,7 +27,7 @@ interface IState { | |||
27 | 27 | ||
28 | const buttonStyles = (theme: Theme) => { | 28 | const buttonStyles = (theme: Theme) => { |
29 | const styles = {}; | 29 | const styles = {}; |
30 | Object.keys(theme.styleTypes).map((style) => { | 30 | Object.keys(theme.styleTypes).map(style => { |
31 | Object.assign(styles, { | 31 | Object.assign(styles, { |
32 | [style]: { | 32 | [style]: { |
33 | background: theme.styleTypes[style].accent, | 33 | background: theme.styleTypes[style].accent, |
@@ -73,18 +73,21 @@ const styles = (theme: Theme) => ({ | |||
73 | marginRight: 10, | 73 | marginRight: 10, |
74 | }, | 74 | }, |
75 | close: { | 75 | close: { |
76 | color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 76 | color: (props: IProps) => |
77 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
77 | marginRight: -5, | 78 | marginRight: -5, |
78 | border: 0, | 79 | border: 0, |
79 | background: 'none', | 80 | background: 'none', |
80 | }, | 81 | }, |
81 | cta: { | 82 | cta: { |
82 | borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 83 | borderColor: (props: IProps) => |
84 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
83 | borderRadius: theme.borderRadiusSmall, | 85 | borderRadius: theme.borderRadiusSmall, |
84 | borderStyle: 'solid', | 86 | borderStyle: 'solid', |
85 | borderWidth: 1, | 87 | borderWidth: 1, |
86 | background: 'none', | 88 | background: 'none', |
87 | color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 89 | color: (props: IProps) => |
90 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
88 | marginLeft: 15, | 91 | marginLeft: 15, |
89 | padding: [4, 10], | 92 | padding: [4, 10], |
90 | fontSize: theme.uiFontSize, | 93 | fontSize: theme.uiFontSize, |
@@ -113,9 +116,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
113 | }; | 116 | }; |
114 | 117 | ||
115 | dismiss() { | 118 | dismiss() { |
116 | const { | 119 | const { onDismiss } = this.props; |
117 | onDismiss, | ||
118 | } = this.props; | ||
119 | 120 | ||
120 | this.setState({ | 121 | this.setState({ |
121 | isDismissing: true, | 122 | isDismissing: true, |
@@ -129,7 +130,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
129 | this.setState({ | 130 | this.setState({ |
130 | dismissed: true, | 131 | dismissed: true, |
131 | }); | 132 | }); |
132 | }, 3000); | 133 | }, 3000); |
133 | } | 134 | } |
134 | 135 | ||
135 | componentWillUnmount(): void { | 136 | componentWillUnmount(): void { |
@@ -144,26 +145,24 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
144 | icon, | 145 | icon, |
145 | type, | 146 | type, |
146 | ctaLabel, | 147 | ctaLabel, |
147 | ctaLoading, | ||
148 | ctaOnClick, | 148 | ctaOnClick, |
149 | dismissable, | 149 | dismissable, |
150 | className, | 150 | className, |
151 | } = this.props; | 151 | } = this.props; |
152 | 152 | ||
153 | const { | 153 | const { isDismissing, dismissed } = this.state; |
154 | isDismissing, | ||
155 | dismissed, | ||
156 | } = this.state; | ||
157 | 154 | ||
158 | if (dismissed) { | 155 | if (dismissed) { |
159 | return null; | 156 | return null; |
160 | } | 157 | } |
161 | 158 | ||
162 | return ( | 159 | return ( |
163 | <div className={classnames({ | 160 | <div |
164 | [classes.wrapper]: true, | 161 | className={classnames({ |
165 | [`${className}`]: className, | 162 | [classes.wrapper]: true, |
166 | })}> | 163 | [`${className}`]: className, |
164 | })} | ||
165 | > | ||
167 | <div | 166 | <div |
168 | className={classnames({ | 167 | className={classnames({ |
169 | [classes.infobox]: true, | 168 | [classes.infobox]: true, |
@@ -172,18 +171,10 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
172 | })} | 171 | })} |
173 | data-type="franz-infobox" | 172 | data-type="franz-infobox" |
174 | > | 173 | > |
175 | {icon && ( | 174 | {icon && <Icon icon={icon} className={classes.icon} />} |
176 | <Icon icon={icon} className={classes.icon} /> | 175 | <div className={classes.content}>{children}</div> |
177 | )} | ||
178 | <div className={classes.content}> | ||
179 | {children} | ||
180 | </div> | ||
181 | {ctaLabel && ( | 176 | {ctaLabel && ( |
182 | <button | 177 | <button className={classes.cta} onClick={ctaOnClick} type="button"> |
183 | className={classes.cta} | ||
184 | onClick={ctaOnClick} | ||
185 | type="button" | ||
186 | > | ||
187 | {ctaLabel} | 178 | {ctaLabel} |
188 | </button> | 179 | </button> |
189 | )} | 180 | )} |