diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/ui/Input.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/ui/Input.js')
-rw-r--r-- | src/components/ui/Input.js | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js new file mode 100644 index 000000000..0bb9f23bf --- /dev/null +++ b/src/components/ui/Input.js | |||
@@ -0,0 +1,148 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { Field } from 'mobx-react-form'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; | ||
8 | |||
9 | @observer | ||
10 | export default class Input extends Component { | ||
11 | static propTypes = { | ||
12 | field: PropTypes.instanceOf(Field).isRequired, | ||
13 | className: PropTypes.string, | ||
14 | focus: PropTypes.bool, | ||
15 | showPasswordToggle: PropTypes.bool, | ||
16 | showLabel: PropTypes.bool, | ||
17 | scorePassword: PropTypes.bool, | ||
18 | prefix: PropTypes.string, | ||
19 | suffix: PropTypes.string, | ||
20 | }; | ||
21 | |||
22 | static defaultProps = { | ||
23 | className: null, | ||
24 | focus: false, | ||
25 | showPasswordToggle: false, | ||
26 | showLabel: true, | ||
27 | scorePassword: false, | ||
28 | prefix: '', | ||
29 | suffix: '', | ||
30 | }; | ||
31 | |||
32 | state = { | ||
33 | showPassword: false, | ||
34 | passwordScore: 0, | ||
35 | } | ||
36 | |||
37 | componentDidMount() { | ||
38 | if (this.props.focus) { | ||
39 | this.focus(); | ||
40 | } | ||
41 | } | ||
42 | |||
43 | onChange(e) { | ||
44 | const { field, scorePassword } = this.props; | ||
45 | |||
46 | field.onChange(e); | ||
47 | |||
48 | if (scorePassword) { | ||
49 | this.setState({ passwordScore: scorePasswordFunc(field.value) }); | ||
50 | } | ||
51 | } | ||
52 | |||
53 | focus() { | ||
54 | this.inputElement.focus(); | ||
55 | } | ||
56 | |||
57 | inputElement = null; | ||
58 | |||
59 | render() { | ||
60 | const { | ||
61 | field, | ||
62 | className, | ||
63 | showPasswordToggle, | ||
64 | showLabel, | ||
65 | scorePassword, | ||
66 | prefix, | ||
67 | suffix, | ||
68 | } = this.props; | ||
69 | |||
70 | const { passwordScore } = this.state; | ||
71 | |||
72 | let type = field.type; | ||
73 | if (type === 'password' && this.state.showPassword) { | ||
74 | type = 'text'; | ||
75 | } | ||
76 | |||
77 | return ( | ||
78 | <div | ||
79 | className={classnames({ | ||
80 | 'franz-form__field': true, | ||
81 | 'has-error': field.error, | ||
82 | [`${className}`]: className, | ||
83 | })} | ||
84 | > | ||
85 | <div className="franz-form__input-wrapper"> | ||
86 | {prefix && ( | ||
87 | <span className="franz-form__input-prefix">{prefix}</span> | ||
88 | )} | ||
89 | <input | ||
90 | id={field.id} | ||
91 | type={type} | ||
92 | className="franz-form__input" | ||
93 | name={field.name} | ||
94 | value={field.value} | ||
95 | placeholder={field.placeholder} | ||
96 | onChange={e => this.onChange(e)} | ||
97 | onBlur={field.onBlur} | ||
98 | onFocus={field.onFocus} | ||
99 | ref={(element) => { this.inputElement = element; }} | ||
100 | /> | ||
101 | {suffix && ( | ||
102 | <span className="franz-form__input-suffix">{suffix}</span> | ||
103 | )} | ||
104 | {showPasswordToggle && ( | ||
105 | <button | ||
106 | type="button" | ||
107 | className={classnames({ | ||
108 | 'franz-form__input-modifier': true, | ||
109 | mdi: true, | ||
110 | 'mdi-eye': !this.state.showPassword, | ||
111 | 'mdi-eye-off': this.state.showPassword, | ||
112 | })} | ||
113 | onClick={() => this.setState({ showPassword: !this.state.showPassword })} | ||
114 | tabIndex="-1" | ||
115 | /> | ||
116 | )} | ||
117 | {scorePassword && ( | ||
118 | <div className="franz-form__password-score"> | ||
119 | {/* <progress value={this.state.passwordScore} max="100" /> */} | ||
120 | <meter | ||
121 | value={passwordScore < 5 ? 5 : passwordScore} | ||
122 | low="30" | ||
123 | high="75" | ||
124 | optimum="100" | ||
125 | max="100" | ||
126 | /> | ||
127 | </div> | ||
128 | )} | ||
129 | </div> | ||
130 | {field.label && showLabel && ( | ||
131 | <label | ||
132 | className="franz-form__label" | ||
133 | htmlFor={field.name} | ||
134 | > | ||
135 | {field.label} | ||
136 | </label> | ||
137 | )} | ||
138 | {field.error && ( | ||
139 | <div | ||
140 | className="franz-form__error" | ||
141 | > | ||
142 | {field.error} | ||
143 | </div> | ||
144 | )} | ||
145 | </div> | ||
146 | ); | ||
147 | } | ||
148 | } | ||