guestbell-forms 3.0.85 → 3.0.87

package/src/lib/components/button/Button.tsx

@@ -63,19 +63,22 @@ export interface ButtonState {
 }
 
 const DefaultButtonComponent: React.FC<ButtonComponentProps> = React.forwardRef(
-  (props, ref) => (
-    <button
-      ref={ref}
-      // tslint:disable-next-line:no-any
-      {...((props.buttonProps ? props.buttonProps : {}) as any)}
-      {...(props.id && { id: props.id })}
-      className={props.className}
-      onClick={props.onClick}
-      style={props.style}
-    >
-      {props.children}
-    </button>
-  )
+  (props, ref) => {
+    const { disabled, ...rest } = props.buttonProps ?? {};
+    return (
+      <button
+        ref={ref}
+        // tslint:disable-next-line:no-any
+        {...(rest as any)}
+        {...(props.id && { id: props.id })}
+        className={props.className}
+        onClick={props.onClick}
+        style={props.style}
+      >
+        {props.children}
+      </button>
+    );
+  }
 );
 
 export class Button extends React.PureComponent<ButtonProps, ButtonState> {

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

@@ -4,13 +4,17 @@ import * as React from 'react';
 // Misc
 import {
   FormContextState,
-  FormComponentContextState,
   FormContextProvider,
   ComponentsDict,
-  FormComponentValidationContextStateBase,
 } from './FormContext';
 import { withThemeContext } from '../themeProvider/withThemeContext';
 import { ThemeContextProps } from '../themeProvider/ThemeContext';
+import {
+  FormComponentContextState,
+  FormComponentValidationContextStateBase,
+  FormValidationContextProvider,
+  FormValidationContextState,
+} from './FormValidationContext';
 
 export type FormProps = React.PropsWithChildren<
   ThemeContextProps & {
@@ -28,7 +32,8 @@ export type FormProps = React.PropsWithChildren<
 >;
 
 export interface FormState {
-  contextState: FormContextState;
+  formContext: FormContextState;
+  formValidationContext: FormValidationContextState;
 }
 
 export class Form extends React.PureComponent<FormProps, FormState> {
@@ -46,13 +51,15 @@ export class Form extends React.PureComponent<FormProps, FormState> {
     this.disableComponents = this.disableComponents.bind(this);
     this.enableComponents = this.enableComponents.bind(this);
     this.state = {
-      contextState: {
+      formContext: {
         subscribe: this.subscribe,
         unSubscribe: this.unSubscribe,
-        isFormValid: true,
         updateCallback: this.updateCallback,
         disableComponents: this.disableComponents,
         enableComponents: this.enableComponents,
+      },
+      formValidationContext: {
+        isFormValid: true,
         components: {},
       },
     };
@@ -64,12 +71,12 @@ export class Form extends React.PureComponent<FormProps, FormState> {
     snapshot?: any
   ): void {
     if (
-      this.state.contextState?.isFormValid !==
-      prevState?.contextState?.isFormValid
+      this.state.formValidationContext?.isFormValid !==
+      prevState?.formValidationContext?.isFormValid
     ) {
-      const componentsWithErrors = this.state.contextState
-        ? Object.keys(this.state.contextState.components)
-            .map((key) => this.state.contextState.components[key])
+      const componentsWithErrors = this.state.formContext
+        ? Object.keys(this.state.formValidationContext.components)
+            .map((key) => this.state.formValidationContext.components[key])
             .filter((component) => {
               if (!component.validation.isValid && !component.validation.name) {
                 console.warn(
@@ -81,7 +88,7 @@ export class Form extends React.PureComponent<FormProps, FormState> {
             })
         : [];
       this.props.onValidChanged?.(
-        this.state.contextState?.isFormValid,
+        this.state.formValidationContext?.isFormValid,
         componentsWithErrors
       );
     }
@@ -89,7 +96,7 @@ export class Form extends React.PureComponent<FormProps, FormState> {
 
   public disableComponents() {
     const components = {
-      ...this.state.contextState.components,
+      ...this.state.formValidationContext.components,
       ...this.props.extraComponents,
     };
     Object.keys(components).forEach((key) => {
@@ -103,7 +110,7 @@ export class Form extends React.PureComponent<FormProps, FormState> {
 
   public enableComponents() {
     const components = {
-      ...this.state.contextState.components,
+      ...this.state.formValidationContext.components,
       ...this.props.extraComponents,
     };
     Object.keys(components).forEach((key) => {
@@ -117,7 +124,7 @@ export class Form extends React.PureComponent<FormProps, FormState> {
 
   public touchAll() {
     const components = {
-      ...this.state.contextState.components,
+      ...this.state.formValidationContext.components,
       ...this.props.extraComponents,
     };
     Object.keys(components).forEach((key) => {
@@ -131,7 +138,7 @@ export class Form extends React.PureComponent<FormProps, FormState> {
 
   public unTouchAll() {
     const components = {
-      ...this.state.contextState.components,
+      ...this.state.formValidationContext.components,
       ...this.props.extraComponents,
     };
     Object.keys(components).forEach((key) => {
@@ -144,6 +151,7 @@ export class Form extends React.PureComponent<FormProps, FormState> {
   }
 
   public render() {
+    const validationContext = this.mergeContext();
     return (
       <this.props.component
         {...(this.props.id && { id: this.props.id })}
@@ -154,24 +162,26 @@ export class Form extends React.PureComponent<FormProps, FormState> {
         }`}
         onSubmit={this.onSubmit}
       >
-        <FormContextProvider value={this.mergeContext()}>
-          {this.props.children}
+        <FormContextProvider value={this.state.formContext}>
+          <FormValidationContextProvider value={validationContext}>
+            {this.props.children}
+          </FormValidationContextProvider>
         </FormContextProvider>
       </this.props.component>
     );
   }
 
-  private mergeContext(): FormContextState {
+  private mergeContext(): FormValidationContextState {
     if (!this.props.extraComponents) {
-      return this.state.contextState;
+      return this.state.formValidationContext;
     }
     const isFormValid =
-      this.state.contextState.isFormValid &&
+      this.state.formValidationContext.isFormValid &&
       this.getIsFormValid(this.props.extraComponents);
     return {
-      ...this.state.contextState,
+      ...this.state.formValidationContext,
       components: {
-        ...this.state.contextState.components,
+        ...this.state.formValidationContext.components,
         ...this.props.extraComponents,
       },
       isFormValid,
@@ -191,18 +201,19 @@ export class Form extends React.PureComponent<FormProps, FormState> {
       this.setState((previousState) => {
         let components = Object.assign(
           {},
-          previousState.contextState.components
+          previousState.formValidationContext.components
         );
         if (componentState) {
           components[componentId] = componentState;
         }
         let isFormValid = this.getIsFormValid(components);
         return {
-          contextState: {
-            ...previousState.contextState,
+          formValidationContext: {
+            ...previousState.formValidationContext,
             components,
             isFormValid,
           },
+          formContext: previousState.formContext,
         };
       });
     }
@@ -213,13 +224,14 @@ export class Form extends React.PureComponent<FormProps, FormState> {
       this.setState((previousState) => {
         let components = Object.assign(
           {},
-          previousState.contextState.components
+          previousState.formValidationContext.components
         );
         delete components[componentId];
         let isFormValid = this.getIsFormValid(components);
         return {
-          contextState: {
-            ...previousState.contextState,
+          formContext: previousState.formContext,
+          formValidationContext: {
+            ...previousState.formValidationContext,
             components,
             isFormValid,
           },
@@ -229,7 +241,7 @@ export class Form extends React.PureComponent<FormProps, FormState> {
   }
 
   private getIsFormValid(
-    components: ComponentsDict = this.state.contextState.components,
+    components: ComponentsDict = this.state.formValidationContext.components,
     initialValid: boolean = true
   ): boolean {
     let isFormValid = initialValid;
@@ -247,7 +259,10 @@ export class Form extends React.PureComponent<FormProps, FormState> {
     componentState: FormComponentValidationContextStateBase
   ) {
     this.setState((previousState) => {
-      let components = Object.assign({}, previousState.contextState.components);
+      let components = Object.assign(
+        {},
+        previousState.formValidationContext.components
+      );
       const previousComponent = components[componentId];
       if (
         previousComponent &&
@@ -272,11 +287,12 @@ export class Form extends React.PureComponent<FormProps, FormState> {
       }
       let isFormValid = this.getIsFormValid(components);
       return {
-        contextState: {
-          ...this.state.contextState,
+        formValidationContext: {
+          ...this.state.formValidationContext,
           components,
           isFormValid,
         },
+        formContext: previousState.formContext,
       };
     });
   }

package/src/lib/components/form/FormContext.ts

@@ -1,27 +1,15 @@
 import * as React from 'react';
-import { ValidationError, ComponentApi } from '../base/input';
 import { PartialBy } from '../utils/Typescript';
+import {
+  FormComponentContextState,
+  FormComponentValidationContextStateBase,
+} from './FormValidationContext';
 
 export type OmitFormContext<P extends FormContextProps> = PartialBy<
   P,
   'formContext'
 >;
 
-export interface FormComponentValidationContextStateBase {
-  isValid: boolean;
-  errors: ValidationError[];
-}
-
-export interface FormComponentValidationContextState
-  extends FormComponentValidationContextStateBase {
-  name: JSX.Element | string;
-}
-
-export interface FormComponentContextState {
-  validation: FormComponentValidationContextState;
-  componentApi: ComponentApi;
-}
-
 export interface FormContextProps {
   formContext?: FormContextState;
 }
@@ -36,14 +24,12 @@ export interface FormContextState {
     componentState: FormComponentContextState
   ) => void;
   unSubscribe: (componentId: string) => void;
-  isFormValid: boolean;
   updateCallback: (
     componentId: string,
     newComponentState: FormComponentValidationContextStateBase
   ) => void;
   disableComponents: () => void;
   enableComponents: () => void;
-  components: ComponentsDict;
 }
 
 const FormContext = React.createContext<FormContextState | undefined>(

package/src/lib/components/form/FormValidationContext.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ValidationError, ComponentApi } from '../base/input';
+import { PartialBy } from '../utils/Typescript';
+
+export type OmitFormValidationContext<P extends FormValidationContextProps> =
+  PartialBy<P, 'formValidationContext'>;
+
+export interface FormComponentValidationContextStateBase {
+  isValid: boolean;
+  errors: ValidationError[];
+}
+
+export interface FormComponentValidationContextState
+  extends FormComponentValidationContextStateBase {
+  name: JSX.Element | string;
+}
+
+export interface FormComponentContextState {
+  validation: FormComponentValidationContextState;
+  componentApi: ComponentApi;
+}
+
+export interface FormValidationContextProps {
+  formValidationContext?: FormValidationContextState;
+}
+
+export type ComponentsDict = {
+  [componentId: string]: FormComponentContextState;
+};
+
+export interface FormValidationContextState {
+  isFormValid: boolean;
+  components: ComponentsDict;
+}
+
+const FormValidationContext = React.createContext<
+  FormValidationContextState | undefined
+>(undefined);
+export const FormValidationContextProvider = FormValidationContext.Provider;
+export const FormValidationContextConsumer = FormValidationContext.Consumer;

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;