diff --git a/packages/strapi-helper-plugin/lib/src/components/InputErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputErrors/index.js
new file mode 100644
index 0000000000..0d90a7b2da
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/InputErrors/index.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { isEmpty, isObject, map } from 'lodash';
+import cn from 'classnames';
+
+import styles from './styles.scss';
+
+function InputErrors(props) {
+ const divStyle = Object.assign({ display: 'block' }, props.style);
+
+ return (
+
+ {map(props.errors, (error, key) => {
+ const displayError = isObject(error) && error.id ?
+
: error;
+
+ return (
+
+ {displayError}
+
+ )
+ })}
+
+ );
+}
+
+InputErrors.defaultProps = {
+ className: '',
+ errors: [],
+ style: {},
+};
+
+InputErrors.propTypes = {
+ className: PropTypes.string,
+ errors: PropTypes.array,
+ style: PropTypes.object,
+};
+
+export default InputErrors;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputErrors/styles.scss
new file mode 100644
index 0000000000..5128a83a4e
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/InputErrors/styles.scss
@@ -0,0 +1,6 @@
+.errorContainer {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ line-height: 1.3rem;
+ font-size: 1.3rem;
+}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
index 3b98ae522e..ccdb9cc6da 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
@@ -6,6 +6,7 @@ import cn from 'classnames';
// Design
import Label from 'components/Label';
import InputDescription from 'components/InputDescription';
+import InputErrors from 'components/InputErrors';
import InputText from 'components/InputText';
import styles from './styles.scss';
@@ -49,7 +50,7 @@ class InputTextWithErrors extends React.Component { // eslint-disable-line react
}
render() {
- const { autoFocus, inputClassName, name, onChange, onFocus, placeholder, value } = this.props;
+ const { autoFocus, errorsClassName, errorsStyle, inputClassName, inputStyle, name, onChange, onFocus, placeholder, value } = this.props;
const handleBlur = isFunction(this.props.onBlur) ? this.props.onBlur : this.handleBlur;
return (
@@ -69,9 +70,11 @@ class InputTextWithErrors extends React.Component { // eslint-disable-line react
onChange={onChange}
onFocus={onFocus}
placeholder={placeholder}
+ style={inputStyle}
value={value}
/>
+
);
}
@@ -119,7 +122,10 @@ InputTextWithErrors.defaultProps = {
onBlur: false,
onFocus: () => {},
errors: [],
+ errorsClassName: '',
+ errorsStyle: {},
inputClassName: '',
+ inputStyle: {},
placeholder: 'app.utils.placeholder.defaultMessage',
validations: {},
};
@@ -131,7 +137,10 @@ InputTextWithErrors.propTypes = {
]),
didCheckErrors: PropTypes.bool,
errors: PropTypes.array,
+ errorsClassName: PropTypes.string,
+ errorsStyle: PropTypes.object,
inputClassName: PropTypes.string,
+ inputStyle: PropTypes.object,
onBlur: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.func,
@@ -139,7 +148,7 @@ InputTextWithErrors.propTypes = {
onChange: PropTypes.func.isRequired,
onFocus: PropTypes.func,
validations: PropTypes.object,
- value: PropTypes.string.isRequired
+ value: PropTypes.string.isRequired,
};
export default InputTextWithErrors;