Tweak haptics, add to post controls (#5977)

* change timing to 10ms, make ios only

* add haptics to post controls

* rm from like button
This commit is contained in:
Samuel Newman
2024-10-28 22:03:08 +02:00
committed by GitHub
parent dcc5405e8a
commit d050a78a2d
4 changed files with 23 additions and 11 deletions
@@ -5,10 +5,11 @@ import {useLingui} from '@lingui/react'
import {PressableScale} from '#/lib/custom-animations/PressableScale' import {PressableScale} from '#/lib/custom-animations/PressableScale'
import {useHaptics} from '#/lib/haptics' import {useHaptics} from '#/lib/haptics'
import {isIOS} from '#/platform/detection'
import {useProfileQuery} from '#/state/queries/profile' import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {UserAvatar} from '#/view/com/util/UserAvatar' import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, native, useBreakpoints, useTheme} from '#/alf' import {atoms as a, ios, useBreakpoints, useTheme} from '#/alf'
import {useInteractionState} from '#/components/hooks/useInteractionState' import {useInteractionState} from '#/components/hooks/useInteractionState'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
@@ -41,14 +42,18 @@ export function PostThreadComposePrompt({
t.atoms.border_contrast_low, t.atoms.border_contrast_low,
t.atoms.bg, t.atoms.bg,
]} ]}
onPressIn={() => playHaptic('Light')} onPressIn={ios(() => playHaptic('Light'))}
onPress={() => { onPress={() => {
onPressCompose() onPressCompose()
setTimeout(() => playHaptic('Medium'), 200) if (isIOS) {
setTimeout(() => playHaptic('Medium'), 10)
} else {
playHaptic('Light')
}
}} }}
onLongPress={native(() => { onLongPress={ios(() => {
onPressCompose() onPressCompose()
setTimeout(() => playHaptic('Heavy'), 200) playHaptic('Heavy')
})} })}
onHoverIn={onHoverIn} onHoverIn={onHoverIn}
onHoverOut={onHoverOut}> onHoverOut={onHoverOut}>
+10 -6
View File
@@ -10,8 +10,8 @@ import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {clamp} from '#/lib/numbers' import {clamp} from '#/lib/numbers'
import {gradients} from '#/lib/styles' import {gradients} from '#/lib/styles'
import {isWeb} from '#/platform/detection' import {isIOS, isWeb} from '#/platform/detection'
import {native} from '#/alf' import {ios} from '#/alf'
export interface FABProps export interface FABProps
extends ComponentProps<typeof TouchableWithoutFeedback> { extends ComponentProps<typeof TouchableWithoutFeedback> {
@@ -41,14 +41,18 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) {
]}> ]}>
<PressableScale <PressableScale
testID={testID} testID={testID}
onPressIn={() => playHaptic('Light')} onPressIn={ios(() => playHaptic('Light'))}
onPress={evt => { onPress={evt => {
onPress?.(evt) onPress?.(evt)
setTimeout(() => playHaptic('Medium'), 200) if (isIOS) {
setTimeout(() => playHaptic('Medium'), 10)
} else {
playHaptic('Light')
}
}} }}
onLongPress={native((evt: any) => { onLongPress={ios((evt: any) => {
onPress?.(evt) onPress?.(evt)
setTimeout(() => playHaptic('Heavy'), 200) playHaptic('Heavy')
})} })}
targetScale={0.9} targetScale={0.9}
{...props}> {...props}>
@@ -250,6 +250,7 @@ let PostCtrls = ({
style={btnStyle} style={btnStyle}
onPress={() => { onPress={() => {
if (!post.viewer?.replyDisabled) { if (!post.viewer?.replyDisabled) {
playHaptic('Light')
requireAuth(() => onPressReply()) requireAuth(() => onPressReply())
} }
}} }}
@@ -51,9 +51,11 @@ let RepostButton = ({
<Button <Button
testID="repostBtn" testID="repostBtn"
onPress={() => { onPress={() => {
playHaptic('Light')
requireAuth(() => dialogControl.open()) requireAuth(() => dialogControl.open())
}} }}
onLongPress={() => { onLongPress={() => {
playHaptic('Heavy')
requireAuth(() => onQuote()) requireAuth(() => onQuote())
}} }}
style={[ style={[