diff options
author | 2021-09-13 14:45:46 +0200 | |
---|---|---|
committer | 2021-09-13 14:45:46 +0200 | |
commit | 537697a6e9757f118d09d9e76362ba1ff617e2c6 (patch) | |
tree | bc55447115e385137684e84697a8c15d2199b8d5 /src/components/ui | |
parent | Bumped up version to: 5.6.3-nightly.0 [skip ci] (diff) | |
download | ferdium-app-537697a6e9757f118d09d9e76362ba1ff617e2c6.tar.gz ferdium-app-537697a6e9757f118d09d9e76362ba1ff617e2c6.tar.zst ferdium-app-537697a6e9757f118d09d9e76362ba1ff617e2c6.zip |
chore: upgrade intl dependencies (#1920)
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/AppLoader/index.js | 10 | ||||
-rw-r--r-- | src/components/ui/Button.js | 14 | ||||
-rw-r--r-- | src/components/ui/FAB.js | 17 | ||||
-rw-r--r-- | src/components/ui/FeatureList.js | 44 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 23 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.js | 13 | ||||
-rw-r--r-- | src/components/ui/InfoBar.js | 13 | ||||
-rw-r--r-- | src/components/ui/Infobox.js | 13 | ||||
-rw-r--r-- | src/components/ui/Input.js | 25 | ||||
-rw-r--r-- | src/components/ui/Link.js | 14 | ||||
-rw-r--r-- | src/components/ui/Loader.js | 17 | ||||
-rw-r--r-- | src/components/ui/Modal/index.js | 19 | ||||
-rw-r--r-- | src/components/ui/Radio.js | 26 | ||||
-rw-r--r-- | src/components/ui/SearchInput.js | 30 | ||||
-rw-r--r-- | src/components/ui/Select.js | 30 | ||||
-rw-r--r-- | src/components/ui/Slider.js | 104 | ||||
-rw-r--r-- | src/components/ui/StatusBarTargetUrl.js | 14 | ||||
-rw-r--r-- | src/components/ui/Tabs/Tabs.js | 5 | ||||
-rw-r--r-- | src/components/ui/Toggle.js | 20 | ||||
-rw-r--r-- | src/components/ui/ToggleRaw.js | 20 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/index.js | 16 |
21 files changed, 234 insertions, 253 deletions
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js index bbfd5de28..fa4a719ab 100644 --- a/src/components/ui/AppLoader/index.js +++ b/src/components/ui/AppLoader/index.js | |||
@@ -19,7 +19,9 @@ const textList = shuffleArray([ | |||
19 | 'Fixing bugs', | 19 | 'Fixing bugs', |
20 | ]); | 20 | ]); |
21 | 21 | ||
22 | export default @injectSheet(styles) @withTheme class AppLoader extends Component { | 22 | @injectSheet(styles) |
23 | @withTheme | ||
24 | class AppLoader extends Component { | ||
23 | static propTypes = { | 25 | static propTypes = { |
24 | classes: PropTypes.object.isRequired, | 26 | classes: PropTypes.object.isRequired, |
25 | theme: PropTypes.object.isRequired, | 27 | theme: PropTypes.object.isRequired, |
@@ -28,7 +30,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
28 | 30 | ||
29 | static defaultProps = { | 31 | static defaultProps = { |
30 | texts: textList, | 32 | texts: textList, |
31 | } | 33 | }; |
32 | 34 | ||
33 | state = { | 35 | state = { |
34 | step: 0, | 36 | step: 0, |
@@ -38,7 +40,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
38 | 40 | ||
39 | componentDidMount() { | 41 | componentDidMount() { |
40 | this.interval = setInterval(() => { | 42 | this.interval = setInterval(() => { |
41 | this.setState((prevState) => ({ | 43 | this.setState(prevState => ({ |
42 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, | 44 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, |
43 | })); | 45 | })); |
44 | }, 2500); | 46 | }, 2500); |
@@ -73,3 +75,5 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
73 | ); | 75 | ); |
74 | } | 76 | } |
75 | } | 77 | } |
78 | |||
79 | export default AppLoader; | ||
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js index 5066b9c06..f6c9fd3d3 100644 --- a/src/components/ui/Button.js +++ b/src/components/ui/Button.js | |||
@@ -4,7 +4,9 @@ import { observer, inject } from 'mobx-react'; | |||
4 | import Loader from 'react-loader'; | 4 | import Loader from 'react-loader'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | 6 | ||
7 | export default @inject('stores') @observer class Button extends Component { | 7 | @inject('stores') |
8 | @observer | ||
9 | class Button extends Component { | ||
8 | static propTypes = { | 10 | static propTypes = { |
9 | className: PropTypes.string, | 11 | className: PropTypes.string, |
10 | label: PropTypes.string.isRequired, | 12 | label: PropTypes.string.isRequired, |
@@ -26,7 +28,7 @@ export default @inject('stores') @observer class Button extends Component { | |||
26 | static defaultProps = { | 28 | static defaultProps = { |
27 | className: null, | 29 | className: null, |
28 | disabled: false, | 30 | disabled: false, |
29 | onClick: () => { }, | 31 | onClick: () => {}, |
30 | type: 'button', | 32 | type: 'button', |
31 | buttonType: '', | 33 | buttonType: '', |
32 | loaded: true, | 34 | loaded: true, |
@@ -76,7 +78,11 @@ export default @inject('stores') @observer class Button extends Component { | |||
76 | loaded={loaded} | 78 | loaded={loaded} |
77 | lines={10} | 79 | lines={10} |
78 | scale={0.4} | 80 | scale={0.4} |
79 | color={buttonType !== 'secondary' ? '#FFF' : this.props.stores.settings.app.accentColor} | 81 | color={ |
82 | buttonType !== 'secondary' | ||
83 | ? '#FFF' | ||
84 | : this.props.stores.settings.app.accentColor | ||
85 | } | ||
80 | component="span" | 86 | component="span" |
81 | /> | 87 | /> |
82 | {label} | 88 | {label} |
@@ -85,3 +91,5 @@ export default @inject('stores') @observer class Button extends Component { | |||
85 | ); | 91 | ); |
86 | } | 92 | } |
87 | } | 93 | } |
94 | |||
95 | export default Button; | ||
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js index 633edbe2c..a3aa06bc9 100644 --- a/src/components/ui/FAB.js +++ b/src/components/ui/FAB.js | |||
@@ -8,7 +8,8 @@ import classnames from 'classnames'; | |||
8 | 8 | ||
9 | import { oneOrManyChildElements } from '../../prop-types'; | 9 | import { oneOrManyChildElements } from '../../prop-types'; |
10 | 10 | ||
11 | export default @observer class Button extends Component { | 11 | @observer |
12 | class Button extends Component { | ||
12 | static propTypes = { | 13 | static propTypes = { |
13 | className: PropTypes.string, | 14 | className: PropTypes.string, |
14 | disabled: PropTypes.bool, | 15 | disabled: PropTypes.bool, |
@@ -21,7 +22,7 @@ export default @observer class Button extends Component { | |||
21 | static defaultProps = { | 22 | static defaultProps = { |
22 | className: null, | 23 | className: null, |
23 | disabled: false, | 24 | disabled: false, |
24 | onClick: () => { }, | 25 | onClick: () => {}, |
25 | type: 'button', | 26 | type: 'button', |
26 | htmlForm: '', | 27 | htmlForm: '', |
27 | }; | 28 | }; |
@@ -29,14 +30,8 @@ export default @observer class Button extends Component { | |||
29 | element = null; | 30 | element = null; |
30 | 31 | ||
31 | render() { | 32 | render() { |
32 | const { | 33 | const { className, disabled, onClick, type, children, htmlForm } = |
33 | className, | 34 | this.props; |
34 | disabled, | ||
35 | onClick, | ||
36 | type, | ||
37 | children, | ||
38 | htmlForm, | ||
39 | } = this.props; | ||
40 | 35 | ||
41 | const buttonProps = { | 36 | const buttonProps = { |
42 | className: classnames({ | 37 | className: classnames({ |
@@ -66,3 +61,5 @@ export default @observer class Button extends Component { | |||
66 | ); | 61 | ); |
67 | } | 62 | } |
68 | } | 63 | } |
64 | |||
65 | export default Button; | ||
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js index cf2664830..14e7ec3c4 100644 --- a/src/components/ui/FeatureList.js +++ b/src/components/ui/FeatureList.js | |||
@@ -1,53 +1,53 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, injectIntl } from 'react-intl'; |
4 | 4 | ||
5 | import { FeatureItem } from './FeatureItem'; | 5 | import { FeatureItem } from './FeatureItem'; |
6 | 6 | ||
7 | const messages = defineMessages({ | 7 | const messages = defineMessages({ |
8 | availableRecipes: { | 8 | availableRecipes: { |
9 | id: 'pricing.features.recipes', | 9 | id: 'pricing.features.recipes', |
10 | defaultMessage: '!!!Choose from more than 70 Services', // TODO: Make this dynamic | 10 | defaultMessage: 'Choose from more than 70 Services', // TODO: Make this dynamic |
11 | }, | 11 | }, |
12 | accountSync: { | 12 | accountSync: { |
13 | id: 'pricing.features.accountSync', | 13 | id: 'pricing.features.accountSync', |
14 | defaultMessage: '!!!Account Synchronisation', | 14 | defaultMessage: 'Account Synchronisation', |
15 | }, | 15 | }, |
16 | desktopNotifications: { | 16 | desktopNotifications: { |
17 | id: 'pricing.features.desktopNotifications', | 17 | id: 'pricing.features.desktopNotifications', |
18 | defaultMessage: '!!!Desktop Notifications', | 18 | defaultMessage: 'Desktop Notifications', |
19 | }, | 19 | }, |
20 | unlimitedServices: { | 20 | unlimitedServices: { |
21 | id: 'pricing.features.unlimitedServices', | 21 | id: 'pricing.features.unlimitedServices', |
22 | defaultMessage: '!!!Add unlimited services', | 22 | defaultMessage: 'Add unlimited services', |
23 | }, | 23 | }, |
24 | spellchecker: { | 24 | spellchecker: { |
25 | id: 'pricing.features.spellchecker', | 25 | id: 'pricing.features.spellchecker', |
26 | defaultMessage: '!!!Spellchecker support', | 26 | defaultMessage: 'Spellchecker support', |
27 | }, | 27 | }, |
28 | workspaces: { | 28 | workspaces: { |
29 | id: 'pricing.features.workspaces', | 29 | id: 'pricing.features.workspaces', |
30 | defaultMessage: '!!!Workspaces', | 30 | defaultMessage: 'Workspaces', |
31 | }, | 31 | }, |
32 | customWebsites: { | 32 | customWebsites: { |
33 | id: 'pricing.features.customWebsites', | 33 | id: 'pricing.features.customWebsites', |
34 | defaultMessage: '!!!Add Custom Websites', | 34 | defaultMessage: 'Add Custom Websites', |
35 | }, | 35 | }, |
36 | onPremise: { | 36 | onPremise: { |
37 | id: 'pricing.features.onPremise', | 37 | id: 'pricing.features.onPremise', |
38 | defaultMessage: '!!!On-premise & other Hosted Services', | 38 | defaultMessage: 'On-premise & other Hosted Services', |
39 | }, | 39 | }, |
40 | thirdPartyServices: { | 40 | thirdPartyServices: { |
41 | id: 'pricing.features.thirdPartyServices', | 41 | id: 'pricing.features.thirdPartyServices', |
42 | defaultMessage: '!!!Install 3rd party services', | 42 | defaultMessage: 'Install 3rd party services', |
43 | }, | 43 | }, |
44 | serviceProxies: { | 44 | serviceProxies: { |
45 | id: 'pricing.features.serviceProxies', | 45 | id: 'pricing.features.serviceProxies', |
46 | defaultMessage: '!!!Service Proxies', | 46 | defaultMessage: 'Service Proxies', |
47 | }, | 47 | }, |
48 | teamManagement: { | 48 | teamManagement: { |
49 | id: 'pricing.features.teamManagement', | 49 | id: 'pricing.features.teamManagement', |
50 | defaultMessage: '!!!Team Management', | 50 | defaultMessage: 'Team Management', |
51 | }, | 51 | }, |
52 | }); | 52 | }); |
53 | 53 | ||
@@ -60,18 +60,11 @@ export class FeatureList extends Component { | |||
60 | static defaultProps = { | 60 | static defaultProps = { |
61 | className: '', | 61 | className: '', |
62 | featureClassName: '', | 62 | featureClassName: '', |
63 | } | ||
64 | |||
65 | static contextTypes = { | ||
66 | intl: intlShape, | ||
67 | }; | 63 | }; |
68 | 64 | ||
69 | render() { | 65 | render() { |
70 | const { | 66 | const { className, featureClassName } = this.props; |
71 | className, | 67 | const { intl } = this.props; |
72 | featureClassName, | ||
73 | } = this.props; | ||
74 | const { intl } = this.context; | ||
75 | 68 | ||
76 | const features = [ | 69 | const features = [ |
77 | messages.availableRecipes, | 70 | messages.availableRecipes, |
@@ -92,10 +85,15 @@ export class FeatureList extends Component { | |||
92 | 85 | ||
93 | return ( | 86 | return ( |
94 | <ul className={className}> | 87 | <ul className={className}> |
95 | {features.map((feature) => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)} | 88 | {features.map(feature => ( |
89 | <FeatureItem | ||
90 | name={intl.formatMessage(feature)} | ||
91 | className={featureClassName} | ||
92 | /> | ||
93 | ))} | ||
96 | </ul> | 94 | </ul> |
97 | ); | 95 | ); |
98 | } | 96 | } |
99 | } | 97 | } |
100 | 98 | ||
101 | export default FeatureList; | 99 | export default injectIntl(FeatureList); |
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js index 2952cd96b..ab5e2f365 100644 --- a/src/components/ui/FullscreenLoader/index.js +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -8,7 +8,10 @@ import Loader from '../Loader'; | |||
8 | 8 | ||
9 | import styles from './styles'; | 9 | import styles from './styles'; |
10 | 10 | ||
11 | export default @withTheme @injectSheet(styles) @observer class FullscreenLoader extends Component { | 11 | @withTheme |
12 | @injectSheet(styles) | ||
13 | @observer | ||
14 | class FullscreenLoader extends Component { | ||
12 | static propTypes = { | 15 | static propTypes = { |
13 | className: PropTypes.string, | 16 | className: PropTypes.string, |
14 | title: PropTypes.string.isRequired, | 17 | title: PropTypes.string.isRequired, |
@@ -25,14 +28,8 @@ export default @withTheme @injectSheet(styles) @observer class FullscreenLoader | |||
25 | }; | 28 | }; |
26 | 29 | ||
27 | render() { | 30 | render() { |
28 | const { | 31 | const { classes, title, children, spinnerColor, className, theme } = |
29 | classes, | 32 | this.props; |
30 | title, | ||
31 | children, | ||
32 | spinnerColor, | ||
33 | className, | ||
34 | theme, | ||
35 | } = this.props; | ||
36 | 33 | ||
37 | return ( | 34 | return ( |
38 | <div className={classes.wrapper}> | 35 | <div className={classes.wrapper}> |
@@ -44,13 +41,11 @@ export default @withTheme @injectSheet(styles) @observer class FullscreenLoader | |||
44 | > | 41 | > |
45 | <h1 className={classes.title}>{title}</h1> | 42 | <h1 className={classes.title}>{title}</h1> |
46 | <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} /> | 43 | <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} /> |
47 | {children && ( | 44 | {children && <div className={classes.content}>{children}</div>} |
48 | <div className={classes.content}> | ||
49 | {children} | ||
50 | </div> | ||
51 | )} | ||
52 | </div> | 45 | </div> |
53 | </div> | 46 | </div> |
54 | ); | 47 | ); |
55 | } | 48 | } |
56 | } | 49 | } |
50 | |||
51 | export default FullscreenLoader; | ||
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index bb4ea0565..8ea31ca40 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -6,7 +6,8 @@ import classnames from 'classnames'; | |||
6 | import Dropzone from 'react-dropzone'; | 6 | import Dropzone from 'react-dropzone'; |
7 | import { isWindows } from '../../environment'; | 7 | import { isWindows } from '../../environment'; |
8 | 8 | ||
9 | export default @observer class ImageUpload extends Component { | 9 | @observer |
10 | class ImageUpload extends Component { | ||
10 | static propTypes = { | 11 | static propTypes = { |
11 | field: PropTypes.instanceOf(Field).isRequired, | 12 | field: PropTypes.instanceOf(Field).isRequired, |
12 | className: PropTypes.string, | 13 | className: PropTypes.string, |
@@ -29,7 +30,7 @@ export default @observer class ImageUpload extends Component { | |||
29 | onDrop(acceptedFiles) { | 30 | onDrop(acceptedFiles) { |
30 | const { field } = this.props; | 31 | const { field } = this.props; |
31 | 32 | ||
32 | acceptedFiles.forEach((file) => { | 33 | acceptedFiles.forEach(file => { |
33 | const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; | 34 | const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; |
34 | this.setState({ | 35 | this.setState({ |
35 | path: imgPath, | 36 | path: imgPath, |
@@ -42,9 +43,7 @@ export default @observer class ImageUpload extends Component { | |||
42 | } | 43 | } |
43 | 44 | ||
44 | render() { | 45 | render() { |
45 | const { | 46 | const { field, className, multiple, textDelete, textUpload } = this.props; |
46 | field, className, multiple, textDelete, textUpload, | ||
47 | } = this.props; | ||
48 | 47 | ||
49 | const cssClasses = classnames({ | 48 | const cssClasses = classnames({ |
50 | 'image-upload__dropzone': true, | 49 | 'image-upload__dropzone': true, |
@@ -86,7 +85,7 @@ export default @observer class ImageUpload extends Component { | |||
86 | </> | 85 | </> |
87 | ) : ( | 86 | ) : ( |
88 | <Dropzone | 87 | <Dropzone |
89 | ref={(node) => { | 88 | ref={node => { |
90 | this.dropzoneRef = node; | 89 | this.dropzoneRef = node; |
91 | }} | 90 | }} |
92 | onDrop={this.onDrop.bind(this)} | 91 | onDrop={this.onDrop.bind(this)} |
@@ -107,3 +106,5 @@ export default @observer class ImageUpload extends Component { | |||
107 | ); | 106 | ); |
108 | } | 107 | } |
109 | } | 108 | } |
109 | |||
110 | export default ImageUpload; | ||
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js index bd2af2296..f5cbad48b 100644 --- a/src/components/ui/InfoBar.js +++ b/src/components/ui/InfoBar.js | |||
@@ -3,7 +3,7 @@ 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 | import { defineMessages, injectIntl } from 'react-intl'; |
7 | 7 | ||
8 | // import { oneOrManyChildElements } from '../../prop-types'; | 8 | // import { oneOrManyChildElements } from '../../prop-types'; |
9 | import Appear from './effects/Appear'; | 9 | import Appear from './effects/Appear'; |
@@ -11,11 +11,10 @@ import Appear from './effects/Appear'; | |||
11 | const messages = defineMessages({ | 11 | const messages = defineMessages({ |
12 | hide: { | 12 | hide: { |
13 | id: 'infobar.hide', | 13 | id: 'infobar.hide', |
14 | defaultMessage: '!!!Hide', | 14 | defaultMessage: 'Hide', |
15 | }, | 15 | }, |
16 | }); | 16 | }); |
17 | 17 | ||
18 | export default | ||
19 | @observer | 18 | @observer |
20 | class InfoBar extends Component { | 19 | class InfoBar extends Component { |
21 | static propTypes = { | 20 | static propTypes = { |
@@ -42,10 +41,6 @@ class InfoBar extends Component { | |||
42 | onHide: () => null, | 41 | onHide: () => null, |
43 | }; | 42 | }; |
44 | 43 | ||
45 | static contextTypes = { | ||
46 | intl: intlShape, | ||
47 | }; | ||
48 | |||
49 | render() { | 44 | render() { |
50 | const { | 45 | const { |
51 | children, | 46 | children, |
@@ -59,7 +54,7 @@ class InfoBar extends Component { | |||
59 | onHide, | 54 | onHide, |
60 | } = this.props; | 55 | } = this.props; |
61 | 56 | ||
62 | const { intl } = this.context; | 57 | const { intl } = this.props; |
63 | 58 | ||
64 | let transitionName = 'slideUp'; | 59 | let transitionName = 'slideUp'; |
65 | if (position === 'top') { | 60 | if (position === 'top') { |
@@ -103,3 +98,5 @@ class InfoBar extends Component { | |||
103 | ); | 98 | ); |
104 | } | 99 | } |
105 | } | 100 | } |
101 | |||
102 | export default injectIntl(InfoBar); | ||
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js index 73b48b957..13ae2303b 100644 --- a/src/components/ui/Infobox.js +++ b/src/components/ui/Infobox.js | |||
@@ -3,16 +3,15 @@ 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 | import { defineMessages, injectIntl } from 'react-intl'; |
7 | 7 | ||
8 | const messages = defineMessages({ | 8 | const messages = defineMessages({ |
9 | dismiss: { | 9 | dismiss: { |
10 | id: 'infobox.dismiss', | 10 | id: 'infobox.dismiss', |
11 | defaultMessage: '!!!Dismiss', | 11 | defaultMessage: 'Dismiss', |
12 | }, | 12 | }, |
13 | }); | 13 | }); |
14 | 14 | ||
15 | export default | ||
16 | @observer | 15 | @observer |
17 | class Infobox extends Component { | 16 | class Infobox extends Component { |
18 | static propTypes = { | 17 | static propTypes = { |
@@ -38,10 +37,6 @@ class Infobox extends Component { | |||
38 | onSeen: () => null, | 37 | onSeen: () => null, |
39 | }; | 38 | }; |
40 | 39 | ||
41 | static contextTypes = { | ||
42 | intl: intlShape, | ||
43 | }; | ||
44 | |||
45 | state = { | 40 | state = { |
46 | dismissed: false, | 41 | dismissed: false, |
47 | }; | 42 | }; |
@@ -63,7 +58,7 @@ class Infobox extends Component { | |||
63 | onDismiss, | 58 | onDismiss, |
64 | } = this.props; | 59 | } = this.props; |
65 | 60 | ||
66 | const { intl } = this.context; | 61 | const { intl } = this.props; |
67 | 62 | ||
68 | if (this.state.dismissed) { | 63 | if (this.state.dismissed) { |
69 | return null; | 64 | return null; |
@@ -106,3 +101,5 @@ class Infobox extends Component { | |||
106 | ); | 101 | ); |
107 | } | 102 | } |
108 | } | 103 | } |
104 | |||
105 | export default injectIntl(Infobox); | ||
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js index 7417fef1c..335367f03 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.js | |||
@@ -3,18 +3,17 @@ 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 | import { defineMessages, injectIntl } from 'react-intl'; |
7 | 7 | ||
8 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; | 8 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; |
9 | 9 | ||
10 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
11 | passwordToggle: { | 11 | passwordToggle: { |
12 | id: 'settings.app.form.passwordToggle', | 12 | id: 'settings.app.form.passwordToggle', |
13 | defaultMessage: '!!!Password toggle', | 13 | defaultMessage: 'Password toggle', |
14 | }, | 14 | }, |
15 | }); | 15 | }); |
16 | 16 | ||
17 | export default | ||
18 | @observer | 17 | @observer |
19 | class Input extends Component { | 18 | class Input extends Component { |
20 | static propTypes = { | 19 | static propTypes = { |
@@ -38,10 +37,6 @@ class Input extends Component { | |||
38 | suffix: '', | 37 | suffix: '', |
39 | }; | 38 | }; |
40 | 39 | ||
41 | static contextTypes = { | ||
42 | intl: intlShape, | ||
43 | }; | ||
44 | |||
45 | state = { | 40 | state = { |
46 | showPassword: false, | 41 | showPassword: false, |
47 | passwordScore: 0, | 42 | passwordScore: 0, |
@@ -82,7 +77,7 @@ class Input extends Component { | |||
82 | 77 | ||
83 | const { passwordScore } = this.state; | 78 | const { passwordScore } = this.state; |
84 | 79 | ||
85 | const { intl } = this.context; | 80 | const { intl } = this.props; |
86 | 81 | ||
87 | let { type } = field; | 82 | let { type } = field; |
88 | if (type === 'password' && this.state.showPassword) { | 83 | if (type === 'password' && this.state.showPassword) { |
@@ -106,10 +101,10 @@ class Input extends Component { | |||
106 | name={field.name} | 101 | name={field.name} |
107 | value={field.value} | 102 | value={field.value} |
108 | placeholder={field.placeholder} | 103 | placeholder={field.placeholder} |
109 | onChange={(e) => this.onChange(e)} | 104 | onChange={e => this.onChange(e)} |
110 | onBlur={field.onBlur} | 105 | onBlur={field.onBlur} |
111 | onFocus={field.onFocus} | 106 | onFocus={field.onFocus} |
112 | ref={(element) => { | 107 | ref={element => { |
113 | this.inputElement = element; | 108 | this.inputElement = element; |
114 | }} | 109 | }} |
115 | disabled={field.disabled} | 110 | disabled={field.disabled} |
@@ -124,9 +119,11 @@ class Input extends Component { | |||
124 | 'mdi-eye': !this.state.showPassword, | 119 | 'mdi-eye': !this.state.showPassword, |
125 | 'mdi-eye-off': this.state.showPassword, | 120 | 'mdi-eye-off': this.state.showPassword, |
126 | })} | 121 | })} |
127 | onClick={() => this.setState((prevState) => ({ | 122 | onClick={() => |
128 | showPassword: !prevState.showPassword, | 123 | this.setState(prevState => ({ |
129 | }))} | 124 | showPassword: !prevState.showPassword, |
125 | })) | ||
126 | } | ||
130 | tabIndex={-1} | 127 | tabIndex={-1} |
131 | aria-label={intl.formatMessage(messages.passwordToggle)} | 128 | aria-label={intl.formatMessage(messages.passwordToggle)} |
132 | /> | 129 | /> |
@@ -154,3 +151,5 @@ class Input extends Component { | |||
154 | ); | 151 | ); |
155 | } | 152 | } |
156 | } | 153 | } |
154 | |||
155 | export default injectIntl(Input); | ||
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js index 003211e5c..94db3f842 100644 --- a/src/components/ui/Link.js +++ b/src/components/ui/Link.js | |||
@@ -9,7 +9,9 @@ import { matchRoute } from '../../helpers/routing-helpers'; | |||
9 | import { openExternalUrl } from '../../helpers/url-helpers'; | 9 | import { openExternalUrl } from '../../helpers/url-helpers'; |
10 | 10 | ||
11 | // TODO: create container component for this component | 11 | // TODO: create container component for this component |
12 | export default @inject('stores') @observer class Link extends Component { | 12 | @inject('stores') |
13 | @observer | ||
14 | class Link extends Component { | ||
13 | onClick(e) { | 15 | onClick(e) { |
14 | if (this.props.disabled) { | 16 | if (this.props.disabled) { |
15 | e.preventDefault(); | 17 | e.preventDefault(); |
@@ -50,7 +52,7 @@ export default @inject('stores') @observer class Link extends Component { | |||
50 | href={router.history.createHref(to)} | 52 | href={router.history.createHref(to)} |
51 | className={linkClasses} | 53 | className={linkClasses} |
52 | style={style} | 54 | style={style} |
53 | onClick={(e) => this.onClick(e)} | 55 | onClick={e => this.onClick(e)} |
54 | > | 56 | > |
55 | {children} | 57 | {children} |
56 | </a> | 58 | </a> |
@@ -62,10 +64,8 @@ Link.wrappedComponent.propTypes = { | |||
62 | stores: PropTypes.shape({ | 64 | stores: PropTypes.shape({ |
63 | router: PropTypes.instanceOf(RouterStore).isRequired, | 65 | router: PropTypes.instanceOf(RouterStore).isRequired, |
64 | }).isRequired, | 66 | }).isRequired, |
65 | children: PropTypes.oneOfType([ | 67 | children: PropTypes.oneOfType([oneOrManyChildElements, PropTypes.string]) |
66 | oneOrManyChildElements, | 68 | .isRequired, |
67 | PropTypes.string, | ||
68 | ]).isRequired, | ||
69 | to: PropTypes.string.isRequired, | 69 | to: PropTypes.string.isRequired, |
70 | className: PropTypes.string, | 70 | className: PropTypes.string, |
71 | activeClassName: PropTypes.string, | 71 | activeClassName: PropTypes.string, |
@@ -83,3 +83,5 @@ Link.wrappedComponent.defaultProps = { | |||
83 | target: '', | 83 | target: '', |
84 | style: {}, | 84 | style: {}, |
85 | }; | 85 | }; |
86 | |||
87 | export default Link; | ||
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js index 4d7113aa1..46c1390bf 100644 --- a/src/components/ui/Loader.js +++ b/src/components/ui/Loader.js | |||
@@ -5,7 +5,9 @@ import Loader from 'react-loader'; | |||
5 | 5 | ||
6 | import { oneOrManyChildElements } from '../../prop-types'; | 6 | import { oneOrManyChildElements } from '../../prop-types'; |
7 | 7 | ||
8 | export default @inject('stores') @observer class LoaderComponent extends Component { | 8 | @inject('stores') |
9 | @observer | ||
10 | class LoaderComponent extends Component { | ||
9 | static propTypes = { | 11 | static propTypes = { |
10 | children: oneOrManyChildElements, | 12 | children: oneOrManyChildElements, |
11 | loaded: PropTypes.bool, | 13 | loaded: PropTypes.bool, |
@@ -28,13 +30,12 @@ export default @inject('stores') @observer class LoaderComponent extends Compone | |||
28 | }; | 30 | }; |
29 | 31 | ||
30 | render() { | 32 | render() { |
31 | const { | 33 | const { children, loaded, className } = this.props; |
32 | children, | ||
33 | loaded, | ||
34 | className, | ||
35 | } = this.props; | ||
36 | 34 | ||
37 | const color = this.props.color !== 'ACCENT' ? this.props.color : this.props.stores.settings.app.accentColor; | 35 | const color = |
36 | this.props.color !== 'ACCENT' | ||
37 | ? this.props.color | ||
38 | : this.props.stores.settings.app.accentColor; | ||
38 | 39 | ||
39 | return ( | 40 | return ( |
40 | <Loader | 41 | <Loader |
@@ -51,3 +52,5 @@ export default @inject('stores') @observer class LoaderComponent extends Compone | |||
51 | ); | 52 | ); |
52 | } | 53 | } |
53 | } | 54 | } |
55 | |||
56 | export default LoaderComponent; | ||
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js index a9fa0cd1b..9e6830b0c 100644 --- a/src/components/ui/Modal/index.js +++ b/src/components/ui/Modal/index.js | |||
@@ -10,7 +10,8 @@ import styles from './styles'; | |||
10 | 10 | ||
11 | // ReactModal.setAppElement('#root'); | 11 | // ReactModal.setAppElement('#root'); |
12 | 12 | ||
13 | export default @injectCSS(styles) class Modal extends Component { | 13 | @injectCSS(styles) |
14 | class Modal extends Component { | ||
14 | static propTypes = { | 15 | static propTypes = { |
15 | children: PropTypes.node.isRequired, | 16 | children: PropTypes.node.isRequired, |
16 | className: PropTypes.string, | 17 | className: PropTypes.string, |
@@ -20,14 +21,14 @@ export default @injectCSS(styles) class Modal extends Component { | |||
20 | close: PropTypes.func.isRequired, | 21 | close: PropTypes.func.isRequired, |
21 | shouldCloseOnOverlayClick: PropTypes.bool, | 22 | shouldCloseOnOverlayClick: PropTypes.bool, |
22 | showClose: PropTypes.bool, | 23 | showClose: PropTypes.bool, |
23 | } | 24 | }; |
24 | 25 | ||
25 | static defaultProps = { | 26 | static defaultProps = { |
26 | className: null, | 27 | className: null, |
27 | portal: 'modal-portal', | 28 | portal: 'modal-portal', |
28 | shouldCloseOnOverlayClick: false, | 29 | shouldCloseOnOverlayClick: false, |
29 | showClose: true, | 30 | showClose: true, |
30 | } | 31 | }; |
31 | 32 | ||
32 | render() { | 33 | render() { |
33 | const { | 34 | const { |
@@ -56,18 +57,14 @@ export default @injectCSS(styles) class Modal extends Component { | |||
56 | appElement={document.getElementById('root')} | 57 | appElement={document.getElementById('root')} |
57 | > | 58 | > |
58 | {showClose && close && ( | 59 | {showClose && close && ( |
59 | <button | 60 | <button type="button" className={classes.close} onClick={close}> |
60 | type="button" | ||
61 | className={classes.close} | ||
62 | onClick={close} | ||
63 | > | ||
64 | <Icon icon={mdiClose} size={1.5} /> | 61 | <Icon icon={mdiClose} size={1.5} /> |
65 | </button> | 62 | </button> |
66 | )} | 63 | )} |
67 | <div className={classes.content}> | 64 | <div className={classes.content}>{children}</div> |
68 | {children} | ||
69 | </div> | ||
70 | </ReactModal> | 65 | </ReactModal> |
71 | ); | 66 | ); |
72 | } | 67 | } |
73 | } | 68 | } |
69 | |||
70 | export default Modal; | ||
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js index e77714eb7..65a777ff1 100644 --- a/src/components/ui/Radio.js +++ b/src/components/ui/Radio.js | |||
@@ -4,7 +4,8 @@ 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 | 6 | ||
7 | export default @observer class Radio extends Component { | 7 | @observer |
8 | class Radio extends Component { | ||
8 | static propTypes = { | 9 | static propTypes = { |
9 | field: PropTypes.instanceOf(Field).isRequired, | 10 | field: PropTypes.instanceOf(Field).isRequired, |
10 | className: PropTypes.string, | 11 | className: PropTypes.string, |
@@ -31,11 +32,7 @@ export default @observer class Radio extends Component { | |||
31 | } | 32 | } |
32 | 33 | ||
33 | render() { | 34 | render() { |
34 | const { | 35 | const { field, className, showLabel } = this.props; |
35 | field, | ||
36 | className, | ||
37 | showLabel, | ||
38 | } = this.props; | ||
39 | 36 | ||
40 | return ( | 37 | return ( |
41 | <div | 38 | <div |
@@ -46,15 +43,12 @@ export default @observer class Radio extends Component { | |||
46 | })} | 43 | })} |
47 | > | 44 | > |
48 | {field.label && showLabel && ( | 45 | {field.label && showLabel && ( |
49 | <label | 46 | <label className="franz-form__label" htmlFor={field.name}> |
50 | className="franz-form__label" | ||
51 | htmlFor={field.name} | ||
52 | > | ||
53 | {field.label} | 47 | {field.label} |
54 | </label> | 48 | </label> |
55 | )} | 49 | )} |
56 | <div className="franz-form__radio-wrapper"> | 50 | <div className="franz-form__radio-wrapper"> |
57 | {field.options.map((type) => ( | 51 | {field.options.map(type => ( |
58 | <label | 52 | <label |
59 | key={type.value} | 53 | key={type.value} |
60 | htmlFor={`${field.id}-${type.value}`} | 54 | htmlFor={`${field.id}-${type.value}`} |
@@ -75,14 +69,10 @@ export default @observer class Radio extends Component { | |||
75 | </label> | 69 | </label> |
76 | ))} | 70 | ))} |
77 | </div> | 71 | </div> |
78 | {field.error && ( | 72 | {field.error && <div className="franz-form__error">{field.error}</div>} |
79 | <div | ||
80 | className="franz-form__error" | ||
81 | > | ||
82 | {field.error} | ||
83 | </div> | ||
84 | )} | ||
85 | </div> | 73 | </div> |
86 | ); | 74 | ); |
87 | } | 75 | } |
88 | } | 76 | } |
77 | |||
78 | export default Radio; | ||
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js index 0b25734dd..2d760beab 100644 --- a/src/components/ui/SearchInput.js +++ b/src/components/ui/SearchInput.js | |||
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react'; | |||
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import { debounce } from 'lodash'; | 5 | import { debounce } from 'lodash'; |
6 | 6 | ||
7 | export default @observer class SearchInput extends Component { | 7 | @observer |
8 | class SearchInput extends Component { | ||
8 | static propTypes = { | 9 | static propTypes = { |
9 | value: PropTypes.string, | 10 | value: PropTypes.string, |
10 | placeholder: PropTypes.string, | 11 | placeholder: PropTypes.string, |
@@ -27,7 +28,7 @@ export default @observer class SearchInput extends Component { | |||
27 | onChange: () => null, | 28 | onChange: () => null, |
28 | onReset: () => null, | 29 | onReset: () => null, |
29 | autoFocus: false, | 30 | autoFocus: false, |
30 | } | 31 | }; |
31 | 32 | ||
32 | input = null; | 33 | input = null; |
33 | 34 | ||
@@ -38,7 +39,10 @@ export default @observer class SearchInput extends Component { | |||
38 | value: props.value, | 39 | value: props.value, |
39 | }; | 40 | }; |
40 | 41 | ||
41 | this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay); | 42 | this.throttledOnChange = debounce( |
43 | this.throttledOnChange, | ||
44 | this.props.throttleDelay, | ||
45 | ); | ||
42 | } | 46 | } |
43 | 47 | ||
44 | componentDidMount() { | 48 | componentDidMount() { |
@@ -80,24 +84,18 @@ export default @observer class SearchInput extends Component { | |||
80 | const { value } = this.state; | 84 | const { value } = this.state; |
81 | 85 | ||
82 | return ( | 86 | return ( |
83 | <div | 87 | <div className={classnames([className, 'search-input'])}> |
84 | className={classnames([ | 88 | <label htmlFor={name} className="mdi mdi-magnify"> |
85 | className, | ||
86 | 'search-input', | ||
87 | ])} | ||
88 | > | ||
89 | <label | ||
90 | htmlFor={name} | ||
91 | className="mdi mdi-magnify" | ||
92 | > | ||
93 | <input | 89 | <input |
94 | name={name} | 90 | name={name} |
95 | id={name} | 91 | id={name} |
96 | type="text" | 92 | type="text" |
97 | placeholder={placeholder} | 93 | placeholder={placeholder} |
98 | value={value} | 94 | value={value} |
99 | onChange={(e) => this.onChange(e)} | 95 | onChange={e => this.onChange(e)} |
100 | ref={(ref) => { this.input = ref; }} | 96 | ref={ref => { |
97 | this.input = ref; | ||
98 | }} | ||
101 | /> | 99 | /> |
102 | </label> | 100 | </label> |
103 | {value.length > 0 && ( | 101 | {value.length > 0 && ( |
@@ -110,3 +108,5 @@ export default @observer class SearchInput extends Component { | |||
110 | ); | 108 | ); |
111 | } | 109 | } |
112 | } | 110 | } |
111 | |||
112 | export default SearchInput; | ||
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js index e7a5eafa8..15b4c28e7 100644 --- a/src/components/ui/Select.js +++ b/src/components/ui/Select.js | |||
@@ -4,7 +4,8 @@ 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 | 6 | ||
7 | export default @observer class Select extends Component { | 7 | @observer |
8 | class Select extends Component { | ||
8 | static propTypes = { | 9 | static propTypes = { |
9 | field: PropTypes.instanceOf(Field).isRequired, | 10 | field: PropTypes.instanceOf(Field).isRequired, |
10 | className: PropTypes.string, | 11 | className: PropTypes.string, |
@@ -43,13 +44,7 @@ export default @observer class Select extends Component { | |||
43 | } | 44 | } |
44 | 45 | ||
45 | render() { | 46 | render() { |
46 | const { | 47 | const { field, className, showLabel, disabled, multiple } = this.props; |
47 | field, | ||
48 | className, | ||
49 | showLabel, | ||
50 | disabled, | ||
51 | multiple, | ||
52 | } = this.props; | ||
53 | 48 | ||
54 | let selected = field.value; | 49 | let selected = field.value; |
55 | 50 | ||
@@ -74,15 +69,12 @@ export default @observer class Select extends Component { | |||
74 | })} | 69 | })} |
75 | > | 70 | > |
76 | {field.label && showLabel && ( | 71 | {field.label && showLabel && ( |
77 | <label | 72 | <label className="franz-form__label" htmlFor={field.name}> |
78 | className="franz-form__label" | ||
79 | htmlFor={field.name} | ||
80 | > | ||
81 | {field.label} | 73 | {field.label} |
82 | </label> | 74 | </label> |
83 | )} | 75 | )} |
84 | <select | 76 | <select |
85 | onChange={multiple ? (e) => this.multipleChange(e) : field.onChange} | 77 | onChange={multiple ? e => this.multipleChange(e) : field.onChange} |
86 | id={field.id} | 78 | id={field.id} |
87 | defaultValue={selected} | 79 | defaultValue={selected} |
88 | className="franz-form__select" | 80 | className="franz-form__select" |
@@ -90,7 +82,7 @@ export default @observer class Select extends Component { | |||
90 | multiple={multiple} | 82 | multiple={multiple} |
91 | ref={this.element} | 83 | ref={this.element} |
92 | > | 84 | > |
93 | {field.options.map((type) => ( | 85 | {field.options.map(type => ( |
94 | <option | 86 | <option |
95 | key={type.value} | 87 | key={type.value} |
96 | value={type.value} | 88 | value={type.value} |
@@ -100,14 +92,10 @@ export default @observer class Select extends Component { | |||
100 | </option> | 92 | </option> |
101 | ))} | 93 | ))} |
102 | </select> | 94 | </select> |
103 | {field.error && ( | 95 | {field.error && <div className="franz-form__error">{field.error}</div>} |
104 | <div | ||
105 | className="franz-form__error" | ||
106 | > | ||
107 | {field.error} | ||
108 | </div> | ||
109 | )} | ||
110 | </div> | 96 | </div> |
111 | ); | 97 | ); |
112 | } | 98 | } |
113 | } | 99 | } |
100 | |||
101 | export default Select; | ||
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js index f344449a0..6f17eae00 100644 --- a/src/components/ui/Slider.js +++ b/src/components/ui/Slider.js | |||
@@ -4,62 +4,64 @@ import { observer } from 'mobx-react'; | |||
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import { Field } from 'mobx-react-form'; | 5 | import { Field } from 'mobx-react-form'; |
6 | 6 | ||
7 | export default @observer class Slider extends Component { | 7 | @observer |
8 | static propTypes = { | 8 | class Slider extends Component { |
9 | field: PropTypes.instanceOf(Field).isRequired, | 9 | static propTypes = { |
10 | className: PropTypes.string, | 10 | field: PropTypes.instanceOf(Field).isRequired, |
11 | showLabel: PropTypes.bool, | 11 | className: PropTypes.string, |
12 | disabled: PropTypes.bool, | 12 | showLabel: PropTypes.bool, |
13 | }; | 13 | disabled: PropTypes.bool, |
14 | }; | ||
14 | 15 | ||
15 | static defaultProps = { | 16 | static defaultProps = { |
16 | className: '', | 17 | className: '', |
17 | showLabel: true, | 18 | showLabel: true, |
18 | disabled: false, | 19 | disabled: false, |
19 | }; | 20 | }; |
20 | 21 | ||
21 | onChange(e) { | 22 | onChange(e) { |
22 | const { field } = this.props; | 23 | const { field } = this.props; |
23 | 24 | ||
24 | field.onChange(e); | 25 | field.onChange(e); |
25 | } | 26 | } |
26 | |||
27 | render() { | ||
28 | const { | ||
29 | field, | ||
30 | className, | ||
31 | showLabel, | ||
32 | disabled, | ||
33 | } = this.props; | ||
34 | 27 | ||
35 | if (field.value === '' && field.default !== '') { | 28 | render() { |
36 | field.value = field.default; | 29 | const { field, className, showLabel, disabled } = this.props; |
37 | } | ||
38 | 30 | ||
39 | return ( | 31 | if (field.value === '' && field.default !== '') { |
40 | <div | 32 | field.value = field.default; |
41 | className={classnames([ | 33 | } |
42 | 'franz-form__field', | ||
43 | 'franz-form__slider-wrapper', | ||
44 | className, | ||
45 | ])} | ||
46 | > | ||
47 | <div className="slider-container"> | ||
48 | <input | ||
49 | className="slider" | ||
50 | type="range" | ||
51 | id={field.id} | ||
52 | name={field.name} | ||
53 | value={field.value} | ||
54 | min="1" | ||
55 | max="100" | ||
56 | onChange={(e) => (!disabled ? this.onChange(e) : null)} | ||
57 | /> | ||
58 | </div> | ||
59 | 34 | ||
60 | {field.error && <div className={field.error}>{field.error}</div>} | 35 | return ( |
61 | {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>} | 36 | <div |
37 | className={classnames([ | ||
38 | 'franz-form__field', | ||
39 | 'franz-form__slider-wrapper', | ||
40 | className, | ||
41 | ])} | ||
42 | > | ||
43 | <div className="slider-container"> | ||
44 | <input | ||
45 | className="slider" | ||
46 | type="range" | ||
47 | id={field.id} | ||
48 | name={field.name} | ||
49 | value={field.value} | ||
50 | min="1" | ||
51 | max="100" | ||
52 | onChange={e => (!disabled ? this.onChange(e) : null)} | ||
53 | /> | ||
62 | </div> | 54 | </div> |
63 | ); | 55 | |
64 | } | 56 | {field.error && <div className={field.error}>{field.error}</div>} |
57 | {field.label && showLabel && ( | ||
58 | <label className="franz-form__label" htmlFor={field.id}> | ||
59 | {field.label} | ||
60 | </label> | ||
61 | )} | ||
62 | </div> | ||
63 | ); | ||
64 | } | ||
65 | } | 65 | } |
66 | |||
67 | export default Slider; | ||
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js index 6fc50fe5c..ff4e8c795 100644 --- a/src/components/ui/StatusBarTargetUrl.js +++ b/src/components/ui/StatusBarTargetUrl.js | |||
@@ -5,7 +5,8 @@ import classnames from 'classnames'; | |||
5 | 5 | ||
6 | import Appear from './effects/Appear'; | 6 | import Appear from './effects/Appear'; |
7 | 7 | ||
8 | export default @observer class StatusBarTargetUrl extends Component { | 8 | @observer |
9 | class StatusBarTargetUrl extends Component { | ||
9 | static propTypes = { | 10 | static propTypes = { |
10 | className: PropTypes.string, | 11 | className: PropTypes.string, |
11 | text: PropTypes.string, | 12 | text: PropTypes.string, |
@@ -17,10 +18,7 @@ export default @observer class StatusBarTargetUrl extends Component { | |||
17 | }; | 18 | }; |
18 | 19 | ||
19 | render() { | 20 | render() { |
20 | const { | 21 | const { className, text } = this.props; |
21 | className, | ||
22 | text, | ||
23 | } = this.props; | ||
24 | 22 | ||
25 | return ( | 23 | return ( |
26 | <Appear | 24 | <Appear |
@@ -29,10 +27,10 @@ export default @observer class StatusBarTargetUrl extends Component { | |||
29 | [`${className}`]: true, | 27 | [`${className}`]: true, |
30 | })} | 28 | })} |
31 | > | 29 | > |
32 | <div className="status-bar-target-url__content"> | 30 | <div className="status-bar-target-url__content">{text}</div> |
33 | {text} | ||
34 | </div> | ||
35 | </Appear> | 31 | </Appear> |
36 | ); | 32 | ); |
37 | } | 33 | } |
38 | } | 34 | } |
35 | |||
36 | export default StatusBarTargetUrl; | ||
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js index 56c76f215..195398708 100644 --- a/src/components/ui/Tabs/Tabs.js +++ b/src/components/ui/Tabs/Tabs.js | |||
@@ -5,7 +5,6 @@ import classnames from 'classnames'; | |||
5 | 5 | ||
6 | import { oneOrManyChildElements } from '../../../prop-types'; | 6 | import { oneOrManyChildElements } from '../../../prop-types'; |
7 | 7 | ||
8 | export default | ||
9 | @observer | 8 | @observer |
10 | class Tab extends Component { | 9 | class Tab extends Component { |
11 | constructor(props) { | 10 | constructor(props) { |
@@ -28,7 +27,7 @@ class Tab extends Component { | |||
28 | 27 | ||
29 | render() { | 28 | render() { |
30 | const { children: childElements } = this.props; | 29 | const { children: childElements } = this.props; |
31 | const children = childElements.filter((c) => !!c); | 30 | const children = childElements.filter(c => !!c); |
32 | 31 | ||
33 | if (children.length === 1) { | 32 | if (children.length === 1) { |
34 | return <div>{children}</div>; | 33 | return <div>{children}</div>; |
@@ -69,3 +68,5 @@ class Tab extends Component { | |||
69 | ); | 68 | ); |
70 | } | 69 | } |
71 | } | 70 | } |
71 | |||
72 | export default Tab; | ||
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js index 14330e5c7..bd7bc242d 100644 --- a/src/components/ui/Toggle.js +++ b/src/components/ui/Toggle.js | |||
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react'; | |||
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import { Field } from 'mobx-react-form'; | 5 | import { Field } from 'mobx-react-form'; |
6 | 6 | ||
7 | export default @observer class Toggle extends Component { | 7 | @observer |
8 | class Toggle extends Component { | ||
8 | static propTypes = { | 9 | static propTypes = { |
9 | field: PropTypes.instanceOf(Field).isRequired, | 10 | field: PropTypes.instanceOf(Field).isRequired, |
10 | className: PropTypes.string, | 11 | className: PropTypes.string, |
@@ -25,12 +26,7 @@ export default @observer class Toggle extends Component { | |||
25 | } | 26 | } |
26 | 27 | ||
27 | render() { | 28 | render() { |
28 | const { | 29 | const { field, className, showLabel, disabled } = this.props; |
29 | field, | ||
30 | className, | ||
31 | showLabel, | ||
32 | disabled, | ||
33 | } = this.props; | ||
34 | 30 | ||
35 | if (field.value === '' && field.default !== '') { | 31 | if (field.value === '' && field.default !== '') { |
36 | field.value = field.default; | 32 | field.value = field.default; |
@@ -59,12 +55,18 @@ export default @observer class Toggle extends Component { | |||
59 | name={field.name} | 55 | name={field.name} |
60 | value={field.name} | 56 | value={field.name} |
61 | checked={field.value} | 57 | checked={field.value} |
62 | onChange={(e) => (!disabled ? this.onChange(e) : null)} | 58 | onChange={e => (!disabled ? this.onChange(e) : null)} |
63 | /> | 59 | /> |
64 | </label> | 60 | </label> |
65 | {field.error && <div className={field.error}>{field.error}</div>} | 61 | {field.error && <div className={field.error}>{field.error}</div>} |
66 | {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>} | 62 | {field.label && showLabel && ( |
63 | <label className="franz-form__label" htmlFor={field.id}> | ||
64 | {field.label} | ||
65 | </label> | ||
66 | )} | ||
67 | </div> | 67 | </div> |
68 | ); | 68 | ); |
69 | } | 69 | } |
70 | } | 70 | } |
71 | |||
72 | export default Toggle; | ||
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js index 4700127d4..1fde879ac 100644 --- a/src/components/ui/ToggleRaw.js +++ b/src/components/ui/ToggleRaw.js | |||
@@ -6,7 +6,8 @@ import PropTypes from 'prop-types'; | |||
6 | import { observer } from 'mobx-react'; | 6 | import { observer } from 'mobx-react'; |
7 | import classnames from 'classnames'; | 7 | import classnames from 'classnames'; |
8 | 8 | ||
9 | export default @observer class ToggleRaw extends Component { | 9 | @observer |
10 | class ToggleRaw extends Component { | ||
10 | static propTypes = { | 11 | static propTypes = { |
11 | onChange: PropTypes.func.isRequired, | 12 | onChange: PropTypes.func.isRequired, |
12 | field: PropTypes.shape({ | 13 | field: PropTypes.shape({ |
@@ -34,12 +35,7 @@ export default @observer class ToggleRaw extends Component { | |||
34 | } | 35 | } |
35 | 36 | ||
36 | render() { | 37 | render() { |
37 | const { | 38 | const { field, className, showLabel, disabled } = this.props; |
38 | field, | ||
39 | className, | ||
40 | showLabel, | ||
41 | disabled, | ||
42 | } = this.props; | ||
43 | 39 | ||
44 | return ( | 40 | return ( |
45 | <div | 41 | <div |
@@ -64,12 +60,18 @@ export default @observer class ToggleRaw extends Component { | |||
64 | name={field.name} | 60 | name={field.name} |
65 | value={field.name} | 61 | value={field.name} |
66 | checked={field.value} | 62 | checked={field.value} |
67 | onChange={(e) => (!disabled ? this.onChange(e) : null)} | 63 | onChange={e => (!disabled ? this.onChange(e) : null)} |
68 | /> | 64 | /> |
69 | </label> | 65 | </label> |
70 | {field.error && <div className={field.error}>{field.error}</div>} | 66 | {field.error && <div className={field.error}>{field.error}</div>} |
71 | {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>} | 67 | {field.label && showLabel && ( |
68 | <label className="franz-form__label" htmlFor={field.id}> | ||
69 | {field.label} | ||
70 | </label> | ||
71 | )} | ||
72 | </div> | 72 | </div> |
73 | ); | 73 | ); |
74 | } | 74 | } |
75 | } | 75 | } |
76 | |||
77 | export default ToggleRaw; | ||
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js index c58d69374..8f4499e7b 100644 --- a/src/components/ui/WebviewLoader/index.js +++ b/src/components/ui/WebviewLoader/index.js | |||
@@ -2,7 +2,7 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | 6 | ||
7 | import FullscreenLoader from '../FullscreenLoader'; | 7 | import FullscreenLoader from '../FullscreenLoader'; |
8 | import styles from './styles'; | 8 | import styles from './styles'; |
@@ -10,23 +10,21 @@ import styles from './styles'; | |||
10 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
11 | loading: { | 11 | loading: { |
12 | id: 'service.webviewLoader.loading', | 12 | id: 'service.webviewLoader.loading', |
13 | defaultMessage: '!!!Loading {service}', | 13 | defaultMessage: 'Loading {service}', |
14 | }, | 14 | }, |
15 | }); | 15 | }); |
16 | 16 | ||
17 | export default @injectSheet(styles) @observer class WebviewLoader extends Component { | 17 | @injectSheet(styles) |
18 | @observer | ||
19 | class WebviewLoader extends Component { | ||
18 | static propTypes = { | 20 | static propTypes = { |
19 | name: PropTypes.string.isRequired, | 21 | name: PropTypes.string.isRequired, |
20 | classes: PropTypes.object.isRequired, | 22 | classes: PropTypes.object.isRequired, |
21 | }; | 23 | }; |
22 | 24 | ||
23 | static contextTypes = { | ||
24 | intl: intlShape, | ||
25 | }; | ||
26 | |||
27 | render() { | 25 | render() { |
28 | const { classes, name } = this.props; | 26 | const { classes, name } = this.props; |
29 | const { intl } = this.context; | 27 | const { intl } = this.props; |
30 | return ( | 28 | return ( |
31 | <FullscreenLoader | 29 | <FullscreenLoader |
32 | className={classes.component} | 30 | className={classes.component} |
@@ -35,3 +33,5 @@ export default @injectSheet(styles) @observer class WebviewLoader extends Compon | |||
35 | ); | 33 | ); |
36 | } | 34 | } |
37 | } | 35 | } |
36 | |||
37 | export default injectIntl(WebviewLoader); | ||