[🐴] Input hover and focus styles (#4064)

* styles for native input

* web focus/hover

* nit
zio/stable
Hailey 2024-05-16 14:23:02 -07:00 committed by GitHub
parent ba068c8934
commit a84a14d084
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 11 deletions

View File

@ -22,6 +22,7 @@ import {
import {isIOS} from 'platform/detection'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, useTheme} from '#/alf'
import {useSharedInputStyles} from '#/components/forms/TextField'
import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
export function MessageInput({
@ -41,8 +42,12 @@ export function MessageInput({
const {top: topInset} = useSafeAreaInsets()
const inputStyles = useSharedInputStyles()
const [isFocused, setIsFocused] = React.useState(false)
const inputRef = React.useRef<TextInput>(null)
useSaveMessageDraft(message)
const onSubmit = React.useCallback(() => {
if (message.trim() === '') {
return
@ -76,19 +81,21 @@ export function MessageInput({
[scrollToEnd, topInset],
)
useSaveMessageDraft(message)
return (
<View style={a.p_md}>
<View
style={[
a.w_full,
a.flex_row,
a.py_sm,
a.px_sm,
a.pl_md,
t.atoms.bg_contrast_25,
{borderRadius: 23},
{
padding: a.p_sm.padding - 2,
paddingLeft: a.p_md.padding - 2,
borderWidth: 2,
borderRadius: 23,
borderColor: 'transparent',
},
isFocused && inputStyles.chromeFocus,
]}>
<TextInput
accessibilityLabel={_(msg`Message input field`)}
@ -108,6 +115,8 @@ export function MessageInput({
keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
scrollEnabled={isInputScrollable}
blurOnSubmit={false}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
onContentSizeChange={onInputLayout}
ref={inputRef}
hitSlop={HITSLOP_10}

View File

@ -12,6 +12,7 @@ import {
} from '#/state/messages/message-drafts'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, useTheme} from '#/alf'
import {useSharedInputStyles} from '#/components/forms/TextField'
import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
export function MessageInput({
@ -25,6 +26,10 @@ export function MessageInput({
const {getDraft, clearDraft} = useMessageDraft()
const [message, setMessage] = React.useState(getDraft)
const inputStyles = useSharedInputStyles()
const [isFocused, setIsFocused] = React.useState(false)
const [isHovered, setIsHovered] = React.useState(false)
const onSubmit = React.useCallback(() => {
if (message.trim() === '') {
return
@ -63,11 +68,20 @@ export function MessageInput({
<View
style={[
a.flex_row,
a.px_sm,
a.pl_md,
t.atoms.bg_contrast_25,
{borderRadius: 23},
]}>
{
paddingHorizontal: a.p_sm.padding - 2,
paddingLeft: a.p_md.padding - 2,
borderWidth: 2,
borderRadius: 23,
borderColor: 'transparent',
},
isHovered && inputStyles.chromeHover,
isFocused && inputStyles.chromeFocus,
]}
// @ts-expect-error web only
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
<TextareaAutosize
style={StyleSheet.flatten([
a.flex_1,
@ -87,6 +101,8 @@ export function MessageInput({
value={message}
dirName="ltr"
autoFocus={true}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
onChange={onChange}
onKeyDown={onKeyDown}
/>
@ -101,7 +117,7 @@ export function MessageInput({
{
height: 30,
width: 30,
marginTop: 6,
marginTop: 5,
backgroundColor: t.palette.primary_500,
},
]}