diff options
Diffstat (limited to 'src/components/ui/Input.js')
-rw-r--r-- | src/components/ui/Input.js | 54 |
1 files changed, 31 insertions, 23 deletions
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js index 4e3eb4ab8..7417fef1c 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.js | |||
@@ -3,10 +3,20 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | 4 | import { Field } from 'mobx-react-form'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | 7 | ||
7 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; | 8 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; |
8 | 9 | ||
9 | export default @observer class Input extends Component { | 10 | const messages = defineMessages({ |
11 | passwordToggle: { | ||
12 | id: 'settings.app.form.passwordToggle', | ||
13 | defaultMessage: '!!!Password toggle', | ||
14 | }, | ||
15 | }); | ||
16 | |||
17 | export default | ||
18 | @observer | ||
19 | class Input extends Component { | ||
10 | static propTypes = { | 20 | static propTypes = { |
11 | field: PropTypes.instanceOf(Field).isRequired, | 21 | field: PropTypes.instanceOf(Field).isRequired, |
12 | className: PropTypes.string, | 22 | className: PropTypes.string, |
@@ -28,10 +38,14 @@ export default @observer class Input extends Component { | |||
28 | suffix: '', | 38 | suffix: '', |
29 | }; | 39 | }; |
30 | 40 | ||
41 | static contextTypes = { | ||
42 | intl: intlShape, | ||
43 | }; | ||
44 | |||
31 | state = { | 45 | state = { |
32 | showPassword: false, | 46 | showPassword: false, |
33 | passwordScore: 0, | 47 | passwordScore: 0, |
34 | } | 48 | }; |
35 | 49 | ||
36 | inputElement = null; | 50 | inputElement = null; |
37 | 51 | ||
@@ -68,6 +82,8 @@ export default @observer class Input extends Component { | |||
68 | 82 | ||
69 | const { passwordScore } = this.state; | 83 | const { passwordScore } = this.state; |
70 | 84 | ||
85 | const { intl } = this.context; | ||
86 | |||
71 | let { type } = field; | 87 | let { type } = field; |
72 | if (type === 'password' && this.state.showPassword) { | 88 | if (type === 'password' && this.state.showPassword) { |
73 | type = 'text'; | 89 | type = 'text'; |
@@ -82,9 +98,7 @@ export default @observer class Input extends Component { | |||
82 | })} | 98 | })} |
83 | > | 99 | > |
84 | <div className="franz-form__input-wrapper"> | 100 | <div className="franz-form__input-wrapper"> |
85 | {prefix && ( | 101 | {prefix && <span className="franz-form__input-prefix">{prefix}</span>} |
86 | <span className="franz-form__input-prefix">{prefix}</span> | ||
87 | )} | ||
88 | <input | 102 | <input |
89 | id={field.id} | 103 | id={field.id} |
90 | type={type} | 104 | type={type} |
@@ -92,15 +106,15 @@ export default @observer class Input extends Component { | |||
92 | name={field.name} | 106 | name={field.name} |
93 | value={field.value} | 107 | value={field.value} |
94 | placeholder={field.placeholder} | 108 | placeholder={field.placeholder} |
95 | onChange={e => this.onChange(e)} | 109 | onChange={(e) => this.onChange(e)} |
96 | onBlur={field.onBlur} | 110 | onBlur={field.onBlur} |
97 | onFocus={field.onFocus} | 111 | onFocus={field.onFocus} |
98 | ref={(element) => { this.inputElement = element; }} | 112 | ref={(element) => { |
113 | this.inputElement = element; | ||
114 | }} | ||
99 | disabled={field.disabled} | 115 | disabled={field.disabled} |
100 | /> | 116 | /> |
101 | {suffix && ( | 117 | {suffix && <span className="franz-form__input-suffix">{suffix}</span>} |
102 | <span className="franz-form__input-suffix">{suffix}</span> | ||
103 | )} | ||
104 | {showPasswordToggle && ( | 118 | {showPasswordToggle && ( |
105 | <button | 119 | <button |
106 | type="button" | 120 | type="button" |
@@ -110,8 +124,11 @@ export default @observer class Input extends Component { | |||
110 | 'mdi-eye': !this.state.showPassword, | 124 | 'mdi-eye': !this.state.showPassword, |
111 | 'mdi-eye-off': this.state.showPassword, | 125 | 'mdi-eye-off': this.state.showPassword, |
112 | })} | 126 | })} |
113 | onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))} | 127 | onClick={() => this.setState((prevState) => ({ |
114 | tabIndex="-1" | 128 | showPassword: !prevState.showPassword, |
129 | }))} | ||
130 | tabIndex={-1} | ||
131 | aria-label={intl.formatMessage(messages.passwordToggle)} | ||
115 | /> | 132 | /> |
116 | )} | 133 | )} |
117 | {scorePassword && ( | 134 | {scorePassword && ( |
@@ -128,20 +145,11 @@ export default @observer class Input extends Component { | |||
128 | )} | 145 | )} |
129 | </div> | 146 | </div> |
130 | {field.label && showLabel && ( | 147 | {field.label && showLabel && ( |
131 | <label | 148 | <label className="franz-form__label" htmlFor={field.name}> |
132 | className="franz-form__label" | ||
133 | htmlFor={field.name} | ||
134 | > | ||
135 | {field.label} | 149 | {field.label} |
136 | </label> | 150 | </label> |
137 | )} | 151 | )} |
138 | {field.error && ( | 152 | {field.error && <div className="franz-form__error">{field.error}</div>} |
139 | <div | ||
140 | className="franz-form__error" | ||
141 | > | ||
142 | {field.error} | ||
143 | </div> | ||
144 | )} | ||
145 | </div> | 153 | </div> |
146 | ); | 154 | ); |
147 | } | 155 | } |