input-props/dist/field-props.d.ts

A React component that provides a two-way data-binding feel to your forms controlled by a mobx state.

export interface IUpdatable {
    value?: any;
    updated: boolean;
}
export declare type OnValueChangeType<A extends Object> = (newValue: any, additionalData?: A) => Promise<boolean | undefined | void>;
export declare type OnValueChangedType<A extends Object> = ((oldValue: any, newValue: any, additionalData?: A) => any) | undefined;
/**
 * all - no conversion - assigns the event.target.value or event.target.checked as is to the state
 * onlyNumbers - deprecated
 * string - string state value
 * numericString - string state value but only allows numbers
 * numeric - numeric state value
 */
export declare type InputPropsVariant = 'all' | 'onlyNumbers' | 'numericString' | 'numeric' | 'string';
export declare type InputPropsConfig = {
    /** does not allow negatives */
    onlyPositives?: boolean;
    /** if variant is numeric, this defines the thousands separator (defaults to ',') */
    thousandsSeparator?: string;
    /** if variant is numeric, this defines the decimals separator (defaults to '.') */
    decimalsSeparator?: string;
    /** if variant is numeric, this will restrict the number of decimal places (down to 0) */
    maxDecimalPlaces?: number;
    /** self explanatory */
    numberOfDecimalsAlwaysAppearing?: number;
    /** if variant is numeric, this will restrict the number of integer places */
    maxIntegerLength?: number;
    /** functions to validate every key stroke. If any of them returns false, the key stroke does not come through as a change to the state
     * hint: create your own set of reusable restrictors!
     */
    valueRestrictors?: ((value: any) => boolean)[];
    /** functions that will be called to format the value that will be shown in the element - good for formatting
     * hint: create your own set of reusable modifiers!
    */
    elementValueModifiers?: ((value: any) => string)[];
    /** functions that will be called to modify the value that will be assigned to the state - good for undoing formatting
     * hint: create your own set of reusable modifiers!
    */
    stateModifiers?: ((value: any) => string)[];
    /** modifier for when the element value was rendered undefined or null. input-props' default is to return "" */
    elementValueForUndefinedOrNull?: (value: any) => any;
    /** if the field is a checkbox (and event.target.checked should be considered). InputProps will try to infer from usage */
    isCheckbox?: boolean;
};
export declare function isUpdatable(v: any): v is IUpdatable;
/**
 * similar to fieldProps, but will work with any property that is not an updatable
 * @param parentObject object that holds the property
 * @param propertyName name of the property that will be updated
 * @param onValueChange optional - callback whenever the field changes. This callback has to return true if it accepts the new value, or false if not
 */
export declare function fieldValueProps<T extends Object, P extends Extract<keyof T, string>, A extends Object>(parentObject: T, propertyName: P, onValueChange?: OnValueChangeType<A>, variant?: InputPropsVariant, config?: InputPropsConfig, onValueChanged?: OnValueChangedType<A>, paramsToValueChange?: A): {
    onChange: any;
    value: any;
};
export declare function formatElementValue(value: any, variant: InputPropsVariant, config?: InputPropsConfig): any;