forked from mrzachnugent/react-native-reusables
-
Notifications
You must be signed in to change notification settings - Fork 0
/
input.tsx
26 lines (22 loc) · 1011 Bytes
/
input.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import * as React from 'react';
import { TextInput } from 'react-native';
import { cn } from '~/lib/utils';
const Input = React.forwardRef<
React.ElementRef<typeof TextInput>,
React.ComponentPropsWithoutRef<typeof TextInput>
>(({ className, placeholderClassName, ...props }, ref) => {
return (
<TextInput
ref={ref}
className={cn(
'web:flex h-10 native:h-12 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
props.editable === false && 'opacity-50 web:cursor-not-allowed',
className
)}
placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
{...props}
/>
);
});
Input.displayName = 'Input';
export { Input };