diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-07-02 19:49:55 -0600 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-03 07:19:55 +0530 |
commit | 33123c354b79f7951423dd75097b11e7eb075f99 (patch) | |
tree | 29f6e857f02d0e0fc67d89a657a54a865ed5538a /src/components/ui | |
parent | Minor refactoring to move all runtime configs from 'config.js' into 'environm... (diff) | |
download | ferdium-app-33123c354b79f7951423dd75097b11e7eb075f99.tar.gz ferdium-app-33123c354b79f7951423dd75097b11e7eb075f99.tar.zst ferdium-app-33123c354b79f7951423dd75097b11e7eb075f99.zip |
Upgrade various dependencies to latest part 2 (#1557)
* Upgrade various dependencies to latest, remove unnecessary electron-hunspell
- upgrade eslint and friends to latest
- remove deprecated 'node-sass' in favor of 'sass'
- disable new rules from 'eslint-config-airbnb' that are conflicting with current code style
- add workspace config for 'vscode' that silences 'experimentalDecorator' warning and forces 'prettier' to single quote
* Run yarn lint to autofix with new ruleset and worked down lint issues to zero
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/ImageUpload.js | 4 | ||||
-rw-r--r-- | src/components/ui/InfoBar.js | 25 | ||||
-rw-r--r-- | src/components/ui/Infobox.js | 33 | ||||
-rw-r--r-- | src/components/ui/Input.js | 54 | ||||
-rw-r--r-- | src/components/ui/Tabs/TabItem.js | 2 | ||||
-rw-r--r-- | src/components/ui/Tabs/Tabs.js | 8 |
6 files changed, 79 insertions, 47 deletions
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index e831eb47b..6a8c7645f 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -55,7 +55,7 @@ export default @observer class ImageUpload extends Component { | |||
55 | </label> | 55 | </label> |
56 | <div className="image-upload"> | 56 | <div className="image-upload"> |
57 | {(field.value && field.value !== 'delete') || this.state.path ? ( | 57 | {(field.value && field.value !== 'delete') || this.state.path ? ( |
58 | <Fragment> | 58 | <> |
59 | <div | 59 | <div |
60 | className="image-upload__preview" | 60 | className="image-upload__preview" |
61 | style={{ | 61 | style={{ |
@@ -80,7 +80,7 @@ export default @observer class ImageUpload extends Component { | |||
80 | </button> | 80 | </button> |
81 | <div className="image-upload__action-background" /> | 81 | <div className="image-upload__action-background" /> |
82 | </div> | 82 | </div> |
83 | </Fragment> | 83 | </> |
84 | ) : ( | 84 | ) : ( |
85 | <Dropzone | 85 | <Dropzone |
86 | ref={(node) => { | 86 | ref={(node) => { |
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js index 612399e9f..bd2af2296 100644 --- a/src/components/ui/InfoBar.js +++ b/src/components/ui/InfoBar.js | |||
@@ -3,11 +3,21 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import Loader from 'react-loader'; | 5 | import Loader from 'react-loader'; |
6 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | 7 | ||
7 | // import { oneOrManyChildElements } from '../../prop-types'; | 8 | // import { oneOrManyChildElements } from '../../prop-types'; |
8 | import Appear from './effects/Appear'; | 9 | import Appear from './effects/Appear'; |
9 | 10 | ||
10 | export default @observer class InfoBar extends Component { | 11 | const messages = defineMessages({ |
12 | hide: { | ||
13 | id: 'infobar.hide', | ||
14 | defaultMessage: '!!!Hide', | ||
15 | }, | ||
16 | }); | ||
17 | |||
18 | export default | ||
19 | @observer | ||
20 | class InfoBar extends Component { | ||
11 | static propTypes = { | 21 | static propTypes = { |
12 | // eslint-disable-next-line | 22 | // eslint-disable-next-line |
13 | children: PropTypes.any.isRequired, | 23 | children: PropTypes.any.isRequired, |
@@ -32,6 +42,10 @@ export default @observer class InfoBar extends Component { | |||
32 | onHide: () => null, | 42 | onHide: () => null, |
33 | }; | 43 | }; |
34 | 44 | ||
45 | static contextTypes = { | ||
46 | intl: intlShape, | ||
47 | }; | ||
48 | |||
35 | render() { | 49 | render() { |
36 | const { | 50 | const { |
37 | children, | 51 | children, |
@@ -45,6 +59,8 @@ export default @observer class InfoBar extends Component { | |||
45 | onHide, | 59 | onHide, |
46 | } = this.props; | 60 | } = this.props; |
47 | 61 | ||
62 | const { intl } = this.context; | ||
63 | |||
48 | let transitionName = 'slideUp'; | 64 | let transitionName = 'slideUp'; |
49 | if (position === 'top') { | 65 | if (position === 'top') { |
50 | transitionName = 'slideDown'; | 66 | transitionName = 'slideDown'; |
@@ -63,11 +79,7 @@ export default @observer class InfoBar extends Component { | |||
63 | <div className="info-bar__content"> | 79 | <div className="info-bar__content"> |
64 | {children} | 80 | {children} |
65 | {ctaLabel && ( | 81 | {ctaLabel && ( |
66 | <button | 82 | <button type="button" className="info-bar__cta" onClick={onClick}> |
67 | type="button" | ||
68 | className="info-bar__cta" | ||
69 | onClick={onClick} | ||
70 | > | ||
71 | <Loader | 83 | <Loader |
72 | loaded={!ctaLoading} | 84 | loaded={!ctaLoading} |
73 | lines={10} | 85 | lines={10} |
@@ -84,6 +96,7 @@ export default @observer class InfoBar extends Component { | |||
84 | type="button" | 96 | type="button" |
85 | className="info-bar__close mdi mdi-close" | 97 | className="info-bar__close mdi mdi-close" |
86 | onClick={onHide} | 98 | onClick={onHide} |
99 | aria-label={intl.formatMessage(messages.hide)} | ||
87 | /> | 100 | /> |
88 | )} | 101 | )} |
89 | </Appear> | 102 | </Appear> |
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js index 0917ee9f0..73b48b957 100644 --- a/src/components/ui/Infobox.js +++ b/src/components/ui/Infobox.js | |||
@@ -3,8 +3,18 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import Loader from 'react-loader'; | 5 | import Loader from 'react-loader'; |
6 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | 7 | ||
7 | export default @observer class Infobox extends Component { | 8 | const messages = defineMessages({ |
9 | dismiss: { | ||
10 | id: 'infobox.dismiss', | ||
11 | defaultMessage: '!!!Dismiss', | ||
12 | }, | ||
13 | }); | ||
14 | |||
15 | export default | ||
16 | @observer | ||
17 | class Infobox extends Component { | ||
8 | static propTypes = { | 18 | static propTypes = { |
9 | children: PropTypes.any.isRequired, // eslint-disable-line | 19 | children: PropTypes.any.isRequired, // eslint-disable-line |
10 | icon: PropTypes.string, | 20 | icon: PropTypes.string, |
@@ -28,6 +38,10 @@ export default @observer class Infobox extends Component { | |||
28 | onSeen: () => null, | 38 | onSeen: () => null, |
29 | }; | 39 | }; |
30 | 40 | ||
41 | static contextTypes = { | ||
42 | intl: intlShape, | ||
43 | }; | ||
44 | |||
31 | state = { | 45 | state = { |
32 | dismissed: false, | 46 | dismissed: false, |
33 | }; | 47 | }; |
@@ -49,6 +63,8 @@ export default @observer class Infobox extends Component { | |||
49 | onDismiss, | 63 | onDismiss, |
50 | } = this.props; | 64 | } = this.props; |
51 | 65 | ||
66 | const { intl } = this.context; | ||
67 | |||
52 | if (this.state.dismissed) { | 68 | if (this.state.dismissed) { |
53 | return null; | 69 | return null; |
54 | } | 70 | } |
@@ -61,18 +77,10 @@ export default @observer class Infobox extends Component { | |||
61 | 'infobox--default': !type, | 77 | 'infobox--default': !type, |
62 | })} | 78 | })} |
63 | > | 79 | > |
64 | {icon && ( | 80 | {icon && <i className={`mdi mdi-${icon}`} />} |
65 | <i className={`mdi mdi-${icon}`} /> | 81 | <div className="infobox__content">{children}</div> |
66 | )} | ||
67 | <div className="infobox__content"> | ||
68 | {children} | ||
69 | </div> | ||
70 | {ctaLabel && ( | 82 | {ctaLabel && ( |
71 | <button | 83 | <button className="infobox__cta" onClick={ctaOnClick} type="button"> |
72 | className="infobox__cta" | ||
73 | onClick={ctaOnClick} | ||
74 | type="button" | ||
75 | > | ||
76 | <Loader | 84 | <Loader |
77 | loaded={!ctaLoading} | 85 | loaded={!ctaLoading} |
78 | lines={10} | 86 | lines={10} |
@@ -91,6 +99,7 @@ export default @observer class Infobox extends Component { | |||
91 | if (onDismiss) onDismiss(); | 99 | if (onDismiss) onDismiss(); |
92 | }} | 100 | }} |
93 | className="infobox__delete mdi mdi-close" | 101 | className="infobox__delete mdi mdi-close" |
102 | aria-label={intl.formatMessage(messages.dismiss)} | ||
94 | /> | 103 | /> |
95 | )} | 104 | )} |
96 | </div> | 105 | </div> |
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js index 4e3eb4ab8..7417fef1c 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.js | |||
@@ -3,10 +3,20 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | 4 | import { Field } from 'mobx-react-form'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | 7 | ||
7 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; | 8 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; |
8 | 9 | ||
9 | export default @observer class Input extends Component { | 10 | const messages = defineMessages({ |
11 | passwordToggle: { | ||
12 | id: 'settings.app.form.passwordToggle', | ||
13 | defaultMessage: '!!!Password toggle', | ||
14 | }, | ||
15 | }); | ||
16 | |||
17 | export default | ||
18 | @observer | ||
19 | class Input extends Component { | ||
10 | static propTypes = { | 20 | static propTypes = { |
11 | field: PropTypes.instanceOf(Field).isRequired, | 21 | field: PropTypes.instanceOf(Field).isRequired, |
12 | className: PropTypes.string, | 22 | className: PropTypes.string, |
@@ -28,10 +38,14 @@ export default @observer class Input extends Component { | |||
28 | suffix: '', | 38 | suffix: '', |
29 | }; | 39 | }; |
30 | 40 | ||
41 | static contextTypes = { | ||
42 | intl: intlShape, | ||
43 | }; | ||
44 | |||
31 | state = { | 45 | state = { |
32 | showPassword: false, | 46 | showPassword: false, |
33 | passwordScore: 0, | 47 | passwordScore: 0, |
34 | } | 48 | }; |
35 | 49 | ||
36 | inputElement = null; | 50 | inputElement = null; |
37 | 51 | ||
@@ -68,6 +82,8 @@ export default @observer class Input extends Component { | |||
68 | 82 | ||
69 | const { passwordScore } = this.state; | 83 | const { passwordScore } = this.state; |
70 | 84 | ||
85 | const { intl } = this.context; | ||
86 | |||
71 | let { type } = field; | 87 | let { type } = field; |
72 | if (type === 'password' && this.state.showPassword) { | 88 | if (type === 'password' && this.state.showPassword) { |
73 | type = 'text'; | 89 | type = 'text'; |
@@ -82,9 +98,7 @@ export default @observer class Input extends Component { | |||
82 | })} | 98 | })} |
83 | > | 99 | > |
84 | <div className="franz-form__input-wrapper"> | 100 | <div className="franz-form__input-wrapper"> |
85 | {prefix && ( | 101 | {prefix && <span className="franz-form__input-prefix">{prefix}</span>} |
86 | <span className="franz-form__input-prefix">{prefix}</span> | ||
87 | )} | ||
88 | <input | 102 | <input |
89 | id={field.id} | 103 | id={field.id} |
90 | type={type} | 104 | type={type} |
@@ -92,15 +106,15 @@ export default @observer class Input extends Component { | |||
92 | name={field.name} | 106 | name={field.name} |
93 | value={field.value} | 107 | value={field.value} |
94 | placeholder={field.placeholder} | 108 | placeholder={field.placeholder} |
95 | onChange={e => this.onChange(e)} | 109 | onChange={(e) => this.onChange(e)} |
96 | onBlur={field.onBlur} | 110 | onBlur={field.onBlur} |
97 | onFocus={field.onFocus} | 111 | onFocus={field.onFocus} |
98 | ref={(element) => { this.inputElement = element; }} | 112 | ref={(element) => { |
113 | this.inputElement = element; | ||
114 | }} | ||
99 | disabled={field.disabled} | 115 | disabled={field.disabled} |
100 | /> | 116 | /> |
101 | {suffix && ( | 117 | {suffix && <span className="franz-form__input-suffix">{suffix}</span>} |
102 | <span className="franz-form__input-suffix">{suffix}</span> | ||
103 | )} | ||
104 | {showPasswordToggle && ( | 118 | {showPasswordToggle && ( |
105 | <button | 119 | <button |
106 | type="button" | 120 | type="button" |
@@ -110,8 +124,11 @@ export default @observer class Input extends Component { | |||
110 | 'mdi-eye': !this.state.showPassword, | 124 | 'mdi-eye': !this.state.showPassword, |
111 | 'mdi-eye-off': this.state.showPassword, | 125 | 'mdi-eye-off': this.state.showPassword, |
112 | })} | 126 | })} |
113 | onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))} | 127 | onClick={() => this.setState((prevState) => ({ |
114 | tabIndex="-1" | 128 | showPassword: !prevState.showPassword, |
129 | }))} | ||
130 | tabIndex={-1} | ||
131 | aria-label={intl.formatMessage(messages.passwordToggle)} | ||
115 | /> | 132 | /> |
116 | )} | 133 | )} |
117 | {scorePassword && ( | 134 | {scorePassword && ( |
@@ -128,20 +145,11 @@ export default @observer class Input extends Component { | |||
128 | )} | 145 | )} |
129 | </div> | 146 | </div> |
130 | {field.label && showLabel && ( | 147 | {field.label && showLabel && ( |
131 | <label | 148 | <label className="franz-form__label" htmlFor={field.name}> |
132 | className="franz-form__label" | ||
133 | htmlFor={field.name} | ||
134 | > | ||
135 | {field.label} | 149 | {field.label} |
136 | </label> | 150 | </label> |
137 | )} | 151 | )} |
138 | {field.error && ( | 152 | {field.error && <div className="franz-form__error">{field.error}</div>} |
139 | <div | ||
140 | className="franz-form__error" | ||
141 | > | ||
142 | {field.error} | ||
143 | </div> | ||
144 | )} | ||
145 | </div> | 153 | </div> |
146 | ); | 154 | ); |
147 | } | 155 | } |
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js index 16881a7f7..546b05a4e 100644 --- a/src/components/ui/Tabs/TabItem.js +++ b/src/components/ui/Tabs/TabItem.js | |||
@@ -11,7 +11,7 @@ export default class TabItem extends Component { | |||
11 | const { children } = this.props; | 11 | const { children } = this.props; |
12 | 12 | ||
13 | return ( | 13 | return ( |
14 | <Fragment>{children}</Fragment> | 14 | <>{children}</> |
15 | ); | 15 | ); |
16 | } | 16 | } |
17 | } | 17 | } |
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js index 196cddc66..7ece29fbe 100644 --- a/src/components/ui/Tabs/Tabs.js +++ b/src/components/ui/Tabs/Tabs.js | |||
@@ -5,7 +5,9 @@ import classnames from 'classnames'; | |||
5 | 5 | ||
6 | import { oneOrManyChildElements } from '../../../prop-types'; | 6 | import { oneOrManyChildElements } from '../../../prop-types'; |
7 | 7 | ||
8 | export default @observer class Tab extends Component { | 8 | export default |
9 | @observer | ||
10 | class Tab extends Component { | ||
9 | static propTypes = { | 11 | static propTypes = { |
10 | children: oneOrManyChildElements.isRequired, | 12 | children: oneOrManyChildElements.isRequired, |
11 | active: PropTypes.number, | 13 | active: PropTypes.number, |
@@ -15,7 +17,7 @@ export default @observer class Tab extends Component { | |||
15 | active: 0, | 17 | active: 0, |
16 | }; | 18 | }; |
17 | 19 | ||
18 | componentWillMount() { | 20 | componentDidMount() { |
19 | this.setState({ active: this.props.active }); | 21 | this.setState({ active: this.props.active }); |
20 | } | 22 | } |
21 | 23 | ||
@@ -25,7 +27,7 @@ export default @observer class Tab extends Component { | |||
25 | 27 | ||
26 | render() { | 28 | render() { |
27 | const { children: childElements } = this.props; | 29 | const { children: childElements } = this.props; |
28 | const children = childElements.filter(c => !!c); | 30 | const children = childElements.filter((c) => !!c); |
29 | 31 | ||
30 | if (children.length === 1) { | 32 | if (children.length === 1) { |
31 | return <div>{children}</div>; | 33 | return <div>{children}</div>; |