Created InputText and InputTextWithErrors components

docs/3.x.x/en/plugin-development/ui-components.md

@@ -364,23 +364,53 @@ export default function Foo(props) {
     <div>
       {/* Example without i18n */}
       <Label htmlFor="email" message="Enter your email" />
-      <input name="email" id="email" value={props.values.email} onChange={props.onChange} type="email" />
+      <input
+        id="email"
+        name="email"
+        onChange={props.onChange}
+        type="email"
+        value={props.values.email}
+      />
 
       {/* Example using children className and style */}
       <Label htmlFor="address" className={styles.labelEmail} style={{ marginTop: '10px' }} >Enter your address</Label>
-      <input name="address" value={props.values.address} onChange={props.onChange} type="text" />
+      <input
+        id="address"
+        name="address"
+        onChange={props.onChange}
+        type="text"
+        value={props.values.address}
+      />
 
       {/* Example using a function */}
       <Label htmlFor="name" message={() => <span>Enter your <b>name</b></span>} />
-      <input name="name" value={props.values.name} onChange={props.onChange} type="text" />
+      <input
+        id="name"
+        name="name"
+        onChange={props.onChange}
+        type="text"
+        value={props.values.name}
+      />
 
       {/* Example using i18n only */}
       <Label htmlFor="tel" message={{ id: 'my-plugin.tel.label' />
-      <input name="tel" value={props.values.tel} onChange={props.onChange} type="number" />
+      <input
+        id="tel"
+        name="tel"
+        onChange={props.onChange}
+        type="number"
+        value={props.values.tel}
+      />
 
       {/* Example using i18n and dynamic value */}
       <Label htmlFor="foo" message={{ id: 'my-plugin.foo.label', params: { bar: 'baz' } }} />
-      <input name="foo" value={props.values.foo} onChange={props.onChange} type="text" />
+      <input
+        id="foo"
+        name="foo"
+        type="text"
+        onChange={props.onChange}
+        value={props.values.foo}
+      />
     </div>
   );
 }

packages/strapi-admin/admin/src/translations/en.json

@@ -55,6 +55,8 @@
   "app.components.PluginCard.price.free": "Free",
   "app.components.PluginCard.more-details": "More details",
 
+  "app.utils.placeholder.defaultMessage": " ",
+
   "components.AutoReloadBlocker.header": "Reload feature is required for this plugin.",
   "components.AutoReloadBlocker.description": "Open the following file and enable the feature.",
 

packages/strapi-admin/admin/src/translations/fr.json

@@ -55,6 +55,8 @@
   "app.components.PluginCard.price.free": "Gratuit",
   "app.components.PluginCard.more-details": "Plus de détails",
 
+  "app.utils.placeholder.defaultMessage": " ",
+
   "components.AutoReloadBlocker.header": "L'autoReload doit être activé pour ce plugin.",
   "components.AutoReloadBlocker.description": "Ouvrez le fichier suivant pour activer cette fonctionnalité.",
 

packages/strapi-helper-plugin/lib/src/components/InputText/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import cn from 'classnames';
+
+import styles from './styles.scss';
+
+function InputText(props) {
+  return (
+    <FormattedMessage id={props.placeholder} defaultMessage={props.placeholder}>
+      {(message) => (
+        <input
+          autoFocus={props.autoFocus}
+          className={cn(
+            styles.input,
+            'form-control',
+            !props.deactivateErrorHighlight && !isEmpty(props.errors) && 'is-invalid',
+            !isEmpty(props.className) && props.className,
+          )}
+          disabled={props.disabled}
+          id={props.name}
+          name={props.name}
+          onBlur={props.onBlur}
+          onChange={props.onChange}
+          onFocus={props.onFocus}
+          placeholder={message}
+          style={props.style}
+          tabIndex={props.tabIndex}
+          value={props.value}
+        />
+      )}
+    </FormattedMessage>
+  )
+}
+
+InputText.defaultProps = {
+  autoFocus: false,
+  className: '',
+  deactivateErrorHighlight: false,
+  disabled: false,
+  errors: [],
+  onBlur: () => {},
+  onFocus: () => {},
+  placeholder: 'app.utils.placeholder.defaultMessage',
+  style: {},
+  tabIndex: '0',
+};
+
+InputText.propTypes = {
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  deactivateErrorHighlight: PropTypes.bool,
+  disabled: PropTypes.bool,
+  errors: PropTypes.array,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  style: PropTypes.object,
+  tabIndex: PropTypes.string,
+  value: PropTypes.string.isRequired,
+};
+
+export default InputText;

packages/strapi-helper-plugin/lib/src/components/InputText/styles.scss

@@ -0,0 +1,12 @@
+.input {
+  height: 3.4rem;
+  margin-top: .9rem;
+  padding-left: 1rem;
+  background-size: 0 !important;
+  border: 1px solid #E3E9F3;
+  border-radius: 0.25rem;
+  line-height: 3.4rem;
+  font-size: 1.3rem;
+  font-family: 'Lato' !important;
+  box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
+}

packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { includes, isEmpty, mapKeys, reject } from 'lodash';
+import cn from 'classnames';
+
+// Design
+import Label from 'components/Label';
+import InputText from 'components/InputText';
+
+import styles from './styles.scss';
+
+class InputTextWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  state = { errors: [], hasInitialValue: false };
+
+  componentDidMount() {
+    const { value, errors } = this.props;
+
+    // Prevent the input from displaying an error when the user enters and leaves without filling it
+    if (value && !isEmpty(value)) {
+      this.setState({ hasInitialValue: true });
+    }
+
+    // Display input error if it already has some
+    if (!isEmpty(errors)) {
+      this.setState({ errors });
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Check if errors have been updated during validations
+    if (nextProps.didCheckErrors !== this.props.didCheckErrors) {
+      // Remove from the state the errors that have already been set
+      const errors = isEmpty(nextProps.errors) ? [] : nextProps.errors;
+      this.setState({ errors });
+    }
+  }
+
+  /**
+   * Set the errors depending on the validations given to the input
+   * @param  {Object} target
+   */
+  handleBlur = ({ target }) => {
+    // Prevent from displaying error if the input is initially isEmpty
+    if (!isEmpty(target.value) || this.state.hasInitialValue) {
+      const errors = this.validate(target.value);
+      this.setState({ errors, hasInitialValue: true });
+    }
+  }
+
+  render() {
+    const { autoFocus, inputClassName, name, onChange, placeholder, value } = this.props;
+
+    return (
+      <div className={cn(
+          styles.container,
+          this.props.customBootstrapClass || 'col-md-6',
+          this.props.className,
+        )}
+      >
+        <Label htmlFor={name} message={this.props.label && this.props.label.message || this.props.label} />
+        <InputText
+          autoFocus={autoFocus}
+          className={inputClassName}
+          errors={this.state.errors}
+          name={name}
+          onBlur={this.handleBlur}
+          onChange={onChange}
+          placeholder={placeholder}
+          value={value}
+        />
+      </div>
+    );
+  }
+
+  validate = (value) => {
+    const requiredError = { id: 'components.Input.error.validation.required' };
+    let errors = [];
+
+    mapKeys(this.props.validations, (validationValue, validationKey) => {
+      switch (validationKey) {
+        case 'maxLength': {
+          if (value.length > validationValue) {
+            errors.push({ id: 'components.Input.error.validation.maxLength' });
+          }
+          break;
+        }
+        case 'minLength': {
+          if (value.length < validationValue) {
+            errors.push({ id: 'components.Input.error.validation.minLength' });
+          }
+          break;
+        }
+        case 'required': {
+          if (value.length === 0) {
+            errors.push({ id: 'components.Input.error.validation.required' });
+          }
+          break;
+        }
+        default:
+          errors = [];
+      }
+    });
+
+    if (includes(errors, requiredError)) {
+      errors = reject(errors, (error) => error !== requiredError);
+    }
+
+    return errors;
+  }
+}
+
+InputTextWithErrors.defaultProps = {
+  customBootstrapClass: false,
+  didCheckErrors: false,
+  errors: [],
+  inputClassName: '',
+  placeholder: 'app.utils.placeholder.defaultMessage',
+  validations: {},
+};
+
+InputTextWithErrors.propTypes = {
+  customBootstrapClass: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+  ]),
+  didCheckErrors: PropTypes.bool,
+  errors: PropTypes.array,
+  inputClassName: PropTypes.string,
+  validations: PropTypes.object,
+  value: PropTypes.string.isRequired
+};
+
+export default InputTextWithErrors;

packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/styles.scss

@@ -0,0 +1,5 @@
+.container {
+  min-width: 200px;
+  margin-bottom: 1.5rem;
+  font-size: 1.3rem;
+}

packages/strapi-helper-plugin/lib/src/components/Label/index.js

@@ -14,7 +14,7 @@ function Label(props) {
   }
 
   if (isObject(props.message) && props.message.id) {
-    content = <FormattedMessage id={props.message.id} defaultMessage=" " messages={props.message.params} />;
+    content = <FormattedMessage id={props.message.id} defaultMessage=" " values={props.message.params} />;
   }
 
   if (isFunction(props.message)) {