yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-26 08:52:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix input email error css

Browse Source
This commit is contained in:
cyril lopez 2017-12-06 16:21:12 +01:00
parent 95d87cfb35
commit 9a2e051361
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/strapi-helper-plugin/lib/src/components/Input/index.js
View File

@ -20,6 +20,7 @@ class Input extends React.Component { // eslint-disable-line react/prefer-statel
errors: [], errors: [],
hasInitialValue: false, hasInitialValue: false,
showPassword: false, showPassword: false,
isFocus: false,
}; };
} }
@ -65,6 +66,24 @@ class Input extends React.Component { // eslint-disable-line react/prefer-statel
this.props.onChange({ target }); this.props.onChange({ target });
} }
handleBlurEmail = (e) => {
this.setState({ isFocus: !this.state.isFocus });
if (this.props.handleBlur) {
this.props.handleBlur(e);
} else {
this.handleBlur(e);
}
}
handleFocusEmail = (e) => {
this.setState({ isFocus: !this.state.isFocus });
if (this.props.onFocus) {
this.props.onFocus(e);
}
}
handleToggle = (e) => { handleToggle = (e) => {
const target = { const target = {
type: 'toggle', type: 'toggle',
@ -180,7 +199,7 @@ class Input extends React.Component { // eslint-disable-line react/prefer-statel
<FormattedMessage id={`${this.props.label}`} /> <FormattedMessage id={`${this.props.label}`} />
</label> </label>
<div className={`input-group ${styles.input} ${styles.inputEmail}`} style={{ marginBottom: '1rem'}}> <div className={`input-group ${styles.input} ${styles.inputEmail}`} style={{ marginBottom: '1rem'}}>
<span className={`input-group-addon ${styles.addonEmail} ${!this.props.deactivateErrorHighlight && !isEmpty(this.state.errors) ? styles.errorAddon: ''}`} /> <span className={`input-group-addon ${styles.addonEmail} ${!this.props.deactivateErrorHighlight && !isEmpty(this.state.errors) && !this.state.isFocus ? styles.errorAddon: ''}`} />
<FormattedMessage id={this.props.placeholder || this.props.label} values={this.props.labelValues}> <FormattedMessage id={this.props.placeholder || this.props.label} values={this.props.labelValues}>
{(placeholder) => ( {(placeholder) => (
<input <input
@ -189,8 +208,8 @@ class Input extends React.Component { // eslint-disable-line react/prefer-statel
value={this.props.value} value={this.props.value}
name={this.props.name} name={this.props.name}
id={this.props.label} id={this.props.label}
onBlur={this.props.onBlur || this.handleBlur} onBlur={this.handleBlurEmail}
onFocus={this.props.onFocus} onFocus={this.handleFocusEmail}
placeholder={placeholder} placeholder={placeholder}
disabled={this.props.disabled} disabled={this.props.disabled}
type="email" type="email"

4
packages/strapi-helper-plugin/lib/src/components/Input/styles.scss
View File

@ -117,6 +117,10 @@
border-color: #E3E9F3; border-color: #E3E9F3;
} }
} }
& + span {
border-color: #E3E9F3;
}
} }
.input { .input {