Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
[Chat] Message context menu fixes (#10314)
authored by
Samuel Newman
and committed by
GitHub
0df1d6f5
18052f08
+25
-11
+18
-7
src/components/ContextMenu/index.tsx
+18
-7
src/components/ContextMenu/index.tsx
···
54
54
import {useHaptics} from '#/lib/haptics'
55
55
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
56
56
import {logger} from '#/logger'
57
-
import {atoms as a, platform, tokens, useTheme} from '#/alf'
57
+
import {atoms as a, flatten, platform, tokens, useTheme} from '#/alf'
58
58
import {
59
59
Context,
60
60
ItemContext,
···
527
527
}
528
528
})
529
529
530
-
const menuContext = useMemo(() => ({align}), [align])
530
+
const xOffset = (flatten(style)?.marginLeft as number) ?? 0
531
+
const menuContext = useMemo(() => ({align, xOffset}), [align, xOffset])
531
532
532
533
const onLayout = useCallback(() => {
533
534
if (!measurement) return
···
655
656
[context.measurement, frame.height, insets, translationSV],
656
657
)
657
658
658
-
const menuContext = useMemo(() => ({align}), [align])
659
+
const xOffset = (flatten(style)?.marginLeft as number) ?? 0
660
+
const menuContext = useMemo(() => ({align, xOffset}), [align, xOffset])
659
661
660
662
if (!context.isOpen || !context.measurement) return null
661
663
···
763
765
onOut: onPressOut,
764
766
} = useInteractionState()
765
767
const id = useId()
766
-
const {align} = useContextMenuMenuContext()
768
+
const {align, xOffset: menuXOffset} = useContextMenuMenuContext()
767
769
768
770
const {close, measurement, registerHoverable} = context
769
771
···
779
781
const xOffset = position
780
782
? position.x
781
783
: align === 'left'
782
-
? measurement.x
783
-
: measurement.x + measurement.width - layout.width
784
+
? measurement.x + menuXOffset
785
+
: measurement.x + measurement.width - layout.width - menuXOffset
784
786
785
787
registerHoverable(
786
788
id,
···
796
798
},
797
799
)
798
800
},
799
-
[id, measurement, registerHoverable, close, onPress, align, position],
801
+
[
802
+
id,
803
+
measurement,
804
+
registerHoverable,
805
+
close,
806
+
onPress,
807
+
align,
808
+
menuXOffset,
809
+
position,
810
+
],
800
811
)
801
812
802
813
const itemContext = useMemo(
+1
src/components/ContextMenu/types.ts
+1
src/components/ContextMenu/types.ts
+6
-3
src/components/dms/EmojiReactionPicker.tsx
+6
-3
src/components/dms/EmojiReactionPicker.tsx
···
33
33
const t = useTheme()
34
34
const isFromSelf = message.sender?.did === currentAccount?.did
35
35
const {measurement, close} = useContextMenuContext()
36
-
const {align} = useContextMenuMenuContext()
36
+
const {align, xOffset} = useContextMenuMenuContext()
37
37
const [layout, setLayout] = useState({width: 0, height: 0})
38
38
const {width: screenWidth} = useWindowDimensions()
39
39
···
44
44
45
45
const position = useMemo(() => {
46
46
return {
47
-
x: align === 'left' ? 12 : screenWidth - layout.width - 12,
47
+
x:
48
+
align === 'left'
49
+
? (measurement?.x ?? 0) + xOffset
50
+
: (measurement?.x ?? 0) + (measurement?.width ?? 0) - layout.width,
48
51
y: (measurement?.y ?? 0) - tokens.space.xs - layout.height,
49
52
height: layout.height,
50
53
width: layout.width,
51
54
}
52
-
}, [measurement, align, screenWidth, layout])
55
+
}, [measurement, align, xOffset, screenWidth, layout])
53
56
54
57
const limitReacted = hasReachedReactionLimit(message, currentAccount?.did)
55
58