From f852ecbb71f651e02d05ee9bfc93d4adb753c976 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Tue, 8 Mar 2022 21:35:02 +0500 Subject: [PATCH] added basic insert url modal --- ios/Podfile.lock | 4 +- package.json | 2 +- src/components/index.js | 3 +- .../insertLinkModal/insertLinkModal.tsx | 103 ++++++++++++++++++ .../insertLinkModal/insertLinkModalStyles.ts | 62 +++++++++++ .../view/formats/applyWebLinkFormat.js | 1 + .../markdownEditor/view/markdownEditorView.js | 50 ++++++++- src/components/modal/view/modalView.js | 2 +- yarn.lock | 8 +- 9 files changed, 225 insertions(+), 10 deletions(-) create mode 100644 src/components/insertLinkModal/insertLinkModal.tsx create mode 100644 src/components/insertLinkModal/insertLinkModalStyles.ts diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 21821557b..6451ba9a7 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -699,7 +699,7 @@ SPEC CHECKSUMS: boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c BugsnagReactNative: a96bc039e0e4ec317a8b331714393d836ca60557 BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 - DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 + DoubleConversion: cde416483dac037923206447da6e1454df403714 FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e Firebase: c23a36d9e4cdf7877dfcba8dd0c58add66358999 @@ -711,7 +711,7 @@ SPEC CHECKSUMS: FirebaseInstanceID: bd3ffc24367f901a43c063b36c640b345a4a5dd1 FirebaseMessaging: 5eca4ef173de76253352511aafef774caa1cba2a Folly: b73c3869541e86821df3c387eb0af5f65addfab4 - glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85 + glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3 GoogleAppMeasurement: a6a3a066369828db64eda428cb2856dc1cdc7c4e GoogleDataTransport: f56af7caa4ed338dc8e138a5d7c5973e66440833 GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3 diff --git a/package.json b/package.json index 749910930..c02fd7bb1 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "react-native-linear-gradient": "^2.4.2", "react-native-matomo-sdk": "feruzm/react-native-matomo-sdk", "react-native-media-controls": "^2.3.0", - "react-native-modal": "^11.5.6", + "react-native-modal": "11.5.6", "react-native-modal-dropdown": "^1.0.2", "react-native-modal-popover": "^2.1.0", "react-native-modal-translucent": "^5.0.0", diff --git a/src/components/index.js b/src/components/index.js index 816758a65..313af1a53 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -69,7 +69,7 @@ import { HorizontalIconList } from './horizontalIconList/horizontalIconListView' import { PopoverWrapper } from './popoverWrapper/popoverWrapperView'; import CommunitiesList from './communitiesList'; import SubscribedCommunitiesList from './subscribedCommunitiesList'; - +import { InsertLinkModal } from './insertLinkModal/insertLinkModal'; // View import { Comment } from './comment'; import { Comments } from './comments'; @@ -238,4 +238,5 @@ export { QuickReplyModal, Tooltip, VideoPlayer, + InsertLinkModal, }; diff --git a/src/components/insertLinkModal/insertLinkModal.tsx b/src/components/insertLinkModal/insertLinkModal.tsx new file mode 100644 index 000000000..ea4dec540 --- /dev/null +++ b/src/components/insertLinkModal/insertLinkModal.tsx @@ -0,0 +1,103 @@ +import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'; +import { useIntl } from 'react-intl'; +import { Text, View } from 'react-native'; +import { MainButton, TextButton } from '..'; +import styles from './insertLinkModalStyles'; +import ActionSheet from 'react-native-actions-sheet'; +import EStyleSheet from 'react-native-extended-stylesheet'; +import TextInput from '../textInput'; + +interface InsertLinkModalProps { + handleOnInsertLink: ({ label, url }: { label: string; url: string }) => void; + handleOnSheetClose: () => void; +} + +export const InsertLinkModal = forwardRef( + ({ handleOnInsertLink, handleOnSheetClose }: InsertLinkModalProps, ref) => { + const intl = useIntl(); + + const [isLoading, setIsLoading] = useState(false); + const [label, setLabel] = useState(''); + const [url, setUrl] = useState(''); + const sheetModalRef = useRef(); + const labelInputRef = useRef(null); + + useImperativeHandle(ref, () => ({ + showModal: () => { + sheetModalRef.current?.setModalVisible(true); + }, + hideModal: () => { + sheetModalRef.current?.setModalVisible(false); + }, + })); + + //renders footer with add snipept button and shows new snippet modal + const _renderFloatingPanel = () => { + return ( + + sheetModalRef.current?.setModalVisible(false)} + text={'Cancel'} + /> + handleOnInsertLink({ label, url })} + iconName="plus" + iconType="MaterialCommunityIcons" + iconColor="white" + text={'Insert Link'} + /> + + ); + }; + + const _renderInputs = () => ( + + Label + + URL + + + ); + const _renderContent = ( + + {_renderInputs()} + {_renderFloatingPanel()} + + ); + + return ( + { + setLabel(''); + setUrl(''); + handleOnSheetClose(); + }} + > + {_renderContent} + + ); + }, +); diff --git a/src/components/insertLinkModal/insertLinkModalStyles.ts b/src/components/insertLinkModal/insertLinkModalStyles.ts new file mode 100644 index 000000000..1f240ddf0 --- /dev/null +++ b/src/components/insertLinkModal/insertLinkModalStyles.ts @@ -0,0 +1,62 @@ +import { TextStyle, StyleSheet, ViewStyle, Dimensions, ImageStyle } from 'react-native'; +import EStyleSheet from 'react-native-extended-stylesheet'; + +const gridItemWidth = Dimensions.get('window').width / 2 - 32; +const gridItemHeight = (gridItemWidth * 500) / 600; + +export default EStyleSheet.create({ + sheetContent: { + backgroundColor: '$primaryBackgroundColor', + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + zIndex: 999, + }, + modalStyle: { + flex: 1, + backgroundColor: '$primaryBackgroundColor', + margin: 0, + paddingTop: 32, + paddingBottom: 16, + }, + container: { + // flex: 1, + // justifyContent: 'space-between', + paddingVertical: 8, + }, + bodyWrapper: { + flex: 3, + paddingHorizontal: 16, + }, + floatingContainer: { + flexDirection: 'row', + justifyContent: 'flex-end', + alignItems: 'center', + paddingVertical: 8, + paddingHorizontal: 16, + backgroundColor: '$primaryBackgroundColor', + } as ViewStyle, + insertBtn: { + marginLeft: 16, + width: 170 + }, + inputsContainer:{ + height: 200, + paddingHorizontal: 16, + }, + inputLabel:{ + color: '$primaryBlack', + fontWeight: '600', + textAlign: 'left', + }, + input: { + borderWidth: 1, + borderColor: '$borderColor', + borderRadius: 8, + paddingHorizontal: 10, + color: '$primaryBlack', + maxHeight: 50, + marginVertical: 8, + }, +}); diff --git a/src/components/markdownEditor/view/formats/applyWebLinkFormat.js b/src/components/markdownEditor/view/formats/applyWebLinkFormat.js index e40b77d81..9388d72c9 100644 --- a/src/components/markdownEditor/view/formats/applyWebLinkFormat.js +++ b/src/components/markdownEditor/view/formats/applyWebLinkFormat.js @@ -4,6 +4,7 @@ export const writeUrlTextHere = 'https://example.com'; export const writeTextHereString = 'Text here'; export default async ({ text, selection, setTextAndSelection, item, isImage = null }) => { + console.log(text, selection, item, isImage); const imagePrefix = isImage ? '!' : ''; const itemText = item ? item.text : writeTextHereString; const itemUrl = item ? item.url : writeUrlTextHere; diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index 26f6a4194..4f4d1183c 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -17,6 +17,7 @@ import { Icon } from '../../icon'; // Utils import Formats from './formats/formats'; import applyMediaLink from './formats/applyMediaLink'; +import applyWebLinkFormat from './formats/applyWebLinkFormat'; // Actions import { toggleAccountsBottomSheet } from '../../../redux/actions/uiAction'; @@ -37,6 +38,7 @@ import { SnippetsModal, UploadsGalleryModal, Tooltip, + InsertLinkModal, } from '../../index'; import { ThemeContainer } from '../../../containers'; @@ -90,6 +92,7 @@ const MarkdownEditorView = ({ const galleryRef = useRef(null); const clearRef = useRef(null); const uploadsGalleryModalRef = useRef(null); + const insertLinkModalRef = useRef(null); const tooltipRef = useRef(null); const dispatch = useDispatch(); @@ -232,6 +235,7 @@ const MarkdownEditorView = ({ // eslint-disable-next-line react-hooks/exhaustive-deps const _setTextAndSelection = useCallback(({ selection: _selection, text: _text }) => { + console.log('_text : ', _text); inputRef.current.setNativeProps({ text: _text, }); @@ -266,6 +270,7 @@ const MarkdownEditorView = ({ ); const _handleOnSnippetReceived = (snippetText) => { + console.log('text : ', text, 'selection : ', selection, 'snippetText : ', snippetText); applySnippet({ text, selection, @@ -290,6 +295,42 @@ const MarkdownEditorView = ({ } }; + const _handleOnAddLinkPress = () => { + insertLinkModalRef.current?.showModal(); + }; + const _handleOnAddLinkSheetClose = () => { + inputRef.current?.focus(); + }; + const _handleInsertLink = ({ label, url }) => { + if (url) { + if (label) { + applyWebLinkFormat({ + item: { text: label, url: url }, + text, + selection, + setTextAndSelection: _setTextAndSelection, + }); + } else { + let selection = { + start: 0, + end: 0, + }; + inputRef.current.setNativeProps({ + text: url, + }); + inputRef.current.setNativeProps({ + selection: selection, + }); + setSelection(selection); + _changeText(url); + } + } else { + console.log('No url added!'); + } + + insertLinkModalRef.current?.hideModal(); + inputRef.current?.focus(); + }; const _renderMarkupButton = ({ item }) => ( - Formats[3].onPress({ text, selection, setTextAndSelection: _setTextAndSelection }) + // Formats[3].onPress({ text, selection, setTextAndSelection: _setTextAndSelection }) + _handleOnAddLinkPress() } /> + +