guestbell-forms 3.0.85 → 3.0.86

package/src/lib/components/form/FormValidationSummary.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import guid from '../utils/Guid';
-import { withFormContext } from './withFormContext';
-import { FormContextProps, FormComponentContextState } from './FormContext';
+import {
+  FormValidationContextProps,
+  FormComponentContextState,
+} from './FormValidationContext';
 import { Button } from './../button/Button';
 import classNames from 'classnames';
 
 import * as ArrowIcon from 'material-design-icons/maps/svg/production/ic_my_location_24px.svg';
+import { withFormValidationContext } from './withFormValidationContext';
 
 export interface FormValidationSummaryComponentProps {
   componentsWithErrors: FormComponentContextState[];
@@ -20,7 +23,7 @@ export type FormValidationSummaryProps = {
   Component?:
     | React.ComponentType<FormValidationSummaryComponentProps>
     | React.FC<FormValidationSummaryComponentProps>;
-} & FormContextProps;
+} & FormValidationContextProps;
 
 export interface FormValidationSummaryState {}
 
@@ -86,9 +89,9 @@ export class FormValidationSummaryRaw extends React.PureComponent<
   public componentId = guid();
 
   public render() {
-    const componentsWithErrors = this.props.formContext
-      ? Object.keys(this.props.formContext.components)
-          .map((key) => this.props.formContext.components[key])
+    const componentsWithErrors = this.props.formValidationContext
+      ? Object.keys(this.props.formValidationContext.components)
+          .map((key) => this.props.formValidationContext.components[key])
           .filter((component) => {
             if (!component.validation.isValid && !component.validation.name) {
               console.warn(
@@ -119,4 +122,6 @@ export class FormValidationSummaryRaw extends React.PureComponent<
 }
 
 export const FormValidationSummary =
-  withFormContext<FormValidationSummaryProps>(FormValidationSummaryRaw);
+  withFormValidationContext<FormValidationSummaryProps>(
+    FormValidationSummaryRaw
+  );

package/src/lib/components/form/withFormContext.tsx

@@ -2,19 +2,22 @@ import * as React from 'react';
 import { FormContextConsumer, FormContextProps } from './FormContext';
 
 export function withFormContext<P extends FormContextProps>(
-  Component: React.ComponentClass<P>
+  Component: React.ComponentClass<P> | React.ForwardRefExoticComponent<P>
 ): React.ForwardRefExoticComponent<
-  React.RefAttributes<InstanceType<typeof Component>> &
+  React.RefAttributes<
+    React.ComponentClass<P> | React.ForwardRefExoticComponent<P>
+  > &
     React.PropsWithoutRef<React.PropsWithChildren<P>>
 > {
-  const WithFormContext = React.forwardRef<InstanceType<typeof Component>, P>(
-    (props, ref) => {
-      return (
-        <FormContextConsumer>
-          {value => <Component ref={ref} {...props} formContext={value} />}
-        </FormContextConsumer>
-      );
-    }
-  );
+  const WithFormContext = React.forwardRef<
+    React.ComponentClass<P> | React.ForwardRefExoticComponent<P>,
+    P
+  >((props, ref) => {
+    return (
+      <FormContextConsumer>
+        {(value) => <Component ref={ref} {...props} formContext={value} />}
+      </FormContextConsumer>
+    );
+  });
   return WithFormContext;
 }

package/src/lib/components/form/withFormValidationContext.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {
+  FormValidationContextConsumer,
+  FormValidationContextProps,
+} from './FormValidationContext';
+
+export function withFormValidationContext<P extends FormValidationContextProps>(
+  Component: React.ComponentClass<P>
+): React.ForwardRefExoticComponent<
+  React.RefAttributes<InstanceType<typeof Component>> &
+    React.PropsWithoutRef<React.PropsWithChildren<P>>
+> {
+  const WithFormValidationContext = React.forwardRef<
+    InstanceType<typeof Component>,
+    P
+  >((props, ref) => {
+    return (
+      <FormValidationContextConsumer>
+        {(value) => {
+          console.log('value', value);
+          return (
+            <Component ref={ref} {...props} formValidationContext={value} />
+          );
+        }}
+      </FormValidationContextConsumer>
+    );
+  });
+  return WithFormValidationContext;
+}

package/src/lib/components/submit/Submit.tsx

@@ -7,10 +7,11 @@ import {
   defaultBaseTranslations,
 } from '../base/input/BaseInput';
 import { Button, ButtonProps } from '../button/Button';
-import { withFormContext } from '../form/withFormContext';
 import { FormValidationSummaryRaw } from './../form/FormValidationSummary';
 import SubmitValidationSummary from './subComponents/SubmitValidationSummary';
 import { withThemeContext } from '../themeProvider/withThemeContext';
+import { withFormValidationContext } from '../form/withFormValidationContext';
+import { FormValidationContextProps } from '../form/FormValidationContext';
 
 // Misc
 export const defaultSubmitTranslations = {
@@ -27,7 +28,7 @@ export type SubmitProps = BaseInputProps<never, SubmitTranslations> &
     validateForm?: boolean;
     disabledTitle?: string;
     showValidationSummaryTooltip?: boolean;
-  };
+  } & FormValidationContextProps;
 
 export interface SubmitState extends BaseInputState {}
 
@@ -70,7 +71,8 @@ export class SubmitRaw extends BaseInput<
           this.props.tooltip
             ? this.props.tooltip
             : this.props.showValidationSummaryTooltip &&
-              !this.props.formContext.isFormValid && (
+              this.props.formValidationContext &&
+              !this.props.formValidationContext.isFormValid && (
                 <FormValidationSummaryRaw
                   title={translations.hangOn}
                   footer={translations.needsFixing}
@@ -78,7 +80,7 @@ export class SubmitRaw extends BaseInput<
                   headerClassName="submitValidationSummary__header"
                   footerClassName="submitValidationSummary__footer"
                   Component={SubmitValidationSummary}
-                  formContext={this.props.formContext}
+                  formValidationContext={this.props.formValidationContext}
                 />
               )
         }
@@ -103,8 +105,8 @@ export class SubmitRaw extends BaseInput<
     const disabled = this.getDisabled();
     return disabled
       ? disabled
-      : this.props.validateForm && this.props.formContext
-      ? !this.props.formContext.isFormValid
+      : this.props.validateForm && this.props.formValidationContext
+      ? !this.props.formValidationContext.isFormValid
       : false;
   }
 }
@@ -112,6 +114,6 @@ export class SubmitRaw extends BaseInput<
 export const Submit = withThemeContext<
   SubmitProps,
   InstanceType<typeof SubmitRaw>
->(withFormContext<SubmitProps>(SubmitRaw), 'submit');
+>(withFormValidationContext<SubmitProps>(SubmitRaw), 'submit');
 
 export default Submit;