6a2e1ba45f
* fix: improve styling and behaviour to match mockups This fixes the following issues: TNL-8737: Description field should be larger TNL-8738: Increase right and left padding in expanded card TNL-8739: Expand/Collapse icon should have fixed position TNL-8741: Remove field helper text on field error state TNL-8742: Use consistent spacing between field and helper text TNL-8743: Too much spacing above Save button TNL-8744: remove field error states when re-focusing on field TNL-8762: Copy changes to team configuration TNL-8763: Radio button rendering issues TNL-8764: Use lowercase "M" for "Public managed" and "Private managed" labels TNL-8766: Match style of labels in collapsed card
37 lines
971 B
JavaScript
37 lines
971 B
JavaScript
import { Form, TransitionReplace } from '@edx/paragon';
|
|
import { getIn, useFormikContext } from 'formik';
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
|
|
function FormikErrorFeedback({ name, children }) {
|
|
const { touched, errors } = useFormikContext();
|
|
const fieldTouched = getIn(touched, name);
|
|
const fieldError = getIn(errors, name);
|
|
|
|
return (
|
|
<TransitionReplace>
|
|
{fieldTouched && fieldError
|
|
? (
|
|
<Form.Control.Feedback type="invalid" hasIcon={false} key={`${name}-error-feedback`}>
|
|
{fieldError}
|
|
</Form.Control.Feedback>
|
|
)
|
|
: (
|
|
<React.Fragment key={`${name}-no-error-feedback`}>
|
|
{children}
|
|
</React.Fragment>
|
|
)}
|
|
</TransitionReplace>
|
|
);
|
|
}
|
|
|
|
FormikErrorFeedback.propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
children: PropTypes.node,
|
|
};
|
|
FormikErrorFeedback.defaultProps = {
|
|
children: null,
|
|
};
|
|
|
|
export default FormikErrorFeedback;
|