aboutsummaryrefslogtreecommitdiff
path: root/src/components/common
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/common')
-rw-r--r--src/components/common/MomentTags.tsx44
-rw-r--r--src/components/common/NavigationIcon.tsx2
-rw-r--r--src/components/common/TaggSquareButton.tsx26
-rw-r--r--src/components/common/TaggTypeahead.tsx49
4 files changed, 96 insertions, 25 deletions
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index d8a70353..37069e18 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -10,6 +10,13 @@ interface MomentTagsProps {
setTags: (tag: MomentTagType[]) => void;
imageRef: RefObject<Image>;
deleteFromList?: (user: ProfilePreviewType) => void;
+ boundaries?: DraggableBoundaries;
+}
+interface DraggableBoundaries {
+ top?: number;
+ bottom?: number;
+ left?: number;
+ right?: number;
}
const MomentTags: React.FC<MomentTagsProps> = ({
@@ -18,11 +25,14 @@ const MomentTags: React.FC<MomentTagsProps> = ({
setTags,
imageRef,
deleteFromList,
+ boundaries,
}) => {
const [offset, setOffset] = useState([0, 0]);
const [imageDimensions, setImageDimensions] = useState([0, 0]);
const [maxZIndex, setMaxZIndex] = useState(1);
const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]);
+ // [minXBoundary, maxXBoundary, minYBoundary, maxYBoundary]
+ const [boundariesList, setBoundariesList] = useState<number[]>([0, 0, 0, 0]);
const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
if (ref !== null && ref.current !== null) {
@@ -77,6 +87,24 @@ const MomentTags: React.FC<MomentTagsProps> = ({
},
);
}
+
+ // Checks for and adds boundaries
+ if (boundaries) {
+ const newBounds = [...boundariesList];
+ if (boundaries.top) {
+ newBounds[2] = boundaries.top;
+ }
+ if (boundaries.bottom) {
+ newBounds[3] = boundaries.bottom;
+ }
+ if (boundaries.left) {
+ newBounds[0] = boundaries.left;
+ }
+ if (boundaries.right) {
+ newBounds[1] = boundaries.right;
+ }
+ setBoundariesList(newBounds);
+ }
},
editing ? 100 : 0,
);
@@ -94,10 +122,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
z={tag.z}
- minX={offset[0]}
- minY={offset[1]}
- maxX={imageDimensions[0] + offset[0]}
- maxY={imageDimensions[1] + offset[1]}
+ minX={offset[0] + boundariesList[0]}
+ minY={offset[1] + boundariesList[2]}
+ maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+ maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
onDragStart={() => {
const currZIndex = maxZIndex;
setMaxZIndex(currZIndex + 1);
@@ -123,10 +151,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
z={tag.z}
- minX={offset[0]}
- minY={offset[1]}
- maxX={imageDimensions[0] + offset[0]}
- maxY={imageDimensions[1] + offset[1]}
+ minX={offset[0] + boundariesList[0]}
+ minY={offset[1] + boundariesList[2]}
+ maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+ maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
disabled={true}>
<TaggDraggable
draggableRef={draggableRefs[index]}
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index debb36b3..a5f42992 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -37,7 +37,7 @@ const NavigationIcon = (props: NavigationIconProps) => {
case 'Upload':
imgSrc = props.disabled
? require('../../assets/navigationIcons/new-upload.png')
- : require('../../assets/navigationIcons/upload-clicked.png');
+ : require('../../assets/navigationIcons/new-upload.png');
break;
case 'Notifications':
imgSrc = props.disabled
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 1a1c33b3..b1e65ba6 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, {FC} from 'react';
import {
GestureResponderEvent,
+ StyleProp,
StyleSheet,
Text,
TextStyle,
TouchableOpacity,
- ViewProps,
+ TouchableOpacityProps,
ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
@@ -15,14 +16,16 @@ import {
TAGG_PURPLE,
} from '../../constants';
import {normalize, SCREEN_WIDTH} from '../../utils';
-interface TaggSquareButtonProps extends ViewProps {
+
+interface TaggSquareButtonProps extends TouchableOpacityProps {
onPress: (event: GestureResponderEvent) => void;
title: string;
buttonStyle: 'normal' | 'large' | 'gradient';
buttonColor: 'purple' | 'white' | 'blue';
labelColor: 'white' | 'blue';
- style?: ViewStyle;
- labelStyle?: TextStyle;
+ style?: StyleProp<ViewStyle>;
+ labelStyle?: StyleProp<TextStyle>;
+ icon?: Element;
}
const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -50,8 +53,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
case 'large':
return (
<TouchableOpacity
+ {...props}
onPress={props.onPress}
style={[styles.largeButton, buttonColor, props.style]}>
+ {props.icon}
<Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
{props.title}
</Text>
@@ -59,12 +64,16 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
);
case 'gradient':
return (
- <TouchableOpacity onPress={props.onPress} style={props.style}>
+ <TouchableOpacity
+ {...props}
+ onPress={props.onPress}
+ style={props.style}>
<LinearGradient
style={styles.gradientButton}
colors={BACKGROUND_GRADIENT_MAP[0]}
useAngle
angle={90}>
+ {props.icon}
<Text style={[styles.gradientLabel, props.labelStyle]}>
{props.title}
</Text>
@@ -75,8 +84,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
default:
return (
<TouchableOpacity
+ {...props}
onPress={props.onPress}
style={[styles.normalButton, buttonColor, props.style]}>
+ {props.icon}
<Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
{props.title}
</Text>
@@ -87,6 +98,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
const styles = StyleSheet.create({
largeButton: {
+ flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '70%',
@@ -99,6 +111,7 @@ const styles = StyleSheet.create({
color: '#eee',
},
normalButton: {
+ flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: SCREEN_WIDTH * 0.45,
@@ -111,6 +124,7 @@ const styles = StyleSheet.create({
fontWeight: '500',
},
gradientButton: {
+ flexDirection: 'row',
marginTop: '8%',
borderRadius: 5,
paddingVertical: '5%',
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7967fdbc..672cff69 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,27 +1,34 @@
-import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
+import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native';
import {Suggestion} from 'react-native-controlled-mentions';
import {useSelector} from 'react-redux';
import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
import {loadSearchResults} from '../../services';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
import TaggUserRowCell from './TaggUserRowCell';
type TaggTypeaheadProps = {
keyword: string | undefined;
component: string | undefined;
onSuggestionPress: (suggestion: Suggestion) => void;
+ isShowBelowStyle?: boolean;
};
const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
keyword,
component,
onSuggestionPress,
+ isShowBelowStyle = false,
}) => {
const {friends} = useSelector((state: RootState) => state.friends);
const [results, setResults] = useState<ProfilePreviewType[]>([]);
+ const [viewPxy, setViewPxy] = useState<{px: number; py: number}>({
+ px: 0,
+ py: 0,
+ });
+ const viewRef = useRef<View>(null);
const [height, setHeight] = useState(0);
const margin = component === 'comment' ? -10 : 0;
@@ -33,6 +40,22 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
}
}, [keyword]);
+ const onLayout = (e: LayoutChangeEvent) => {
+ setHeight(e.nativeEvent.layout.height);
+ viewRef.current?.measure(
+ (
+ _fx: number,
+ _fy: number,
+ _width: number,
+ _height: number,
+ px: number,
+ py: number,
+ ) => {
+ setViewPxy({px, py});
+ },
+ );
+ };
+
const getQuerySuggested = async () => {
if (keyword === undefined || keyword === '@') {
return;
@@ -50,14 +73,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
}
return (
- <View>
- <View style={styles.overlay} />
+ <View ref={viewRef} onLayout={onLayout}>
+ {/* <View ref={viewRef} onLayout={onLayout}> */}
+ {!isShowBelowStyle && <View style={styles.overlay} />}
<ScrollView
- style={[styles.container, {top: -height, margin: margin}]}
+ style={[
+ styles.container,
+ isShowBelowStyle
+ ? [styles.topPadding, {left: -viewPxy.px}]
+ : {top: -height, margin: margin},
+ ]}
showsVerticalScrollIndicator={false}
- onLayout={(event) => {
- setHeight(event.nativeEvent.layout.height);
- }}
keyboardShouldPersistTaps={'always'}>
{results.map((user) => (
<TaggUserRowCell
@@ -78,10 +104,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
const styles = StyleSheet.create({
container: {
+ position: 'absolute',
width: SCREEN_WIDTH,
maxHeight: 264,
backgroundColor: 'white',
- position: 'absolute',
alignSelf: 'center',
zIndex: 1,
},
@@ -95,6 +121,9 @@ const styles = StyleSheet.create({
bottom: 10,
zIndex: -1,
},
+ topPadding: {
+ top: isIPhoneX() ? 180 : 150,
+ },
});
export default TaggTypeahead;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:27:24 +0000