@mobx-sentinel/react
Version:
A TypeScript library for non-intrusive model enhancement in MobX applications. Provides model change detection, validation, and form integration capabilities while maintaining the purity of domain models.
288 lines (280 loc) • 10.7 kB
TypeScript
import * as react from 'react';
import { FormBinding, FormField, Form } from '@mobx-sentinel/form';
declare namespace CheckBoxBinding {
type Attrs = React.InputHTMLAttributes<HTMLInputElement>;
type AttrsRequired = Required<Attrs>;
type Config = {
/** Get the value from the model @computed */
getter: () => boolean;
/** Set the value to the model @action */
setter: (value: boolean) => void;
/** [Override] ID of the input element */
id?: Attrs["id"];
/** [Extend] Change handler */
onChange?: Attrs["onChange"];
/** [Extend] Focus handler */
onFocus?: Attrs["onFocus"];
};
}
declare class CheckBoxBinding implements FormBinding {
private readonly field;
config: CheckBoxBinding.Config;
constructor(field: FormField, config: CheckBoxBinding.Config);
get checked(): CheckBoxBinding.AttrsRequired["checked"];
onChange: CheckBoxBinding.AttrsRequired["onChange"];
onFocus: CheckBoxBinding.AttrsRequired["onFocus"];
get errorMessages(): string | null;
get props(): {
type: "checkbox";
id: string;
checked: boolean;
onChange: react.ChangeEventHandler<HTMLInputElement>;
onFocus: react.FocusEventHandler<HTMLInputElement>;
"aria-invalid": boolean | undefined;
"aria-errormessage": string | undefined;
};
}
declare namespace InputBinding {
export type Attrs = React.InputHTMLAttributes<HTMLInputElement>;
export type AttrsRequired = Required<Attrs>;
type DateValueType = "date" | "datetime-local" | "month" | "time" | "week";
type NumericValueType = "number" | "range" | DateValueType;
type StringType = "color" | "text" | "tel" | "url" | "email" | "password" | "search" | DateValueType | NumericValueType;
export type Config = {
/** [Override] ID of the input element */
id?: Attrs["id"];
/** [Extend] Change handler */
onChange?: Attrs["onChange"];
/** [Extend] Focus handler */
onFocus?: Attrs["onFocus"];
/** [Extend] Blur handler */
onBlur?: Attrs["onBlur"];
} & ({
/**
* Type of form control.
*
* When unspecified, it is deduced from the valueAs.
* @default "text" - when valueAs is undefined or "string"
*/
type?: StringType;
/**
* Value type of the input element.
* It determines how getter/setter should handle the value.
*/
valueAs?: "string";
/** Get the value from the model @computed */
getter: () => string | null;
/** Set the value to the model @action */
setter: (value: string) => void;
} | {
/**
* Type of form control.
*
* When unspecified, it is deduced from the valueAs.
* @default "number" - when valueAs is "number"
*/
type?: NumericValueType;
/**
* Value type of the input element.
* It determines how getter/setter should handle the value.
*/
valueAs: "number";
/** Get the value from the model @computed */
getter: () => number | null;
/** Set the value to the model @action */
setter: (value: number | null) => void;
} | {
/**
* Type of form control.
*
* When unspecified, it is deduced from the valueAs.
* @default "date" - when valueAs is "date"
*/
type?: DateValueType;
/**
* Value type of the input element.
* It determines how getter/setter should handle the value.
*/
valueAs: "date";
/**
* Get the value from the model @computed
*
* String representation of the date.
* As Date instance has no distinction between date and datetime,
* it's developers' responsibility to format the date correctly.
*
* | `type` attr | Expected format | Example |
* |----------------|-------------------|-------------------|
* | date | YYYY-MM-DD | 2024-12-31 |
* | datetime-local | YYYY-MM-DDTHH:mm | 2024-12-31T23:59 |
* | time | HH:mm or HH:mm:ss | 23:59 or 23:59:59 |
* | week | YYYY-Www | 2024-W52 |
* | month | YYYY-MM | 2024-12 |
*
* @example
* ```
* date.toISOString().split("T")[0]
* ```
*/
getter: () => string | null;
/** Set the value to the model @action */
setter: (value: Date | null) => void;
});
export { };
}
declare class InputBinding implements FormBinding {
private readonly field;
config: InputBinding.Config;
constructor(field: FormField, config: InputBinding.Config);
get value(): InputBinding.AttrsRequired["value"];
get type(): InputBinding.AttrsRequired["type"];
onChange: InputBinding.AttrsRequired["onChange"];
onBlur: InputBinding.AttrsRequired["onBlur"];
onFocus: InputBinding.AttrsRequired["onFocus"];
get errorMessages(): string | null;
get props(): {
type: react.HTMLInputTypeAttribute;
value: string | number | readonly string[];
id: string;
onChange: react.ChangeEventHandler<HTMLInputElement>;
onFocus: react.FocusEventHandler<HTMLInputElement>;
onBlur: react.FocusEventHandler<HTMLInputElement>;
"aria-invalid": boolean | undefined;
"aria-errormessage": string | undefined;
};
}
declare namespace RadioButtonBinding {
type Attrs = React.InputHTMLAttributes<HTMLInputElement>;
type AttrsRequired = Required<Attrs>;
type Config = {
/** Get the value from the model */
getter: () => string | null;
/** Set the value to the model */
setter: (value: string) => void;
/** [Extend] Change handler */
onChange?: Attrs["onChange"];
/** [Extend] Focus handler */
onFocus?: Attrs["onFocus"];
};
}
declare class RadioButtonBinding implements FormBinding {
private readonly field;
config: RadioButtonBinding.Config;
constructor(field: FormField, config: RadioButtonBinding.Config);
get value(): RadioButtonBinding.AttrsRequired["value"];
onChange: RadioButtonBinding.AttrsRequired["onChange"];
onFocus: RadioButtonBinding.AttrsRequired["onFocus"];
get errorMessages(): string | null;
props: (value: string | null, opt?: {
/**
* [Override] ID of the input element.
*
* - `true`: Use the field ID as the ID.
* - `false`: No ID.
* - `string`: Use the given string as the ID.
*/
id?: string | boolean;
/** [Override] Name attribute of the input element */
name?: string;
}) => {
type: "radio";
id: string | undefined;
value: string;
name: string;
checked: boolean;
onChange: react.ChangeEventHandler<HTMLInputElement>;
onFocus: react.FocusEventHandler<HTMLInputElement>;
"aria-invalid": boolean | undefined;
"aria-errormessage": string | undefined;
};
}
declare namespace SelectBoxBinding {
type Attrs = React.SelectHTMLAttributes<HTMLSelectElement>;
type AttrsRequired = Required<Attrs>;
type Config = {
/** [Override] ID of the input element */
id?: Attrs["id"];
/** [Extend] Change handler */
onChange?: Attrs["onChange"];
/** [Extend] Focus handler */
onFocus?: Attrs["onFocus"];
} & ({
/** Whether multiple options can be selected in the list */
multiple?: false;
/** Get the value from the model */
getter: () => string;
/** Set the value to the model */
setter: (value: string) => void;
} | {
/** Whether multiple options can be selected in the list */
multiple: true;
/** Get the value from the model */
getter: () => string[];
/** Set the value to the model */
setter: (value: string[]) => void;
});
}
declare class SelectBoxBinding implements FormBinding {
private readonly field;
config: SelectBoxBinding.Config;
constructor(field: FormField, config: SelectBoxBinding.Config);
get value(): SelectBoxBinding.AttrsRequired["value"];
onChange: SelectBoxBinding.AttrsRequired["onChange"];
onFocus: SelectBoxBinding.AttrsRequired["onFocus"];
get errorMessages(): string | null;
get props(): {
id: string;
multiple: boolean | undefined;
value: string | number | readonly string[];
onChange: react.ChangeEventHandler<HTMLSelectElement>;
onFocus: react.FocusEventHandler<HTMLSelectElement>;
"aria-invalid": boolean | undefined;
"aria-errormessage": string | undefined;
};
}
declare namespace SubmitButtonBinding {
type Attrs = React.ButtonHTMLAttributes<HTMLButtonElement>;
type AttrsRequired = Required<Attrs>;
type Config = {
/** [Extend] Click handler */
onClick?: Attrs["onClick"];
/** [Extend] Mouse enter handler */
onMouseOver?: Attrs["onMouseOver"];
};
}
declare class SubmitButtonBinding implements FormBinding {
private readonly form;
config: SubmitButtonBinding.Config;
constructor(form: Form<unknown>, config: SubmitButtonBinding.Config);
get busy(): boolean;
onClick: SubmitButtonBinding.AttrsRequired["onClick"];
onMouseOver: SubmitButtonBinding.AttrsRequired["onMouseOver"];
get props(): {
onClick: react.MouseEventHandler<HTMLButtonElement>;
onMouseOver: react.MouseEventHandler<HTMLButtonElement>;
disabled: boolean;
"aria-busy": boolean;
"aria-invalid": boolean;
};
}
declare namespace LabelBinding {
type Attrs = React.LabelHTMLAttributes<HTMLLabelElement>;
type AttrsRequired = Required<Attrs>;
type Config = {
/** [Override] ID of the target element */
htmlFor?: Attrs["htmlFor"];
};
}
declare class LabelBinding implements FormBinding {
private readonly fields;
config: LabelBinding.Config;
constructor(fields: FormField[], config: LabelBinding.Config);
get firstFieldId(): string | undefined;
get firstErrorMessage(): string | null;
get props(): {
htmlFor: string | undefined;
"aria-invalid": boolean;
"aria-errormessage": string | undefined;
};
}
export { CheckBoxBinding as C, InputBinding as I, LabelBinding as L, RadioButtonBinding as R, SelectBoxBinding as S, SubmitButtonBinding as a };