diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-07-30 10:54:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-30 14:24:54 +0530 |
commit | f4b4416ea52d564bc2dbe543a82084ed98843ccc (patch) | |
tree | 7ca6b23571c86458a6b799746c91a7191de02715 /packages | |
parent | 5.6.1-nightly.8 [skip ci] (diff) | |
download | ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.tar.gz ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.tar.zst ferdium-app-f4b4416ea52d564bc2dbe543a82084ed98843ccc.zip |
chore: migrate from tslint to @typescript-eslint (#1706)
- update .eslintrc to work for .js and .ts
- update devDependencies
- lint properly both root /src and nested /packages
- update webhint recommended setting for tsconfig.json to shrink output
- Manage all eslint rules from the repo root
- escape single quotes in scripts to please windows build
Co-authored-by: Vijay A <avijayr@protonmail.com>
Diffstat (limited to 'packages')
23 files changed, 219 insertions, 226 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index ecb2876ca..c08c4e97d 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -8,14 +8,24 @@ import Loader from 'react-loader'; | |||
8 | import { IFormField, IWithStyle } from '../typings/generic'; | 8 | import { IFormField, IWithStyle } from '../typings/generic'; |
9 | import { Theme } from '../../../theme'; | 9 | import { Theme } from '../../../theme'; |
10 | 10 | ||
11 | type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted'; | 11 | type ButtonType = |
12 | | 'primary' | ||
13 | | 'secondary' | ||
14 | | 'success' | ||
15 | | 'danger' | ||
16 | | 'warning' | ||
17 | | 'inverted'; | ||
12 | 18 | ||
13 | interface IProps extends IFormField, IWithStyle { | 19 | interface IProps extends IFormField, IWithStyle { |
14 | className?: string; | 20 | className?: string; |
15 | disabled?: boolean; | 21 | disabled?: boolean; |
16 | id?: string; | 22 | id?: string; |
17 | type?: 'button' | 'reset' | 'submit' | undefined; | 23 | type?: 'button' | 'reset' | 'submit' | undefined; |
18 | onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void; | 24 | onClick: ( |
25 | event: | ||
26 | | React.MouseEvent<HTMLButtonElement> | ||
27 | | React.MouseEvent<HTMLAnchorElement>, | ||
28 | ) => void; | ||
19 | buttonType?: ButtonType; | 29 | buttonType?: ButtonType; |
20 | stretch?: boolean; | 30 | stretch?: boolean; |
21 | loaded?: boolean; | 31 | loaded?: boolean; |
@@ -25,10 +35,6 @@ interface IProps extends IFormField, IWithStyle { | |||
25 | target?: string; | 35 | target?: string; |
26 | } | 36 | } |
27 | 37 | ||
28 | interface IState { | ||
29 | busy: boolean; | ||
30 | } | ||
31 | |||
32 | const styles = (theme: Theme) => ({ | 38 | const styles = (theme: Theme) => ({ |
33 | button: { | 39 | button: { |
34 | borderRadius: theme.borderRadiusSmall, | 40 | borderRadius: theme.borderRadiusSmall, |
@@ -40,7 +46,8 @@ const styles = (theme: Theme) => ({ | |||
40 | outline: 'none', | 46 | outline: 'none', |
41 | alignItems: 'center', | 47 | alignItems: 'center', |
42 | padding: 0, | 48 | padding: 0, |
43 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as Property.Width<string>, | 49 | width: (props: IProps) => |
50 | (props.stretch ? '100%' : 'auto') as Property.Width<string>, | ||
44 | fontSize: theme.uiFontSize, | 51 | fontSize: theme.uiFontSize, |
45 | textDecoration: 'none', | 52 | textDecoration: 'none', |
46 | // height: theme.buttonHeight, | 53 | // height: theme.buttonHeight, |
@@ -125,7 +132,8 @@ const styles = (theme: Theme) => ({ | |||
125 | transition: 'all 0.3s', | 132 | transition: 'all 0.3s', |
126 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), | 133 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), |
127 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), | 134 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), |
128 | position: (props: IProps): Property.Position => props.stretch ? 'absolute' : 'inherit', | 135 | position: (props: IProps): Property.Position => |
136 | props.stretch ? 'absolute' : 'inherit', | ||
129 | }, | 137 | }, |
130 | icon: { | 138 | icon: { |
131 | margin: [1, 10, 0, -5], | 139 | margin: [1, 10, 0, -5], |
@@ -175,7 +183,6 @@ class ButtonComponent extends Component<IProps> { | |||
175 | buttonType, | 183 | buttonType, |
176 | loaded, | 184 | loaded, |
177 | icon, | 185 | icon, |
178 | busy: busyProp, | ||
179 | href, | 186 | href, |
180 | target, | 187 | target, |
181 | } = this.props; | 188 | } = this.props; |
@@ -185,7 +192,9 @@ class ButtonComponent extends Component<IProps> { | |||
185 | let showLoader = false; | 192 | let showLoader = false; |
186 | if (loaded) { | 193 | if (loaded) { |
187 | showLoader = !loaded; | 194 | showLoader = !loaded; |
188 | console.warn('Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead'); | 195 | console.warn( |
196 | 'Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead', | ||
197 | ); | ||
189 | } | 198 | } |
190 | if (busy) { | 199 | if (busy) { |
191 | showLoader = busy; | 200 | showLoader = busy; |
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx index a487bb281..243321d97 100644 --- a/packages/forms/src/error/index.tsx +++ b/packages/forms/src/error/index.tsx | |||
@@ -11,18 +11,9 @@ interface IProps { | |||
11 | 11 | ||
12 | class ErrorComponent extends Component<IProps> { | 12 | class ErrorComponent extends Component<IProps> { |
13 | render() { | 13 | render() { |
14 | const { | 14 | const { classes, message } = this.props; |
15 | classes, | ||
16 | message, | ||
17 | } = this.props; | ||
18 | 15 | ||
19 | return ( | 16 | return <p className={classes.message}>{message}</p>; |
20 | <p | ||
21 | className={classes.message} | ||
22 | > | ||
23 | {message} | ||
24 | </p> | ||
25 | ); | ||
26 | } | 17 | } |
27 | } | 18 | } |
28 | 19 | ||
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index b96dbc12d..41751710a 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -17,7 +17,10 @@ interface IData { | |||
17 | [index: string]: string; | 17 | [index: string]: string; |
18 | } | 18 | } |
19 | 19 | ||
20 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { | 20 | interface IProps |
21 | extends React.InputHTMLAttributes<HTMLInputElement>, | ||
22 | IFormField, | ||
23 | IWithStyle { | ||
21 | focus?: boolean; | 24 | focus?: boolean; |
22 | prefix?: string; | 25 | prefix?: string; |
23 | suffix?: string; | 26 | suffix?: string; |
@@ -62,23 +65,24 @@ class InputComponent extends Component<IProps, IState> { | |||
62 | } | 65 | } |
63 | 66 | ||
64 | if (data) { | 67 | if (data) { |
65 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); | 68 | Object.keys(data).map( |
69 | key => (this.inputRef.current!.dataset[key] = data[key]), | ||
70 | ); | ||
66 | } | 71 | } |
67 | } | 72 | } |
68 | } | 73 | } |
69 | 74 | ||
70 | onChange(e: React.ChangeEvent<HTMLInputElement>) { | 75 | onChange(e: React.ChangeEvent<HTMLInputElement>) { |
71 | const { | 76 | const { scorePassword, onChange } = this.props; |
72 | scorePassword, | ||
73 | onChange, | ||
74 | } = this.props; | ||
75 | 77 | ||
76 | if (onChange) { | 78 | if (onChange) { |
77 | onChange(e); | 79 | onChange(e); |
78 | } | 80 | } |
79 | 81 | ||
80 | if (this.inputRef && this.inputRef.current && scorePassword) { | 82 | if (this.inputRef && this.inputRef.current && scorePassword) { |
81 | this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) }); | 83 | this.setState({ |
84 | passwordScore: scorePasswordFunc(this.inputRef.current.value), | ||
85 | }); | ||
82 | } | 86 | } |
83 | } | 87 | } |
84 | 88 | ||
@@ -117,10 +121,7 @@ class InputComponent extends Component<IProps, IState> { | |||
117 | noMargin, | 121 | noMargin, |
118 | } = this.props; | 122 | } = this.props; |
119 | 123 | ||
120 | const { | 124 | const { showPassword, passwordScore } = this.state; |
121 | showPassword, | ||
122 | passwordScore, | ||
123 | } = this.state; | ||
124 | 125 | ||
125 | const inputType = type === 'password' && showPassword ? 'text' : type; | 126 | const inputType = type === 'password' && showPassword ? 'text' : type; |
126 | 127 | ||
@@ -144,12 +145,9 @@ class InputComponent extends Component<IProps, IState> { | |||
144 | [`${classes.wrapper}`]: true, | 145 | [`${classes.wrapper}`]: true, |
145 | [`${classes.disabled}`]: disabled, | 146 | [`${classes.disabled}`]: disabled, |
146 | [`${classes.hasError}`]: error, | 147 | [`${classes.hasError}`]: error, |
147 | })}> | 148 | })} |
148 | {prefix && ( | 149 | > |
149 | <span className={classes.prefix}> | 150 | {prefix && <span className={classes.prefix}>{prefix}</span>} |
150 | {prefix} | ||
151 | </span> | ||
152 | )} | ||
153 | <input | 151 | <input |
154 | id={id} | 152 | id={id} |
155 | type={inputType} | 153 | type={inputType} |
@@ -168,30 +166,29 @@ class InputComponent extends Component<IProps, IState> { | |||
168 | max={max} | 166 | max={max} |
169 | step={step} | 167 | step={step} |
170 | /> | 168 | /> |
171 | {suffix && ( | 169 | {suffix && <span className={classes.suffix}>{suffix}</span>} |
172 | <span className={classes.suffix}> | ||
173 | {suffix} | ||
174 | </span> | ||
175 | )} | ||
176 | {showPasswordToggle && ( | 170 | {showPasswordToggle && ( |
177 | <button | 171 | <button |
178 | type="button" | 172 | type="button" |
179 | className={classes.formModifier} | 173 | className={classes.formModifier} |
180 | onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))} | 174 | onClick={() => |
175 | this.setState(prevState => ({ | ||
176 | showPassword: !prevState.showPassword, | ||
177 | })) | ||
178 | } | ||
181 | tabIndex={-1} | 179 | tabIndex={-1} |
182 | > | 180 | > |
183 | <Icon | 181 | <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} /> |
184 | path={!showPassword ? mdiEye : mdiEyeOff} | ||
185 | size={1} | ||
186 | /> | ||
187 | </button> | 182 | </button> |
188 | )} | 183 | )} |
189 | </div> | 184 | </div> |
190 | {scorePassword && ( | 185 | {scorePassword && ( |
191 | <div className={classnames({ | 186 | <div |
192 | [`${classes.passwordScore}`]: true, | 187 | className={classnames({ |
193 | [`${classes.hasError}`]: error, | 188 | [`${classes.passwordScore}`]: true, |
194 | })}> | 189 | [`${classes.hasError}`]: error, |
190 | })} | ||
191 | > | ||
195 | <meter | 192 | <meter |
196 | value={passwordScore < 5 ? 5 : passwordScore} | 193 | value={passwordScore < 5 ? 5 : passwordScore} |
197 | low={30} | 194 | low={30} |
@@ -202,9 +199,7 @@ class InputComponent extends Component<IProps, IState> { | |||
202 | </div> | 199 | </div> |
203 | )} | 200 | )} |
204 | </Label> | 201 | </Label> |
205 | {error && ( | 202 | {error && <Error message={error} />} |
206 | <Error message={error} /> | ||
207 | )} | ||
208 | </Wrapper> | 203 | </Wrapper> |
209 | ); | 204 | ); |
210 | } | 205 | } |
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts index 0b7719ec1..bc30de4b8 100644 --- a/packages/forms/src/input/scorePassword.ts +++ b/packages/forms/src/input/scorePassword.ts | |||
@@ -11,7 +11,7 @@ interface IVariations { | |||
11 | } | 11 | } |
12 | 12 | ||
13 | export function scorePasswordFunc(password: string): number { | 13 | export function scorePasswordFunc(password: string): number { |
14 | let score: number = 0; | 14 | let score = 0; |
15 | if (!password) { | 15 | if (!password) { |
16 | return score; | 16 | return score; |
17 | } | 17 | } |
@@ -32,8 +32,8 @@ export function scorePasswordFunc(password: string): number { | |||
32 | }; | 32 | }; |
33 | 33 | ||
34 | let variationCount = 0; | 34 | let variationCount = 0; |
35 | Object.keys(variations).forEach((key) => { | 35 | Object.keys(variations).forEach(key => { |
36 | variationCount += (variations[key] === true) ? 1 : 0; | 36 | variationCount += variations[key] === true ? 1 : 0; |
37 | }); | 37 | }); |
38 | 38 | ||
39 | score += (variationCount - 1) * 10; | 39 | score += (variationCount - 1) * 10; |
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx index 1b33ba22c..ad503b785 100644 --- a/packages/forms/src/label/index.tsx +++ b/packages/forms/src/label/index.tsx | |||
@@ -7,7 +7,9 @@ import { IFormField } from '../typings/generic'; | |||
7 | 7 | ||
8 | import styles from './styles'; | 8 | import styles from './styles'; |
9 | 9 | ||
10 | interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> { | 10 | interface ILabel |
11 | extends IFormField, | ||
12 | React.LabelHTMLAttributes<HTMLLabelElement> { | ||
11 | classes: Classes; | 13 | classes: Classes; |
12 | isRequired: boolean; | 14 | isRequired: boolean; |
13 | } | 15 | } |
@@ -38,11 +40,12 @@ class LabelComponent extends Component<ILabel> { | |||
38 | htmlFor={htmlFor} | 40 | htmlFor={htmlFor} |
39 | > | 41 | > |
40 | {showLabel && ( | 42 | {showLabel && ( |
41 | <span className={classes.label}>{title}{isRequired && ' *'}</span> | 43 | <span className={classes.label}> |
44 | {title} | ||
45 | {isRequired && ' *'} | ||
46 | </span> | ||
42 | )} | 47 | )} |
43 | <div className={classes.content}> | 48 | <div className={classes.content}>{children}</div> |
44 | {children} | ||
45 | </div> | ||
46 | </label> | 49 | </label> |
47 | ); | 50 | ); |
48 | } | 51 | } |
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx index e5b59cb19..4a5775579 100644 --- a/packages/forms/src/select/index.tsx +++ b/packages/forms/src/select/index.tsx | |||
@@ -1,4 +1,8 @@ | |||
1 | import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi/js'; | 1 | import { |
2 | mdiArrowRightDropCircleOutline, | ||
3 | mdiCloseCircle, | ||
4 | mdiMagnify, | ||
5 | } from '@mdi/js'; | ||
2 | import Icon from '@mdi/react'; | 6 | import Icon from '@mdi/react'; |
3 | import classnames from 'classnames'; | 7 | import classnames from 'classnames'; |
4 | import React, { Component, createRef } from 'react'; | 8 | import React, { Component, createRef } from 'react'; |
@@ -58,7 +62,7 @@ const styles = (theme: Theme) => ({ | |||
58 | label: { | 62 | label: { |
59 | '& > div': { | 63 | '& > div': { |
60 | marginTop: 5, | 64 | marginTop: 5, |
61 | } | 65 | }, |
62 | }, | 66 | }, |
63 | popup: { | 67 | popup: { |
64 | opacity: 0, | 68 | opacity: 0, |
@@ -153,9 +157,13 @@ class SelectComponent extends Component<IProps> { | |||
153 | }; | 157 | }; |
154 | 158 | ||
155 | private componentRef = createRef<HTMLDivElement>(); | 159 | private componentRef = createRef<HTMLDivElement>(); |
160 | |||
156 | private inputRef = createRef<HTMLInputElement>(); | 161 | private inputRef = createRef<HTMLInputElement>(); |
162 | |||
157 | private searchInputRef = createRef<HTMLInputElement>(); | 163 | private searchInputRef = createRef<HTMLInputElement>(); |
164 | |||
158 | private scrollContainerRef = createRef<HTMLDivElement>(); | 165 | private scrollContainerRef = createRef<HTMLDivElement>(); |
166 | |||
159 | private activeOptionRef = createRef<HTMLDivElement>(); | 167 | private activeOptionRef = createRef<HTMLDivElement>(); |
160 | 168 | ||
161 | private keyListener: any; | 169 | private keyListener: any; |
@@ -168,7 +176,7 @@ class SelectComponent extends Component<IProps> { | |||
168 | } | 176 | } |
169 | } | 177 | } |
170 | 178 | ||
171 | componentDidUpdate(prevProps: IProps, prevState: IState) { | 179 | componentDidUpdate() { |
172 | const { open } = this.state; | 180 | const { open } = this.state; |
173 | 181 | ||
174 | if (this.searchInputRef && this.searchInputRef.current) { | 182 | if (this.searchInputRef && this.searchInputRef.current) { |
@@ -183,7 +191,9 @@ class SelectComponent extends Component<IProps> { | |||
183 | const { data } = this.props; | 191 | const { data } = this.props; |
184 | 192 | ||
185 | if (data) { | 193 | if (data) { |
186 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); | 194 | Object.keys(data).map( |
195 | key => (this.inputRef.current!.dataset[key] = data[key]), | ||
196 | ); | ||
187 | } | 197 | } |
188 | } | 198 | } |
189 | 199 | ||
@@ -194,7 +204,10 @@ class SelectComponent extends Component<IProps> { | |||
194 | const { value } = this.props; | 204 | const { value } = this.props; |
195 | 205 | ||
196 | if (this.componentRef && this.componentRef.current) { | 206 | if (this.componentRef && this.componentRef.current) { |
197 | this.componentRef.current.removeEventListener('keydown', this.keyListener); | 207 | this.componentRef.current.removeEventListener( |
208 | 'keydown', | ||
209 | this.keyListener, | ||
210 | ); | ||
198 | } | 211 | } |
199 | 212 | ||
200 | if (value) { | 213 | if (value) { |
@@ -210,13 +223,18 @@ class SelectComponent extends Component<IProps> { | |||
210 | window.removeEventListener('keydown', this.arrowKeysHandler.bind(this)); | 223 | window.removeEventListener('keydown', this.arrowKeysHandler.bind(this)); |
211 | } | 224 | } |
212 | 225 | ||
213 | setFilter(needle: string = '') { | 226 | setFilter(needle = '') { |
214 | const { options } = this.props; | 227 | const { options } = this.props; |
215 | 228 | ||
216 | let filteredOptions = {}; | 229 | let filteredOptions = {}; |
217 | if (needle) { | 230 | if (needle) { |
218 | Object.keys(options).map((key) => { | 231 | Object.keys(options).map(key => { |
219 | if (key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) || options[key].toLocaleLowerCase().startsWith(needle.toLocaleLowerCase())) { | 232 | if ( |
233 | key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) || | ||
234 | options[key] | ||
235 | .toLocaleLowerCase() | ||
236 | .startsWith(needle.toLocaleLowerCase()) | ||
237 | ) { | ||
220 | Object.assign(filteredOptions, { | 238 | Object.assign(filteredOptions, { |
221 | [`${key}`]: options[key], | 239 | [`${key}`]: options[key], |
222 | }); | 240 | }); |
@@ -234,7 +252,7 @@ class SelectComponent extends Component<IProps> { | |||
234 | } | 252 | } |
235 | 253 | ||
236 | select(key: string) { | 254 | select(key: string) { |
237 | this.setState((state: IState) => ({ | 255 | this.setState(() => ({ |
238 | value: key, | 256 | value: key, |
239 | open: false, | 257 | open: false, |
240 | })); | 258 | })); |
@@ -247,11 +265,7 @@ class SelectComponent extends Component<IProps> { | |||
247 | } | 265 | } |
248 | 266 | ||
249 | arrowKeysHandler(e: KeyboardEvent) { | 267 | arrowKeysHandler(e: KeyboardEvent) { |
250 | const { | 268 | const { selected, open, options } = this.state; |
251 | selected, | ||
252 | open, | ||
253 | options, | ||
254 | } = this.state; | ||
255 | 269 | ||
256 | if (!open) return; | 270 | if (!open) return; |
257 | 271 | ||
@@ -264,7 +278,10 @@ class SelectComponent extends Component<IProps> { | |||
264 | this.setState((state: IState) => ({ | 278 | this.setState((state: IState) => ({ |
265 | selected: state.selected - 1, | 279 | selected: state.selected - 1, |
266 | })); | 280 | })); |
267 | } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) { | 281 | } else if ( |
282 | e.keyCode === 40 && | ||
283 | selected < Object.keys(options!).length - 1 | ||
284 | ) { | ||
268 | this.setState((state: IState) => ({ | 285 | this.setState((state: IState) => ({ |
269 | selected: state.selected + 1, | 286 | selected: state.selected + 1, |
270 | })); | 287 | })); |
@@ -272,7 +289,12 @@ class SelectComponent extends Component<IProps> { | |||
272 | this.select(Object.keys(options!)[selected]); | 289 | this.select(Object.keys(options!)[selected]); |
273 | } | 290 | } |
274 | 291 | ||
275 | if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) { | 292 | if ( |
293 | this.activeOptionRef && | ||
294 | this.activeOptionRef.current && | ||
295 | this.scrollContainerRef && | ||
296 | this.scrollContainerRef.current | ||
297 | ) { | ||
276 | const containerTopOffset = this.scrollContainerRef.current.offsetTop; | 298 | const containerTopOffset = this.scrollContainerRef.current.offsetTop; |
277 | const optionTopOffset = this.activeOptionRef.current.offsetTop; | 299 | const optionTopOffset = this.activeOptionRef.current.offsetTop; |
278 | 300 | ||
@@ -282,10 +304,15 @@ class SelectComponent extends Component<IProps> { | |||
282 | } | 304 | } |
283 | } | 305 | } |
284 | 306 | ||
285 | switch (e.keyCode){ | 307 | switch (e.keyCode) { |
286 | case 37: case 39: case 38: case 40: // Arrow keys | 308 | case 37: |
287 | case 32: break; // Space | 309 | case 39: |
288 | default: break; // do not block other keys | 310 | case 38: |
311 | case 40: // Arrow keys | ||
312 | case 32: | ||
313 | break; // Space | ||
314 | default: | ||
315 | break; // do not block other keys | ||
289 | } | 316 | } |
290 | } | 317 | } |
291 | 318 | ||
@@ -307,13 +334,7 @@ class SelectComponent extends Component<IProps> { | |||
307 | required, | 334 | required, |
308 | } = this.props; | 335 | } = this.props; |
309 | 336 | ||
310 | const { | 337 | const { open, needle, value, selected, options } = this.state; |
311 | open, | ||
312 | needle, | ||
313 | value, | ||
314 | selected, | ||
315 | options, | ||
316 | } = this.state; | ||
317 | 338 | ||
318 | let selection = ''; | 339 | let selection = ''; |
319 | if (!value && defaultValue && options![defaultValue]) { | 340 | if (!value && defaultValue && options![defaultValue]) { |
@@ -325,10 +346,7 @@ class SelectComponent extends Component<IProps> { | |||
325 | } | 346 | } |
326 | 347 | ||
327 | return ( | 348 | return ( |
328 | <Wrapper | 349 | <Wrapper className={className} identifier="franz-select"> |
329 | className={className} | ||
330 | identifier="franz-select" | ||
331 | > | ||
332 | <Label | 350 | <Label |
333 | title={label} | 351 | title={label} |
334 | showLabel={showLabel} | 352 | showLabel={showLabel} |
@@ -345,14 +363,19 @@ class SelectComponent extends Component<IProps> { | |||
345 | > | 363 | > |
346 | <button | 364 | <button |
347 | type="button" | 365 | type="button" |
348 | className={classnames({ | 366 | className={classnames({ |
349 | [`${inputClassName}`]: inputClassName, | 367 | [`${inputClassName}`]: inputClassName, |
350 | [`${classes.select}`]: true, | 368 | [`${classes.select}`]: true, |
351 | [`${classes.hasError}`]: error, | 369 | [`${classes.hasError}`]: error, |
352 | })} | 370 | })} |
353 | onClick= {!disabled ? () => this.setState((state: IState) => ({ | 371 | onClick={ |
354 | open: !state.open, | 372 | !disabled |
355 | })) : () => {}} | 373 | ? () => |
374 | this.setState((state: IState) => ({ | ||
375 | open: !state.open, | ||
376 | })) | ||
377 | : () => {} | ||
378 | } | ||
356 | > | 379 | > |
357 | {selection} | 380 | {selection} |
358 | <Icon | 381 | <Icon |
@@ -366,10 +389,7 @@ class SelectComponent extends Component<IProps> { | |||
366 | </button> | 389 | </button> |
367 | {showSearch && open && ( | 390 | {showSearch && open && ( |
368 | <div className={classes.searchContainer}> | 391 | <div className={classes.searchContainer}> |
369 | <Icon | 392 | <Icon path={mdiMagnify} size={0.8} /> |
370 | path={mdiMagnify} | ||
371 | size={0.8} | ||
372 | /> | ||
373 | <input | 393 | <input |
374 | type="text" | 394 | type="text" |
375 | value={needle} | 395 | value={needle} |
@@ -384,10 +404,7 @@ class SelectComponent extends Component<IProps> { | |||
384 | className={classes.clearNeedle} | 404 | className={classes.clearNeedle} |
385 | onClick={() => this.setFilter()} | 405 | onClick={() => this.setFilter()} |
386 | > | 406 | > |
387 | <Icon | 407 | <Icon path={mdiCloseCircle} size={0.7} /> |
388 | path={mdiCloseCircle} | ||
389 | size={0.7} | ||
390 | /> | ||
391 | </button> | 408 | </button> |
392 | )} | 409 | )} |
393 | </div> | 410 | </div> |
@@ -399,7 +416,7 @@ class SelectComponent extends Component<IProps> { | |||
399 | })} | 416 | })} |
400 | ref={this.scrollContainerRef} | 417 | ref={this.scrollContainerRef} |
401 | > | 418 | > |
402 | {Object.keys(options!).map(((key, i) => ( | 419 | {Object.keys(options!).map((key, i) => ( |
403 | <div | 420 | <div |
404 | key={key} | 421 | key={key} |
405 | onClick={() => this.select(key)} | 422 | onClick={() => this.select(key)} |
@@ -413,7 +430,7 @@ class SelectComponent extends Component<IProps> { | |||
413 | > | 430 | > |
414 | {options![key]} | 431 | {options![key]} |
415 | </div> | 432 | </div> |
416 | )))} | 433 | ))} |
417 | </div> | 434 | </div> |
418 | </div> | 435 | </div> |
419 | <input | 436 | <input |
@@ -427,9 +444,7 @@ class SelectComponent extends Component<IProps> { | |||
427 | ref={this.inputRef} | 444 | ref={this.inputRef} |
428 | /> | 445 | /> |
429 | </Label> | 446 | </Label> |
430 | {error && ( | 447 | {error && <Error message={error} />} |
431 | <Error message={error} /> | ||
432 | )} | ||
433 | </Wrapper> | 448 | </Wrapper> |
434 | ); | 449 | ); |
435 | } | 450 | } |
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx index 31c572d1c..2d89d1c9f 100644 --- a/packages/forms/src/textarea/index.tsx +++ b/packages/forms/src/textarea/index.tsx | |||
@@ -14,7 +14,10 @@ interface IData { | |||
14 | [index: string]: string; | 14 | [index: string]: string; |
15 | } | 15 | } |
16 | 16 | ||
17 | interface IProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IFormField, IWithStyle { | 17 | interface IProps |
18 | extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, | ||
19 | IFormField, | ||
20 | IWithStyle { | ||
18 | focus?: boolean; | 21 | focus?: boolean; |
19 | data: IData; | 22 | data: IData; |
20 | textareaClassName?: string; | 23 | textareaClassName?: string; |
@@ -37,14 +40,14 @@ class TextareaComponent extends Component<IProps> { | |||
37 | const { data } = this.props; | 40 | const { data } = this.props; |
38 | 41 | ||
39 | if (this.textareaRef && this.textareaRef.current && data) { | 42 | if (this.textareaRef && this.textareaRef.current && data) { |
40 | Object.keys(data).map(key => this.textareaRef.current!.dataset[key] = data[key]); | 43 | Object.keys(data).map( |
44 | key => (this.textareaRef.current!.dataset[key] = data[key]), | ||
45 | ); | ||
41 | } | 46 | } |
42 | } | 47 | } |
43 | 48 | ||
44 | onChange(e: React.ChangeEvent<HTMLTextAreaElement>) { | 49 | onChange(e: React.ChangeEvent<HTMLTextAreaElement>) { |
45 | const { | 50 | const { onChange } = this.props; |
46 | onChange, | ||
47 | } = this.props; | ||
48 | 51 | ||
49 | if (onChange) { | 52 | if (onChange) { |
50 | onChange(e); | 53 | onChange(e); |
@@ -57,7 +60,6 @@ class TextareaComponent extends Component<IProps> { | |||
57 | className, | 60 | className, |
58 | disabled, | 61 | disabled, |
59 | error, | 62 | error, |
60 | focus, | ||
61 | id, | 63 | id, |
62 | textareaClassName, | 64 | textareaClassName, |
63 | label, | 65 | label, |
@@ -94,9 +96,9 @@ class TextareaComponent extends Component<IProps> { | |||
94 | [`${classes.wrapper}`]: true, | 96 | [`${classes.wrapper}`]: true, |
95 | [`${classes.disabled}`]: disabled, | 97 | [`${classes.disabled}`]: disabled, |
96 | [`${classes.hasError}`]: error, | 98 | [`${classes.hasError}`]: error, |
97 | })}> | 99 | })} |
100 | > | ||
98 | <textarea | 101 | <textarea |
99 | autoFocus={focus} | ||
100 | id={id} | 102 | id={id} |
101 | name={name} | 103 | name={name} |
102 | placeholder={placeholder} | 104 | placeholder={placeholder} |
@@ -115,9 +117,7 @@ class TextareaComponent extends Component<IProps> { | |||
115 | </textarea> | 117 | </textarea> |
116 | </div> | 118 | </div> |
117 | </Label> | 119 | </Label> |
118 | {error && ( | 120 | {error && <Error message={error} />} |
119 | <Error message={error} /> | ||
120 | )} | ||
121 | </Wrapper> | 121 | </Wrapper> |
122 | ); | 122 | ); |
123 | } | 123 | } |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index b146236df..a9970c8f1 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -3,7 +3,7 @@ import { Property } from 'csstype'; | |||
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 { IFormField, IWithStyle, Omit } from '../typings/generic'; | 6 | import { IFormField, IWithStyle } from '../typings/generic'; |
7 | import { Theme } from '../../../theme'; | 7 | import { Theme } from '../../../theme'; |
8 | 8 | ||
9 | import { Error } from '../error'; | 9 | import { Error } from '../error'; |
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx index cf179bc5e..3ae551e2c 100644 --- a/packages/forms/src/wrapper/index.tsx +++ b/packages/forms/src/wrapper/index.tsx | |||
@@ -12,18 +12,13 @@ interface IProps extends IWithStyle { | |||
12 | 12 | ||
13 | const styles = { | 13 | const styles = { |
14 | container: { | 14 | container: { |
15 | marginBottom: (props: IProps) => props.noMargin ? 0 : 20, | 15 | marginBottom: (props: IProps) => (props.noMargin ? 0 : 20), |
16 | }, | 16 | }, |
17 | }; | 17 | }; |
18 | 18 | ||
19 | class WrapperComponent extends Component<IProps> { | 19 | class WrapperComponent extends Component<IProps> { |
20 | render() { | 20 | render() { |
21 | const { | 21 | const { children, classes, className, identifier } = this.props; |
22 | children, | ||
23 | classes, | ||
24 | className, | ||
25 | identifier, | ||
26 | } = this.props; | ||
27 | 22 | ||
28 | return ( | 23 | return ( |
29 | <div | 24 | <div |
diff --git a/packages/forms/tslint.json b/packages/forms/tslint.json deleted file mode 100644 index 0946f2096..000000000 --- a/packages/forms/tslint.json +++ /dev/null | |||
@@ -1,3 +0,0 @@ | |||
1 | { | ||
2 | "extends": "../../tslint.json" | ||
3 | } | ||
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 94df5afd1..5ba225e51 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts | |||
@@ -9,11 +9,13 @@ export enum ThemeType { | |||
9 | 9 | ||
10 | export const DEFAULT_ACCENT_COLOR = themeBrandPrimary; | 10 | export const DEFAULT_ACCENT_COLOR = themeBrandPrimary; |
11 | 11 | ||
12 | export function theme(themeId: ThemeType, | 12 | export function theme( |
13 | brandColor: string = DEFAULT_ACCENT_COLOR) { | 13 | themeId: ThemeType, |
14 | return themeId === ThemeType.dark ? | 14 | brandColor: string = DEFAULT_ACCENT_COLOR, |
15 | makeDarkThemeConfig(brandColor) : | 15 | ) { |
16 | makeDefaultThemeConfig(brandColor); | 16 | return themeId === ThemeType.dark |
17 | ? makeDarkThemeConfig(brandColor) | ||
18 | : makeDefaultThemeConfig(brandColor); | ||
17 | } | 19 | } |
18 | 20 | ||
19 | const defaultThemeConfigWithDefaultAccentColor = | 21 | const defaultThemeConfigWithDefaultAccentColor = |
diff --git a/packages/theme/src/themes/IStyleTypes.ts b/packages/theme/src/themes/IStyleTypes.ts index df5b51c1d..cf8bdea33 100644 --- a/packages/theme/src/themes/IStyleTypes.ts +++ b/packages/theme/src/themes/IStyleTypes.ts | |||
@@ -1,4 +1,3 @@ | |||
1 | |||
2 | export default interface IStyleTypes { | 1 | export default interface IStyleTypes { |
3 | [index: string]: { | 2 | [index: string]: { |
4 | accent: string; | 3 | accent: string; |
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index c8ad78829..7d7bab399 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -18,7 +18,9 @@ export default (brandPrimary: string) => { | |||
18 | const inputColor = legacyStyles.darkThemeGrayLightest; | 18 | const inputColor = legacyStyles.darkThemeGrayLightest; |
19 | const inputBackground = legacyStyles.themeGrayDark; | 19 | const inputBackground = legacyStyles.themeGrayDark; |
20 | const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | 20 | const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; |
21 | const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | 21 | const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter) |
22 | .lighten(0.3) | ||
23 | .hex(); | ||
22 | const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | 24 | const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; |
23 | const selectColor = inputColor; | 25 | const selectColor = inputColor; |
24 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | 26 | const drawerBg = color(colorBackground).lighten(0.3).hex(); |
@@ -47,7 +49,10 @@ export default (brandPrimary: string) => { | |||
47 | 49 | ||
48 | // Loader | 50 | // Loader |
49 | colorFullscreenLoaderSpinner: '#FFF', | 51 | colorFullscreenLoaderSpinner: '#FFF', |
50 | colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(), | 52 | colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest) |
53 | .alpha(0.5) | ||
54 | .rgb() | ||
55 | .string(), | ||
51 | 56 | ||
52 | // Input | 57 | // Input |
53 | labelColor: legacyStyles.darkThemeTextColor, | 58 | labelColor: legacyStyles.darkThemeTextColor, |
@@ -58,8 +63,12 @@ export default (brandPrimary: string) => { | |||
58 | inputPrefixBackground: legacyStyles.darkThemeGray, | 63 | inputPrefixBackground: legacyStyles.darkThemeGray, |
59 | inputDisabledOpacity: 0.5, | 64 | inputDisabledOpacity: 0.5, |
60 | inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, | 65 | inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, |
61 | inputModifierColor: color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(), | 66 | inputModifierColor: color(legacyStyles.darkThemeGrayLighter) |
62 | inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(), | 67 | .lighten(0.3) |
68 | .hex(), | ||
69 | inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter) | ||
70 | .darken(0.1) | ||
71 | .hex(), | ||
63 | 72 | ||
64 | // Toggle | 73 | // Toggle |
65 | toggleBackground: legacyStyles.darkThemeGray, | 74 | toggleBackground: legacyStyles.darkThemeGray, |
@@ -91,13 +100,20 @@ export default (brandPrimary: string) => { | |||
91 | selectToggleColor: inputPrefixColor, | 100 | selectToggleColor: inputPrefixColor, |
92 | selectPopupBackground: legacyStyles.darkThemeGrayLight, | 101 | selectPopupBackground: legacyStyles.darkThemeGrayLight, |
93 | selectOptionColor: '#FFF', | 102 | selectOptionColor: '#FFF', |
94 | selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`, | 103 | selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight) |
95 | selectOptionItemHover: color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(), | 104 | .darken(0.2) |
105 | .hex()}`, | ||
106 | selectOptionItemHover: color(legacyStyles.darkThemeGrayLight) | ||
107 | .darken(0.2) | ||
108 | .hex(), | ||
96 | selectOptionItemHoverColor: selectColor, | 109 | selectOptionItemHoverColor: selectColor, |
97 | selectSearchColor: inputBackground, | 110 | selectSearchColor: inputBackground, |
98 | 111 | ||
99 | // Modal | 112 | // Modal |
100 | colorModalOverlayBackground: color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(), | 113 | colorModalOverlayBackground: color(legacyStyles.darkThemeBlack) |
114 | .alpha(0.9) | ||
115 | .rgb() | ||
116 | .string(), | ||
101 | colorModalBackground: legacyStyles.darkThemeGrayDark, | 117 | colorModalBackground: legacyStyles.darkThemeGrayDark, |
102 | 118 | ||
103 | // Services | 119 | // Services |
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index b8f3e3201..21017bbe0 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -82,7 +82,10 @@ export default (brandPrimary: string) => { | |||
82 | 82 | ||
83 | colorText, | 83 | colorText, |
84 | 84 | ||
85 | defaultContentBorder: color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string(), | 85 | defaultContentBorder: color(legacyStyles.themeGrayLighter) |
86 | .darken(0.1) | ||
87 | .rgb() | ||
88 | .string(), | ||
86 | 89 | ||
87 | // Subscription Container Component | 90 | // Subscription Container Component |
88 | colorSubscriptionContainerBackground: 'none', | 91 | colorSubscriptionContainerBackground: 'none', |
@@ -94,7 +97,10 @@ export default (brandPrimary: string) => { | |||
94 | // Loader | 97 | // Loader |
95 | colorAppLoaderSpinner: '#FFF', | 98 | colorAppLoaderSpinner: '#FFF', |
96 | colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark, | 99 | colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark, |
97 | colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(), | 100 | colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter) |
101 | .alpha(0.8) | ||
102 | .rgb() | ||
103 | .string(), | ||
98 | 104 | ||
99 | // Input | 105 | // Input |
100 | labelColor: legacyStyles.themeGrayLight, | 106 | labelColor: legacyStyles.themeGrayLight, |
@@ -103,7 +109,9 @@ export default (brandPrimary: string) => { | |||
103 | inputBackground, | 109 | inputBackground, |
104 | inputBorder, | 110 | inputBorder, |
105 | inputModifierColor: legacyStyles.themeGrayLight, | 111 | inputModifierColor: legacyStyles.themeGrayLight, |
106 | inputPlaceholderColor: color(legacyStyles.themeGrayLight).lighten(0.3).hex(), | 112 | inputPlaceholderColor: color(legacyStyles.themeGrayLight) |
113 | .lighten(0.3) | ||
114 | .hex(), | ||
107 | inputPrefixColor, | 115 | inputPrefixColor, |
108 | inputPrefixBackground: legacyStyles.themeGrayLighter, | 116 | inputPrefixBackground: legacyStyles.themeGrayLighter, |
109 | inputDisabledOpacity, | 117 | inputDisabledOpacity, |
diff --git a/packages/theme/tslint.json b/packages/theme/tslint.json deleted file mode 100644 index 0946f2096..000000000 --- a/packages/theme/tslint.json +++ /dev/null | |||
@@ -1,3 +0,0 @@ | |||
1 | { | ||
2 | "extends": "../../tslint.json" | ||
3 | } | ||
diff --git a/packages/typings/types/react-loader.d.ts b/packages/typings/types/react-loader.d.ts index 8dc36b71f..728e3dfa0 100644 --- a/packages/typings/types/react-loader.d.ts +++ b/packages/typings/types/react-loader.d.ts | |||
@@ -36,7 +36,7 @@ interface LoaderProps extends LoaderOptions { | |||
36 | className?: string; | 36 | className?: string; |
37 | } | 37 | } |
38 | 38 | ||
39 | declare class ReactLoader extends Component<LoaderProps> { | 39 | declare class ReactLoader extends Component<LoaderProps> { |
40 | } | 40 | } |
41 | 41 | ||
42 | declare namespace ReactLoader { | 42 | declare namespace ReactLoader { |
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx index 73db47068..63d5d673a 100644 --- a/packages/ui/src/badge/ProBadge.tsx +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -3,7 +3,7 @@ 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 { Badge, Icon } from '../'; | 6 | import { Badge, Icon } from '..'; |
7 | import { Theme } from '../../../theme'; | 7 | import { Theme } from '../../../theme'; |
8 | import { IWithStyle } from '../typings/generic'; | 8 | import { IWithStyle } from '../typings/generic'; |
9 | 9 | ||
@@ -34,13 +34,8 @@ const styles = (theme: Theme) => ({ | |||
34 | 34 | ||
35 | class ProBadgeComponent extends Component<IProps> { | 35 | class ProBadgeComponent extends Component<IProps> { |
36 | render() { | 36 | render() { |
37 | const { | 37 | const { classes, badgeClasses, iconClasses, inverted, className } = |
38 | classes, | 38 | this.props; |
39 | badgeClasses, | ||
40 | iconClasses, | ||
41 | inverted, | ||
42 | className, | ||
43 | } = this.props; | ||
44 | 39 | ||
45 | return ( | 40 | return ( |
46 | <Badge | 41 | <Badge |
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx index 0ba383673..5dd735879 100644 --- a/packages/ui/src/badge/index.tsx +++ b/packages/ui/src/badge/index.tsx | |||
@@ -13,7 +13,7 @@ interface IProps extends IWithStyle { | |||
13 | 13 | ||
14 | const badgeStyles = (theme: Theme) => { | 14 | const badgeStyles = (theme: Theme) => { |
15 | const styles = {}; | 15 | const styles = {}; |
16 | Object.keys(theme.styleTypes).map((style) => { | 16 | Object.keys(theme.styleTypes).map(style => { |
17 | Object.assign(styles, { | 17 | Object.assign(styles, { |
18 | [style]: { | 18 | [style]: { |
19 | background: theme.styleTypes[style].accent, | 19 | background: theme.styleTypes[style].accent, |
@@ -51,12 +51,7 @@ class BadgeComponent extends Component<IProps> { | |||
51 | }; | 51 | }; |
52 | 52 | ||
53 | render() { | 53 | render() { |
54 | const { | 54 | const { classes, children, type, className } = this.props; |
55 | classes, | ||
56 | children, | ||
57 | type, | ||
58 | className, | ||
59 | } = this.props; | ||
60 | 55 | ||
61 | return ( | 56 | return ( |
62 | <div | 57 | <div |
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx index 11b6125cd..bf3d4418c 100644 --- a/packages/ui/src/headline/index.tsx +++ b/packages/ui/src/headline/index.tsx | |||
@@ -37,13 +37,7 @@ const styles = (theme: Theme) => ({ | |||
37 | 37 | ||
38 | class HeadlineComponent extends Component<IProps> { | 38 | class HeadlineComponent extends Component<IProps> { |
39 | render() { | 39 | render() { |
40 | const { | 40 | const { classes, level, className, children, id } = this.props; |
41 | classes, | ||
42 | level, | ||
43 | className, | ||
44 | children, | ||
45 | id, | ||
46 | } = this.props; | ||
47 | 41 | ||
48 | return React.createElement( | 42 | return React.createElement( |
49 | `h${level}`, | 43 | `h${level}`, |
@@ -63,7 +57,12 @@ class HeadlineComponent extends Component<IProps> { | |||
63 | 57 | ||
64 | const Headline = injectStyle(styles)(HeadlineComponent); | 58 | const Headline = injectStyle(styles)(HeadlineComponent); |
65 | 59 | ||
66 | const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => <Headline level={level} {...props}>{props.children}</Headline>; | 60 | const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => |
61 | ( | ||
62 | <Headline level={level} {...props}> | ||
63 | {props.children} | ||
64 | </Headline> | ||
65 | ); | ||
67 | 66 | ||
68 | export const H1 = createH(1); | 67 | export const H1 = createH(1); |
69 | export const H2 = createH(2); | 68 | export const H2 = createH(2); |
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx index ed55eccfe..b644a9234 100644 --- a/packages/ui/src/icon/index.tsx +++ b/packages/ui/src/icon/index.tsx | |||
@@ -24,12 +24,7 @@ class IconComponent extends Component<IProps> { | |||
24 | }; | 24 | }; |
25 | 25 | ||
26 | render() { | 26 | render() { |
27 | const { | 27 | const { classes, icon, size, className } = this.props; |
28 | classes, | ||
29 | icon, | ||
30 | size, | ||
31 | className, | ||
32 | } = this.props; | ||
33 | 28 | ||
34 | if (!icon) { | 29 | if (!icon) { |
35 | console.warn('No Icon specified'); | 30 | console.warn('No Icon specified'); |
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 | )} |
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx index e2701a8e9..244aa9dc9 100644 --- a/packages/ui/src/loader/index.tsx +++ b/packages/ui/src/loader/index.tsx | |||
@@ -3,7 +3,6 @@ import React, { Component } from 'react'; | |||
3 | import injectStyle, { withTheme } from 'react-jss'; | 3 | import injectStyle, { withTheme } from 'react-jss'; |
4 | import ReactLoader from 'react-loader'; | 4 | import ReactLoader from 'react-loader'; |
5 | 5 | ||
6 | import { Theme } from '../../../theme'; | ||
7 | import { IWithStyle } from '../typings/generic'; | 6 | import { IWithStyle } from '../typings/generic'; |
8 | 7 | ||
9 | interface IProps extends IWithStyle { | 8 | interface IProps extends IWithStyle { |
@@ -11,7 +10,7 @@ interface IProps extends IWithStyle { | |||
11 | color?: string; | 10 | color?: string; |
12 | } | 11 | } |
13 | 12 | ||
14 | const styles = (theme: Theme) => ({ | 13 | const styles = () => ({ |
15 | container: { | 14 | container: { |
16 | position: 'relative', | 15 | position: 'relative', |
17 | height: 60, | 16 | height: 60, |
@@ -20,12 +19,7 @@ const styles = (theme: Theme) => ({ | |||
20 | 19 | ||
21 | class LoaderComponent extends Component<IProps> { | 20 | class LoaderComponent extends Component<IProps> { |
22 | render() { | 21 | render() { |
23 | const { | 22 | const { classes, className, color, theme } = this.props; |
24 | classes, | ||
25 | className, | ||
26 | color, | ||
27 | theme, | ||
28 | } = this.props; | ||
29 | 23 | ||
30 | return ( | 24 | return ( |
31 | <div | 25 | <div |
diff --git a/packages/ui/tslint.json b/packages/ui/tslint.json deleted file mode 100644 index 0946f2096..000000000 --- a/packages/ui/tslint.json +++ /dev/null | |||
@@ -1,3 +0,0 @@ | |||
1 | { | ||
2 | "extends": "../../tslint.json" | ||
3 | } | ||