this repo has no description
Make multiline text inputs resizable
Fix multiline input padding for mobile
Remove duplicate resizable input css
+24
-6
+24
-2
src/components/forms/TextField.tsx
+24
-2
src/components/forms/TextField.tsx
···
1
-
import {createContext, useContext, useMemo, useRef} from 'react'
1
+
import React, {createContext, useContext, useMemo, useRef} from 'react'
2
2
import {
3
3
type AccessibilityProps,
4
4
StyleSheet,
···
11
11
12
12
import {HITSLOP_20} from '#/lib/constants'
13
13
import {mergeRefs} from '#/lib/merge-refs'
14
+
import {isWeb} from '#/platform/detection'
14
15
import {
15
16
android,
16
17
applyFonts,
···
83
84
],
84
85
)
85
86
87
+
// Check if any child has multiline prop
88
+
const hasMultiline = useMemo(() => {
89
+
let found = false
90
+
React.Children.forEach(children, child => {
91
+
if (
92
+
React.isValidElement(child) &&
93
+
(child.props as {multiline?: boolean})?.multiline
94
+
) {
95
+
found = true
96
+
}
97
+
})
98
+
return found
99
+
}, [children])
100
+
86
101
return (
87
102
<Context.Provider value={context}>
88
103
<View
···
91
106
a.align_center,
92
107
a.relative,
93
108
a.w_full,
94
-
a.px_md,
109
+
!(hasMultiline && isWeb) && a.px_md,
95
110
style,
96
111
]}
97
112
{...web({
···
222
237
marginTop: 2,
223
238
marginBottom: 2,
224
239
}),
240
+
rest.multiline &&
241
+
web({
242
+
resize: 'vertical',
243
+
fieldSizing: 'content',
244
+
paddingLeft: 16,
245
+
paddingRight: 16,
246
+
}),
225
247
style,
226
248
])
227
249