aboutsummaryrefslogtreecommitdiffstats
path: root/packages/forms/src/input/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/forms/src/input/index.tsx')
-rw-r--r--packages/forms/src/input/index.tsx34
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}>