diff options
Diffstat (limited to 'packages/ui/src/infobox/index.tsx')
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 64 |
1 files changed, 32 insertions, 32 deletions
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index e4c2c5a3e..88cfdb620 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import { mdiClose } from '@mdi/js'; | 1 | import { mdiClose } from '@mdi/js'; |
2 | import { Theme } from '@meetfranz/theme'; | ||
3 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
4 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
6 | 5 | ||
7 | import { Icon } from '../'; | 6 | import { Icon } from '..'; |
7 | import { Theme } from '../../../theme'; | ||
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, |
@@ -44,6 +44,15 @@ const buttonStyles = (theme: Theme) => { | |||
44 | return styles; | 44 | return styles; |
45 | }; | 45 | }; |
46 | 46 | ||
47 | const infoBoxTransition: string = 'none'; | ||
48 | const ctaTransition: string = 'none'; | ||
49 | |||
50 | // TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdi | ||
51 | // if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
52 | // infoBoxTransition = 'all 0.5s'; | ||
53 | // ctaTransition = 'opacity 0.3s'; | ||
54 | // } | ||
55 | |||
47 | const styles = (theme: Theme) => ({ | 56 | const styles = (theme: Theme) => ({ |
48 | wrapper: { | 57 | wrapper: { |
49 | position: 'relative', | 58 | position: 'relative', |
@@ -58,7 +67,7 @@ const styles = (theme: Theme) => ({ | |||
58 | height: 'auto', | 67 | height: 'auto', |
59 | padding: '15px 20px', | 68 | padding: '15px 20px', |
60 | top: 0, | 69 | top: 0, |
61 | transition: 'all 0.5s', | 70 | transition: infoBoxTransition, |
62 | opacity: 1, | 71 | opacity: 1, |
63 | }, | 72 | }, |
64 | dismissing: { | 73 | dismissing: { |
@@ -73,22 +82,25 @@ const styles = (theme: Theme) => ({ | |||
73 | marginRight: 10, | 82 | marginRight: 10, |
74 | }, | 83 | }, |
75 | close: { | 84 | close: { |
76 | color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 85 | color: (props: IProps) => |
86 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
77 | marginRight: -5, | 87 | marginRight: -5, |
78 | border: 0, | 88 | border: 0, |
79 | background: 'none', | 89 | background: 'none', |
80 | }, | 90 | }, |
81 | cta: { | 91 | cta: { |
82 | borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 92 | borderColor: (props: IProps) => |
93 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
83 | borderRadius: theme.borderRadiusSmall, | 94 | borderRadius: theme.borderRadiusSmall, |
84 | borderStyle: 'solid', | 95 | borderStyle: 'solid', |
85 | borderWidth: 1, | 96 | borderWidth: 1, |
86 | background: 'none', | 97 | background: 'none', |
87 | color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 98 | color: (props: IProps) => |
99 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
88 | marginLeft: 15, | 100 | marginLeft: 15, |
89 | padding: [4, 10], | 101 | padding: [4, 10], |
90 | fontSize: theme.uiFontSize, | 102 | fontSize: theme.uiFontSize, |
91 | transition: 'opacity 0.3s', | 103 | transition: ctaTransition, |
92 | 104 | ||
93 | '&:hover': { | 105 | '&:hover': { |
94 | opacity: 0.6, | 106 | opacity: 0.6, |
@@ -113,9 +125,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
113 | }; | 125 | }; |
114 | 126 | ||
115 | dismiss() { | 127 | dismiss() { |
116 | const { | 128 | const { onDismiss } = this.props; |
117 | onDismiss, | ||
118 | } = this.props; | ||
119 | 129 | ||
120 | this.setState({ | 130 | this.setState({ |
121 | isDismissing: true, | 131 | isDismissing: true, |
@@ -129,7 +139,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
129 | this.setState({ | 139 | this.setState({ |
130 | dismissed: true, | 140 | dismissed: true, |
131 | }); | 141 | }); |
132 | }, 3000); | 142 | }, 3000); |
133 | } | 143 | } |
134 | 144 | ||
135 | componentWillUnmount(): void { | 145 | componentWillUnmount(): void { |
@@ -144,26 +154,24 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
144 | icon, | 154 | icon, |
145 | type, | 155 | type, |
146 | ctaLabel, | 156 | ctaLabel, |
147 | ctaLoading, | ||
148 | ctaOnClick, | 157 | ctaOnClick, |
149 | dismissable, | 158 | dismissable, |
150 | className, | 159 | className, |
151 | } = this.props; | 160 | } = this.props; |
152 | 161 | ||
153 | const { | 162 | const { isDismissing, dismissed } = this.state; |
154 | isDismissing, | ||
155 | dismissed, | ||
156 | } = this.state; | ||
157 | 163 | ||
158 | if (dismissed) { | 164 | if (dismissed) { |
159 | return null; | 165 | return null; |
160 | } | 166 | } |
161 | 167 | ||
162 | return ( | 168 | return ( |
163 | <div className={classnames({ | 169 | <div |
164 | [classes.wrapper]: true, | 170 | className={classnames({ |
165 | [`${className}`]: className, | 171 | [classes.wrapper]: true, |
166 | })}> | 172 | [`${className}`]: className, |
173 | })} | ||
174 | > | ||
167 | <div | 175 | <div |
168 | className={classnames({ | 176 | className={classnames({ |
169 | [classes.infobox]: true, | 177 | [classes.infobox]: true, |
@@ -172,18 +180,10 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
172 | })} | 180 | })} |
173 | data-type="franz-infobox" | 181 | data-type="franz-infobox" |
174 | > | 182 | > |
175 | {icon && ( | 183 | {icon && <Icon icon={icon} className={classes.icon} />} |
176 | <Icon icon={icon} className={classes.icon} /> | 184 | <div className={classes.content}>{children}</div> |
177 | )} | ||
178 | <div className={classes.content}> | ||
179 | {children} | ||
180 | </div> | ||
181 | {ctaLabel && ( | 185 | {ctaLabel && ( |
182 | <button | 186 | <button className={classes.cta} onClick={ctaOnClick} type="button"> |
183 | className={classes.cta} | ||
184 | onClick={ctaOnClick} | ||
185 | type="button" | ||
186 | > | ||
187 | {ctaLabel} | 187 | {ctaLabel} |
188 | </button> | 188 | </button> |
189 | )} | 189 | )} |