83 lines
1.7 KiB
TypeScript
83 lines
1.7 KiB
TypeScript
export type TextFieldTypePreset =
|
|
| "text"
|
|
| "email"
|
|
| "phone"
|
|
| "search"
|
|
| "url"
|
|
| "password"
|
|
| "number";
|
|
|
|
export interface ResolvedInputPreset {
|
|
type: React.HTMLInputTypeAttribute;
|
|
inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
|
|
autoComplete?: string;
|
|
spellCheck?: boolean;
|
|
enterKeyHint?: React.HTMLAttributes<HTMLInputElement>["enterKeyHint"];
|
|
}
|
|
|
|
export const getInputPresetProps = (preset: TextFieldTypePreset = "text"): ResolvedInputPreset => {
|
|
switch (preset) {
|
|
case "email":
|
|
return {
|
|
type: "email",
|
|
inputMode: "email",
|
|
autoComplete: "email",
|
|
spellCheck: false,
|
|
enterKeyHint: "next",
|
|
};
|
|
|
|
case "phone":
|
|
return {
|
|
type: "tel",
|
|
inputMode: "tel",
|
|
autoComplete: "tel",
|
|
spellCheck: false,
|
|
enterKeyHint: "next",
|
|
};
|
|
|
|
case "search":
|
|
return {
|
|
type: "search",
|
|
inputMode: "search",
|
|
autoComplete: "off",
|
|
spellCheck: false,
|
|
enterKeyHint: "search",
|
|
};
|
|
|
|
case "url":
|
|
return {
|
|
type: "url",
|
|
inputMode: "url",
|
|
autoComplete: "url",
|
|
spellCheck: false,
|
|
enterKeyHint: "next",
|
|
};
|
|
|
|
case "password":
|
|
return {
|
|
type: "password",
|
|
autoComplete: "current-password",
|
|
spellCheck: false,
|
|
enterKeyHint: "done",
|
|
};
|
|
|
|
case "number":
|
|
return {
|
|
type: "text",
|
|
inputMode: "numeric",
|
|
autoComplete: "off",
|
|
spellCheck: false,
|
|
enterKeyHint: "next",
|
|
};
|
|
|
|
case "text":
|
|
default:
|
|
return {
|
|
type: "text",
|
|
autoComplete: "off",
|
|
spellCheck: false,
|
|
enterKeyHint: "next",
|
|
};
|
|
}
|
|
};
|