Merge pull request #2085 from ecency/nt/options-modal

Nt/options modal

src/components/atoms/index.ts

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

src/components/atoms/optionsModal/container/optionsModalContainer.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, useImperativeHandle, useRef, useEffect } from 'react'
+import ActionSheet from 'react-native-actionsheet'
+
+interface Props {
+    options:string[],
+    title:string,
+    cancelButtonIndex:number,
+    destructiveButtonIndex?:number,
+    onPress:(index:number)=>void
+}
+
+export const OptionsModal = forwardRef(({onPress, ...props}: Props, ref:any) => {
+    const actionSheetRef = useRef<any>();
+    const callbackRef = useRef<any>();
+
+    useEffect(() => {
+        callbackRef.current = onPress;
+    }, [onPress])
+
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            show(){
+                if(actionSheetRef.current){
+                    actionSheetRef.current.show()
+                }
+            }
+        })
+    )
+
+    const _onPress = (index:number) => {
+        callbackRef.current(index);
+    }
+
+    return (
+        <ActionSheet
+            ref={actionSheetRef}
+            onPress={_onPress}
+            {...props}
+        />
+    )
+});

src/components/atoms/optionsModal/index.ts

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

src/components/comments/view/commentsView.tsx

@@ -1,19 +1,15 @@
-import React, { useState, Fragment, useRef, useEffect } from 'react';
+import React, { useState, Fragment, useRef } from 'react';
 import { FlatList } from 'react-native';
-import ActionSheet from 'react-native-actionsheet';
 import get from 'lodash/get';
 import { useIntl } from 'react-intl';
-import { navigate } from '../../../navigation/service';
 
 // Components
 import { Comment, TextButton } from '../..';
 
-// Constants
-import ROUTES from '../../../constants/routeNames';
-
 // Styles
 import styles from './commentStyles';
 import EStyleSheet from 'react-native-extended-stylesheet';
