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" } }