Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: replaced deprecated Paragon form components #761

1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ module.config.js
dist/

.idea
.vscode
61 changes: 33 additions & 28 deletions src/components/DateTimeField/index.jsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -157,7 +162,7 @@ DateTimeField.defaultProps = {
utcTimeZone: false,
maxLength: '',
type: '',
pattern: '',
pattern: 'dd/mm/yyyy',
placeholder: '',
};

Expand Down
Original file line number Diff line number Diff line change
@@ -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>
`;
39 changes: 23 additions & 16 deletions src/components/RenderInputTextField/index.jsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
`;
37 changes: 24 additions & 13 deletions src/components/RenderSelectField/index.jsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 = {
Expand Down