diff options
Diffstat (limited to 'src/components/ui/Slider.js')
-rw-r--r-- | src/components/ui/Slider.js | 104 |
1 files changed, 53 insertions, 51 deletions
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; | ||