+import { OptionsModal } from '../../atoms';
 
 
 const CommentsView = ({
@@ -32,30 +28,25 @@ const CommentsView = ({
   hasManyComments,
   isHideImage,
   isLoggedIn,
-  isOwnProfile,
   isShowSubComments,
   mainAuthor,
   marginLeft,
   isShowMoreButton,
   showAllComments,
   hideManyCommentsButton,
-  onScroll,
-  onEndReached,
   flatListProps,
   openReplyThread,
 }) => {
   const [selectedComment, setSelectedComment] = useState(null);
   const intl = useIntl();
-  const commentMenu = useRef();
+  const commentMenu = useRef<any>();
 
-  useEffect(() => {
-    if(selectedComment && commentMenu.current){
-      commentMenu.current.show();
-    }
-  }, [selectedComment])
 
   const _openCommentMenu = (item) => {
+    if(commentMenu.current){
       setSelectedComment(item);
+      commentMenu.current.show();
+    }
   };
 
   const _openReplyThread = (item) => {
@@ -142,7 +133,7 @@ const CommentsView = ({
         keyExtractor={(item) => get(item, 'permlink')}
         {...flatListProps}
       />
-      <ActionSheet
+      <OptionsModal
         ref={commentMenu}
         options={menuItems}
         title={get(selectedComment, 'summary')}

src/components/postElements/body/view/commentBodyView.tsx

@@ -1,10 +1,9 @@
-import React, { Fragment, useState, useEffect, useRef } from 'react';
+import React, { Fragment, useState, useRef } from 'react';
 import { Linking, Modal, PermissionsAndroid, Platform, View, Dimensions } from 'react-native';
 import { useIntl } from 'react-intl';
 import CameraRoll from '@react-native-community/cameraroll';
 import RNFetchBlob from 'rn-fetch-blob';
 import ImageViewer from 'react-native-image-zoom-viewer';
-import ActionSheet from 'react-native-actionsheet';
 import ActionsSheetView from 'react-native-actions-sheet';
 
 // import AutoHeightWebView from 'react-native-autoheight-webview';
@@ -26,6 +25,8 @@ import getYoutubeId from '../../../../utils/getYoutubeId';
 import VideoPlayerSheet from './videoPlayerSheet';
 import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
 import { useCallback } from 'react';
+import { OptionsModal } from '../../../atoms';
+import { useAppDispatch } from '../../../../hooks';
 
 const WIDTH = Dimensions.get('window').width;
 
@@ -37,12 +38,13 @@ const CommentBody = ({
   created,
   commentDepth,
   reputation,
-  dispatch,
   isMuted
 }) => {
 
   const _contentWidth = WIDTH - (40 + 28 + (commentDepth > 2 ? 44 : 0))
 
+  const dispatch = useAppDispatch();
+
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
   const [postImages, setPostImages] = useState<string[]>([]);
   const [selectedImage, setSelectedImage] = useState(null);
@@ -56,18 +58,6 @@ const CommentBody = ({
   const actionLink = useRef(null);
   const youtubePlayerRef = useRef(null);
 
-  useEffect(() => {
-    if (selectedLink) {
-      actionLink.current.show();
-    }
-  }, [selectedLink]);
-
-  useEffect(() => {
-    if (postImages.length > 0 && selectedImage !== null) {
-      actionImage.current.show();
-    }
-  }, [selectedImage]);
-
 
   const _onLongPressStateChange = ({nativeEvent}) => {
     if(nativeEvent.state === State.ACTIVE){
@@ -152,6 +142,16 @@ const CommentBody = ({
     }
   };
 
+  const _handleSetSelectedLink = (link:string) => {
+    setSelectedLink(link)
+    actionLink.current.show();
+  }
+
+  const _handleSetSelectedImage = (imageLink:string) => {
+    setSelectedImage(imageLink);
+    actionImage.current.show();
+  }
+
   const _handleOnPostPress = (permlink, author) => {
     if(handleOnPostPress){
       handleOnUserPress(permlink, author);
@@ -296,7 +296,7 @@ const CommentBody = ({
           onClick={() => setIsImageModalOpen(false)}
         />
       </Modal>
-      <ActionSheet
+      <OptionsModal
         ref={actionImage}
         options={[
           intl.formatMessage({ id: 'post.copy_link' }),
@@ -310,7 +310,7 @@ const CommentBody = ({
           handleImagePress(index);
         }}
       />
-      <ActionSheet
+      <OptionsModal
         ref={actionLink}
         options={[
           intl.formatMessage({ id: 'post.copy_link' }),
@@ -330,8 +330,8 @@ const CommentBody = ({
               contentWidth={_contentWidth}
               body={body}
               onElementIsImage={_onElementIsImage}
-              setSelectedImage={setSelectedImage}
-              setSelectedLink={setSelectedLink}
+              setSelectedImage={_handleSetSelectedImage}
+              setSelectedLink={_handleSetSelectedLink}
               handleOnPostPress={_handleOnPostPress}
               handleOnUserPress={_handleOnUserPress}
               handleTagPress={_handleTagPress}

src/components/postElements/body/view/postBodyView.js

@@ -8,7 +8,6 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 import get from 'lodash/get';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import RNFetchBlob from 'rn-fetch-blob';
-import ActionSheet from 'react-native-actionsheet';
 import ActionSheetView from 'react-native-actions-sheet';
 import { connect } from 'react-redux';
 import { customBodyScript } from './config';
@@ -22,6 +21,7 @@ import { toastNotification } from '../../../../redux/actions/uiAction';
 import { default as ROUTES } from '../../../../constants/routeNames';
 import getYoutubeId from '../../../../utils/getYoutubeId';
 import VideoPlayerSheet from './videoPlayerSheet';
+import { OptionsModal } from '../../../atoms';
 
 const WIDTH = Dimensions.get('window').width;
 
@@ -48,24 +48,12 @@ const PostBody = ({
   const actionLink = useRef(null);
   const youtubePlayerRef = useRef(null);
 
-  useEffect(() => {
-    if (selectedLink) {
-      actionLink.current.show();
-    }
-  }, [selectedLink]);
-
   useEffect(() => {
     if (body) {
       setHtml(body.replace(/<a/g, '<a target="_blank"'));
     }
   }, [body]);
 
-  useEffect(() => {
-    if (postImages.length > 0 && selectedImage) {
-      actionImage.current.show();
-    }
-  }, [postImages, selectedImage]);
-
   const _handleOnLinkPress = (event) => {
     if ((!event && !get(event, 'nativeEvent.data'), false)) {
       return;
@@ -96,7 +84,7 @@ const PostBody = ({
         case '_external':
         case 'markdown-external-link':
           setSelectedLink(href);
-          //_handleBrowserLink(href);
+          actionLink.current.show();
           break;
         case 'markdown-author-link':
           if (!handleOnUserPress) {
@@ -127,6 +115,7 @@ const PostBody = ({
         case 'image':
           setPostImages(images);
           setSelectedImage(image);
+          actionImage.current.show();
           break;
 
         default:
@@ -466,7 +455,7 @@ const PostBody = ({
         <VideoPlayerSheet youtubeVideoId={youtubeVideoId} />
       </ActionSheetView>
 
-      <ActionSheet
+      <OptionsModal
         ref={actionImage}
         options={[
           intl.formatMessage({ id: 'post.copy_link' }),
@@ -480,7 +469,7 @@ const PostBody = ({
           handleImagePress(index);
         }}
       />
-      <ActionSheet
+      <OptionsModal
         ref={actionLink}
         options={[
           intl.formatMessage({ id: 'post.copy_link' }),

src/screens/bookmarks/screen/bookmarksScreen.tsx

@@ -1,8 +1,7 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import { injectIntl } from 'react-intl';
 import { View, FlatList, Text } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
-import ActionSheet from 'react-native-actionsheet';
 
 // Components
 import { UserListItem, WalletDetailsPlaceHolder, BasicHeader, TabBar } from '../../../components';
@@ -10,6 +9,7 @@ import { UserListItem, WalletDetailsPlaceHolder, BasicHeader, TabBar } from '../
 // Styles
 import globalStyles from '../../../globalStyles';
 import styles from './bookmarksStyles';
+import { OptionsModal } from '../../../components/atoms';
 
 const BookmarksScreen = ({
   isLoading,
@@ -23,18 +23,8 @@ const BookmarksScreen = ({
 }) => {
   const [selectedItemId, setSelectedItemId] = useState(null);
   const [activeTab, setActiveTab] = useState(0);
-  const ActionSheetRef = useRef(null);
-  const firstMount = useRef(true);
+  const actionSheetRef = useRef(null);
 
-  useEffect(() => {
-    if (firstMount.current) {
-      firstMount.current = false;
-      return;
-    }
-    if (ActionSheetRef.current) {
-      ActionSheetRef.current.show();
-    }
-  }, [selectedItemId]);
 
   const _renderItem = (item, index, itemType) => {
     const isFavorites = itemType === 'favorites';
@@ -92,7 +82,10 @@ const BookmarksScreen = ({
     );
   };
   const _handleLongPress = (_selectedItemId) => {
+    if(actionSheetRef.current){
       setSelectedItemId(_selectedItemId);
+      actionSheetRef.current.show()
+    }
   };
 
   return (
@@ -132,8 +125,8 @@ const BookmarksScreen = ({
           {_getTabItem(favorites, 'favorites')}
         </View>
       </ScrollableTabView>
-      <ActionSheet
-        ref={ActionSheetRef}
+      <OptionsModal
+        ref={actionSheetRef}
         options={[
           intl.formatMessage({ id: 'alert.delete' }),
           intl.formatMessage({ id: 'alert.cancel' }),

src/screens/drafts/screen/draftsScreen.js

@@ -1,8 +1,7 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import { injectIntl } from 'react-intl';
 import { View, FlatList, Text } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
-import ActionSheet from 'react-native-actionsheet';
 
 // Utils
 import { postBodySummary } from '@ecency/render-helper';
@@ -15,6 +14,7 @@ import { BasicHeader, TabBar, DraftListItem, PostCardPlaceHolder } from '../../.
 // Styles
 import globalStyles from '../../../globalStyles';
 import styles from './draftStyles';
+import { OptionsModal } from '../../../components/atoms';
 
 const DraftsScreen = ({
   currentAccount,
@@ -29,16 +29,10 @@ const DraftsScreen = ({
 }) => {
   const [selectedId, setSelectedId] = useState(null);
   const ActionSheetRef = useRef(null);
-  const firstMount = useRef(true);
-  const selectedIdRef = useRef();
-
-  useEffect(() => {
-    selectedIdRef.current = selectedId;
-  }, [selectedId]);
 
   const _onActionPress = (index) => {
     if (index === 0) {
-      moveScheduleToDraft(selectedIdRef.current);
+      moveScheduleToDraft(selectedId);
     }
   };
 
@@ -148,7 +142,7 @@ const DraftsScreen = ({
           {_getTabItem(schedules, 'schedules')}
         </View>
       </ScrollableTabView>
-      <ActionSheet
+      <OptionsModal
         ref={ActionSheetRef}
         title={intl.formatMessage({
           id: 'alert.move_question',