diff options
Diffstat (limited to 'packages/forms/src/input/index.tsx')
-rw-r--r-- | packages/forms/src/input/index.tsx | 34 |
1 files changed, 19 insertions, 15 deletions
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index d82ee5fe3..8f17ba2f9 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -34,6 +34,7 @@ class InputComponent extends Component<IProps, IState> { | |||
34 | public static defaultProps = { | 34 | public static defaultProps = { |
35 | focus: false, | 35 | focus: false, |
36 | onChange: () => {}, | 36 | onChange: () => {}, |
37 | onBlur: () => {}, | ||
37 | scorePassword: false, | 38 | scorePassword: false, |
38 | showLabel: true, | 39 | showLabel: true, |
39 | showPasswordToggle: false, | 40 | showPasswordToggle: false, |
@@ -74,6 +75,7 @@ class InputComponent extends Component<IProps, IState> { | |||
74 | render() { | 75 | render() { |
75 | const { | 76 | const { |
76 | classes, | 77 | classes, |
78 | className, | ||
77 | disabled, | 79 | disabled, |
78 | error, | 80 | error, |
79 | id, | 81 | id, |
@@ -84,6 +86,11 @@ class InputComponent extends Component<IProps, IState> { | |||
84 | showLabel, | 86 | showLabel, |
85 | showPasswordToggle, | 87 | showPasswordToggle, |
86 | type, | 88 | type, |
89 | value, | ||
90 | name, | ||
91 | placeholder, | ||
92 | spellCheck, | ||
93 | onBlur, | ||
87 | } = this.props; | 94 | } = this.props; |
88 | 95 | ||
89 | const { | 96 | const { |
@@ -91,18 +98,7 @@ class InputComponent extends Component<IProps, IState> { | |||
91 | passwordScore, | 98 | passwordScore, |
92 | } = this.state; | 99 | } = this.state; |
93 | 100 | ||
94 | const inputProps = pick(this.props, htmlElementAttributes['input']); | 101 | const inputType = type === 'password' && showPassword ? 'text' : type; |
95 | |||
96 | if (type === 'password' && showPassword) { | ||
97 | inputProps.type = 'text'; | ||
98 | } | ||
99 | |||
100 | inputProps.onChange = this.onChange.bind(this); | ||
101 | |||
102 | const cssClasses = classnames({ | ||
103 | [`${inputProps.className}`]: inputProps.className, | ||
104 | [`${classes.input}`]: true, | ||
105 | }); | ||
106 | 102 | ||
107 | return ( | 103 | return ( |
108 | <Wrapper> | 104 | <Wrapper> |
@@ -110,10 +106,11 @@ class InputComponent extends Component<IProps, IState> { | |||
110 | title={label} | 106 | title={label} |
111 | showLabel={showLabel} | 107 | showLabel={showLabel} |
112 | htmlFor={id} | 108 | htmlFor={id} |
109 | className={className} | ||
113 | > | 110 | > |
114 | <div | 111 | <div |
115 | className={classnames({ | 112 | className={classnames({ |
116 | [`${classes.hasPasswordScore}`]: showPasswordToggle, | 113 | [`${classes.hasPasswordScore}`]: scorePassword, |
117 | [`${classes.wrapper}`]: true, | 114 | [`${classes.wrapper}`]: true, |
118 | [`${classes.disabled}`]: disabled, | 115 | [`${classes.disabled}`]: disabled, |
119 | [`${classes.hasError}`]: error, | 116 | [`${classes.hasError}`]: error, |
@@ -124,9 +121,16 @@ class InputComponent extends Component<IProps, IState> { | |||
124 | </span> | 121 | </span> |
125 | )} | 122 | )} |
126 | <input | 123 | <input |
127 | {...inputProps} | 124 | id={id} |
128 | className={cssClasses} | 125 | type={inputType} |
126 | name={name} | ||
127 | value={value} | ||
128 | placeholder={placeholder} | ||
129 | spellCheck={spellCheck} | ||
130 | className={classes.input} | ||
129 | ref={this.inputRef} | 131 | ref={this.inputRef} |
132 | onChange={this.onChange.bind(this)} | ||
133 | onBlur={onBlur} | ||
130 | /> | 134 | /> |
131 | {suffix && ( | 135 | {suffix && ( |
132 | <span className={classes.suffix}> | 136 | <span className={classes.suffix}> |