feat(component): add transformErrors props

Author: charlypoly

lib/forms/component.tsx

@@ -27,7 +27,6 @@ import {
     cleanData,
     getSchemaFromConfig,
     isMutationConfig,
-    transformErrors,
     ApolloFormConfig,
     ReactJsonschemaFormError
 } from './utils';
@@ -59,6 +58,7 @@ export type ApolloFormProps<T> = {
     ui?: UiSchema & ApolloFormUi;
     children?: React.SFC<ApolloRenderProps>;
     liveValidate?: boolean;
+    transformErrors?: (formName: string) => (errors: ReactJsonschemaFormError[]) => ReactJsonschemaFormError[];
 };
 
 export interface ApolloFormState {
@@ -323,7 +323,11 @@ export function configure<MutationNamesType = {}>(opts: ApolloFormConfigureOptio
                     theme={theme}
                     onChange={this.onChange}
                     save={this.save}
-                    transformErrors={transformErrors}
+                    transformErrors={
+                        this.props.transformErrors ?
+                            this.props.transformErrors :
+                            undefined
+                    }
                     config={this.props.config}
                     ui={this.props.ui}
                     liveValidate={this.props.liveValidate}

lib/forms/renderers.tsx

@@ -69,14 +69,15 @@ export interface FormRendererProps {
     // tslint:disable-next-line:no-any
     save: (data: any) => void;
     // tslint:disable-next-line:no-any
-    transformErrors: any;
     config: ApolloFormConfig;
     schema: JSONSchema6;
     data: object;
     isDirty: boolean;
     ui?: UiSchema & ApolloFormUi;
     subTitle?: string;
     liveValidate?: boolean;
+    // tslint:disable-next-line:no-any
+    transformErrors?: any;
 }
 
 export interface FormContext {
@@ -117,7 +118,9 @@ export class FormRenderer extends React.Component<FormRendererProps> {
                 // tslint:disable-next-line:no-any
                 {...{ ErrorList: props.ui ? props.ui.errorListComponent : undefined } as any}
                 transformErrors={
-                    props.transformErrors(formContext.formPrefix)
+                    props.transformErrors ?
+                        props.transformErrors(formContext.formPrefix) :
+                        undefined
                 }
             >
                 {this.props.children}

lib/forms/utils.ts

@@ -196,13 +196,6 @@ export type ReactJsonschemaFormError = {
     property: string;
     stack: string;
 };
-export const transformErrors = (prefix: string) => (errors: ReactJsonschemaFormError[]) => {
-    return errors.map(error => ({
-        ...error,
-        message: `FormError.${prefix}${error.property}.${error.name}`
-        // message: t(`FormError.${prefix}${error.property}.${error.name}`)
-    }));
-};
 
 // Given formData and form properties, remove all formData properties not present in form properties
 export const cleanData = (formData: object, properties: object, parentPath: string | null = null): object => {

stories/index.tsx

@@ -1,17 +1,16 @@
 // tslint:disable-next-line:no-unused-variable
 import { storiesOf } from '@storybook/react';
-import { schema, types } from 'functional-json-schema';
-import { graphqlSync, introspectionQuery, DocumentNode, IntrospectionQuery } from 'graphql';
+import { graphqlSync, introspectionQuery, IntrospectionQuery } from 'graphql';
 import { fromIntrospectionQuery } from 'graphql-2-json-schema';
 import gql from 'graphql-tag';
 import { JSONSchema6 } from 'json-schema';
 import { keys } from 'lodash';
 import * as React from 'react';
-import { ApolloConsumer, Mutation } from 'react-apollo';
+import { ApolloConsumer } from 'react-apollo';
 import { FieldProps } from 'react-jsonschema-form';
 import { schema as mockSchema } from '../graphql-mock';
 import { configure, ApolloFormConfigureTheme, ErrorListComponent } from '../lib/forms/component';
-import { ApolloFormBuilder } from '../lib/forms/definitions';
+import { ReactJsonschemaFormError } from '../lib/forms/utils';
 const { Button, Input, Checkbox, Header, Form, Message } = require('semantic-ui-react');
 const { withKnobs, select, boolean: bool } = require('@storybook/addon-knobs/react');
 
@@ -34,10 +33,17 @@ const ErrorList: ErrorListComponent = p => (
     />
 );
 
+const transformErrors = (prefix: string) => (errors: ReactJsonschemaFormError[]) => {
+    return errors.map(error => ({
+        ...error,
+        message: `FormError.${prefix}${error.property}.${error.name}`
+    }));
+};
+
 const theme: ApolloFormConfigureTheme = {
     templates: {
         FieldTemplate: props => {
-            const { classNames, help, description, errors, children, rawErrors, label } = props;
+            const { description, children, label } = props;
             return (
                 <Form.Field>
                     <label>{label}{props.required && '*'}</label>
@@ -125,6 +131,7 @@ storiesOf('ApolloForm', module)
                                     }
                                 }
                             }}
+                            transformErrors={transformErrors}
                         >
                             {
                                 form => (
@@ -196,6 +203,7 @@ storiesOf('ApolloForm', module)
                                     }
                                 }
                             }}
+                            transformErrors={transformErrors}
                         >
                             {
                                 form => (