diff options
author | 2021-12-04 10:51:16 +0100 | |
---|---|---|
committer | 2021-12-04 10:51:16 +0100 | |
commit | 11c992b04f3cad6badf0ae86da65f490e31dd359 (patch) | |
tree | 749e63f6ba3e9bea48c186b5d8502d328edfd276 /src/components/ui | |
parent | 5.6.4-nightly.24 [skip ci] (diff) | |
download | ferdium-app-11c992b04f3cad6badf0ae86da65f490e31dd359.tar.gz ferdium-app-11c992b04f3cad6badf0ae86da65f490e31dd359.tar.zst ferdium-app-11c992b04f3cad6badf0ae86da65f490e31dd359.zip |
chore: upgrade react-jss to latest (#2302)
Diffstat (limited to 'src/components/ui')
36 files changed, 111 insertions, 129 deletions
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx index c7c290a57..0bb9cb50f 100644 --- a/src/components/ui/AppLoader/index.tsx +++ b/src/components/ui/AppLoader/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import injectSheet, { withTheme } from 'react-jss'; | ||
3 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
4 | 3 | ||
4 | import injectStyle from 'react-jss'; | ||
5 | import FullscreenLoader from '../FullscreenLoader'; | 5 | import FullscreenLoader from '../FullscreenLoader'; |
6 | import { shuffleArray } from '../../../helpers/array-helpers'; | 6 | import { shuffleArray } from '../../../helpers/array-helpers'; |
7 | 7 | ||
@@ -24,8 +24,6 @@ type Props = { | |||
24 | texts: string[]; | 24 | texts: string[]; |
25 | }; | 25 | }; |
26 | 26 | ||
27 | @injectSheet(styles) | ||
28 | @withTheme | ||
29 | class AppLoader extends Component<Props> { | 27 | class AppLoader extends Component<Props> { |
30 | static defaultProps = { | 28 | static defaultProps = { |
31 | texts: textList, | 29 | texts: textList, |
@@ -77,4 +75,4 @@ class AppLoader extends Component<Props> { | |||
77 | } | 75 | } |
78 | } | 76 | } |
79 | 77 | ||
80 | export default AppLoader; | 78 | export default injectStyle(styles, { injectTheme: true })(AppLoader); |
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js index d90a8d62d..a52f1cadb 100644 --- a/src/components/ui/Button.js +++ b/src/components/ui/Button.js | |||
@@ -4,8 +4,6 @@ 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 | @inject('stores') | ||
8 | @observer | ||
9 | class Button extends Component { | 7 | class Button extends Component { |
10 | static propTypes = { | 8 | static propTypes = { |
11 | className: PropTypes.string, | 9 | className: PropTypes.string, |
@@ -90,4 +88,4 @@ class Button extends Component { | |||
90 | } | 88 | } |
91 | } | 89 | } |
92 | 90 | ||
93 | export default Button; | 91 | export default inject('stores')(observer(Button)); |
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx index 0d871e948..cb9c5f126 100644 --- a/src/components/ui/FAB.tsx +++ b/src/components/ui/FAB.tsx | |||
@@ -14,7 +14,6 @@ type Props = { | |||
14 | htmlForm: string; | 14 | htmlForm: string; |
15 | }; | 15 | }; |
16 | 16 | ||
17 | @observer | ||
18 | class Button extends Component<Props> { | 17 | class Button extends Component<Props> { |
19 | static defaultProps = { | 18 | static defaultProps = { |
20 | disabled: false, | 19 | disabled: false, |
@@ -46,4 +45,4 @@ class Button extends Component<Props> { | |||
46 | } | 45 | } |
47 | } | 46 | } |
48 | 47 | ||
49 | export default Button; | 48 | export default observer(Button); |
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js index f5943f3f3..39b6c5a4c 100644 --- a/src/components/ui/FullscreenLoader/index.js +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -1,16 +1,13 @@ | |||
1 | import { Component } from 'react'; | 1 | import { 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, { withTheme } from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | 6 | ||
7 | import Loader from '../Loader'; | 7 | import Loader from '../Loader'; |
8 | 8 | ||
9 | import styles from './styles'; | 9 | import styles from './styles'; |
10 | 10 | ||
11 | @withTheme | ||
12 | @injectSheet(styles) | ||
13 | @observer | ||
14 | class FullscreenLoader extends Component { | 11 | class FullscreenLoader extends Component { |
15 | static propTypes = { | 12 | static propTypes = { |
16 | className: PropTypes.string, | 13 | className: PropTypes.string, |
@@ -48,4 +45,6 @@ class FullscreenLoader extends Component { | |||
48 | } | 45 | } |
49 | } | 46 | } |
50 | 47 | ||
51 | export default FullscreenLoader; | 48 | export default injectStyle(styles, { injectTheme: true })( |
49 | observer(FullscreenLoader), | ||
50 | ); | ||
diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/ImageUpload.tsx index 52c097ef0..b07e211c2 100644 --- a/src/components/ui/ImageUpload.tsx +++ b/src/components/ui/ImageUpload.tsx | |||
@@ -15,7 +15,6 @@ type Props = { | |||
15 | textUpload: string; | 15 | textUpload: string; |
16 | }; | 16 | }; |
17 | 17 | ||
18 | @observer | ||
19 | class ImageUpload extends Component<Props> { | 18 | class ImageUpload extends Component<Props> { |
20 | static defaultProps = { | 19 | static defaultProps = { |
21 | multiple: false, | 20 | multiple: false, |
@@ -102,4 +101,4 @@ class ImageUpload extends Component<Props> { | |||
102 | } | 101 | } |
103 | } | 102 | } |
104 | 103 | ||
105 | export default ImageUpload; | 104 | export default observer(ImageUpload); |
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js index 89b085907..c1a6013c2 100644 --- a/src/components/ui/InfoBar.js +++ b/src/components/ui/InfoBar.js | |||
@@ -16,7 +16,6 @@ const messages = defineMessages({ | |||
16 | }, | 16 | }, |
17 | }); | 17 | }); |
18 | 18 | ||
19 | @observer | ||
20 | class InfoBar extends Component { | 19 | class InfoBar extends Component { |
21 | static propTypes = { | 20 | static propTypes = { |
22 | // eslint-disable-next-line react/forbid-prop-types | 21 | // eslint-disable-next-line react/forbid-prop-types |
@@ -102,4 +101,4 @@ class InfoBar extends Component { | |||
102 | } | 101 | } |
103 | } | 102 | } |
104 | 103 | ||
105 | export default injectIntl(InfoBar); | 104 | export default injectIntl(observer(InfoBar)); |
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js index c0ba8f13c..6634a6808 100644 --- a/src/components/ui/Infobox.js +++ b/src/components/ui/Infobox.js | |||
@@ -19,7 +19,6 @@ const messages = defineMessages({ | |||
19 | }, | 19 | }, |
20 | }); | 20 | }); |
21 | 21 | ||
22 | @observer | ||
23 | class Infobox extends Component { | 22 | class Infobox extends Component { |
24 | static propTypes = { | 23 | static propTypes = { |
25 | // eslint-disable-next-line react/forbid-prop-types | 24 | // eslint-disable-next-line react/forbid-prop-types |
@@ -112,4 +111,4 @@ class Infobox extends Component { | |||
112 | } | 111 | } |
113 | } | 112 | } |
114 | 113 | ||
115 | export default injectIntl(Infobox); | 114 | export default injectIntl(observer(Infobox)); |
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js index 8d37d7a05..fa1b44699 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.js | |||
@@ -5,7 +5,9 @@ import { Field } from 'mobx-react-form'; | |||
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | import { defineMessages, injectIntl } from 'react-intl'; | 6 | import { defineMessages, injectIntl } from 'react-intl'; |
7 | 7 | ||
8 | import { mdiEye, mdiEyeOff } from '@mdi/js'; | ||
8 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; | 9 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; |
10 | import { Icon } from './icon'; | ||
9 | 11 | ||
10 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
11 | passwordToggle: { | 13 | passwordToggle: { |
@@ -14,7 +16,6 @@ const messages = defineMessages({ | |||
14 | }, | 16 | }, |
15 | }); | 17 | }); |
16 | 18 | ||
17 | @observer | ||
18 | class Input extends Component { | 19 | class Input extends Component { |
19 | static propTypes = { | 20 | static propTypes = { |
20 | field: PropTypes.instanceOf(Field).isRequired, | 21 | field: PropTypes.instanceOf(Field).isRequired, |
@@ -115,9 +116,6 @@ class Input extends Component { | |||
115 | type="button" | 116 | type="button" |
116 | className={classnames({ | 117 | className={classnames({ |
117 | 'franz-form__input-modifier': true, | 118 | 'franz-form__input-modifier': true, |
118 | mdi: true, | ||
119 | 'mdi-eye': !this.state.showPassword, | ||
120 | 'mdi-eye-off': this.state.showPassword, | ||
121 | })} | 119 | })} |
122 | onClick={() => | 120 | onClick={() => |
123 | this.setState(prevState => ({ | 121 | this.setState(prevState => ({ |
@@ -126,7 +124,9 @@ class Input extends Component { | |||
126 | } | 124 | } |
127 | tabIndex={-1} | 125 | tabIndex={-1} |
128 | aria-label={intl.formatMessage(messages.passwordToggle)} | 126 | aria-label={intl.formatMessage(messages.passwordToggle)} |
129 | /> | 127 | > |
128 | <Icon icon={this.state.showPassword ? mdiEye : mdiEyeOff} /> | ||
129 | </button> | ||
130 | )} | 130 | )} |
131 | {scorePassword && ( | 131 | {scorePassword && ( |
132 | <div className="franz-form__password-score"> | 132 | <div className="franz-form__password-score"> |
@@ -152,4 +152,4 @@ class Input extends Component { | |||
152 | } | 152 | } |
153 | } | 153 | } |
154 | 154 | ||
155 | export default injectIntl(Input); | 155 | export default injectIntl(observer(Input)); |
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js index 40766c984..565547736 100644 --- a/src/components/ui/Link.js +++ b/src/components/ui/Link.js | |||
@@ -9,8 +9,6 @@ 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 | @inject('stores') | ||
13 | @observer | ||
14 | class Link extends Component { | 12 | class Link extends Component { |
15 | onClick(e) { | 13 | onClick(e) { |
16 | if (this.props.disabled) { | 14 | if (this.props.disabled) { |
@@ -60,7 +58,7 @@ class Link extends Component { | |||
60 | } | 58 | } |
61 | } | 59 | } |
62 | 60 | ||
63 | Link.wrappedComponent.propTypes = { | 61 | Link.propTypes = { |
64 | stores: PropTypes.shape({ | 62 | stores: PropTypes.shape({ |
65 | router: PropTypes.instanceOf(RouterStore).isRequired, | 63 | router: PropTypes.instanceOf(RouterStore).isRequired, |
66 | }).isRequired, | 64 | }).isRequired, |
@@ -75,7 +73,7 @@ Link.wrappedComponent.propTypes = { | |||
75 | disabled: PropTypes.bool, | 73 | disabled: PropTypes.bool, |
76 | }; | 74 | }; |
77 | 75 | ||
78 | Link.wrappedComponent.defaultProps = { | 76 | Link.defaultProps = { |
79 | className: '', | 77 | className: '', |
80 | activeClassName: '', | 78 | activeClassName: '', |
81 | strictFilter: false, | 79 | strictFilter: false, |
@@ -84,4 +82,4 @@ Link.wrappedComponent.defaultProps = { | |||
84 | style: {}, | 82 | style: {}, |
85 | }; | 83 | }; |
86 | 84 | ||
87 | export default Link; | 85 | export default inject('stores')(observer(Link)); |
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx index 1173c11e7..171d0e290 100644 --- a/src/components/ui/Loader.tsx +++ b/src/components/ui/Loader.tsx | |||
@@ -12,8 +12,6 @@ type Props = { | |||
12 | stores: FerdiStores; | 12 | stores: FerdiStores; |
13 | }; | 13 | }; |
14 | 14 | ||
15 | @inject('stores') | ||
16 | @observer | ||
17 | class LoaderComponent extends Component<Props> { | 15 | class LoaderComponent extends Component<Props> { |
18 | static defaultProps = { | 16 | static defaultProps = { |
19 | loaded: false, | 17 | loaded: false, |
@@ -43,4 +41,4 @@ class LoaderComponent extends Component<Props> { | |||
43 | } | 41 | } |
44 | } | 42 | } |
45 | 43 | ||
46 | export default LoaderComponent; | 44 | export default inject('stores')(observer(LoaderComponent)); |
diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx index f2f4461b8..c3c78b419 100644 --- a/src/components/ui/Modal/index.tsx +++ b/src/components/ui/Modal/index.tsx | |||
@@ -18,7 +18,6 @@ type Props = { | |||
18 | showClose: boolean; | 18 | showClose: boolean; |
19 | }; | 19 | }; |
20 | 20 | ||
21 | @injectCSS(styles) | ||
22 | class Modal extends Component<Props> { | 21 | class Modal extends Component<Props> { |
23 | static defaultProps = { | 22 | static defaultProps = { |
24 | className: null, | 23 | className: null, |
@@ -64,4 +63,4 @@ class Modal extends Component<Props> { | |||
64 | } | 63 | } |
65 | } | 64 | } |
66 | 65 | ||
67 | export default Modal; | 66 | export default injectCSS(styles)(Modal); |
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx index 594ea70e4..a033a5fe0 100644 --- a/src/components/ui/Radio.tsx +++ b/src/components/ui/Radio.tsx | |||
@@ -10,7 +10,6 @@ type Props = { | |||
10 | showLabel: boolean; | 10 | showLabel: boolean; |
11 | }; | 11 | }; |
12 | 12 | ||
13 | @observer | ||
14 | class Radio extends Component<Props> { | 13 | class Radio extends Component<Props> { |
15 | static defaultProps = { | 14 | static defaultProps = { |
16 | focus: false, | 15 | focus: false, |
@@ -74,4 +73,4 @@ class Radio extends Component<Props> { | |||
74 | } | 73 | } |
75 | } | 74 | } |
76 | 75 | ||
77 | export default Radio; | 76 | export default observer(Radio); |
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx index 49a50a4a0..6a6a1692e 100644 --- a/src/components/ui/SearchInput.tsx +++ b/src/components/ui/SearchInput.tsx | |||
@@ -17,7 +17,6 @@ type Props = { | |||
17 | autoFocus: boolean; | 17 | autoFocus: boolean; |
18 | }; | 18 | }; |
19 | 19 | ||
20 | @observer | ||
21 | class SearchInput extends Component<Props> { | 20 | class SearchInput extends Component<Props> { |
22 | static defaultProps = { | 21 | static defaultProps = { |
23 | value: '', | 22 | value: '', |
@@ -115,4 +114,4 @@ class SearchInput extends Component<Props> { | |||
115 | } | 114 | } |
116 | } | 115 | } |
117 | 116 | ||
118 | export default SearchInput; | 117 | export default observer(SearchInput); |
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js index a560da332..0fc32e573 100644 --- a/src/components/ui/Select.js +++ b/src/components/ui/Select.js | |||
@@ -4,7 +4,6 @@ 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 | @observer | ||
8 | class Select extends Component { | 7 | class Select extends Component { |
9 | static propTypes = { | 8 | static propTypes = { |
10 | field: PropTypes.instanceOf(Field).isRequired, | 9 | field: PropTypes.instanceOf(Field).isRequired, |
@@ -98,4 +97,4 @@ class Select extends Component { | |||
98 | } | 97 | } |
99 | } | 98 | } |
100 | 99 | ||
101 | export default Select; | 100 | export default observer(Select); |
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js index f067f8955..d403d107d 100644 --- a/src/components/ui/ServiceIcon.js +++ b/src/components/ui/ServiceIcon.js | |||
@@ -24,8 +24,6 @@ const styles = theme => ({ | |||
24 | }, | 24 | }, |
25 | }); | 25 | }); |
26 | 26 | ||
27 | @injectSheet(styles) | ||
28 | @observer | ||
29 | class ServiceIcon extends Component { | 27 | class ServiceIcon extends Component { |
30 | static propTypes = { | 28 | static propTypes = { |
31 | classes: PropTypes.object.isRequired, | 29 | classes: PropTypes.object.isRequired, |
@@ -56,4 +54,6 @@ class ServiceIcon extends Component { | |||
56 | } | 54 | } |
57 | } | 55 | } |
58 | 56 | ||
59 | export default ServiceIcon; | 57 | export default injectSheet(styles, { injectTheme: true })( |
58 | observer(ServiceIcon), | ||
59 | ); | ||
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js index dea6e0563..a581e7a65 100644 --- a/src/components/ui/Slider.js +++ b/src/components/ui/Slider.js | |||
@@ -4,7 +4,6 @@ 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 | @observer | ||
8 | class Slider extends Component { | 7 | class Slider extends Component { |
9 | static propTypes = { | 8 | static propTypes = { |
10 | field: PropTypes.instanceOf(Field).isRequired, | 9 | field: PropTypes.instanceOf(Field).isRequired, |
@@ -64,4 +63,4 @@ class Slider extends Component { | |||
64 | } | 63 | } |
65 | } | 64 | } |
66 | 65 | ||
67 | export default Slider; | 66 | export default observer(Slider); |
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js index 38b436742..d8d329d52 100644 --- a/src/components/ui/StatusBarTargetUrl.js +++ b/src/components/ui/StatusBarTargetUrl.js | |||
@@ -5,7 +5,6 @@ import classnames from 'classnames'; | |||
5 | 5 | ||
6 | import Appear from './effects/Appear'; | 6 | import Appear from './effects/Appear'; |
7 | 7 | ||
8 | @observer | ||
9 | class StatusBarTargetUrl extends Component { | 8 | class StatusBarTargetUrl extends Component { |
10 | static propTypes = { | 9 | static propTypes = { |
11 | className: PropTypes.string, | 10 | className: PropTypes.string, |
@@ -33,4 +32,4 @@ class StatusBarTargetUrl extends Component { | |||
33 | } | 32 | } |
34 | } | 33 | } |
35 | 34 | ||
36 | export default StatusBarTargetUrl; | 35 | export default observer(StatusBarTargetUrl); |
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js index 77803974b..5d2da6293 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 | @observer | ||
9 | class Tab extends Component { | 8 | class Tab extends Component { |
10 | constructor(props) { | 9 | constructor(props) { |
11 | super(props); | 10 | super(props); |
@@ -69,4 +68,4 @@ class Tab extends Component { | |||
69 | } | 68 | } |
70 | } | 69 | } |
71 | 70 | ||
72 | export default Tab; | 71 | export default observer(Tab); |
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js index dfc319735..a82be690e 100644 --- a/src/components/ui/Toggle.js +++ b/src/components/ui/Toggle.js | |||
@@ -4,7 +4,6 @@ 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 | @observer | ||
8 | class Toggle extends Component { | 7 | class Toggle extends Component { |
9 | static propTypes = { | 8 | static propTypes = { |
10 | field: PropTypes.instanceOf(Field).isRequired, | 9 | field: PropTypes.instanceOf(Field).isRequired, |
@@ -69,4 +68,4 @@ class Toggle extends Component { | |||
69 | } | 68 | } |
70 | } | 69 | } |
71 | 70 | ||
72 | export default Toggle; | 71 | export default observer(Toggle); |
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js index 74292a870..e482b97b4 100644 --- a/src/components/ui/ToggleRaw.js +++ b/src/components/ui/ToggleRaw.js | |||
@@ -6,7 +6,6 @@ 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 | @observer | ||
10 | class ToggleRaw extends Component { | 9 | class ToggleRaw extends Component { |
11 | static propTypes = { | 10 | static propTypes = { |
12 | onChange: PropTypes.func.isRequired, | 11 | onChange: PropTypes.func.isRequired, |
@@ -74,4 +73,4 @@ class ToggleRaw extends Component { | |||
74 | } | 73 | } |
75 | } | 74 | } |
76 | 75 | ||
77 | export default ToggleRaw; | 76 | export default observer(ToggleRaw); |
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js index 8d4513172..20945d191 100644 --- a/src/components/ui/WebviewLoader/index.js +++ b/src/components/ui/WebviewLoader/index.js | |||
@@ -14,8 +14,6 @@ const messages = defineMessages({ | |||
14 | }, | 14 | }, |
15 | }); | 15 | }); |
16 | 16 | ||
17 | @injectSheet(styles) | ||
18 | @observer | ||
19 | class WebviewLoader extends Component { | 17 | class WebviewLoader extends Component { |
20 | static propTypes = { | 18 | static propTypes = { |
21 | name: PropTypes.string.isRequired, | 19 | name: PropTypes.string.isRequired, |
@@ -34,4 +32,6 @@ class WebviewLoader extends Component { | |||
34 | } | 32 | } |
35 | } | 33 | } |
36 | 34 | ||
37 | export default injectIntl(WebviewLoader); | 35 | export default injectIntl( |
36 | injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)), | ||
37 | ); | ||
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx index dc1e76f7f..410748a64 100644 --- a/src/components/ui/badge/ProBadge.tsx +++ b/src/components/ui/badge/ProBadge.tsx | |||
@@ -1,14 +1,13 @@ | |||
1 | import { mdiStar } from '@mdi/js'; | 1 | import { mdiStar } from '@mdi/js'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import { Component } from 'react'; | 3 | import { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle, { WithStylesProps } from 'react-jss'; |
5 | 5 | ||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import { Icon } from '../icon'; | 7 | import { Icon } from '../icon'; |
8 | import { Badge } from './index'; | 8 | import { Badge } from './index'; |
9 | import { IWithStyle } from '../typings/generic'; | ||
10 | 9 | ||
11 | interface IProps extends IWithStyle { | 10 | interface IProps extends WithStylesProps<typeof styles> { |
12 | badgeClasses?: string; | 11 | badgeClasses?: string; |
13 | iconClasses?: string; | 12 | iconClasses?: string; |
14 | inverted?: boolean; | 13 | inverted?: boolean; |
@@ -61,4 +60,6 @@ class ProBadgeComponent extends Component<IProps> { | |||
61 | } | 60 | } |
62 | } | 61 | } |
63 | 62 | ||
64 | export const ProBadge = injectStyle(styles)(ProBadgeComponent); | 63 | export const ProBadge = injectStyle(styles, { injectTheme: true })( |
64 | ProBadgeComponent, | ||
65 | ); | ||
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx index 61bede937..a7ed866a5 100644 --- a/src/components/ui/badge/index.tsx +++ b/src/components/ui/badge/index.tsx | |||
@@ -1,11 +1,10 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component, ReactNode } from 'react'; | 2 | import { Component, ReactNode } from 'react'; |
3 | import injectStyle from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | 4 | ||
5 | import { Theme } from '../../../themes'; | 5 | import { Theme } from '../../../themes'; |
6 | import { IWithStyle } from '../typings/generic'; | ||
7 | 6 | ||
8 | interface IProps extends IWithStyle { | 7 | interface IProps extends WithStylesProps<typeof styles> { |
9 | type: string; | 8 | type: string; |
10 | className?: string; | 9 | className?: string; |
11 | children: ReactNode; | 10 | children: ReactNode; |
@@ -68,4 +67,4 @@ class BadgeComponent extends Component<IProps> { | |||
68 | } | 67 | } |
69 | } | 68 | } |
70 | 69 | ||
71 | export const Badge = injectStyle(styles)(BadgeComponent); | 70 | export const Badge = injectStyle(styles, { injectTheme: true })(BadgeComponent); |
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index 12e5e4449..d91b1ee19 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -2,11 +2,11 @@ import Icon from '@mdi/react'; | |||
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import { Property } from 'csstype'; | 3 | import { Property } from 'csstype'; |
4 | import { Component, MouseEvent } from 'react'; | 4 | import { Component, MouseEvent } from 'react'; |
5 | import injectStyle, { withTheme } from 'react-jss'; | 5 | import injectStyle, { WithStylesProps } from 'react-jss'; |
6 | import Loader from 'react-loader'; | 6 | import Loader from 'react-loader'; |
7 | 7 | ||
8 | import { Theme } from '../../../themes'; | 8 | import { Theme } from '../../../themes'; |
9 | import { IFormField, IWithStyle } from '../typings/generic'; | 9 | import { IFormField } from '../typings/generic'; |
10 | 10 | ||
11 | type ButtonType = | 11 | type ButtonType = |
12 | | 'primary' | 12 | | 'primary' |
@@ -16,7 +16,7 @@ type ButtonType = | |||
16 | | 'warning' | 16 | | 'warning' |
17 | | 'inverted'; | 17 | | 'inverted'; |
18 | 18 | ||
19 | interface IProps extends IFormField, IWithStyle { | 19 | interface IProps extends IFormField, WithStylesProps<typeof styles> { |
20 | className?: string; | 20 | className?: string; |
21 | disabled?: boolean; | 21 | disabled?: boolean; |
22 | id?: string; | 22 | id?: string; |
@@ -179,7 +179,7 @@ class ButtonComponent extends Component<IProps> { | |||
179 | const { | 179 | const { |
180 | classes, | 180 | classes, |
181 | className, | 181 | className, |
182 | theme, | 182 | // theme, |
183 | disabled, | 183 | disabled, |
184 | id, | 184 | id, |
185 | label, | 185 | label, |
@@ -213,7 +213,7 @@ class ButtonComponent extends Component<IProps> { | |||
213 | loaded={false} | 213 | loaded={false} |
214 | width={4} | 214 | width={4} |
215 | scale={0.45} | 215 | scale={0.45} |
216 | color={theme.buttonLoaderColor[buttonType!]} | 216 | // color={theme.buttonLoaderColor[buttonType!]} |
217 | parentClassName={classes.loader} | 217 | parentClassName={classes.loader} |
218 | /> | 218 | /> |
219 | )} | 219 | )} |
@@ -262,4 +262,6 @@ class ButtonComponent extends Component<IProps> { | |||
262 | } | 262 | } |
263 | } | 263 | } |
264 | 264 | ||
265 | export const Button = injectStyle(styles)(withTheme(ButtonComponent)); | 265 | export const Button = injectStyle(styles, { injectTheme: true })( |
266 | ButtonComponent, | ||
267 | ); | ||
diff --git a/src/components/ui/error/index.tsx b/src/components/ui/error/index.tsx index 8439bfc8b..ff3bc31c6 100644 --- a/src/components/ui/error/index.tsx +++ b/src/components/ui/error/index.tsx | |||
@@ -17,4 +17,4 @@ class ErrorComponent extends Component<IProps> { | |||
17 | } | 17 | } |
18 | } | 18 | } |
19 | 19 | ||
20 | export const Error = injectSheet(styles)(ErrorComponent); | 20 | export const Error = injectSheet(styles, { injectTheme: true })(ErrorComponent); |
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx index ea2949102..d9954c38f 100644 --- a/src/components/ui/headline/index.tsx +++ b/src/components/ui/headline/index.tsx | |||
@@ -1,11 +1,11 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component, createElement, ReactNode } from 'react'; | 2 | import { Component, createElement, ReactNode } from 'react'; |
3 | import injectStyle from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | 4 | ||
5 | import { Theme } from '../../../themes'; | 5 | import { Theme } from '../../../themes'; |
6 | import { IWithStyle, Omit } from '../typings/generic'; | 6 | import { Omit } from '../typings/generic'; |
7 | 7 | ||
8 | interface IProps extends IWithStyle { | 8 | interface IProps extends WithStylesProps<typeof styles> { |
9 | level?: number; | 9 | level?: number; |
10 | className?: string; | 10 | className?: string; |
11 | children: string | ReactNode; | 11 | children: string | ReactNode; |
@@ -55,9 +55,9 @@ class HeadlineComponent extends Component<IProps> { | |||
55 | } | 55 | } |
56 | } | 56 | } |
57 | 57 | ||
58 | const Headline = injectStyle(styles)(HeadlineComponent); | 58 | const Headline = injectStyle(styles, { injectTheme: true })(HeadlineComponent); |
59 | 59 | ||
60 | const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => | 60 | const createH = (level: number) => (props: Omit<IProps, 'classes'>) => |
61 | ( | 61 | ( |
62 | <Headline level={level} {...props}> | 62 | <Headline level={level} {...props}> |
63 | {props.children} | 63 | {props.children} |
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx index 85bb61d13..52f61d2d7 100644 --- a/src/components/ui/icon/index.tsx +++ b/src/components/ui/icon/index.tsx | |||
@@ -1,12 +1,11 @@ | |||
1 | import MdiIcon from '@mdi/react'; | 1 | import MdiIcon from '@mdi/react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import { Component } from 'react'; | 3 | import { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle, { WithStylesProps } from 'react-jss'; |
5 | 5 | ||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import { IWithStyle } from '../typings/generic'; | ||
8 | 7 | ||
9 | interface IProps extends IWithStyle { | 8 | interface IProps extends WithStylesProps<typeof styles> { |
10 | icon: string; | 9 | icon: string; |
11 | size?: number; | 10 | size?: number; |
12 | className?: string; | 11 | className?: string; |
@@ -43,4 +42,4 @@ class IconComponent extends Component<IProps> { | |||
43 | } | 42 | } |
44 | } | 43 | } |
45 | 44 | ||
46 | export const Icon = injectStyle(styles)(IconComponent); | 45 | export const Icon = injectStyle(styles, { injectTheme: true })(IconComponent); |
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx index 87940c4d4..7b2ce527b 100644 --- a/src/components/ui/infobox/index.tsx +++ b/src/components/ui/infobox/index.tsx | |||
@@ -1,13 +1,12 @@ | |||
1 | import { mdiClose } from '@mdi/js'; | 1 | import { mdiClose } from '@mdi/js'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import { Component, ReactNode } from 'react'; | 3 | import { Component, ReactNode } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle, { WithStylesProps } from 'react-jss'; |
5 | 5 | ||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import { Icon } from '../icon'; | 7 | import { Icon } from '../icon'; |
8 | import { IWithStyle } from '../typings/generic'; | ||
9 | 8 | ||
10 | interface IProps extends IWithStyle { | 9 | interface IProps extends WithStylesProps<typeof styles> { |
11 | icon?: string; | 10 | icon?: string; |
12 | type?: string; | 11 | type?: string; |
13 | dismissable?: boolean; | 12 | dismissable?: boolean; |
@@ -202,4 +201,6 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
202 | } | 201 | } |
203 | } | 202 | } |
204 | 203 | ||
205 | export const Infobox = injectStyle(styles)(InfoboxComponent); | 204 | export const Infobox = injectStyle(styles, { injectTheme: true })( |
205 | InfoboxComponent, | ||
206 | ); | ||
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx index c46cafc5c..bfbee33b9 100644 --- a/src/components/ui/input/index.tsx +++ b/src/components/ui/input/index.tsx | |||
@@ -2,9 +2,9 @@ import { mdiEye, mdiEyeOff } from '@mdi/js'; | |||
2 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import { Component, createRef, InputHTMLAttributes } from 'react'; | 4 | import { Component, createRef, InputHTMLAttributes } from 'react'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet, { WithStylesProps } from 'react-jss'; |
6 | 6 | ||
7 | import { IFormField, IWithStyle } from '../typings/generic'; | 7 | import { IFormField } from '../typings/generic'; |
8 | 8 | ||
9 | import { Error } from '../error'; | 9 | import { Error } from '../error'; |
10 | import { Label } from '../label'; | 10 | import { Label } from '../label'; |
@@ -20,7 +20,7 @@ interface IData { | |||
20 | interface IProps | 20 | interface IProps |
21 | extends InputHTMLAttributes<HTMLInputElement>, | 21 | extends InputHTMLAttributes<HTMLInputElement>, |
22 | IFormField, | 22 | IFormField, |
23 | IWithStyle { | 23 | WithStylesProps<typeof styles> { |
24 | focus?: boolean; | 24 | focus?: boolean; |
25 | prefix?: string; | 25 | prefix?: string; |
26 | suffix?: string; | 26 | suffix?: string; |
@@ -205,4 +205,4 @@ class InputComponent extends Component<IProps, IState> { | |||
205 | } | 205 | } |
206 | } | 206 | } |
207 | 207 | ||
208 | export const Input = injectSheet(styles)(InputComponent); | 208 | export const Input = injectSheet(styles, { injectTheme: true })(InputComponent); |
diff --git a/src/components/ui/label/index.tsx b/src/components/ui/label/index.tsx index 4d86f23f7..dcc14bff4 100644 --- a/src/components/ui/label/index.tsx +++ b/src/components/ui/label/index.tsx | |||
@@ -1,15 +1,16 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Classes } from 'jss'; | ||
3 | import { Component, LabelHTMLAttributes } from 'react'; | 2 | import { Component, LabelHTMLAttributes } from 'react'; |
4 | import injectSheet from 'react-jss'; | 3 | import injectSheet, { WithStylesProps } from 'react-jss'; |
5 | 4 | ||
6 | import { IFormField } from '../typings/generic'; | 5 | import { IFormField } from '../typings/generic'; |
7 | 6 | ||
8 | import styles from './styles'; | 7 | import styles from './styles'; |
9 | 8 | ||
10 | interface ILabel extends IFormField, LabelHTMLAttributes<HTMLLabelElement> { | 9 | interface ILabel |
11 | classes: Classes; | 10 | extends IFormField, |
12 | isRequired: boolean; | 11 | LabelHTMLAttributes<HTMLLabelElement>, |
12 | WithStylesProps<typeof styles> { | ||
13 | isRequired?: boolean; | ||
13 | } | 14 | } |
14 | 15 | ||
15 | class LabelComponent extends Component<ILabel> { | 16 | class LabelComponent extends Component<ILabel> { |
@@ -49,4 +50,4 @@ class LabelComponent extends Component<ILabel> { | |||
49 | } | 50 | } |
50 | } | 51 | } |
51 | 52 | ||
52 | export const Label = injectSheet(styles)(LabelComponent); | 53 | export const Label = injectSheet(styles, { injectTheme: true })(LabelComponent); |
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx index 0607bd48b..d56995ccc 100644 --- a/src/components/ui/loader/index.tsx +++ b/src/components/ui/loader/index.tsx | |||
@@ -1,25 +1,25 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component } from 'react'; | 2 | import { Component } from 'react'; |
3 | import injectStyle, { withTheme } from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | import ReactLoader from 'react-loader'; | 4 | import ReactLoader from 'react-loader'; |
5 | 5 | ||
6 | import { IWithStyle } from '../typings/generic'; | 6 | interface IProps extends WithStylesProps<typeof styles> { |
7 | |||
8 | interface IProps extends IWithStyle { | ||
9 | className?: string; | 7 | className?: string; |
10 | color?: string; | 8 | color?: string; |
11 | } | 9 | } |
12 | 10 | ||
13 | const styles = () => ({ | 11 | const styles = theme => ({ |
14 | container: { | 12 | container: { |
15 | position: 'relative', | 13 | position: 'relative', |
16 | height: 60, | 14 | height: 60, |
17 | }, | 15 | }, |
16 | loader: {}, | ||
17 | color: theme.colorText, | ||
18 | }); | 18 | }); |
19 | 19 | ||
20 | class LoaderComponent extends Component<IProps> { | 20 | class LoaderComponent extends Component<IProps> { |
21 | render() { | 21 | render() { |
22 | const { classes, className, color, theme } = this.props; | 22 | const { classes, className, color } = this.props; |
23 | 23 | ||
24 | return ( | 24 | return ( |
25 | <div | 25 | <div |
@@ -33,7 +33,7 @@ class LoaderComponent extends Component<IProps> { | |||
33 | loaded={false} | 33 | loaded={false} |
34 | width={4} | 34 | width={4} |
35 | scale={0.75} | 35 | scale={0.75} |
36 | color={color || theme.colorText} | 36 | color={color || classes.color} |
37 | parentClassName={classes.loader} | 37 | parentClassName={classes.loader} |
38 | /> | 38 | /> |
39 | </div> | 39 | </div> |
@@ -41,4 +41,6 @@ class LoaderComponent extends Component<IProps> { | |||
41 | } | 41 | } |
42 | } | 42 | } |
43 | 43 | ||
44 | export const Loader = injectStyle(styles)(withTheme(LoaderComponent)); | 44 | export const Loader = injectStyle(styles, { injectTheme: true })( |
45 | LoaderComponent, | ||
46 | ); | ||
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx index 2605503a3..ac509aa7c 100644 --- a/src/components/ui/select/index.tsx +++ b/src/components/ui/select/index.tsx | |||
@@ -6,10 +6,10 @@ import { | |||
6 | import Icon from '@mdi/react'; | 6 | import Icon from '@mdi/react'; |
7 | import classnames from 'classnames'; | 7 | import classnames from 'classnames'; |
8 | import { ChangeEvent, Component, createRef } from 'react'; | 8 | import { ChangeEvent, Component, createRef } from 'react'; |
9 | import injectStyle from 'react-jss'; | 9 | import injectStyle, { WithStylesProps } from 'react-jss'; |
10 | 10 | ||
11 | import { Theme } from '../../../themes'; | 11 | import { Theme } from '../../../themes'; |
12 | import { IFormField, IWithStyle } from '../typings/generic'; | 12 | import { IFormField } from '../typings/generic'; |
13 | 13 | ||
14 | import { Error } from '../error'; | 14 | import { Error } from '../error'; |
15 | import { Label } from '../label'; | 15 | import { Label } from '../label'; |
@@ -23,7 +23,7 @@ interface IData { | |||
23 | [index: string]: string; | 23 | [index: string]: string; |
24 | } | 24 | } |
25 | 25 | ||
26 | interface IProps extends IFormField, IWithStyle { | 26 | interface IProps extends IFormField, WithStylesProps<typeof styles> { |
27 | actionText: string; | 27 | actionText: string; |
28 | className?: string; | 28 | className?: string; |
29 | inputClassName?: string; | 29 | inputClassName?: string; |
@@ -146,6 +146,7 @@ const styles = (theme: Theme) => ({ | |||
146 | disabled: { | 146 | disabled: { |
147 | opacity: theme.selectDisabledOpacity, | 147 | opacity: theme.selectDisabledOpacity, |
148 | }, | 148 | }, |
149 | input: {}, | ||
149 | }); | 150 | }); |
150 | 151 | ||
151 | class SelectComponent extends Component<IProps> { | 152 | class SelectComponent extends Component<IProps> { |
@@ -457,4 +458,6 @@ class SelectComponent extends Component<IProps> { | |||
457 | } | 458 | } |
458 | } | 459 | } |
459 | 460 | ||
460 | export const Select = injectStyle(styles)(SelectComponent); | 461 | export const Select = injectStyle(styles, { injectTheme: true })( |
462 | SelectComponent, | ||
463 | ); | ||
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx index 1b16698eb..a47465806 100644 --- a/src/components/ui/textarea/index.tsx +++ b/src/components/ui/textarea/index.tsx | |||
@@ -1,8 +1,8 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component, createRef, TextareaHTMLAttributes } from 'react'; | 2 | import { Component, createRef, TextareaHTMLAttributes } from 'react'; |
3 | import injectSheet from 'react-jss'; | 3 | import injectSheet, { WithStylesProps } from 'react-jss'; |
4 | 4 | ||
5 | import { IFormField, IWithStyle } from '../typings/generic'; | 5 | import { IFormField } from '../typings/generic'; |
6 | 6 | ||
7 | import { Error } from '../error'; | 7 | import { Error } from '../error'; |
8 | import { Label } from '../label'; | 8 | import { Label } from '../label'; |
@@ -17,7 +17,7 @@ interface IData { | |||
17 | interface IProps | 17 | interface IProps |
18 | extends TextareaHTMLAttributes<HTMLTextAreaElement>, | 18 | extends TextareaHTMLAttributes<HTMLTextAreaElement>, |
19 | IFormField, | 19 | IFormField, |
20 | IWithStyle { | 20 | WithStylesProps<typeof styles> { |
21 | focus?: boolean; | 21 | focus?: boolean; |
22 | data: IData; | 22 | data: IData; |
23 | textareaClassName?: string; | 23 | textareaClassName?: string; |
@@ -123,4 +123,6 @@ class TextareaComponent extends Component<IProps> { | |||
123 | } | 123 | } |
124 | } | 124 | } |
125 | 125 | ||
126 | export const Textarea = injectSheet(styles)(TextareaComponent); | 126 | export const Textarea = injectSheet(styles, { injectTheme: true })( |
127 | TextareaComponent, | ||
128 | ); | ||
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx index 7b6ba147f..856581a21 100644 --- a/src/components/ui/toggle/index.tsx +++ b/src/components/ui/toggle/index.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Property } from 'csstype'; | 2 | import { Property } from 'csstype'; |
3 | import { Component, InputHTMLAttributes } from 'react'; | 3 | import { Component, InputHTMLAttributes } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle, { WithStylesProps } from 'react-jss'; |
5 | 5 | ||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import { IFormField, IWithStyle } from '../typings/generic'; | 7 | import { IFormField } from '../typings/generic'; |
8 | 8 | ||
9 | import { Error } from '../error'; | 9 | import { Error } from '../error'; |
10 | import { Label } from '../label'; | 10 | import { Label } from '../label'; |
@@ -13,7 +13,7 @@ import { Wrapper } from '../wrapper'; | |||
13 | interface IProps | 13 | interface IProps |
14 | extends InputHTMLAttributes<HTMLInputElement>, | 14 | extends InputHTMLAttributes<HTMLInputElement>, |
15 | IFormField, | 15 | IFormField, |
16 | IWithStyle { | 16 | WithStylesProps<typeof styles> { |
17 | className?: string; | 17 | className?: string; |
18 | } | 18 | } |
19 | 19 | ||
@@ -122,4 +122,6 @@ class ToggleComponent extends Component<IProps> { | |||
122 | } | 122 | } |
123 | } | 123 | } |
124 | 124 | ||
125 | export const Toggle = injectStyle(styles)(ToggleComponent); | 125 | export const Toggle = injectStyle(styles, { injectTheme: true })( |
126 | ToggleComponent, | ||
127 | ); | ||
diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts index 65b996d59..3aec0bc40 100644 --- a/src/components/ui/typings/generic.ts +++ b/src/components/ui/typings/generic.ts | |||
@@ -1,7 +1,3 @@ | |||
1 | import { Classes } from 'jss'; | ||
2 | |||
3 | import { Theme } from '../../../themes'; | ||
4 | |||
5 | export interface IFormField { | 1 | export interface IFormField { |
6 | showLabel?: boolean; | 2 | showLabel?: boolean; |
7 | label?: string; | 3 | label?: string; |
@@ -10,10 +6,5 @@ export interface IFormField { | |||
10 | noMargin?: boolean; | 6 | noMargin?: boolean; |
11 | } | 7 | } |
12 | 8 | ||
13 | export interface IWithStyle { | ||
14 | classes: Classes; | ||
15 | theme: Theme; | ||
16 | } | ||
17 | |||
18 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; | 9 | export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; |
19 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; | 10 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; |
diff --git a/src/components/ui/wrapper/index.tsx b/src/components/ui/wrapper/index.tsx index ffcd6fe0b..bc385d319 100644 --- a/src/components/ui/wrapper/index.tsx +++ b/src/components/ui/wrapper/index.tsx | |||
@@ -1,9 +1,8 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component, ReactNode } from 'react'; | 2 | import { Component, ReactNode } from 'react'; |
3 | import injectStyle from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | import { IWithStyle } from '../typings/generic'; | ||
5 | 4 | ||
6 | interface IProps extends IWithStyle { | 5 | interface IProps extends WithStylesProps<typeof styles> { |
7 | children: ReactNode; | 6 | children: ReactNode; |
8 | className?: string; | 7 | className?: string; |
9 | identifier: string; | 8 | identifier: string; |
@@ -34,4 +33,6 @@ class WrapperComponent extends Component<IProps> { | |||
34 | } | 33 | } |
35 | } | 34 | } |
36 | 35 | ||
37 | export const Wrapper = injectStyle(styles)(WrapperComponent); | 36 | export const Wrapper = injectStyle(styles, { injectTheme: true })( |
37 | WrapperComponent, | ||
38 | ); | ||