guestbell-forms 3.0.39 → 3.0.40

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

@@ -0,0 +1,276 @@
+// Libs
+import * as React from 'react';
+
+// Misc
+import {
+  FormContextState,
+  FormComponentContextState,
+  FormContextProvider,
+  ComponentsDict,
+} from './FormContext';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+import { ThemeContextProps } from '../themeProvider/ThemeContext';
+
+export type FormProps = React.PropsWithChildren<
+  ThemeContextProps & {
+    id?: string;
+    className?: string;
+    noValidate?: boolean;
+    onSubmit?: () => void;
+    extraComponents?: ComponentsDict;
+    component?: keyof JSX.IntrinsicElements;
+    onValidChanged?: (
+      isValid: boolean,
+      errors?: FormComponentContextState[]
+    ) => void;
+  }
+>;
+
+export interface FormState {
+  contextState: FormContextState;
+}
+
+export class Form extends React.PureComponent<FormProps, FormState> {
+  public static defaultProps = {
+    noValidate: false,
+    showExpandAll: true,
+    component: 'form' as keyof JSX.IntrinsicElements,
+  };
+
+  constructor(props: FormProps) {
+    super(props);
+    this.subscribe = this.subscribe.bind(this);
+    this.unSubscribe = this.unSubscribe.bind(this);
+    this.updateCallback = this.updateCallback.bind(this);
+    this.disableComponents = this.disableComponents.bind(this);
+    this.enableComponents = this.enableComponents.bind(this);
+    this.state = {
+      contextState: {
+        subscribe: this.subscribe,
+        unSubscribe: this.unSubscribe,
+        isFormValid: true,
+        updateCallback: this.updateCallback,
+        disableComponents: this.disableComponents,
+        enableComponents: this.enableComponents,
+        components: {},
+      },
+    };
+  }
+
+  public componentDidUpdate(
+    prevProps: Readonly<FormProps>,
+    prevState: Readonly<FormState>,
+    snapshot?: any
+  ): void {
+    if (
+      this.state.contextState?.isFormValid !==
+      prevState?.contextState?.isFormValid
+    ) {
+      const componentsWithErrors = this.state.contextState
+        ? Object.keys(this.state.contextState.components)
+            .map(key => this.state.contextState.components[key])
+            .filter(component => {
+              if (!component.validation.isValid && !component.validation.name) {
+                console.warn(
+                  component,
+                  'Has validation error. FormValidationSummary is present but the component has no validation name'
+                );
+              }
+              return !component.validation.isValid;
+            })
+        : [];
+      this.props.onValidChanged?.(
+        this.state.contextState?.isFormValid,
+        componentsWithErrors
+      );
+    }
+  }
+
+  public disableComponents() {
+    const components = {
+      ...this.state.contextState.components,
+      ...this.props.extraComponents,
+    };
+    Object.keys(components).forEach(key => {
+      const component = components[key];
+      component &&
+        component.componentApi &&
+        component.componentApi.disableComponent &&
+        component.componentApi.disableComponent();
+    });
+  }
+
+  public enableComponents() {
+    const components = {
+      ...this.state.contextState.components,
+      ...this.props.extraComponents,
+    };
+    Object.keys(components).forEach(key => {
+      const component = components[key];
+      component &&
+        component.componentApi &&
+        component.componentApi.enableComponent &&
+        component.componentApi.enableComponent();
+    });
+  }
+
+  public touchAll() {
+    const components = {
+      ...this.state.contextState.components,
+      ...this.props.extraComponents,
+    };
+    Object.keys(components).forEach(key => {
+      const component = components[key];
+      component &&
+        component.componentApi &&
+        component.componentApi.touch &&
+        component.componentApi.touch();
+    });
+  }
+
+  public unTouchAll() {
+    const components = {
+      ...this.state.contextState.components,
+      ...this.props.extraComponents,
+    };
+    Object.keys(components).forEach(key => {
+      const component = components[key];
+      component &&
+        component.componentApi &&
+        component.componentApi.unTouch &&
+        component.componentApi.unTouch();
+    });
+  }
+
+  public render() {
+    return (
+      <this.props.component
+        {...(this.props.id && { id: this.props.id })}
+        noValidate={true}
+        role="form"
+        className={`input__form validation-form ${
+          this.props.className ? this.props.className : ''
+        }`}
+        onSubmit={this.onSubmit}
+      >
+        <FormContextProvider value={this.mergeContext()}>
+          {this.props.children}
+        </FormContextProvider>
+      </this.props.component>
+    );
+  }
+
+  private mergeContext(): FormContextState {
+    if (!this.props.extraComponents) {
+      return this.state.contextState;
+    }
+    const isFormValid =
+      this.state.contextState.isFormValid &&
+      this.getIsFormValid(this.props.extraComponents);
+    return {
+      ...this.state.contextState,
+      components: {
+        ...this.state.contextState.components,
+        ...this.props.extraComponents,
+      },
+      isFormValid,
+    };
+  }
+
+  private onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    this.props.onSubmit && this.props.onSubmit();
+  };
+
+  private subscribe(
+    componentId: string,
+    componentState: FormComponentContextState
+  ) {
+    if (componentId) {
+      this.setState(previousState => {
+        let components = Object.assign(
+          {},
+          previousState.contextState.components
+        );
+        if (componentState) {
+          components[componentId] = componentState;
+        }
+        let isFormValid = this.getIsFormValid(components);
+        return {
+          contextState: {
+            ...previousState.contextState,
+            components,
+            isFormValid,
+          },
+        };
+      });
+    }
+  }
+
+  private unSubscribe(componentId: string) {
+    if (componentId) {
+      this.setState(previousState => {
+        let components = Object.assign(
+          {},
+          previousState.contextState.components
+        );
+        delete components[componentId];
+        let isFormValid = this.getIsFormValid(components);
+        return {
+          contextState: {
+            ...previousState.contextState,
+            components,
+            isFormValid,
+          },
+        };
+      });
+    }
+  }
+
+  private getIsFormValid(
+    components: ComponentsDict = this.state.contextState.components,
+    initialValid: boolean = true
+  ): boolean {
+    let isFormValid = initialValid;
+    Object.keys(components).forEach(key => {
+      const component = components[key];
+      if (component && component.validation && !component.validation.isValid) {
+        isFormValid = false;
+      }
+    });
+    return isFormValid;
+  }
+
+  private updateCallback(
+    componentId: string,
+    componentState: FormComponentContextState
+  ) {
+    this.setState(previousState => {
+      let components = Object.assign({}, previousState.contextState.components);
+      const previousComponent = components[componentId];
+      if (componentState && previousComponent) {
+        components[componentId] = {
+          ...previousComponent,
+          ...componentState,
+          validation: {
+            ...previousComponent.validation,
+            ...componentState.validation,
+          },
+        };
+      }
+      let isFormValid = this.getIsFormValid(components);
+      return {
+        contextState: {
+          ...this.state.contextState,
+          components,
+          isFormValid,
+        },
+      };
+    });
+  }
+}
+
+export default withThemeContext<FormProps, InstanceType<typeof Form>>(
+  Form,
+  'form'
+);

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

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

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

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import guid from '../utils/Guid';
+import { withFormContext } from './withFormContext';
+import { FormContextProps, FormComponentContextState } from './FormContext';
+import { Button } from './../button/Button';
+import classNames from 'classnames';
+
+import * as ArrowIcon from 'material-design-icons/maps/svg/production/ic_my_location_24px.svg';
+
+export interface FormValidationSummaryComponentProps {
+  componentsWithErrors: FormComponentContextState[];
+}
+
+export type FormValidationSummaryProps = {
+  containerClassName?: string;
+  headerClassName?: string;
+  footerClassName?: string;
+  title?: string | JSX.Element;
+  footer?: string | JSX.Element;
+  Component?:
+    | React.ComponentType<FormValidationSummaryComponentProps>
+    | React.FC<FormValidationSummaryComponentProps>;
+} & FormContextProps;
+
+export interface FormValidationSummaryState {}
+
+export const DefaultComponent: React.FC<FormValidationSummaryComponentProps> = (
+  props
+) => (
+  <React.Fragment>
+    {props.componentsWithErrors.map((component, index) => {
+      return (
+        <div key={index} className="formValidationSummary__item">
+          <div className="formValidationSummary__item__header">
+            {component.validation.name ? component.validation.name : 'unknown'}
+          </div>
+          <div className="formValidationSummary__item__errors">
+            {component.validation.errors &&
+              component.validation.errors.map((err, errIndex) => (
+                <span
+                  className="formValidationSummary__item__error"
+                  key={errIndex}
+                >
+                  {err}
+                </span>
+              ))}
+          </div>
+          <div style={{ flex: 'auto' }} />
+          {component.componentApi &&
+            component.componentApi.focus &&
+            component.componentApi.scrollTo && (
+              <Button
+                icon={true}
+                className="formValidationSummary__item__locate-button"
+                circular={true}
+                type="error"
+                small={true}
+                blank={true}
+                onClick={() => {
+                  component.componentApi.scrollTo();
+                  component.componentApi.focus();
+                }}
+              >
+                <ArrowIcon />
+              </Button>
+            )}
+        </div>
+      );
+    })}
+  </React.Fragment>
+);
+
+export class FormValidationSummaryRaw extends React.PureComponent<
+  FormValidationSummaryProps,
+  FormValidationSummaryState
+> {
+  public static defaultProps = {
+    title: 'Hang on',
+    footer: '... needs fixing',
+    Component: DefaultComponent,
+    containerClassName: 'formValidationSummary',
+    headerClassName: 'formValidationSummary__header',
+    footerClassName: 'formValidationSummary__footer',
+  };
+
+  public componentId = guid();
+
+  public render() {
+    const componentsWithErrors = this.props.formContext
+      ? Object.keys(this.props.formContext.components)
+          .map((key) => this.props.formContext.components[key])
+          .filter((component) => {
+            if (!component.validation.isValid && !component.validation.name) {
+              console.warn(
+                component,
+                'Has validation error. FormValidationSummary is present but the component has no validation name'
+              );
+            }
+            return !component.validation.isValid;
+          })
+      : [];
+    const containerClassName = classNames(this.props.containerClassName);
+    const headerClassName = classNames(this.props.headerClassName);
+    const footerClassName = classNames(this.props.footerClassName);
+    return (
+      componentsWithErrors.length > 0 && (
+        <div className={containerClassName}>
+          {this.props.title && (
+            <div className={headerClassName}>{this.props.title}</div>
+          )}
+          <this.props.Component componentsWithErrors={componentsWithErrors} />
+          {this.props.footer && (
+            <div className={footerClassName}>{this.props.footer}</div>
+          )}
+        </div>
+      )
+    );
+  }
+}
+
+export const FormValidationSummary =
+  withFormContext<FormValidationSummaryProps>(FormValidationSummaryRaw);

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

