Some style cleanup
This commit is contained in:
@@ -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,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user