refactor: replaced deprecated Paragon form components

Main issue: openedx/wg-frontend#102 PR: #761
openedx · Dec 8, 2022 · b6a2d3e · b6a2d3e
1 parent 5792440
commit b6a2d3e
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 129 deletions.
diff --git a/src/components/DateTimeField/index.jsx b/src/components/DateTimeField/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import { InputText } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 import {
   getDateWithDashes,
   getDateWithSlashes,
@@ -84,45 +84,50 @@ class DateTimeField extends React.Component {
     return (
       <div className="row">
         <div className="col-6">
-          <InputText
-            name={`${name}Date`}
-            type={type}
-            value={this.getValue(type, date)}
-            label={(
+          <Form.Group controlId={`${name}-date-label`}>
+            <Form.Label>
               <FieldLabel
                 id={`${name}-date-label`}
                 text={dateLabel}
                 required
                 helpText={helpText}
               />
-            )}
-            placeholder={placeholder}
-            pattern={pattern}
-            maxLength={maxLength}
-            required={required}
-            disabled={disabled}
-            onChange={e => this.updateDate(e)}
-            min={minDate}
-            onInvalid={onInvalid}
-          />
+            </Form.Label>
+            <Form.Control
+              name={`${name}Date`}
+              type={type}
+              value={this.getValue(type, date)}
+              id={`${name}-date-label`}
+              placeholder={placeholder}
+              pattern={pattern}
+              maxLength={maxLength}
+              required={required}
+              disabled={disabled}
+              onChange={event => this.updateDate(event.target.value)}
+              min={minDate}
+              onInvalid={onInvalid}
+            />
+          </Form.Group>
         </div>
         <div className="col-6">
-          <InputText
-            name={`${name}Time`}
-            type="time"
-            value={time || '12:00'}
-            label={(
+          <Form.Group controlId={`${name}-date-label`}>
+            <Form.Label>
               <FieldLabel
                 id={`${name}-time-label`}
                 text={timeLabel}
                 required
               />
-            )}
-            placeholder="HH:mm"
-            required={required}
-            disabled={disabled}
-            onChange={e => this.updateTime(e)}
-          />
+            </Form.Label>
+            <Form.Control
+              name={`${name}Time`}
+              type="time"
+              value={time || '12:00'}
+              placeholder="HH:mm"
+              required={required}
+              disabled={disabled}
+              onChange={event => this.updateDate(event.target.value)}
+            />
+          </Form.Group>
         </div>
       </div>
     );
@@ -157,7 +162,7 @@ DateTimeField.defaultProps = {
   utcTimeZone: false,
   maxLength: '',
   type: '',
-  pattern: '',
+  pattern: 'dd/mm/yyyy',
   placeholder: '',
 };
 

diff --git a/src/components/RenderInputTextField/__snapshots__/RenderInputTextField.test.jsx.snap b/src/components/RenderInputTextField/__snapshots__/RenderInputTextField.test.jsx.snap
@@ -1,53 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RenderInputTextField renders html for number type 1`] = `
-<asInput(withDeprecatedProps(InputText))
-  dangerIconDescription=""
-  disabled={false}
-  inline={false}
-  isValid={true}
-  label="TestLabel"
-  maxLength=""
-  name="Test"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyPress={[Function]}
-  pattern={null}
-  placeholder=""
-  required={false}
-  themes={
-    Array [
-      "danger",
-    ]
-  }
-  type="number"
-  validationMessage=""
-  value=""
-/>
+<div
+  className="pgn__form-group"
+>
+  <FormGroupContextProvider
+    controlId="Test-text-label"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      TestLabel
+    </FormLabel>
+    <ForwardRef
+      as="input"
+      disabled={false}
+      id="Test-text-label"
+      maxLength=""
+      name="Test"
+      pattern={null}
+      placeholder=""
+      plaintext={false}
+      required={false}
+      type="number"
+    />
+  </FormGroupContextProvider>
+</div>
 `;
 
 exports[`RenderInputTextField renders html for text 1`] = `
-<asInput(withDeprecatedProps(InputText))
-  dangerIconDescription=""
-  disabled={false}
-  inline={false}
-  isValid={true}
-  label="TestLabel"
-  maxLength=""
-  name="Test"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyPress={[Function]}
-  pattern={null}
-  placeholder=""
-  required={false}
-  themes={
-    Array [
-      "danger",
-    ]
-  }
-  type="text"
-  validationMessage=""
-  value=""
-/>
+<div
+  className="pgn__form-group"
+>
+  <FormGroupContextProvider
+    controlId="Test-text-label"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      TestLabel
+    </FormLabel>
+    <ForwardRef
+      as="input"
+      disabled={false}
+      id="Test-text-label"
+      maxLength=""
+      name="Test"
+      pattern={null}
+      placeholder=""
+      plaintext={false}
+      required={false}
+      type="text"
+    />
+  </FormGroupContextProvider>
+</div>
 `;
diff --git a/src/components/RenderInputTextField/index.jsx b/src/components/RenderInputTextField/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputText } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 const RenderInputTextField = ({
   input,
@@ -15,21 +15,28 @@ const RenderInputTextField = ({
   pattern,
   meta: { touched, error },
 }) => (
-  <InputText
-    {...input}
-    {...extraInput}
-    placeholder={placeholder}
-    maxLength={maxLength}
-    pattern={pattern}
-    name={name}
-    label={label}
-    type={type}
-    disabled={disabled}
-    required={required}
-    isValid={!(touched && error)}
-    validationMessage={error}
-    themes={['danger']}
-  />
+  <Form.Group controlId={`${name}-text-label`} isInvalid={touched && error}>
+    <Form.Label>
+      {label}
+    </Form.Label>
+    <Form.Control
+      {...input}
+      {...extraInput}
+      id={`${name}-text-label`}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      pattern={pattern}
+      name={name}
+      type={type}
+      disabled={disabled}
+      required={required}
+    />
+    {touched && error && (
+    <Form.Control.Feedback>
+      {error}
+    </Form.Control.Feedback>
+    )}
+  </Form.Group>
 );
 
 RenderInputTextField.defaultProps = {

diff --git a/src/components/RenderSelectField/__snapshots__/RenderSelectField.test.jsx.snap b/src/components/RenderSelectField/__snapshots__/RenderSelectField.test.jsx.snap
@@ -1,30 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RenderSelectField renders html for select field 1`] = `
-<asInput(withDeprecatedProps(InputSelect))
-  dangerIconDescription=""
-  disabled={false}
-  inline={false}
-  isValid={true}
-  label="TestLabel"
-  name="Test"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyPress={[Function]}
-  options={
-    Array [
-      "one",
-      "two",
-      "three",
-    ]
-  }
-  required={false}
-  themes={
-    Array [
-      "danger",
-    ]
-  }
-  validationMessage=""
-  value=""
-/>
+<div
+  className="pgn__form-group"
+>
+  <FormGroupContextProvider
+    controlId="Test-text-label"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      TestLabel
+    </FormLabel>
+    <ForwardRef
+      as="select"
+      disabled={false}
+      label="TestLabel"
+      name="Test"
+      plaintext={false}
+      required={false}
+    >
+      <option />
+      <option />
+      <option />
+    </ForwardRef>
+  </FormGroupContextProvider>
+</div>
 `;
diff --git a/src/components/RenderSelectField/index.jsx b/src/components/RenderSelectField/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputSelect } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 const RenderSelectField = ({
   input,
@@ -12,18 +12,29 @@ const RenderSelectField = ({
   meta: { touched, error },
   options,
 }) => (
-  <InputSelect
-    {...input}
-    {...extraInput}
-    name={name}
-    label={label}
-    disabled={disabled}
-    required={required}
-    isValid={!(touched && error)}
-    validationMessage={error}
-    themes={['danger']}
-    options={options}
-  />
+  <Form.Group controlId={`${name}-text-label`} isInvalid={touched && error}>
+    <Form.Label>
+      {label}
+    </Form.Label>
+    <Form.Control
+      {...input}
+      {...extraInput}
+      as="select"
+      name={name}
+      label={label}
+      disabled={disabled}
+      required={required}
+    >
+      {options.map(option => (
+        <option key={option.value} value={option.value}>{option.label}</option>
+      ))}
+      {touched && error && (
+      <Form.Control.Feedback>
+        {error}
+      </Form.Control.Feedback>
+      )}
+    </Form.Control>
+  </Form.Group>
 );
 
 RenderSelectField.defaultProps = {