@cmk/fe_utils/dist/components/forms/fields/Field.d.ts

frontend utility library

import { ReactNode } from 'react';
import { CustomFieldDefinition } from './CustomField';
import { GenericInputFieldProps, InputFieldType } from '../../inputs/types';
import { FormDataType } from '../types';

export type FormFieldType = InputFieldType | 'inject' | 'array' | 'object' | 'string-array';
type Width12 = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type InputFieldLayoutProps = {
    width12?: Width12 | {
        xs: Width12;
        sm?: Width12;
        md?: Width12;
        lg?: Width12;
        xl?: Width12;
    };
    fillWidth?: boolean;
    _prop_type?: string;
    form?: {
        defaultValue?: unknown;
        showInArrayList?: boolean;
    };
    valueTransformer?: (formData: Record<string, unknown>) => unknown;
    changeValueToFormDataTransformer?: (currentFormData: Record<string, unknown>, newValue: unknown) => Record<string, unknown>;
};
type ArrayInputFieldProps = {
    type: 'array';
    name: string;
    enableDeleteFirst?: boolean;
    form?: {
        defaultValue?: unknown;
        showInArrayList?: boolean;
    };
    label?: string;
};
type ObjectInputFieldProps = {
    type: 'object';
    name: string;
};
type StringArrayInputFieldProps = {
    type: 'string-array';
    name: string;
    label: string;
    enableDeleteFirst?: boolean;
};
export type StaticFieldDefinition<Type extends FormFieldType = FormFieldType> = InputFieldLayoutProps & {
    type: Type;
} & (Type extends 'inject' ? CustomFieldDefinition<any, any> : Type extends InputFieldType ? Omit<GenericInputFieldProps<Type>, 'name' | 'value' | 'onChange'> & {
    name: string;
} : Type extends 'array' ? ArrayInputFieldProps : Type extends 'object' ? ObjectInputFieldProps : Type extends 'string-array' ? StringArrayInputFieldProps : never);
export type DynamicFieldDefinition<Type extends FormFieldType = FormFieldType> = Omit<StaticFieldDefinition<Type>, 'disabled' | 'required' | 'options' | 'error' | 'helperText' | 'invisible' | 'hidden'> & {
    disabled?: boolean | ((formData: FormDataType, rootFormData: FormDataType) => boolean);
    required?: boolean | ((formData: FormDataType, rootFormData: FormDataType) => boolean);
    options?: any[] | ((formData: FormDataType, rootFormData: FormDataType) => any[]);
    error?: boolean | ((formData: FormDataType, rootFormData: FormDataType) => boolean);
    helperText?: ReactNode | ((formData: FormDataType, rootFormData: FormDataType) => ReactNode);
    invisible?: boolean | ((formData: FormDataType, rootFormData: FormDataType) => boolean);
    hidden?: boolean | ((formData: FormDataType, rootFormData: FormDataType) => boolean);
};
export type FieldProps = {
    formData: FormDataType;
    onChangeFormData: any;
    rootFormData: FormDataType;
    onChangeFormDataRoot: any;
    _path: (string | number)[];
    onBeforeChange?: any;
    showError?: boolean;
    field: DynamicFieldDefinition<InputFieldType | 'inject'>;
    files?: {
        [key: string]: {
            file: File;
            filename: string;
        }[];
    };
    onFileChange?: any;
    fieldProps?: Partial<GenericInputFieldProps>;
    useChangeCompleted?: boolean;
    fields: any;
    subforms: any;
};
export declare const Field: (props: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
export {};