Some style cleanup

This commit is contained in:
Eric Bailey
2026-04-01 11:06:31 -05:00
parent b71b6bde51
commit 7c9139ffd5
3 changed files with 17 additions and 41 deletions
-21
View File
@@ -1,24 +1,3 @@
import {StyleSheet} from 'react-native' import {StyleSheet} from 'react-native'
export const flatten = StyleSheet.flatten export const flatten = StyleSheet.flatten
type PaddingStyle = {
padding?: number
paddingHorizontal?: number
paddingVertical?: number
paddingTop?: number
paddingBottom?: number
paddingLeft?: number
paddingRight?: number
}
export function extractPadding(style: PaddingStyle | PaddingStyle[]) {
const s = flatten(style)
const base = s.padding ?? 0
return {
paddingTop: s.paddingTop ?? s.paddingVertical ?? base,
paddingBottom: s.paddingBottom ?? s.paddingVertical ?? base,
paddingLeft: s.paddingLeft ?? s.paddingHorizontal ?? base,
paddingRight: s.paddingRight ?? s.paddingHorizontal ?? base,
}
}
+10 -8
View File
@@ -33,7 +33,6 @@ import {HITSLOP_10} from '#/lib/constants'
import {mergeRefs} from '#/lib/merge-refs' import {mergeRefs} from '#/lib/merge-refs'
import { import {
atoms as a, atoms as a,
extractPadding,
type TextStyleProp, type TextStyleProp,
useAlf, useAlf,
type ViewStyleProp, type ViewStyleProp,
@@ -49,7 +48,7 @@ import {
} from '#/components/Autocomplete' } from '#/components/Autocomplete'
import {useOnKeyboard} from '#/components/hooks/useOnKeyboard' import {useOnKeyboard} from '#/components/hooks/useOnKeyboard'
import {Span, Text} from '#/components/Typography' import {Span, Text} from '#/components/Typography'
import {IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env' import {IS_IOS, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
/* /*
* ─── Types ──────────────────────────────────────────────────────────────────── * ─── Types ────────────────────────────────────────────────────────────────────
@@ -100,7 +99,12 @@ export type ComposerProps = Omit<
label: string label: string
ref?: React.Ref<TextInput> ref?: React.Ref<TextInput>
style?: ViewStyleProp['style'] style?: ViewStyleProp['style']
padding?: Parameters<typeof extractPadding>[0] padding?: {
paddingTop?: number
paddingBottom?: number
paddingLeft?: number
paddingRight?: number
}
textStyle?: TextStyleProp['style'] textStyle?: TextStyleProp['style']
initialNumberOfLines?: number initialNumberOfLines?: number
maxNumberOfLines?: number maxNumberOfLines?: number
@@ -205,11 +209,9 @@ export function Composer({
flags: {}, flags: {},
}, },
) )
const p = padding
? extractPadding(padding)
: {paddingTop: 0, paddingBottom: 0}
const lineHeight = ts.lineHeight || 20 const lineHeight = ts.lineHeight || 20
const verticalSpace = p.paddingTop + p.paddingBottom const verticalSpace =
(padding?.paddingTop || 0) + (padding?.paddingBottom || 0)
const mh = lineHeight * initialNumberOfLines + verticalSpace const mh = lineHeight * initialNumberOfLines + verticalSpace
const xh = maxNumberOfLines const xh = maxNumberOfLines
? lineHeight * maxNumberOfLines + verticalSpace ? lineHeight * maxNumberOfLines + verticalSpace
@@ -218,7 +220,7 @@ export function Composer({
? {height: lineHeight + verticalSpace} ? {height: lineHeight + verticalSpace}
: {minHeight: mh, maxHeight: xh} : {minHeight: mh, maxHeight: xh}
if (!IS_WEB) { if (IS_IOS) {
delete ts.lineHeight delete ts.lineHeight
} }
@@ -23,7 +23,7 @@ import {useInteractionState} from '#/components/hooks/useInteractionState'
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji' import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
import * as Toast from '#/components/Toast' import * as Toast from '#/components/Toast'
import {IS_WEB} from '#/env' import {IS_ANDROID, IS_WEB} from '#/env'
export function MessageComposer({ export function MessageComposer({
onSendMessage, onSendMessage,
@@ -136,17 +136,12 @@ export function MessageComposer({
borderColor: t.palette.primary_500, borderColor: t.palette.primary_500,
}, },
]} ]}
padding={[ padding={{
a.p_md, paddingLeft: IS_WEB ? 30 + 8 : 16,
{ paddingTop: 12,
paddingBottom: IS_ANDROID ? 4 : 12,
paddingRight: 35 + a.p_sm.padding, paddingRight: 35 + a.p_sm.padding,
}, }}
IS_WEB
? {
paddingLeft: 30 + a.p_sm.padding,
}
: {},
]}
textStyle={[a.text_md, a.leading_snug]} textStyle={[a.text_md, a.leading_snug]}
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}