diff --git a/src/components/index.js b/src/components/index.js
index 746d80704..459ff3f4c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -92,6 +92,7 @@ import { CustomiseFiltersModal } from './customiseFiltersModal';
import { ForegroundNotification } from './foregroundNotification';
import { PostHtmlRenderer } from './postHtmlRenderer';
import { QuickProfileModal } from './organisms';
+import QuickReplyModal from './quickReplyModal/quickReplyModalView';
// Basic UI Elements
import {
@@ -232,4 +233,5 @@ export {
ForegroundNotification,
PostHtmlRenderer,
QuickProfileModal,
+ QuickReplyModal,
};
diff --git a/src/components/postCard/container/postCardContainer.js b/src/components/postCard/container/postCardContainer.js
index 763e9128e..f83e38fea 100644
--- a/src/components/postCard/container/postCardContainer.js
+++ b/src/components/postCard/container/postCardContainer.js
@@ -29,6 +29,7 @@ const PostCardContainer = ({
imageHeight,
setImageHeight,
pageType,
+ showQuickReplyModal,
}) => {
const dispatch = useAppDispatch();
@@ -124,6 +125,9 @@ const PostCardContainer = ({
setIsMuted(false);
};
+ const _handleQuickReplyModal = () => {
+ showQuickReplyModal(content);
+ };
return (
);
};
diff --git a/src/components/postCard/view/postCardView.js b/src/components/postCard/view/postCardView.js
index 26f32139e..8af0bf6bf 100644
--- a/src/components/postCard/view/postCardView.js
+++ b/src/components/postCard/view/postCardView.js
@@ -32,6 +32,7 @@ const PostCardView = ({
handleOnVotersPress,
handleOnReblogsPress,
handleOnUnmutePress,
+ showQuickReplyModal,
content,
reblogs,
isHideImage,
@@ -201,6 +202,7 @@ const PostCardView = ({
iconType="MaterialCommunityIcons"
isClickable
text={get(content, 'children', 0)}
+ onPress={showQuickReplyModal}
/>
diff --git a/src/components/postsList/container/postsListContainer.tsx b/src/components/postsList/container/postsListContainer.tsx
index a2d42b547..2ca501325 100644
--- a/src/components/postsList/container/postsListContainer.tsx
+++ b/src/components/postsList/container/postsListContainer.tsx
@@ -17,6 +17,7 @@ interface postsListContainerProps extends FlatListProps {
isLoading:boolean;
isRefreshing:boolean;
pageType:'main'|'profile'|'ownProfile'|'community';
+ showQuickReplyModal:(post:any)=>void;
}
let _onEndReachedCalledDuringMomentum = true;
@@ -28,6 +29,7 @@ const postsListContainer = ({
isRefreshing,
isLoading,
pageType,
+ showQuickReplyModal,
...props
}:postsListContainerProps, ref) => {
@@ -124,6 +126,7 @@ const postsListContainer = ({
imageHeight={imgHeight}
setImageHeight = {_setImageHeightInMap}
pageType={pageType}
+ showQuickReplyModal={showQuickReplyModal}
/>,
);
}
@@ -142,6 +145,7 @@ const postsListContainer = ({
imageHeight={imgHeight}
setImageHeight = {_setImageHeightInMap}
pageType={pageType}
+ showQuickReplyModal={showQuickReplyModal}
/>,
);
}
diff --git a/src/components/quickReplyModal/quickReplyModalStyles.ts b/src/components/quickReplyModal/quickReplyModalStyles.ts
new file mode 100644
index 000000000..b12bb7eaf
--- /dev/null
+++ b/src/components/quickReplyModal/quickReplyModalStyles.ts
@@ -0,0 +1,37 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+ sheetContent: {
+ backgroundColor: '$primaryBackgroundColor',
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ right: 0,
+ zIndex: 999,
+ },
+
+ modalContainer: {
+ padding: 12,
+ },
+ modalHeader: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ textInput: {
+ color: '$iconColor',
+ fontSize: 16,
+ flexGrow: 1,
+ fontWeight: '500',
+ height: 40,
+ },
+ inputContainer: {
+ flexDirection: 'row',
+ paddingVertical: 12,
+ },
+ commentBtn: {
+ height: 40,
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingHorizontal: 12,
+ },
+});
diff --git a/src/components/quickReplyModal/quickReplyModalView.tsx b/src/components/quickReplyModal/quickReplyModalView.tsx
new file mode 100644
index 000000000..f4faf023b
--- /dev/null
+++ b/src/components/quickReplyModal/quickReplyModalView.tsx
@@ -0,0 +1,73 @@
+import React, { useImperativeHandle, useRef, useState } from 'react';
+import ActionSheet from 'react-native-actions-sheet';
+import EStyleSheet from 'react-native-extended-stylesheet';
+import styles from './quickReplyModalStyles';
+import { forwardRef } from 'react';
+import { View, Text } from 'react-native';
+import { useIntl } from 'react-intl';
+import { TextButton, TextInput } from '..';
+
+export interface QuickReplyModalProps {}
+
+const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
+ const intl = useIntl();
+ const [selectedPost, setSelectedPost] = useState(null);
+ const [commentValue, setCommentValue] = useState('');
+ const sheetModalRef = useRef();
+
+ //CALLBACK_METHODS
+ useImperativeHandle(ref, () => ({
+ show: (post: any) => {
+ console.log('Showing action modal');
+ setSelectedPost(post);
+ sheetModalRef.current?.setModalVisible(true);
+ },
+ }));
+
+ //VIEW_RENDERERS
+
+ const _renderContent = () => {
+ return (
+
+
+ {selectedPost.title}
+
+
+
+ console.log('Comment!')}
+ style={styles.commentBtn}
+ textStyle={styles.btnText}
+ />
+
+
+ );
+ };
+
+ return (
+
+ {selectedPost && _renderContent()}
+
+ );
+};
+
+export default forwardRef(QuickReplyModal);
diff --git a/src/components/tabbedPosts/view/tabContent.tsx b/src/components/tabbedPosts/view/tabContent.tsx
index c190bcedf..844f12bec 100644
--- a/src/components/tabbedPosts/view/tabContent.tsx
+++ b/src/components/tabbedPosts/view/tabContent.tsx
@@ -10,6 +10,7 @@ import { AppState, NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
import { PostsListRef } from '../../postsList/container/postsListContainer';
import ScrollTopPopup from './scrollTopPopup';
import { debounce } from 'lodash';
+import { QuickReplyModal } from '../..';
const DEFAULT_TAB_META = {
startAuthor:'',
@@ -62,6 +63,7 @@ const TabContent = ({
const appState = useRef(AppState.currentState);
const postsRef = useRef(posts);
const sessionUserRef = useRef(sessionUser);
+ const quickReplyModalRef = useRef(null)
//init state refs;
postsRef.current = posts;
@@ -313,6 +315,12 @@ const TabContent = ({
}
};
+ // show quick reply modal
+ const _showQuickReplyModal = (post:any) => {
+ console.log('post: ', post);
+
+ quickReplyModalRef.current.show(post)
+ }
return (
@@ -334,6 +342,7 @@ const TabContent = ({
isLoading={tabMeta.isLoading}
ListEmptyComponent={_renderEmptyContent}
pageType={pageType}
+ showQuickReplyModal={_showQuickReplyModal}
/>
post.avatar || '')}
@@ -344,6 +353,7 @@ const TabContent = ({
setEnableScrollTop(false);
}}
/>
+
>
);
};
diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json
index aec0ae5c0..52fbd62db 100644
--- a/src/config/locales/en-US.json
+++ b/src/config/locales/en-US.json
@@ -707,5 +707,9 @@
"day":"days",
"month":"months",
"year":"years"
+ },
+ "quick_reply":{
+ "placeholder":"Type your comment",
+ "comment": "Comment"
}
}