+ );
}
/**
- * Component for displaying a summary of all
- * validation errors of the form this component
- * lives in.
+ * Displays a clickable list of errors from the current form. When an
+ * error is clicked, the corresponding input field is focused.
*/
-export class BaseValidationSummary extends React.Component {
- public static displayName: string = 'ValidationSummary';
-
- public static defaultProps = {
- title: 'ojs_form_validationSummaryHeader',
- disableFocusOnSubmit: false,
- };
-
- private headerRef: React.RefObject;
-
- constructor(props: IValidationSummaryProps) {
- super(props);
-
- this.headerRef = React.createRef();
-
- const { context: { registerListener }, id } = props;
- // @ts-ignore TODO: Improve the typings of registerListener to allow custom listener methods
- registerListener(id, this.notify);
-
- this.state = {
- fields: {},
- };
- }
-
- /**
- * Renders a field error
- * @param id Unique id
- * @param fieldName Name of the field
- * @param errors Field errors
- * @param linkCallback Callback for the error click
- */
- private static renderError(id: string, fieldName: string, errors: JSX.Element[], linkCallback: React.MouseEventHandler): JSX.Element {
- return (
-
- );
- }
-
- /**
- * Unregisters the field from the form
- */
- public componentWillUnmount(): void {
- const { context, id } = this.props;
- context.unregisterListener(id);
- }
-
- /**
- * Gets called when a validation state changes
- * @param name Field name
- * @param event Event name
- * @param state Field state
- */
- private notify = (name: string, event: string, state?: IValidationEventArgs): void => {
- if (event === 'validation') {
- this.setState(oldState => ({
- fields: {
- ...oldState.fields,
- [name]: state as IValidationEventArgs,
- },
- }));
- } else if (event === 'submit-invalid') {
- this.scrollIntoView();
- }
+export const ValidationSummary: React.FC = (props) => {
+ const {
+ id,
+ title = 'ojs_form_validationSummaryHeader',
+ disableFocusOnSubmit = false,
+ renderFieldError = defaultRenderFieldError,
+ render,
+ } = props;
+
+ const { headerRef, errorList } = useValidationSummary(id, disableFocusOnSubmit);
+
+ const renderedErrors = errorList.map(([, value]) => renderFieldError(
+ value.id,
+ value.name,
+ value.error,
+ value.linkCallback,
+ ));
+
+ // Don't render anything if there are no errors
+ if (renderedErrors.length === 0) { return null; }
+
+ const summary = (
+
+
+
+ {renderedErrors}
+
+
+ );
+
+ // Use an optional render prop if the user
+ // wants to customize the look and feel of
+ // the validation summary
+ if (render !== undefined) {
+ return render(summary);
}
- private scrollIntoView = (): void => {
- const { disableFocusOnSubmit } = this.props;
- if (this.headerRef.current !== null && !disableFocusOnSubmit) {
- this.headerRef.current.scrollIntoView({ block: 'start', behavior: 'smooth' });
- }
- }
-
- /**
- * Renders a list of all errors
- * @param errors Error array
- */
- private renderErrors(errors: IInvalidField[]): JSX.Element[] {
- const {
- context: {
- stringFormatter,
- },
- } = this.props;
-
- return errors.map((error: IInvalidField) => {
- const errorArray = toArray(error.error);
- const fieldErrors = errorArray.map((item) => {
- const errorString = stringFormatter(item.message_id, item.params);
-
- return (
- {errorString}
- );
- });
-
- // Focuses the invalid field on click on the error message
- const linkCallback = (event: React.MouseEvent): void => {
- event.preventDefault();
- const input = document.getElementById(error.id);
- if (input !== null) {
- input.focus();
- }
- };
-
- const fieldName = stringFormatter(error.name);
-
- // Use an optional render prop if the user
- // wants to customize the output of the error
- const { renderFieldError } = this.props;
- if (renderFieldError !== undefined) {
- return renderFieldError(
- error.id,
- fieldName,
- fieldErrors,
- linkCallback,
- );
- }
-
- return BaseValidationSummary.renderError(
- error.id,
- fieldName,
- fieldErrors,
- linkCallback,
- );
- });
- }
-
- public render(): JSX.Element | null {
- const {
- id,
- title,
- context: {
- stringFormatter,
- },
- } = this.props;
-
- const { fields } = this.state;
-
- // Fetch the current errors out of the form context
- const errors: IInvalidField[] = [];
-
- Object.keys(fields).forEach((name: string) => {
- const state = fields[name];
- if (state.valid || state.error === null) { return; }
-
- errors.push({
- id: name,
- name: state.label,
- error: state.error,
- });
- });
-
- // Don't render anything if there are no errors
- if (errors.length === 0) { return null; }
-
- const renderedErrors = this.renderErrors(errors);
- const titleString = stringFormatter(title);
-
- const summary = (
-
-
{titleString}
-
- {renderedErrors}
-
-
- );
-
- // Use an optional render prop if the user
- // wants to customize the look and feel of
- // the validation summary
- const { render: renderProp } = this.props;
- if (renderProp !== undefined) {
- return renderProp(summary);
- }
-
- return summary;
- }
-}
-
-export const ValidationSummary = withForm(BaseValidationSummary);
+ return summary;
+};
diff --git a/src/components/ValidationSummary/ValidationSummary.types.ts b/src/components/ValidationSummary/ValidationSummary.types.ts
index 23930ac..2c1277a 100644
--- a/src/components/ValidationSummary/ValidationSummary.types.ts
+++ b/src/components/ValidationSummary/ValidationSummary.types.ts
@@ -4,36 +4,39 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
-import { IFormContextProps } from '../withForm';
+import React from 'react';
/**
* Properties for the ValidationSummary
*/
-export interface IValidationSummaryProps extends IFormContextProps {
+export interface IValidationSummaryProps {
/**
- * (html) id for the validation summary container div
+ * Id of this input. Will be used as the unique identifier of the div.
+ * **Must be unique form wide!**
*/
id: string;
/**
- * Optional title text / message id
+ * Message that will be used as the title, wrapped in a h4.
*/
- title: string;
+ title?: string;
/**
- * If true, then the validation summary won't try to sroll
- * itself into view if the user submits an invalid form
+ * If set to true the validation summary will stop automatically scrolling
+ * to itself when the user clicks on a submit button and the form is invalid.
+ * @default false
*/
- disableFocusOnSubmit: boolean;
+ disableFocusOnSubmit?: boolean;
/**
- * Render prop for drawing single field errors
+ * Optional function that can be used to customize the output of each error.
* @param id Id of the failing field
* @param fieldName Display name of the failing field
- * @param errors Rendered error messages
- * @param linkCallback Callback that will focus the failed field
+ * @param errors Object / Array of objects with the rendered error messages
+ * @param linkCallback Function that should be called on click, will focus on the input element.
*/
- renderFieldError?(id: string, fieldName: string, errors: React.ReactNode, linkCallback: React.MouseEventHandler): JSX.Element;
+ renderFieldError?(id: string, fieldName: string, errors: React.ReactNode, linkCallback: React.MouseEventHandler): React.ReactNode;
/**
- * Render prop for customizing the validation summary
+ * Optional function that can be used to customize the ValidationSummary rendering.
+ * Note: This function will only be called when there are errors to be displayed.
* @param children Validation summary content (header + rendered field errors)
*/
- render?(children: JSX.Element): JSX.Element;
+ render?(children: React.ReactNode): React.ReactElement | null;
}
diff --git a/src/components/ValidationSummary/__snapshots__/ValidationSummary.test.tsx.snap b/src/components/ValidationSummary/__snapshots__/ValidationSummary.test.tsx.snap
index e5a5919..ee08212 100644
--- a/src/components/ValidationSummary/__snapshots__/ValidationSummary.test.tsx.snap
+++ b/src/components/ValidationSummary/__snapshots__/ValidationSummary.test.tsx.snap
@@ -1,5 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[` basic rendering should render correctly if there is an error 1`] = `
+
+`;
+
exports[` render props render prop should be called with the basic summary render if the form is invalid 1`] = `
render props render prop should be called with th
@@ -32,4 +64,35 @@ exports[` render props render prop should be called with th
`;
+exports[` render props render prop should render the result of the render prop 1`] = `
+
+ mock renderer
+
+`;
+
+exports[` render props renderFieldError prop should render the result of the render prop 1`] = `
+