-
-
Notifications
You must be signed in to change notification settings - Fork 20
/
LmInput.tsx
99 lines (95 loc) · 2.65 KB
/
LmInput.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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { Input, InputProps, Stack, TextArea, ThemeableStackProps } from 'tamagui'
import { useId, useState } from 'react'
import { LmFormFieldContainer } from './LmFormFieldContainer'
import { LmFormContainerBaseTypes } from './formContainerTypes'
import { ColorValue, Pressable } from 'react-native'
import { EyeRegular, EyeSlashRegular, IconProps } from '@tamagui-extras/core'
export type LmInputProps = InputProps &
LmFormContainerBaseTypes & {
containerProps?: ThemeableStackProps
multiline?: boolean
isPassword?: boolean
fullWidth?: boolean
passwordIconProps?: IconProps
}
export function LmInput({
required,
error,
helperText,
helperTextProps,
label,
labelProps,
labelInline,
multiline,
containerProps,
isPassword,
passwordIconProps,
fullWidth,
...rest
}: LmInputProps) {
const genId = useId()
const [show, setShow] = useState<boolean>(false)
const id = rest.id || genId
const currentInputProps = {
...rest,
}
if (error) {
currentInputProps.theme = 'red'
currentInputProps.borderColor = error ? '$red8' : undefined
}
if (fullWidth) {
currentInputProps.minWidth = '100%'
}
let secureTextEntry = !!(rest.secureTextEntry || isPassword)
return (
<LmFormFieldContainer
id={id}
error={error}
required={required}
labelProps={labelProps}
label={label}
fullWidth={fullWidth}
size={rest.size}
labelInline={labelInline}
helperText={helperText}
helperTextProps={helperTextProps}
{...containerProps}
>
{multiline ? (
<TextArea
{...currentInputProps}
placeholderTextColor={rest.placeholderTextColor as ColorValue}
/>
) : secureTextEntry ? (
<Stack position={'relative'} width={fullWidth ? '100%' : currentInputProps?.width}>
<Input
{...currentInputProps}
secureTextEntry={!show}
autoCapitalize="none"
placeholderTextColor={rest.placeholderTextColor as InputProps['placeholderTextColor']}
/>
<Pressable
style={{
position: 'absolute',
top: '50%',
transform: [{ translateY: -0.5 * 20 }],
height: 20,
right: 15,
}}
onPress={() => {
setShow((state) => !state)
}}
>
{show ? (
<EyeSlashRegular {...passwordIconProps} />
) : (
<EyeRegular {...passwordIconProps} />
)}
</Pressable>
</Stack>
) : (
<Input {...currentInputProps} autoCapitalize="none" />
)}
</LmFormFieldContainer>
)
}