diff options
Diffstat (limited to 'src/components/ui/infobox/index.tsx')
-rw-r--r-- | src/components/ui/infobox/index.tsx | 88 |
1 files changed, 41 insertions, 47 deletions
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx index ad59ea81e..3b878a9de 100644 --- a/src/components/ui/infobox/index.tsx +++ b/src/components/ui/infobox/index.tsx | |||
@@ -1,32 +1,14 @@ | |||
1 | import { mdiClose } from '@mdi/js'; | 1 | import { mdiClose } from '@mdi/js'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import { Component, ReactNode } from 'react'; | 3 | import { noop } from 'lodash'; |
4 | import injectStyle, { WithStylesProps } from 'react-jss'; | 4 | import { Component, ReactElement, ReactNode } from 'react'; |
5 | 5 | import withStyles, { WithStylesProps } from 'react-jss'; | |
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import Icon from '../icon'; | 7 | import Icon from '../icon'; |
8 | 8 | ||
9 | interface IProps extends WithStylesProps<typeof styles> { | ||
10 | children: ReactNode; | ||
11 | icon?: string; | ||
12 | type?: string; | ||
13 | dismissable?: boolean; | ||
14 | ctaLabel?: string; | ||
15 | |||
16 | className?: string; | ||
17 | onDismiss?: () => void; | ||
18 | onUnmount?: () => void; | ||
19 | ctaOnClick?: () => void; | ||
20 | } | ||
21 | |||
22 | interface IState { | ||
23 | isDismissing: boolean; | ||
24 | dismissed: boolean; | ||
25 | } | ||
26 | |||
27 | const buttonStyles = (theme: Theme) => { | 9 | const buttonStyles = (theme: Theme) => { |
28 | const styles = {}; | 10 | const styles = {}; |
29 | Object.keys(theme.styleTypes).map(style => { | 11 | for (const style of Object.keys(theme.styleTypes)) { |
30 | Object.assign(styles, { | 12 | Object.assign(styles, { |
31 | [style]: { | 13 | [style]: { |
32 | background: theme.styleTypes[style].accent, | 14 | background: theme.styleTypes[style].accent, |
@@ -38,7 +20,7 @@ const buttonStyles = (theme: Theme) => { | |||
38 | }, | 20 | }, |
39 | }, | 21 | }, |
40 | }); | 22 | }); |
41 | }); | 23 | } |
42 | 24 | ||
43 | return styles; | 25 | return styles; |
44 | }; | 26 | }; |
@@ -108,23 +90,35 @@ const styles = (theme: Theme) => ({ | |||
108 | ...buttonStyles(theme), | 90 | ...buttonStyles(theme), |
109 | }); | 91 | }); |
110 | 92 | ||
93 | interface IProps extends WithStylesProps<typeof styles> { | ||
94 | children: ReactNode; | ||
95 | icon?: string; | ||
96 | type?: string; | ||
97 | dismissible?: boolean; | ||
98 | ctaLabel?: string; | ||
99 | className?: string; | ||
100 | onDismiss?: () => void; | ||
101 | onUnmount?: () => void; | ||
102 | ctaOnClick?: () => void; | ||
103 | } | ||
104 | |||
105 | interface IState { | ||
106 | isDismissing: boolean; | ||
107 | dismissed: boolean; | ||
108 | } | ||
109 | |||
111 | class InfoboxComponent extends Component<IProps, IState> { | 110 | class InfoboxComponent extends Component<IProps, IState> { |
112 | public static defaultProps = { | 111 | constructor(props: IProps) { |
113 | type: 'primary', | 112 | super(props); |
114 | dismissable: false, | 113 | |
115 | ctaOnClick: () => {}, | 114 | this.state = { |
116 | onDismiss: () => {}, | 115 | isDismissing: false, |
117 | ctaLabel: '', | 116 | dismissed: false, |
118 | className: '', | 117 | }; |
119 | }; | 118 | } |
120 | 119 | ||
121 | state = { | 120 | dismiss(): void { |
122 | isDismissing: false, | 121 | const { onDismiss = noop } = this.props; |
123 | dismissed: false, | ||
124 | }; | ||
125 | |||
126 | dismiss() { | ||
127 | const { onDismiss } = this.props; | ||
128 | 122 | ||
129 | this.setState({ | 123 | this.setState({ |
130 | isDismissing: true, | 124 | isDismissing: true, |
@@ -146,16 +140,16 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
146 | if (onUnmount) onUnmount(); | 140 | if (onUnmount) onUnmount(); |
147 | } | 141 | } |
148 | 142 | ||
149 | render() { | 143 | render(): ReactElement | null { |
150 | const { | 144 | const { |
151 | classes, | 145 | classes, |
152 | children, | 146 | children, |
153 | icon, | 147 | icon, |
154 | type, | 148 | type = 'primary', |
155 | ctaLabel, | 149 | dismissible = false, |
156 | ctaOnClick, | 150 | ctaOnClick = noop, |
157 | dismissable, | 151 | ctaLabel = '', |
158 | className, | 152 | className = '', |
159 | } = this.props; | 153 | } = this.props; |
160 | 154 | ||
161 | const { isDismissing, dismissed } = this.state; | 155 | const { isDismissing, dismissed } = this.state; |
@@ -186,7 +180,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
186 | {ctaLabel} | 180 | {ctaLabel} |
187 | </button> | 181 | </button> |
188 | )} | 182 | )} |
189 | {dismissable && ( | 183 | {dismissible && ( |
190 | <button | 184 | <button |
191 | type="button" | 185 | type="button" |
192 | onClick={this.dismiss.bind(this)} | 186 | onClick={this.dismiss.bind(this)} |
@@ -201,4 +195,4 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
201 | } | 195 | } |
202 | } | 196 | } |
203 | 197 | ||
204 | export default injectStyle(styles, { injectTheme: true })(InfoboxComponent); | 198 | export default withStyles(styles, { injectTheme: true })(InfoboxComponent); |