diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx index 10c7b1274e0e273c24be9a4ceaaa36bde23e5082..faa164b8f7f7fd197d3236f97fe3bf13b195c26a 100644 --- a/src/components/TextInput.tsx +++ b/src/components/TextInput.tsx @@ -11,6 +11,25 @@ type TextInputProps = { isInvalid?: boolean; errorMessage?: string; isDisabled?: boolean; + isReadOnly?: boolean; + maxLength?: number; + type?: + | "text" + | "search" + | "url" + | "tel" + | "email" + | "password" + | (string & NonNullable<unknown>); + inputMode?: + | "none" + | "text" + | "tel" + | "url" + | "email" + | "numeric" + | "decimal" + | "search"; }; const TextInput = ({ @@ -23,6 +42,10 @@ const TextInput = ({ isInvalid = false, errorMessage = "", isDisabled = false, + isReadOnly = false, + maxLength, + type = "text", + inputMode = "text", }: TextInputProps) => { return ( <BaseInput @@ -36,6 +59,10 @@ const TextInput = ({ isInvalid={isInvalid} errorMessage={errorMessage} isDisabled={isDisabled} + isReadOnly={isReadOnly} + maxLength={maxLength} + type={type} + inputMode={inputMode} /> ); }; diff --git a/src/components/utils/baseComponents.tsx b/src/components/utils/baseComponents.tsx index 7530a1455185768f782c325ac2d4ee78d94bfb83..3551dbc17a3429a0e6e53c41af06b19e6d848348 100644 --- a/src/components/utils/baseComponents.tsx +++ b/src/components/utils/baseComponents.tsx @@ -15,9 +15,28 @@ type BaseInputProps = { onValueChange?: Dispatch<SetStateAction<string>>; isInvalid: boolean; errorMessage: string; + maxLength?: number; + type?: + | "text" + | "search" + | "url" + | "tel" + | "email" + | "password" + | (string & NonNullable<unknown>); // interaction isRequired?: boolean; isDisabled?: boolean; + isReadOnly?: boolean; + inputMode?: + | "none" + | "text" + | "tel" + | "url" + | "email" + | "numeric" + | "decimal" + | "search"; }; type baseInputClassNamesObj = { [key in InputSlots]: string }; @@ -60,12 +79,15 @@ export const BaseInput = ({ onValueChange, isInvalid, errorMessage, + maxLength, + type = "text", isRequired = false, isDisabled = false, + isReadOnly = false, + inputMode = "text", }: BaseInputProps) => { return ( <Input - type="text" label={label} endContent={endContent} placeholder={placeholder} @@ -74,8 +96,12 @@ export const BaseInput = ({ onValueChange={onValueChange} isInvalid={isInvalid} errorMessage={errorMessage} + maxLength={maxLength} + type={type} isRequired={isRequired} isDisabled={isDisabled} + isReadOnly={isReadOnly} + inputMode={inputMode} // appearance labelPlacement="outside" variant="bordered" diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index d949d8b171b8a1d81052a4136735ed7941901fa8..930583f2a57667545e75bef09d083d1420f6890b 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -9,7 +9,7 @@ const meta = { export default meta; -export const WithValidation = () => { +export const CustomValidation = () => { const [value, setValue] = useState(""); const validateEmail = (str: string) => @@ -47,9 +47,55 @@ export const IsClearable = () => { export const Disabled = () => { return ( <TextInput - label="You can't change this!" + label="You can't interact with this component!" isDisabled={true} value="*Evil laughter*" /> ); }; + +export const ReadOnly = () => { + return ( + <TextInput + label="You can't change this value!" + isReadOnly={true} + value="*Neutral laughter*" + /> + ); +}; + +export const MaxLength = () => { + const [value, setValue] = useState(""); + return ( + <TextInput + label="Maximum of 10 characters" + maxLength={10} + value={value} + onValueChange={setValue} + /> + ); +}; + +export const PredefinedType = () => { + const [value, setValue] = useState(""); + return ( + <TextInput + label="This input is rendered as a password type" + type="password" + value={value} + onValueChange={setValue} + /> + ); +}; + +export const PredefinedInputMode = () => { + const [value, setValue] = useState(""); + return ( + <TextInput + label="This keyboard for this input is shown as a numeric type" + inputMode="numeric" + value={value} + onValueChange={setValue} + /> + ); +}