Merge pull request #2363 from ecency/nt/reply-modal

Nt/reply modal

src/components/insertLinkModal/insertLinkModal.tsx

@@ -6,12 +6,9 @@ import {
   TouchableOpacity,
   View,
   ActivityIndicator,
-  
 } from 'react-native';
 import { MainButton, PostBody, TextButton } from '..';
 import styles from './insertLinkModalStyles';
-import ActionSheet from 'react-native-actions-sheet';
-import EStyleSheet from 'react-native-extended-stylesheet';
 import TextInput from '../textInput';
 import { delay } from '../../utils/editor';
 import { isStringWebLink } from '../markdownEditor/view/formats/utils';
@@ -20,6 +17,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import applyWebLinkFormat from '../markdownEditor/view/formats/applyWebLinkFormat';
 import Clipboard from '@react-native-clipboard/clipboard';
 import getWindowDimensions from '../../utils/getWindowDimensions';
+import Modal from '../modal';
 
 interface InsertLinkModalProps {
   handleOnInsertLink: ({
@@ -32,12 +30,12 @@ interface InsertLinkModalProps {
   handleOnSheetClose: () => void;
 }
 const screenWidth = getWindowDimensions().width - 58;
-const previewWidth = (10 / 16) * getWindowDimensions().width;
 
 export const InsertLinkModal = forwardRef(
   ({ handleOnInsertLink, handleOnSheetClose }: InsertLinkModalProps, ref) => {
     const intl = useIntl();
 
+    const [visible, setVisible] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [label, setLabel] = useState('');
     const [url, setUrl] = useState('');
@@ -47,10 +45,11 @@ export const InsertLinkModal = forwardRef(
     const [selection, setSelection] = useState({ start: 0, end: 0 });
     const [selectedUrlType, setSelectedUrlType] = useState(0);
     const [previewBody, setPreviewBody] = useState('');
-    const sheetModalRef = useRef<ActionSheet>();
+
     const labelInputRef = useRef(null);
     const urlInputRef = useRef(null);
 
+
     useImperativeHandle(ref, () => ({
       showModal: async ({ selectedText, selection }) => {
         if (selectedText) {
@@ -68,12 +67,12 @@ export const InsertLinkModal = forwardRef(
           setSelection(selection);
         }
 
-        sheetModalRef.current?.setModalVisible(true);
+        setVisible(true);
         await delay(1500);
         labelInputRef.current?.focus();
       },
       hideModal: () => {
-        sheetModalRef.current?.setModalVisible(false);
+        setVisible(false);
       },
     }));
 
@@ -118,6 +117,7 @@ export const InsertLinkModal = forwardRef(
 
     const _handleOnCloseSheet = () => {
       labelInputRef.current?.blur();
+      setVisible(false);
       setLabel('');
       setUrl('');
       setSelectedUrlType(0);
@@ -141,7 +141,7 @@ export const InsertLinkModal = forwardRef(
         <View style={styles.floatingContainer}>
           <TextButton
             style={styles.cancelButton}
-            onPress={() => sheetModalRef.current?.setModalVisible(false)}
+            onPress={() => setVisible(false)}// sheetModalRef.current?.setModalVisible(false)}
             text={'Cancel'}
           />
           <MainButton
@@ -150,7 +150,7 @@ export const InsertLinkModal = forwardRef(
             iconName="plus"
             iconType="MaterialCommunityIcons"
             iconColor="white"
-            text={'Insert Link'}
+            text={intl.formatMessage({ id: 'editor.insert_link' })}
           />
         </View>
       );
@@ -291,17 +291,18 @@ export const InsertLinkModal = forwardRef(
     );
 
     return (
-      <ActionSheet
+
-        ref={sheetModalRef}
+      <Modal
-        gestureEnabled={true}
+        isOpen={visible}
-        keyboardShouldPersistTaps="handled"
+        handleOnModalClose={_handleOnCloseSheet}
-        containerStyle={styles.sheetContent}
+        presentationStyle="formSheet"
-        keyboardHandlerEnabled
+        animationType="slide"
-        indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
+        title={intl.formatMessage({ id: 'editor.insert_link' })}
-        onClose={_handleOnCloseSheet}
+        style={styles.modalStyle}
       >
         {_renderContent}
-      </ActionSheet>
+      </Modal>
+
     );
   },
 );

src/components/insertLinkModal/insertLinkModalStyles.ts

@@ -19,8 +19,10 @@ export default EStyleSheet.create({
     paddingTop: 32,
     paddingBottom: 16,
   },
+  
   container: {
     paddingVertical: 8,
+    backgroundColor: '$primaryBackgroundColor',
   },
   bodyWrapper: {
     flex: 3,
@@ -30,7 +32,7 @@ export default EStyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-end',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 16,
     paddingHorizontal: 16,
     backgroundColor: '$primaryBackgroundColor',
   } as ViewStyle,

src/components/organisms/index.ts

@@ -1 +1,2 @@
 export * from './quickProfileModal';
+export * from './inputSupportModal';

src/components/organisms/inputSupportModal/children/inputSupportModal.styles.ts

@@ -0,0 +1,12 @@
+import {ViewStyle } from 'react-native';
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+
+    container: {
+        flex: 1,
+        justifyContent:"flex-end",
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      } as ViewStyle,
+
+})

src/components/organisms/inputSupportModal/container/inputSupportModal.tsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { View as AnimatedView } from 'react-native-animatable'
+import { Portal } from 'react-native-portalize';
+import styles from '../children/inputSupportModal.styles';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
+
+export interface InputSupportModalProps {
+    visible:boolean;
+    onClose:()=>void;
+    children?:any
+}
+
+export const InputSupportModal = ({children, visible, onClose}: InputSupportModalProps, ref) => {
+
+
+  return (
+    <Portal>
+      {
+        visible && (
+          <AnimatedView
+            style={styles.container}
+            duration={300}
+            animation='fadeInUp'>
+              <>
+                <View style={styles.container} onTouchEnd={onClose} />
+                {
+                  Platform.select({
+                    ios: (
+                      <KeyboardAvoidingView style={styles.container} behavior="padding">
+                        {children}
+                      </KeyboardAvoidingView>
+                    ),
+                    android: <View style={styles.container}>{children}</View>,
+                  })
+                }
+
+              </>
+          </AnimatedView>
+        )
+      }
+    </Portal>
+  );
+};

src/components/organisms/inputSupportModal/index.ts

@@ -0,0 +1 @@
+export * from './container/inputSupportModal';

src/components/quickReplyModal/quickReplyModalContent.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import styles from './quickReplyModalStyles';
-import { View, Text, Alert, TouchableOpacity, Keyboard, Platform } from 'react-native';
+import { View, Text, Alert, TouchableOpacity, Keyboard, Platform, KeyboardAvoidingView } from 'react-native';
 import { useIntl } from 'react-intl';
 import { IconButton, MainButton, TextButton, TextInput, UserAvatar } from '..';
 import { useSelector, useDispatch } from 'react-redux';
@@ -19,22 +19,21 @@ import { navigate } from '../../navigation/service';
 import { postBodySummary } from '@ecency/render-helper';
 import { Draft } from '../../redux/reducers/cacheReducer';
 import { RootState } from '../../redux/store/store';
-import comment from '../../constants/options/comment';
 
 export interface QuickReplyModalContentProps {
   fetchPost?: any;
   selectedPost?: any;
   inputRef?: any;
-  sheetModalRef?: any;
   handleCloseRef?: any;
+  onClose:()=>void;
 }
 
 export const QuickReplyModalContent = ({
   fetchPost,
   selectedPost,
   inputRef,
-  sheetModalRef,
   handleCloseRef,
+  onClose,
 }: QuickReplyModalContentProps) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -88,14 +87,14 @@ export const QuickReplyModalContent = ({
 
   // handle close press
   const _handleClosePress = () => {
-    sheetModalRef.current?.setModalVisible(false);
+    onClose()
   };
 
 
   // navigate to post on summary press
   const _handleOnSummaryPress = () => {
     Keyboard.dismiss();
-    sheetModalRef.current?.setModalVisible(false);
+    onClose();
     navigate({
       routeName: ROUTES.SCREENS.POST,
       params: {
@@ -146,7 +145,7 @@ export const QuickReplyModalContent = ({
         .then(() => {
           stateTimer = setTimeout(() => {
             setIsSending(false);
-            sheetModalRef.current?.setModalVisible(false);
+            onClose();
             setCommentValue('');
             dispatch(
               toastNotification(
@@ -200,7 +199,7 @@ export const QuickReplyModalContent = ({
   const _handleExpandBtn = async () => {
     if (selectedPost) {
       Keyboard.dismiss();
-      sheetModalRef.current?.setModalVisible(false);
+      onClose();
       await delay(50);
       navigate({
         routeName: ROUTES.SCREENS.EDITOR,
@@ -226,18 +225,6 @@ export const QuickReplyModalContent = ({
 
   //VIEW_RENDERERS
 
-  const _renderSheetHeader = () => (
-    <View style={styles.modalHeader}>
-      <IconButton
-        name="close"
-        iconType="MaterialCommunityIcons"
-        size={28}
-        color={EStyleSheet.value('$primaryBlack')}
-        iconStyle={{}}
-        onPress={() => _handleClosePress()}
-      />
-    </View>
-  );
 
   const _renderSummary = () => (
     <TouchableOpacity onPress={() => _handleOnSummaryPress()}>
@@ -288,7 +275,9 @@ export const QuickReplyModalContent = ({
     </View>
   );
 
-  return (
+
+
+  const _renderContent = (
     <View style={styles.modalContainer}>
       {_renderSummary()}
       {_renderAvatar()}
@@ -297,7 +286,7 @@ export const QuickReplyModalContent = ({
           innerRef={inputRef}
           onChangeText={_onChangeText}
           value={commentValue}
-          // autoFocus
+          autoFocus
           placeholder={intl.formatMessage({
             id: 'quick_reply.placeholder',
           })}
@@ -313,5 +302,7 @@ export const QuickReplyModalContent = ({
         {_renderReplyBtn()}
       </View>
     </View>
-  );
+  )
+
+  return _renderContent
 };

src/components/quickReplyModal/quickReplyModalStyles.ts

@@ -1,26 +1,23 @@
-import { Platform } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
-import { getBottomSpace, isIphoneX } from 'react-native-iphone-x-helper';
 
 export default EStyleSheet.create({
   sheetContent: {
     backgroundColor: '$primaryBackgroundColor',
-    position: 'absolute',
+    marginTop:132,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 999,
   },
+
   container: {
     flex: 1,
+    justifyContent:"flex-end",
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
   },
 
   modalContainer: {
-    paddingTop: 4,
+    margin:16,
-    paddingBottom: Platform.select({
+    borderRadius:16,
-      ios:isIphoneX() ? getBottomSpace() - 20 : 12, 
+    backgroundColor: '$primaryBackgroundColor',
-      android: 20
+    paddingTop: 16,
-    }) ,
+    paddingBottom: 16,
   },
 
   cancelButton: {

src/components/quickReplyModal/quickReplyModalView.tsx

@@ -1,10 +1,7 @@
 import React, { useImperativeHandle, useRef, useState } from 'react';
-import ActionSheet from 'react-native-actions-sheet';
-import EStyleSheet from 'react-native-extended-stylesheet';
 import { forwardRef } from 'react';
-import { Portal } from 'react-native-portalize';
 import { QuickReplyModalContent } from './quickReplyModalContent';
-import styles from './quickReplyModalStyles';
+import { InputSupportModal } from '../organisms';
 
 export interface QuickReplyModalProps {
   fetchPost?: any;
@@ -12,47 +9,39 @@ export interface QuickReplyModalProps {
 
 const QuickReplyModal = ({ fetchPost }: QuickReplyModalProps, ref) => {
   const [selectedPost, setSelectedPost] = useState(null);
-  const sheetModalRef = useRef<ActionSheet>();
   const inputRef = useRef<TextInput>(null);
   const handleCloseRef = useRef(null);
 
+  const [visible, setVisible] = useState(false);
+
   //CALLBACK_METHOD
   useImperativeHandle(ref, () => ({
     show: (post: any) => {
       setSelectedPost(post);
-      sheetModalRef.current?.setModalVisible(true);
+      setVisible(true)
-      // wait  for modal to open and then show the keyboard
+
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 500);
     },
   }));
 
+  const _onClose = () => {
+    setVisible(false);
+  }
+
+
   return (
-    <Portal>
+    <InputSupportModal
-      <ActionSheet
+      visible={visible && !!selectedPost}
-        ref={sheetModalRef}
+      onClose={_onClose}
-        gestureEnabled={true}
-        keyboardShouldPersistTaps="always"
-        containerStyle={styles.sheetContent}
-        keyboardHandlerEnabled
-        indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
-        onClose={() => {
-          setSelectedPost(null); //set null on sheet close, causing inconsistant cache bug
-          handleCloseRef.current();
-        }}
     >
-        {selectedPost && (
       <QuickReplyModalContent
         fetchPost={fetchPost}
         selectedPost={selectedPost}
         inputRef={inputRef}
-            sheetModalRef={sheetModalRef}
+        onClose={_onClose}
         handleCloseRef={handleCloseRef}
       />
-        )}
+    </InputSupportModal>
-      </ActionSheet>
+
-    </Portal>
   );
 };
 

src/config/locales/en-US.json

@@ -379,6 +379,7 @@
     "url": "URL",
     "enter_url_placeholder":"Enter URL",
     "link_type_text":"Type of Link",
+    "insert_link":"Insert Link",
     "preview":"Preview",
     "invalid_url_error":"Please insert valid url",
     "plain":"Plain",