@@ -0,0 +1,5 @@
+export * from './Form';
+export * from './FormValidationSummary';
+export * from './FormContext';
+export * from './withFormContext';
+export { default } from './Form';

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { FormContextConsumer, FormContextProps } from './FormContext';
+
+export function withFormContext<P extends FormContextProps>(
+  Component: React.ComponentClass<P>
+): React.ForwardRefExoticComponent<
+  React.RefAttributes<InstanceType<typeof Component>> &
+    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>
+      );
+    }
+  );
+  return WithFormContext;
+}

package/src/lib/components/inputGroup/InputGroup.tsx

@@ -0,0 +1,60 @@
+// Libs
+import * as React from 'react';
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+} from '../base/input/BaseInput';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+import { ThemeContextProps } from '../themeProvider/ThemeContext';
+
+// Misc
+
+export type InputGroupProps = React.PropsWithChildren<
+  Pick<
+    BaseInputProps<never>,
+    'title' | 'className' | 'tooltip' | 'formContext'
+  > &
+    ThemeContextProps
+>;
+
+export interface InputGroupState extends BaseInputState {}
+
+export class InputGroup extends BaseInput<
+  InputGroupProps,
+  InputGroupState,
+  never
+> {
+  // tslint:disable-next-line:no-any
+  public static defaultProps: any = {
+    ignoreContext: true,
+  };
+
+  constructor(props: InputGroupProps) {
+    super(props);
+  }
+
+  public render() {
+    return this.props.title ? (
+      <div
+        className={
+          `inputGroup input__group__border ` +
+          (this.props.className ? this.props.className : '')
+        }
+      >
+        {this.props.title && (
+          <div className="inputGroup__header">{this.renderTitle()}</div>
+        )}
+        {React.Children.count(this.props.children) > 0 && (
+          <div className="inputGroup__body">{this.props.children}</div>
+        )}
+      </div>
+    ) : (
+      this.props.children
+    );
+  }
+}
+export default withThemeContext<
+  InputGroupProps,
+  InstanceType<typeof InputGroup>
+>(InputGroup, 'inputGroup');

package/src/lib/components/inputGroup/index.tsx

@@ -0,0 +1,2 @@
+export * from './InputGroup';
+export { default } from './InputGroup';