diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/AppLoader.js | 15 | ||||
-rw-r--r-- | src/components/ui/AppLoader/index.js | 70 | ||||
-rw-r--r-- | src/components/ui/AppLoader/styles.js | 16 | ||||
-rw-r--r-- | src/components/ui/Button.js | 3 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 56 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/styles.js | 23 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.js | 10 | ||||
-rw-r--r-- | src/components/ui/InfoBar.js | 4 | ||||
-rw-r--r-- | src/components/ui/Infobox.js | 2 | ||||
-rw-r--r-- | src/components/ui/Input.js | 6 | ||||
-rw-r--r-- | src/components/ui/Link.js | 1 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/index.js | 1 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/styles.js | 2 | ||||
-rw-r--r-- | src/components/ui/Radio.js | 4 | ||||
-rw-r--r-- | src/components/ui/SearchInput.js | 27 | ||||
-rw-r--r-- | src/components/ui/Select.js | 8 | ||||
-rw-r--r-- | src/components/ui/StatusBarTargetUrl.js | 3 | ||||
-rw-r--r-- | src/components/ui/Tabs/TabItem.js | 4 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/index.js | 25 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/styles.js | 9 |
20 files changed, 242 insertions, 47 deletions
diff --git a/src/components/ui/AppLoader.js b/src/components/ui/AppLoader.js deleted file mode 100644 index ac3cdcb05..000000000 --- a/src/components/ui/AppLoader.js +++ /dev/null | |||
@@ -1,15 +0,0 @@ | |||
1 | import React from 'react'; | ||
2 | |||
3 | import Appear from '../../components/ui/effects/Appear'; | ||
4 | import Loader from '../../components/ui/Loader'; | ||
5 | |||
6 | export default function () { | ||
7 | return ( | ||
8 | <div className="app-loader"> | ||
9 | <Appear> | ||
10 | <h1 className="app-loader__title">Franz</h1> | ||
11 | <Loader color="#FFF" /> | ||
12 | </Appear> | ||
13 | </div> | ||
14 | ); | ||
15 | } | ||
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js new file mode 100644 index 000000000..61053f6d1 --- /dev/null +++ b/src/components/ui/AppLoader/index.js | |||
@@ -0,0 +1,70 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import injectSheet, { withTheme } from 'react-jss'; | ||
4 | import classnames from 'classnames'; | ||
5 | |||
6 | import FullscreenLoader from '../FullscreenLoader'; | ||
7 | import { shuffleArray } from '../../../helpers/array-helpers'; | ||
8 | |||
9 | import styles from './styles'; | ||
10 | |||
11 | const textList = shuffleArray([ | ||
12 | 'Looking for Sisi', | ||
13 | 'Contacting the herald', | ||
14 | 'Saddling the unicorn', | ||
15 | 'Learning the Waltz', | ||
16 | 'Visiting Horst & Grete', | ||
17 | 'Twisting my moustache', | ||
18 | 'Playing the trumpet', | ||
19 | 'Traveling through space & time', | ||
20 | ]); | ||
21 | |||
22 | export default @injectSheet(styles) @withTheme class AppLoader extends Component { | ||
23 | static propTypes = { | ||
24 | classes: PropTypes.object.isRequired, | ||
25 | theme: PropTypes.object.isRequired, | ||
26 | } | ||
27 | |||
28 | state = { | ||
29 | step: 0, | ||
30 | } | ||
31 | |||
32 | interval = null; | ||
33 | |||
34 | componentDidMount() { | ||
35 | this.interval = setInterval(() => { | ||
36 | this.setState(prevState => ({ | ||
37 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, | ||
38 | })); | ||
39 | }, 2500); | ||
40 | } | ||
41 | |||
42 | componentWillUnmount() { | ||
43 | clearInterval(this.interval); | ||
44 | } | ||
45 | |||
46 | render() { | ||
47 | const { classes, theme } = this.props; | ||
48 | const { step } = this.state; | ||
49 | |||
50 | return ( | ||
51 | <FullscreenLoader | ||
52 | title="Franz" | ||
53 | className={classes.component} | ||
54 | spinnerColor={theme.colorAppLoaderSpinner} | ||
55 | > | ||
56 | {textList.map((text, i) => ( | ||
57 | <span | ||
58 | key={text} | ||
59 | className={classnames({ | ||
60 | [`${classes.slogan}`]: true, | ||
61 | [`${classes.visible}`]: step === i, | ||
62 | })} | ||
63 | > | ||
64 | {text} | ||
65 | </span> | ||
66 | ))} | ||
67 | </FullscreenLoader> | ||
68 | ); | ||
69 | } | ||
70 | } | ||
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js new file mode 100644 index 000000000..755a56b40 --- /dev/null +++ b/src/components/ui/AppLoader/styles.js | |||
@@ -0,0 +1,16 @@ | |||
1 | export default { | ||
2 | component: { | ||
3 | color: '#FFF', | ||
4 | }, | ||
5 | slogan: { | ||
6 | display: 'block', | ||
7 | opacity: 0, | ||
8 | transition: 'opacity 1s ease', | ||
9 | position: 'absolute', | ||
10 | textAlign: 'center', | ||
11 | width: '100%', | ||
12 | }, | ||
13 | visible: { | ||
14 | opacity: 1, | ||
15 | }, | ||
16 | }; | ||
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js index 309e05bb4..ffc7f7051 100644 --- a/src/components/ui/Button.js +++ b/src/components/ui/Button.js | |||
@@ -62,6 +62,8 @@ export default @observer class Button extends Component { | |||
62 | } | 62 | } |
63 | 63 | ||
64 | return ( | 64 | return ( |
65 | // disabling rule as button has type defined in `buttonProps` | ||
66 | /* eslint-disable react/button-has-type */ | ||
65 | <button {...buttonProps}> | 67 | <button {...buttonProps}> |
66 | <Loader | 68 | <Loader |
67 | loaded={loaded} | 69 | loaded={loaded} |
@@ -72,6 +74,7 @@ export default @observer class Button extends Component { | |||
72 | /> | 74 | /> |
73 | {label} | 75 | {label} |
74 | </button> | 76 | </button> |
77 | /* eslint-enable react/button-has-type */ | ||
75 | ); | 78 | ); |
76 | } | 79 | } |
77 | } | 80 | } |
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js new file mode 100644 index 000000000..6ecf4d395 --- /dev/null +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -0,0 +1,56 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet, { withTheme } from 'react-jss'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import Loader from '../Loader'; | ||
8 | |||
9 | import styles from './styles'; | ||
10 | |||
11 | export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component { | ||
12 | static propTypes = { | ||
13 | className: PropTypes.string, | ||
14 | title: PropTypes.string.isRequired, | ||
15 | classes: PropTypes.object.isRequired, | ||
16 | theme: PropTypes.object.isRequired, | ||
17 | spinnerColor: PropTypes.string, | ||
18 | children: PropTypes.node, | ||
19 | } | ||
20 | |||
21 | static defaultProps = { | ||
22 | className: null, | ||
23 | spinnerColor: null, | ||
24 | children: null, | ||
25 | } | ||
26 | |||
27 | render() { | ||
28 | const { | ||
29 | classes, | ||
30 | title, | ||
31 | children, | ||
32 | spinnerColor, | ||
33 | className, | ||
34 | theme, | ||
35 | } = this.props; | ||
36 | |||
37 | return ( | ||
38 | <div className={classes.wrapper}> | ||
39 | <div | ||
40 | className={classnames({ | ||
41 | [`${classes.component}`]: true, | ||
42 | [`${className}`]: className, | ||
43 | })} | ||
44 | > | ||
45 | <h1 className={classes.title}>{title}</h1> | ||
46 | <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} /> | ||
47 | {children && ( | ||
48 | <div className={classes.content}> | ||
49 | {children} | ||
50 | </div> | ||
51 | )} | ||
52 | </div> | ||
53 | </div> | ||
54 | ); | ||
55 | } | ||
56 | } | ||
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js new file mode 100644 index 000000000..64d24e4ce --- /dev/null +++ b/src/components/ui/FullscreenLoader/styles.js | |||
@@ -0,0 +1,23 @@ | |||
1 | export default { | ||
2 | wrapper: { | ||
3 | display: 'flex', | ||
4 | alignItems: 'center', | ||
5 | position: 'absolute', | ||
6 | width: '100%', | ||
7 | }, | ||
8 | component: { | ||
9 | width: '100%', | ||
10 | display: 'flex', | ||
11 | flexDirection: 'column', | ||
12 | alignItems: 'center', | ||
13 | textAlign: 'center', | ||
14 | height: 'auto', | ||
15 | }, | ||
16 | title: { | ||
17 | fontSize: 35, | ||
18 | }, | ||
19 | content: { | ||
20 | marginTop: 20, | ||
21 | width: '100%', | ||
22 | }, | ||
23 | }; | ||
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index 76f77d631..83a05554b 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } 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 { Field } from 'mobx-react-form'; | 4 | import { Field } from 'mobx-react-form'; |
@@ -23,6 +23,8 @@ export default @observer class ImageUpload extends Component { | |||
23 | path: null, | 23 | path: null, |
24 | } | 24 | } |
25 | 25 | ||
26 | dropzoneRef = null; | ||
27 | |||
26 | onDrop(acceptedFiles) { | 28 | onDrop(acceptedFiles) { |
27 | const { field } = this.props; | 29 | const { field } = this.props; |
28 | 30 | ||
@@ -36,8 +38,6 @@ export default @observer class ImageUpload extends Component { | |||
36 | field.set(''); | 38 | field.set(''); |
37 | } | 39 | } |
38 | 40 | ||
39 | dropzoneRef = null; | ||
40 | |||
41 | render() { | 41 | render() { |
42 | const { | 42 | const { |
43 | field, | 43 | field, |
@@ -57,7 +57,7 @@ export default @observer class ImageUpload extends Component { | |||
57 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> | 57 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> |
58 | <div className="image-upload"> | 58 | <div className="image-upload"> |
59 | {(field.value && field.value !== 'delete') || this.state.path ? ( | 59 | {(field.value && field.value !== 'delete') || this.state.path ? ( |
60 | <div> | 60 | <Fragment> |
61 | <div | 61 | <div |
62 | className="image-upload__preview" | 62 | className="image-upload__preview" |
63 | style={({ | 63 | style={({ |
@@ -84,7 +84,7 @@ export default @observer class ImageUpload extends Component { | |||
84 | </button> | 84 | </button> |
85 | <div className="image-upload__action-background" /> | 85 | <div className="image-upload__action-background" /> |
86 | </div> | 86 | </div> |
87 | </div> | 87 | </Fragment> |
88 | ) : ( | 88 | ) : ( |
89 | <Dropzone | 89 | <Dropzone |
90 | ref={(node) => { this.dropzoneRef = node; }} | 90 | ref={(node) => { this.dropzoneRef = node; }} |
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js index 94a1ddf76..612399e9f 100644 --- a/src/components/ui/InfoBar.js +++ b/src/components/ui/InfoBar.js | |||
@@ -5,7 +5,7 @@ import classnames from 'classnames'; | |||
5 | import Loader from 'react-loader'; | 5 | import Loader from 'react-loader'; |
6 | 6 | ||
7 | // import { oneOrManyChildElements } from '../../prop-types'; | 7 | // import { oneOrManyChildElements } from '../../prop-types'; |
8 | import Appear from '../ui/effects/Appear'; | 8 | import Appear from './effects/Appear'; |
9 | 9 | ||
10 | export default @observer class InfoBar extends Component { | 10 | export default @observer class InfoBar extends Component { |
11 | static propTypes = { | 11 | static propTypes = { |
@@ -64,6 +64,7 @@ export default @observer class InfoBar extends Component { | |||
64 | {children} | 64 | {children} |
65 | {ctaLabel && ( | 65 | {ctaLabel && ( |
66 | <button | 66 | <button |
67 | type="button" | ||
67 | className="info-bar__cta" | 68 | className="info-bar__cta" |
68 | onClick={onClick} | 69 | onClick={onClick} |
69 | > | 70 | > |
@@ -80,6 +81,7 @@ export default @observer class InfoBar extends Component { | |||
80 | </div> | 81 | </div> |
81 | {!sticky && ( | 82 | {!sticky && ( |
82 | <button | 83 | <button |
84 | type="button" | ||
83 | className="info-bar__close mdi mdi-close" | 85 | className="info-bar__close mdi mdi-close" |
84 | onClick={onHide} | 86 | onClick={onHide} |
85 | /> | 87 | /> |
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js index 77051f567..a33c6474a 100644 --- a/src/components/ui/Infobox.js +++ b/src/components/ui/Infobox.js | |||
@@ -61,6 +61,7 @@ export default @observer class Infobox extends Component { | |||
61 | <button | 61 | <button |
62 | className="infobox__cta" | 62 | className="infobox__cta" |
63 | onClick={ctaOnClick} | 63 | onClick={ctaOnClick} |
64 | type="button" | ||
64 | > | 65 | > |
65 | <Loader | 66 | <Loader |
66 | loaded={!ctaLoading} | 67 | loaded={!ctaLoading} |
@@ -74,6 +75,7 @@ export default @observer class Infobox extends Component { | |||
74 | )} | 75 | )} |
75 | {dismissable && ( | 76 | {dismissable && ( |
76 | <button | 77 | <button |
78 | type="button" | ||
77 | onClick={() => this.setState({ | 79 | onClick={() => this.setState({ |
78 | dismissed: true, | 80 | dismissed: true, |
79 | })} | 81 | })} |
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js index 7bf6e1b00..9b070c4df 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.js | |||
@@ -33,6 +33,8 @@ export default @observer class Input extends Component { | |||
33 | passwordScore: 0, | 33 | passwordScore: 0, |
34 | } | 34 | } |
35 | 35 | ||
36 | inputElement = null; | ||
37 | |||
36 | componentDidMount() { | 38 | componentDidMount() { |
37 | if (this.props.focus) { | 39 | if (this.props.focus) { |
38 | this.focus(); | 40 | this.focus(); |
@@ -53,8 +55,6 @@ export default @observer class Input extends Component { | |||
53 | this.inputElement.focus(); | 55 | this.inputElement.focus(); |
54 | } | 56 | } |
55 | 57 | ||
56 | inputElement = null; | ||
57 | |||
58 | render() { | 58 | render() { |
59 | const { | 59 | const { |
60 | field, | 60 | field, |
@@ -110,7 +110,7 @@ export default @observer class Input extends Component { | |||
110 | 'mdi-eye': !this.state.showPassword, | 110 | 'mdi-eye': !this.state.showPassword, |
111 | 'mdi-eye-off': this.state.showPassword, | 111 | 'mdi-eye-off': this.state.showPassword, |
112 | })} | 112 | })} |
113 | onClick={() => this.setState({ showPassword: !this.state.showPassword })} | 113 | onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))} |
114 | tabIndex="-1" | 114 | tabIndex="-1" |
115 | /> | 115 | /> |
116 | )} | 116 | )} |
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js index 0602290f1..b88686d5e 100644 --- a/src/components/ui/Link.js +++ b/src/components/ui/Link.js | |||
@@ -72,5 +72,4 @@ Link.wrappedComponent.defaultProps = { | |||
72 | activeClassName: '', | 72 | activeClassName: '', |
73 | strictFilter: false, | 73 | strictFilter: false, |
74 | target: '', | 74 | target: '', |
75 | openInBrowser: false, | ||
76 | }; | 75 | }; |
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js index 73984be94..67cd6af0b 100644 --- a/src/components/ui/PremiumFeatureContainer/index.js +++ b/src/components/ui/PremiumFeatureContainer/index.js | |||
@@ -73,4 +73,3 @@ PremiumFeatureContainer.wrappedComponent.propTypes = { | |||
73 | }).isRequired, | 73 | }).isRequired, |
74 | }).isRequired, | 74 | }).isRequired, |
75 | }; | 75 | }; |
76 | |||
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js index 16c40d0ec..81d6666c6 100644 --- a/src/components/ui/PremiumFeatureContainer/styles.js +++ b/src/components/ui/PremiumFeatureContainer/styles.js | |||
@@ -5,6 +5,7 @@ export default theme => ({ | |||
5 | margin: [0, 0, 20, -20], | 5 | margin: [0, 0, 20, -20], |
6 | padding: 20, | 6 | padding: 20, |
7 | 'border-radius': theme.borderRadius, | 7 | 'border-radius': theme.borderRadius, |
8 | pointerEvents: 'none', | ||
8 | }, | 9 | }, |
9 | titleContainer: { | 10 | titleContainer: { |
10 | display: 'flex', | 11 | display: 'flex', |
@@ -20,6 +21,7 @@ export default theme => ({ | |||
20 | 'border-radius': theme.borderRadiusSmall, | 21 | 'border-radius': theme.borderRadiusSmall, |
21 | padding: [2, 4], | 22 | padding: [2, 4], |
22 | 'font-size': 12, | 23 | 'font-size': 12, |
24 | pointerEvents: 'initial', | ||
23 | }, | 25 | }, |
24 | content: { | 26 | content: { |
25 | opacity: 0.5, | 27 | opacity: 0.5, |
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js index 63ca6f9b8..ba13aca63 100644 --- a/src/components/ui/Radio.js +++ b/src/components/ui/Radio.js | |||
@@ -18,6 +18,8 @@ export default @observer class Radio extends Component { | |||
18 | showLabel: true, | 18 | showLabel: true, |
19 | }; | 19 | }; |
20 | 20 | ||
21 | inputElement = null; | ||
22 | |||
21 | componentDidMount() { | 23 | componentDidMount() { |
22 | if (this.props.focus) { | 24 | if (this.props.focus) { |
23 | this.focus(); | 25 | this.focus(); |
@@ -28,8 +30,6 @@ export default @observer class Radio extends Component { | |||
28 | this.inputElement.focus(); | 30 | this.inputElement.focus(); |
29 | } | 31 | } |
30 | 32 | ||
31 | inputElement = null; | ||
32 | |||
33 | render() { | 33 | render() { |
34 | const { | 34 | const { |
35 | field, | 35 | field, |
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js index 5a9571d27..78d6aae8b 100644 --- a/src/components/ui/SearchInput.js +++ b/src/components/ui/SearchInput.js | |||
@@ -2,7 +2,6 @@ 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 classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import uuidv1 from 'uuid/v1'; | ||
6 | import { debounce } from 'lodash'; | 5 | import { debounce } from 'lodash'; |
7 | 6 | ||
8 | export default @observer class SearchInput extends Component { | 7 | export default @observer class SearchInput extends Component { |
@@ -22,7 +21,7 @@ export default @observer class SearchInput extends Component { | |||
22 | value: '', | 21 | value: '', |
23 | placeholder: '', | 22 | placeholder: '', |
24 | className: '', | 23 | className: '', |
25 | name: uuidv1(), | 24 | name: 'searchInput', |
26 | throttle: false, | 25 | throttle: false, |
27 | throttleDelay: 250, | 26 | throttleDelay: 250, |
28 | onChange: () => null, | 27 | onChange: () => null, |
@@ -30,6 +29,8 @@ export default @observer class SearchInput extends Component { | |||
30 | autoFocus: false, | 29 | autoFocus: false, |
31 | } | 30 | } |
32 | 31 | ||
32 | input = null; | ||
33 | |||
33 | constructor(props) { | 34 | constructor(props) { |
34 | super(props); | 35 | super(props); |
35 | 36 | ||
@@ -74,8 +75,6 @@ export default @observer class SearchInput extends Component { | |||
74 | onReset(); | 75 | onReset(); |
75 | } | 76 | } |
76 | 77 | ||
77 | input = null; | ||
78 | |||
79 | render() { | 78 | render() { |
80 | const { className, name, placeholder } = this.props; | 79 | const { className, name, placeholder } = this.props; |
81 | const { value } = this.state; | 80 | const { value } = this.state; |
@@ -90,15 +89,17 @@ export default @observer class SearchInput extends Component { | |||
90 | <label | 89 | <label |
91 | htmlFor={name} | 90 | htmlFor={name} |
92 | className="mdi mdi-magnify" | 91 | className="mdi mdi-magnify" |
93 | /> | 92 | > |
94 | <input | 93 | <input |
95 | name={name} | 94 | name={name} |
96 | type="text" | 95 | id={name} |
97 | placeholder={placeholder} | 96 | type="text" |
98 | value={value} | 97 | placeholder={placeholder} |
99 | onChange={e => this.onChange(e)} | 98 | value={value} |
100 | ref={(ref) => { this.input = ref; }} | 99 | onChange={e => this.onChange(e)} |
101 | /> | 100 | ref={(ref) => { this.input = ref; }} |
101 | /> | ||
102 | </label> | ||
102 | {value.length > 0 && ( | 103 | {value.length > 0 && ( |
103 | <span | 104 | <span |
104 | className="mdi mdi-close-circle-outline" | 105 | className="mdi mdi-close-circle-outline" |
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js index abcad417e..da52243ca 100644 --- a/src/components/ui/Select.js +++ b/src/components/ui/Select.js | |||
@@ -9,12 +9,13 @@ export default @observer class Select extends Component { | |||
9 | field: PropTypes.instanceOf(Field).isRequired, | 9 | field: PropTypes.instanceOf(Field).isRequired, |
10 | className: PropTypes.string, | 10 | className: PropTypes.string, |
11 | showLabel: PropTypes.bool, | 11 | showLabel: PropTypes.bool, |
12 | disabled: PropTypes.bool, | ||
12 | }; | 13 | }; |
13 | 14 | ||
14 | static defaultProps = { | 15 | static defaultProps = { |
15 | className: null, | 16 | className: null, |
16 | focus: false, | ||
17 | showLabel: true, | 17 | showLabel: true, |
18 | disabled: false, | ||
18 | }; | 19 | }; |
19 | 20 | ||
20 | render() { | 21 | render() { |
@@ -22,6 +23,7 @@ export default @observer class Select extends Component { | |||
22 | field, | 23 | field, |
23 | className, | 24 | className, |
24 | showLabel, | 25 | showLabel, |
26 | disabled, | ||
25 | } = this.props; | 27 | } = this.props; |
26 | 28 | ||
27 | return ( | 29 | return ( |
@@ -29,6 +31,7 @@ export default @observer class Select extends Component { | |||
29 | className={classnames({ | 31 | className={classnames({ |
30 | 'franz-form__field': true, | 32 | 'franz-form__field': true, |
31 | 'has-error': field.error, | 33 | 'has-error': field.error, |
34 | 'is-disabled': disabled, | ||
32 | [`${className}`]: className, | 35 | [`${className}`]: className, |
33 | })} | 36 | })} |
34 | > | 37 | > |
@@ -45,12 +48,13 @@ export default @observer class Select extends Component { | |||
45 | id={field.id} | 48 | id={field.id} |
46 | defaultValue={field.value} | 49 | defaultValue={field.value} |
47 | className="franz-form__select" | 50 | className="franz-form__select" |
51 | disabled={field.disabled || disabled} | ||
48 | > | 52 | > |
49 | {field.options.map(type => ( | 53 | {field.options.map(type => ( |
50 | <option | 54 | <option |
51 | key={type.value} | 55 | key={type.value} |
52 | value={type.value} | 56 | value={type.value} |
53 | // selected={field.value === } | 57 | disabled={type.disabled} |
54 | > | 58 | > |
55 | {type.label} | 59 | {type.label} |
56 | </option> | 60 | </option> |
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js index 4285a343c..6fc50fe5c 100644 --- a/src/components/ui/StatusBarTargetUrl.js +++ b/src/components/ui/StatusBarTargetUrl.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 | 5 | ||
6 | import Appear from '../ui/effects/Appear'; | 6 | import Appear from './effects/Appear'; |
7 | 7 | ||
8 | export default @observer class StatusBarTargetUrl extends Component { | 8 | export default @observer class StatusBarTargetUrl extends Component { |
9 | static propTypes = { | 9 | static propTypes = { |
@@ -13,7 +13,6 @@ export default @observer class StatusBarTargetUrl extends Component { | |||
13 | 13 | ||
14 | static defaultProps = { | 14 | static defaultProps = { |
15 | className: '', | 15 | className: '', |
16 | position: 'bottom', | ||
17 | text: '', | 16 | text: '', |
18 | }; | 17 | }; |
19 | 18 | ||
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js index 9ff9f009e..16881a7f7 100644 --- a/src/components/ui/Tabs/TabItem.js +++ b/src/components/ui/Tabs/TabItem.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | 2 | ||
3 | import { oneOrManyChildElements } from '../../../prop-types'; | 3 | import { oneOrManyChildElements } from '../../../prop-types'; |
4 | 4 | ||
@@ -11,7 +11,7 @@ export default class TabItem extends Component { | |||
11 | const { children } = this.props; | 11 | const { children } = this.props; |
12 | 12 | ||
13 | return ( | 13 | return ( |
14 | <div>{children}</div> | 14 | <Fragment>{children}</Fragment> |
15 | ); | 15 | ); |
16 | } | 16 | } |
17 | } | 17 | } |
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js new file mode 100644 index 000000000..3a3dbbe49 --- /dev/null +++ b/src/components/ui/WebviewLoader/index.js | |||
@@ -0,0 +1,25 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | |||
6 | import FullscreenLoader from '../FullscreenLoader'; | ||
7 | |||
8 | import styles from './styles'; | ||
9 | |||
10 | export default @observer @injectSheet(styles) class WebviewLoader extends Component { | ||
11 | static propTypes = { | ||
12 | name: PropTypes.string.isRequired, | ||
13 | classes: PropTypes.object.isRequired, | ||
14 | } | ||
15 | |||
16 | render() { | ||
17 | const { classes, name } = this.props; | ||
18 | return ( | ||
19 | <FullscreenLoader | ||
20 | className={classes.component} | ||
21 | title={`Loading ${name}`} | ||
22 | /> | ||
23 | ); | ||
24 | } | ||
25 | } | ||
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js new file mode 100644 index 000000000..dbd75db8a --- /dev/null +++ b/src/components/ui/WebviewLoader/styles.js | |||
@@ -0,0 +1,9 @@ | |||
1 | export default theme => ({ | ||
2 | component: { | ||
3 | background: theme.colorWebviewLoaderBackground, | ||
4 | padding: 20, | ||
5 | width: 'auto', | ||
6 | margin: [0, 'auto'], | ||
7 | borderRadius: 6, | ||
8 | }, | ||
9 | }); | ||