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;