[🐴] Input hover and focus styles (#4064)
* styles for native input * web focus/hover * nitzio/stable
parent
ba068c8934
commit
a84a14d084
|
@ -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}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
]}
|
||||
|
|
Loading…
Reference in New Issue