feat: extra registration fields improvements

src/field-renderer/FieldRenderer.jsx

@@ -1,26 +1,51 @@
-import { Form, Icon } from '@openedx/paragon';
+import React, { useState } from 'react';
+
+import { Form, Icon, TransitionReplace } from '@openedx/paragon';
 import { ExpandMore } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 const FormFieldRenderer = (props) => {
+  const [hasFocus, setHasFocus] = useState(false);
   let formField = null;
   const {
     className, errorMessage, fieldData, onChangeHandler, isRequired, value,
   } = props;
 
   const handleFocus = (e) => {
+    setHasFocus(true);
     if (props.handleFocus) { props.handleFocus(e); }
   };
 
   const handleOnBlur = (e) => {
+    setHasFocus(false);
     if (props.handleBlur) { props.handleBlur(e); }
   };
 
+  const helpTextFeedback = (
+    <TransitionReplace>
+      {hasFocus && fieldData.instructions ? (
+        <Form.Control.Feedback type="default" key="help-text" className="d-block form-text-size">
+          {fieldData.instructions}
+        </Form.Control.Feedback>
+      ) : <React.Fragment key="empty" />}
+    </TransitionReplace>
+  );
+
+  const errorFeedback = isRequired && errorMessage ? (
+    <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
+      {errorMessage}
+    </Form.Control.Feedback>
+  ) : null;
+
   switch (fieldData.type) {
     case 'select': {
       if (!fieldData.options) {
         return null;
       }
+      const optionsArray = Array.isArray(fieldData.options)
+        ? fieldData.options
+        : Object.entries(fieldData.options);
+
       formField = (
         <Form.Group controlId={fieldData.name} isInvalid={!!(isRequired && errorMessage)}>
           <Form.Control
@@ -36,15 +61,12 @@ const FormFieldRenderer = (props) => {
             onFocus={handleFocus}
           >
             <option key="default" value="">{fieldData.label}</option>
-            {fieldData.options.map(option => (
+            {optionsArray.map(option => (
               <option className="data-hj-suppress" key={option[0]} value={option[0]}>{option[1]}</option>
             ))}
           </Form.Control>
-          {isRequired && errorMessage && (
-            <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
-              {errorMessage}
-            </Form.Control.Feedback>
-          )}
+          {helpTextFeedback}
+          {errorFeedback}
         </Form.Group>
       );
       break;
@@ -57,17 +79,17 @@ const FormFieldRenderer = (props) => {
             as="textarea"
             name={fieldData.name}
             value={value}
+            placeholder={fieldData.placeholder}
+            minLength={fieldData.restrictions?.min_length}
+            maxLength={fieldData.restrictions?.max_length}
             aria-invalid={isRequired && Boolean(errorMessage)}
             onChange={(e) => onChangeHandler(e)}
             floatingLabel={fieldData.label}
             onBlur={handleOnBlur}
             onFocus={handleFocus}
           />
-          {isRequired && errorMessage && (
-            <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
-              {errorMessage}
-            </Form.Control.Feedback>
-          )}
+          {helpTextFeedback}
+          {errorFeedback}
         </Form.Group>
       );
       break;
@@ -79,17 +101,17 @@ const FormFieldRenderer = (props) => {
             className={className}
             name={fieldData.name}
             value={value}
+            placeholder={fieldData.placeholder}
+            minLength={fieldData.restrictions?.min_length}
+            maxLength={fieldData.restrictions?.max_length}
             aria-invalid={isRequired && Boolean(errorMessage)}
             onChange={(e) => onChangeHandler(e)}
             floatingLabel={fieldData.label}
             onBlur={handleOnBlur}
             onFocus={handleFocus}
           />
-          {isRequired && errorMessage && (
-            <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
-              {errorMessage}
-            </Form.Control.Feedback>
-          )}
+          {helpTextFeedback}
+          {errorFeedback}
         </Form.Group>
       );
       break;
@@ -110,11 +132,8 @@ const FormFieldRenderer = (props) => {
           >
             {fieldData.label}
           </Form.Checkbox>
-          {isRequired && errorMessage && (
-            <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
-              {errorMessage}
-            </Form.Control.Feedback>
-          )}
+          {helpTextFeedback}
+          {errorFeedback}
         </Form.Group>
       );
       break;
@@ -140,7 +159,16 @@ FormFieldRenderer.propTypes = {
     type: PropTypes.string,
     label: PropTypes.string,
     name: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+    placeholder: PropTypes.string,
+    instructions: PropTypes.string,
+    restrictions: PropTypes.shape({
+      min_length: PropTypes.number,
+      max_length: PropTypes.number,
+    }),
+    options: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+      PropTypes.objectOf(PropTypes.string),
+    ]),
   }).isRequired,
   onChangeHandler: PropTypes.func.isRequired,
   handleBlur: PropTypes.func,