@appbuckets/react-ui-forms/utils/createHookedField.types.d.ts

An utilities package to manage and create Form using AppBuckets ReactUI

import * as React from 'react';
import type { AppearanceProps } from '@appbuckets/react-ui/generic';
import type {
  FormState,
  ControllerFieldState,
  ValidationRule,
  Message,
  Validate,
} from 'react-hook-form';
export interface CreateHookedFieldOptions<
  Props extends {} = {},
  RefType = any,
  TValue = any,
  TDisplayedValue = TValue
> {
  /** Component to Render */
  Component: React.ComponentType<
    HookedFieldComponentProps<Props, RefType, TValue, TDisplayedValue>
  >;
  /** Set component default props */
  defaultProps?: Partial<HookedFieldProps<Props, TValue>>;
  /** Set wrapped component display name */
  displayName?: string;
  /** Manually override the value passed to Component */
  formatValue?: HookedFieldFormatValue<Props, TValue, TDisplayedValue>;
  /** Override components Props */
  overrideProps?: Partial<HookedFieldProps<Props, TValue>>;
  /** Parse the value received from HookedFields before save on form */
  parseValue?: HookedFieldParseValue<Props, TValue>;
  /** Global Validation options */
  validation?: HookedFieldValidation<TValue>;
}
export declare type HookedFieldComponent<Props, RefType, TValue> =
  React.ForwardRefExoticComponent<
    HookedFieldProps<Props, TValue> & React.RefAttributes<RefType>
  >;
export declare type HookedFieldProps<Props, TValue> = StrictHookFieldProps<
  Props,
  TValue
> &
  AppearanceProps &
  Props;
export declare type StrictHookFieldProps<Props, TValue> = {
  /** The field name is required to let hook form work */
  name: string;
  /** Get the error message only once form has been submitted at least once, default to `true` */
  getErrorOnSubmitted?: boolean;
  /** Get the error message once field has been touched, default to `false` */
  getErrorOnTouched?: boolean;
  /** Local onBlur function handler */
  onBlur?: (e?: React.MouseEvent, props?: Props) => void;
  /** Local onChange function handler */
  onChange?: (e?: React.ChangeEvent, props?: Props) => void;
  /** Override the default setTouchedOnChange behaviour */
  setTouchedOnChange?: boolean;
  /** Validation options */
  validation?: HookedFieldValidation<TValue>;
};
export declare type HookedFieldValidation<TValue> = {
  /** A Boolean which, if true, indicates that the input must have a value before the form can be submitted */
  required?: Message | ValidationRule<boolean>;
  /** The maximum value to accept for this input. */
  max?: ValidationRule<number | string>;
  /** The maximum length of the value to accept for this input. */
  maxLength?: ValidationRule<number>;
  /** The minimum value to accept for this input. */
  min?: ValidationRule<number | string>;
  /** The minimum length of the value to accept for this input. */
  minLength?: ValidationRule<number>;
  /** The regex pattern for the input. */
  pattern?: ValidationRule<RegExp>;
  /**
   * You can pass a callback function as the argument to validate,
   * or you can pass an object of callback functions to validate all of them.
   */
  validate?: Validate<TValue>;
};
export declare type HookedFieldFormatValue<Props, TValue, TDisplayedValue> = (
  /** Received Event from Component */
  value: TValue,
  /** Component Props */
  props?: HookedFieldProps<Props, TValue>
) => TDisplayedValue;
export declare type HookedFieldParseValue<Props, TValue> = (data: {
  /** The original FormEvent generated */
  event?: React.ChangeEvent | undefined;
  /** Component Props */
  props?: Props;
  /** Field name */
  name: string;
  /** Field Meta Props */
  meta: FieldMeta;
}) => TValue;
export interface HookedFieldComponentProps<
  Props,
  RefType,
  TValue,
  TDisplayedValue = TValue
> {
  /** Parent form state */
  formState: FormState<any>;
  /** Ref to pass to Component */
  innerRef: React.Ref<RefType>;
  /** The field state */
  meta: FieldMeta;
  /** All default component props, wrapped by HOC function */
  rest: Props & {
    /** On Blur Handler */
    onBlur: (...args: any[]) => void;
    /** On Change Handler */
    onChange: (...args: any[]) => void;
    /** The field name */
    name: string;
    /** The field value */
    value: TDisplayedValue;
  };
}
export interface FieldMeta extends ControllerFieldState {
  /** Set field appearance */
  appearance: AppearanceProps;
  /** True while form is submitting */
  isSubmitting: boolean;
  /** Validation message */
  message: string | undefined;
}