diff --git a/src/components/quickReplyModal/quickReplyModalStyles.ts b/src/components/quickReplyModal/quickReplyModalStyles.ts index 9728689dd..2efbc4d96 100644 --- a/src/components/quickReplyModal/quickReplyModalStyles.ts +++ b/src/components/quickReplyModal/quickReplyModalStyles.ts @@ -9,30 +9,15 @@ export default EStyleSheet.create({ right: 0, zIndex: 999, }, - + container:{ + flex:1, + }, modalContainer: { - padding: 12, + paddingVertical: 16, }, - intialView: { - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - }, - userAvatar: { - width: 50, - height: 50, - borderRadius: 50, - }, - addCommentBtn: { - backgroundColor: '$primaryLightBackground', - flex: 1, - height: 50, - marginLeft: 8, - borderRadius: 8, - justifyContent: 'center', - paddingLeft: 12, - }, + + modalHeader: {}, titleBtnTxt: { fontSize: 18, @@ -40,7 +25,7 @@ export default EStyleSheet.create({ color: '$primaryBlack', }, inputContainer: { - paddingVertical: 16, + padding: 16, }, textInput: { color: '$iconColor', @@ -53,6 +38,7 @@ export default EStyleSheet.create({ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', + paddingHorizontal:16, }, commentBtn: { width: 100, @@ -60,4 +46,30 @@ export default EStyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + + replySection: { + paddingTop: 10, + paddingBottom: 0, + }, + accountTile: { + height: 60, + flexDirection: 'row', + paddingHorizontal: 16, + alignItems: 'center', + justifyContent: 'space-between', + }, + avatarAndNameContainer: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal:16, + paddingTop:12, + }, + nameContainer: { + marginLeft: 2, + }, + name: { + marginLeft: 4, + color: '$primaryDarkGray', + }, + }); diff --git a/src/components/quickReplyModal/quickReplyModalView.tsx b/src/components/quickReplyModal/quickReplyModalView.tsx index e2c3b73ba..81770852a 100644 --- a/src/components/quickReplyModal/quickReplyModalView.tsx +++ b/src/components/quickReplyModal/quickReplyModalView.tsx @@ -5,8 +5,9 @@ import styles from './quickReplyModalStyles'; import { forwardRef } from 'react'; import { View, Text } from 'react-native'; import { useIntl } from 'react-intl'; -import { MainButton, TextButton, TextInput, UserAvatar } from '..'; +import { MainButton, SummaryArea, TextInput, UserAvatar } from '..'; import { useSelector } from 'react-redux'; +import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; export interface QuickReplyModalProps {} @@ -16,13 +17,12 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => { const [selectedPost, setSelectedPost] = useState(null); const [commentValue, setCommentValue] = useState(''); - const [expand, setExpand] = useState(false); const [isLoading, setIsLoading] = useState(false); const sheetModalRef = useRef(); + const inputRef = useRef(null); // reset the state when post changes useEffect(() => { - setExpand(false); setCommentValue(''); }, [selectedPost]); @@ -32,43 +32,31 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => { console.log('Showing action modal'); setSelectedPost(post); sheetModalRef.current?.setModalVisible(true); + // wait for modal to open and then show the keyboard + setTimeout(() => { + inputRef.current?.focus(); + }, 1000); }, })); //VIEW_RENDERERS - const _renderInitialView = () => { + const _renderContent = () => { return ( - - - setExpand(true)} - style={styles.addCommentBtn} - textStyle={styles.btnText} - /> - - ); - }; - - const _renderFullView = () => { - return ( - - - console.log('title pressed!')} - style={styles.titleBtn} - textStyle={styles.titleBtnTxt} - /> + + + + + + {`@${currentAccount.username}`} + { style={styles.textInput} multiline={true} numberOfLines={5} + textAlignVertical="top" /> @@ -92,24 +81,17 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => { ); }; - const _renderContent = () => { - return ( - - {!expand && _renderInitialView()} - {expand && _renderFullView()} - - ); - }; return ( - {selectedPost && _renderContent()} + + {selectedPost && _renderContent()} + ); };