From 55f5b6ec2f24017cf502294c68d8e1554504811b Mon Sep 17 00:00:00 2001 From: noumantahir Date: Mon, 20 Jun 2022 17:12:50 +0500 Subject: [PATCH 01/10] using private-api/register-device instead of legacy api --- src/providers/ecency/ecency.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/providers/ecency/ecency.ts b/src/providers/ecency/ecency.ts index a142fec77..425d79eec 100644 --- a/src/providers/ecency/ecency.ts +++ b/src/providers/ecency/ecency.ts @@ -457,7 +457,7 @@ export const setPushToken = async (data) => { return; } - const res = await api.post('/rgstrmbldvc/', data); + const res = await await ecencyApi.post((`/private-api/register-device`), data); return res.data; } catch (error) { From bd98ee843fc006d8777f9cfd2e82a783aa4c9ce6 Mon Sep 17 00:00:00 2001 From: feruz Date: Tue, 21 Jun 2022 23:38:47 +0300 Subject: [PATCH 02/10] empty alt for image uploads --- src/components/uploadsGalleryModal/uploadsGalleryModal.tsx | 3 +-- src/screens/editor/container/editorContainer.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/uploadsGalleryModal/uploadsGalleryModal.tsx b/src/components/uploadsGalleryModal/uploadsGalleryModal.tsx index 507fb2153..c0d1939ce 100644 --- a/src/components/uploadsGalleryModal/uploadsGalleryModal.tsx +++ b/src/components/uploadsGalleryModal/uploadsGalleryModal.tsx @@ -128,10 +128,9 @@ export const UploadsGalleryModal = forwardRef(({ for (const index of map.keys()) { console.log(index) const item = mediaUploads[index] - const hhash = item.url.split('/').pop() data.push({ url: item.url, - hash: hhash.replace(/\.[^/.]+$/, "") + hash: "" }) } diff --git a/src/screens/editor/container/editorContainer.tsx b/src/screens/editor/container/editorContainer.tsx index 1bcfa500e..12006287a 100644 --- a/src/screens/editor/container/editorContainer.tsx +++ b/src/screens/editor/container/editorContainer.tsx @@ -443,7 +443,7 @@ class EditorContainer extends Component { } if (res.data && res.data.url) { - res.data.hash = res.data.url.split('/').pop(); + res.data.hash = ""; res.data.shouldInsert = shouldInsert; this.setState({ From c98da9143f07775db1880db4703d856c684ad2bf Mon Sep 17 00:00:00 2001 From: feruz Date: Wed, 22 Jun 2022 22:41:36 +0300 Subject: [PATCH 03/10] fix image insert issue --- src/components/markdownEditor/view/formats/applyMediaLink.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/markdownEditor/view/formats/applyMediaLink.ts b/src/components/markdownEditor/view/formats/applyMediaLink.ts index 28b5c5ec1..9be6a4a85 100644 --- a/src/components/markdownEditor/view/formats/applyMediaLink.ts +++ b/src/components/markdownEditor/view/formats/applyMediaLink.ts @@ -7,7 +7,7 @@ export default async ({ text, selection, setTextAndSelection, items }) => { let newSelection = selection; items.forEach(item => { - if(item.url && item.text){ + if(item.url){ const formatedText = `\n${imagePrefix}[${item.text}](${item.url})\n` newText = replaceBetween(newText, newSelection, formatedText); const newIndex = newText && newText.indexOf(item.url, newSelection.start) + item.url.length + 2; From 699407ef290bac0838f2b117d897be73cf3f034b Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 24 Jun 2022 03:35:52 +0500 Subject: [PATCH 04/10] registering push token for default pin accounts --- src/providers/ecency/ecency.ts | 6 +++- .../container/applicationContainer.js | 35 +++++++++++++------ 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/providers/ecency/ecency.ts b/src/providers/ecency/ecency.ts index 425d79eec..d1bbe19f4 100644 --- a/src/providers/ecency/ecency.ts +++ b/src/providers/ecency/ecency.ts @@ -450,13 +450,17 @@ export const markNotifications = async (id: string | null = null) => { }; -export const setPushToken = async (data) => { +export const setPushToken = async (data, accessToken = null) => { try { if (!data.username) { console.log("skipping push token setting, as no user is provided") return; } + if(accessToken){ + data.code = accessToken + } + const res = await await ecencyApi.post((`/private-api/register-device`), data); return res.data; diff --git a/src/screens/application/container/applicationContainer.js b/src/screens/application/container/applicationContainer.js index 6b0f376e2..a17cb0317 100644 --- a/src/screens/application/container/applicationContainer.js +++ b/src/screens/application/container/applicationContainer.js @@ -99,7 +99,7 @@ import { import { setFeedPosts, setInitPosts } from '../../../redux/actions/postsAction'; import { fetchCoinQuotes } from '../../../redux/actions/walletActions'; -import { encryptKey } from '../../../utils/crypto'; +import { decryptKey, encryptKey } from '../../../utils/crypto'; import darkTheme from '../../../themes/darkTheme'; import lightTheme from '../../../themes/lightTheme'; @@ -833,7 +833,13 @@ class ApplicationContainer extends Component { //updateing fcm token with settings; otherAccounts.forEach((account) => { - this._enableNotification(account.name, settings.notification, settings); + //since there can be more than one accounts, process access tokens separate + this._enableNotification( + account.name, + settings.notification, + settings, + account.local.accessToken, + ); }); } if (settings.nsfw !== '') dispatch(setNsfw(settings.nsfw)); @@ -902,7 +908,7 @@ class ApplicationContainer extends Component { }); }; - _enableNotification = async (username, isEnable, settings) => { + _enableNotification = async (username, isEnable, settings, encAccessToken = null) => { //compile notify_types let notify_types = []; if (settings) { @@ -924,16 +930,25 @@ class ApplicationContainer extends Component { notify_types = [1, 2, 3, 4, 5, 6]; } + //decrypt access token + let accessToken = null; + if (encAccessToken) { + accessToken = decryptKey(encAccessToken, Config.DEFAULT_PIN); + } + messaging() .getToken() .then((token) => { - setPushToken({ - username, - token: isEnable ? token : '', - system: `fcm-${Platform.OS}`, - allows_notify: Number(isEnable), - notify_types, - }); + setPushToken( + { + username, + token: isEnable ? token : '', + system: `fcm-${Platform.OS}`, + allows_notify: Number(isEnable), + notify_types, + }, + accessToken, + ); }); }; From 66bb54421b97ac4fa953c0b905939f683e123fc9 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 24 Jun 2022 04:09:30 +0500 Subject: [PATCH 05/10] changed position on decrypting access token --- .../container/applicationContainer.js | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/screens/application/container/applicationContainer.js b/src/screens/application/container/applicationContainer.js index a17cb0317..ab2f38129 100644 --- a/src/screens/application/container/applicationContainer.js +++ b/src/screens/application/container/applicationContainer.js @@ -834,12 +834,16 @@ class ApplicationContainer extends Component { //updateing fcm token with settings; otherAccounts.forEach((account) => { //since there can be more than one accounts, process access tokens separate - this._enableNotification( - account.name, - settings.notification, - settings, - account.local.accessToken, - ); + const encAccessToken = account.local.accessToken; + //decrypt access token + let accessToken = null; + if (encAccessToken) { + //default pin decryption works also for custom pin as other account + //NOTE: keys are not yet being affected by changed pin + accessToken = decryptKey(encAccessToken, Config.DEFAULT_PIN); + } + + this._enableNotification(account.name, settings.notification, settings, accessToken); }); } if (settings.nsfw !== '') dispatch(setNsfw(settings.nsfw)); @@ -908,7 +912,7 @@ class ApplicationContainer extends Component { }); }; - _enableNotification = async (username, isEnable, settings, encAccessToken = null) => { + _enableNotification = async (username, isEnable, settings, accessToken = null) => { //compile notify_types let notify_types = []; if (settings) { @@ -930,12 +934,6 @@ class ApplicationContainer extends Component { notify_types = [1, 2, 3, 4, 5, 6]; } - //decrypt access token - let accessToken = null; - if (encAccessToken) { - accessToken = decryptKey(encAccessToken, Config.DEFAULT_PIN); - } - messaging() .getToken() .then((token) => { From c9a188f5676fa908ac8a2a96e0937cad32c50be3 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 24 Jun 2022 04:14:47 +0500 Subject: [PATCH 06/10] updated note --- src/screens/application/container/applicationContainer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/application/container/applicationContainer.js b/src/screens/application/container/applicationContainer.js index ab2f38129..7649be071 100644 --- a/src/screens/application/container/applicationContainer.js +++ b/src/screens/application/container/applicationContainer.js @@ -838,8 +838,8 @@ class ApplicationContainer extends Component { //decrypt access token let accessToken = null; if (encAccessToken) { - //default pin decryption works also for custom pin as other account - //NOTE: keys are not yet being affected by changed pin + //NOTE: default pin decryption works also for custom pin as other account + //keys are not yet being affected by changed pin, which I think we should dig more accessToken = decryptKey(encAccessToken, Config.DEFAULT_PIN); } From 380f5661c9fba1a2df80ea83cd22603aff7e5031 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 24 Jun 2022 17:21:20 +0500 Subject: [PATCH 07/10] improved reply modal implementation --- .../quickReplyModalContent.tsx | 47 +++++------- .../quickReplyModal/quickReplyModalStyles.ts | 21 +++--- .../quickReplyModal/quickReplyModalView.tsx | 75 +++++++++++-------- 3 files changed, 73 insertions(+), 70 deletions(-) diff --git a/src/components/quickReplyModal/quickReplyModalContent.tsx b/src/components/quickReplyModal/quickReplyModalContent.tsx index 4bfe7af1c..3fda7bbb8 100644 --- a/src/components/quickReplyModal/quickReplyModalContent.tsx +++ b/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'; @@ -14,27 +14,26 @@ import { updateDraftCache, } from '../../redux/actions/cacheActions'; import { default as ROUTES } from '../../constants/routeNames'; -import {get, debounce} from 'lodash'; +import { get, debounce } from 'lodash'; 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(); @@ -51,8 +50,8 @@ export const QuickReplyModalContent = ({ let parentAuthor = selectedPost ? selectedPost.author : ''; let parentPermlink = selectedPost ? selectedPost.permlink : ''; let draftId = `${currentAccount.name}/${parentAuthor}/${parentPermlink}`; //different draftId for each user acount - - + + useEffect(() => { handleCloseRef.current = handleSheetClose; }, [commentValue]); @@ -75,7 +74,7 @@ export const QuickReplyModalContent = ({ // add quick comment value into cache const _addQuickCommentIntoCache = (value = commentValue) => { - + const quickCommentDraftData: Draft = { author: currentAccount.name, body: value @@ -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, @@ -215,7 +214,7 @@ export const QuickReplyModalContent = ({ }; - const _deboucedCacheUpdate = useCallback(debounce(_addQuickCommentIntoCache, 500),[]) + const _deboucedCacheUpdate = useCallback(debounce(_addQuickCommentIntoCache, 500), []) const _onChangeText = (value) => { setCommentValue(value); @@ -226,18 +225,6 @@ export const QuickReplyModalContent = ({ //VIEW_RENDERERS - const _renderSheetHeader = () => ( - - _handleClosePress()} - /> - - ); const _renderSummary = () => ( _handleOnSummaryPress()}> @@ -288,7 +275,9 @@ export const QuickReplyModalContent = ({ ); - return ( + + + const _renderContent = ( {_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()} - ); + ) + + return _renderContent }; diff --git a/src/components/quickReplyModal/quickReplyModalStyles.ts b/src/components/quickReplyModal/quickReplyModalStyles.ts index 888562799..3ff62044a 100644 --- a/src/components/quickReplyModal/quickReplyModalStyles.ts +++ b/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', - bottom: 0, - left: 0, - right: 0, - zIndex: 999, + marginTop:132, }, + container: { flex: 1, + justifyContent:"flex-end", + backgroundColor: 'rgba(0, 0, 0, 0.2)', }, modalContainer: { - paddingTop: 4, - paddingBottom: Platform.select({ - ios:isIphoneX() ? getBottomSpace() - 20 : 12, - android: 20 - }) , + margin:16, + borderRadius:16, + backgroundColor: '$primaryBackgroundColor', + paddingTop: 16, + paddingBottom: 16, }, cancelButton: { diff --git a/src/components/quickReplyModal/quickReplyModalView.tsx b/src/components/quickReplyModal/quickReplyModalView.tsx index 9ff86bbaf..48690bfff 100644 --- a/src/components/quickReplyModal/quickReplyModalView.tsx +++ b/src/components/quickReplyModal/quickReplyModalView.tsx @@ -1,10 +1,10 @@ import React, { useImperativeHandle, useRef, useState } from 'react'; -import ActionSheet from 'react-native-actions-sheet'; -import EStyleSheet from 'react-native-extended-stylesheet'; +import { View as AnimatedView } from 'react-native-animatable' import { forwardRef } from 'react'; import { Portal } from 'react-native-portalize'; import { QuickReplyModalContent } from './quickReplyModalContent'; import styles from './quickReplyModalStyles'; +import { KeyboardAvoidingView, Platform, View } from 'react-native'; export interface QuickReplyModalProps { fetchPost?: any; @@ -12,46 +12,61 @@ export interface QuickReplyModalProps { const QuickReplyModal = ({ fetchPost }: QuickReplyModalProps, ref) => { const [selectedPost, setSelectedPost] = useState(null); - const sheetModalRef = useRef(); const inputRef = useRef(null); const handleCloseRef = useRef(null); + const [visible, setVisible] = useState(false); + //CALLBACK_METHOD useImperativeHandle(ref, () => ({ show: (post: any) => { setSelectedPost(post); - sheetModalRef.current?.setModalVisible(true); - // wait for modal to open and then show the keyboard - setTimeout(() => { - inputRef.current?.focus(); - }, 500); + setVisible(true) + }, })); + const _onClose = () => { + setVisible(false); + } + + const _renderContent = () => ( + + ) + return ( - { - setSelectedPost(null); //set null on sheet close, causing inconsistant cache bug - handleCloseRef.current(); - }} - > - {selectedPost && ( - - )} - + { + visible && ( + + {selectedPost && ( + <> + + { + Platform.select({ + ios: ( + + {_renderContent()} + + ), + android: {_renderContent()}, + }) + } + + + )} + + ) + } ); }; From 02ece3d2def4f3483d1ac50bfcdafadac2feeb10 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 24 Jun 2022 18:05:25 +0500 Subject: [PATCH 08/10] added inputSupportModal for generic use --- src/components/organisms/index.ts | 3 +- .../children/inputSupportModal.styles.ts | 12 ++++++ .../container/inputSupportModal.tsx | 43 +++++++++++++++++++ .../organisms/inputSupportModal/index.ts | 1 + 4 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 src/components/organisms/inputSupportModal/children/inputSupportModal.styles.ts create mode 100644 src/components/organisms/inputSupportModal/container/inputSupportModal.tsx create mode 100644 src/components/organisms/inputSupportModal/index.ts diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 839b779e0..34e806117 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -1 +1,2 @@ -export * from './quickProfileModal'; \ No newline at end of file +export * from './quickProfileModal'; +export * from './inputSupportModal'; \ No newline at end of file diff --git a/src/components/organisms/inputSupportModal/children/inputSupportModal.styles.ts b/src/components/organisms/inputSupportModal/children/inputSupportModal.styles.ts new file mode 100644 index 000000000..150bb38e2 --- /dev/null +++ b/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, + +}) \ No newline at end of file diff --git a/src/components/organisms/inputSupportModal/container/inputSupportModal.tsx b/src/components/organisms/inputSupportModal/container/inputSupportModal.tsx new file mode 100644 index 000000000..5f826ca23 --- /dev/null +++ b/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 ( + + { + visible && ( + + <> + + { + Platform.select({ + ios: ( + + {children} + + ), + android: {children}, + }) + } + + + + ) + } + + ); +}; diff --git a/src/components/organisms/inputSupportModal/index.ts b/src/components/organisms/inputSupportModal/index.ts new file mode 100644 index 000000000..fcb03ddfa --- /dev/null +++ b/src/components/organisms/inputSupportModal/index.ts @@ -0,0 +1 @@ +export * from './container/inputSupportModal'; \ No newline at end of file From 73d6964933a28a28471e48a94bde4417bf973e9d Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 24 Jun 2022 18:05:42 +0500 Subject: [PATCH 09/10] cleaned up quickReplyModal with inputSupportModal --- .../quickReplyModal/quickReplyModalView.tsx | 52 +++++-------------- 1 file changed, 13 insertions(+), 39 deletions(-) diff --git a/src/components/quickReplyModal/quickReplyModalView.tsx b/src/components/quickReplyModal/quickReplyModalView.tsx index 48690bfff..c25e461f7 100644 --- a/src/components/quickReplyModal/quickReplyModalView.tsx +++ b/src/components/quickReplyModal/quickReplyModalView.tsx @@ -1,10 +1,7 @@ import React, { useImperativeHandle, useRef, useState } from 'react'; -import { View as AnimatedView } from 'react-native-animatable' import { forwardRef } from 'react'; -import { Portal } from 'react-native-portalize'; import { QuickReplyModalContent } from './quickReplyModalContent'; -import styles from './quickReplyModalStyles'; -import { KeyboardAvoidingView, Platform, View } from 'react-native'; +import { InputSupportModal } from '../organisms'; export interface QuickReplyModalProps { fetchPost?: any; @@ -30,44 +27,21 @@ const QuickReplyModal = ({ fetchPost }: QuickReplyModalProps, ref) => { setVisible(false); } - const _renderContent = () => ( - - ) return ( - - { - visible && ( - - {selectedPost && ( - <> - - { - Platform.select({ - ios: ( - - {_renderContent()} - - ), - android: {_renderContent()}, - }) - } + + + - - )} - - ) - } - ); }; From 2b1d3820b217b2989b0b134ea977a55c4e5bc8bb Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 24 Jun 2022 18:23:17 +0500 Subject: [PATCH 10/10] changed modal component used in insertLinkModal --- .../insertLinkModal/insertLinkModal.tsx | 37 ++++++++++--------- .../insertLinkModal/insertLinkModalStyles.ts | 4 +- src/config/locales/en-US.json | 1 + 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/insertLinkModal/insertLinkModal.tsx b/src/components/insertLinkModal/insertLinkModal.tsx index c0584f578..72a698ac2 100644 --- a/src/components/insertLinkModal/insertLinkModal.tsx +++ b/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(); + 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( sheetModalRef.current?.setModalVisible(false)} + onPress={() => setVisible(false)}// sheetModalRef.current?.setModalVisible(false)} text={'Cancel'} /> ); @@ -291,17 +291,18 @@ export const InsertLinkModal = forwardRef( ); return ( - {_renderContent} - + + ); }, ); diff --git a/src/components/insertLinkModal/insertLinkModalStyles.ts b/src/components/insertLinkModal/insertLinkModalStyles.ts index a14e6b8e7..59c15cc0f 100644 --- a/src/components/insertLinkModal/insertLinkModalStyles.ts +++ b/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, diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 4a105a95c..83e24ac23 100644 --- a/src/config/locales/en-US.json +++ b/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",