mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-24 05:42:33 +03:00
commit
5e869e31d5
@ -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}
|
||||
gestureEnabled={true}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
containerStyle={styles.sheetContent}
|
||||
keyboardHandlerEnabled
|
||||
indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
|
||||
onClose={_handleOnCloseSheet}
|
||||
|
||||
<Modal
|
||||
isOpen={visible}
|
||||
handleOnModalClose={_handleOnCloseSheet}
|
||||
presentationStyle="formSheet"
|
||||
animationType="slide"
|
||||
title={intl.formatMessage({ id: 'editor.insert_link' })}
|
||||
style={styles.modalStyle}
|
||||
>
|
||||
{_renderContent}
|
||||
</ActionSheet>
|
||||
</Modal>
|
||||
|
||||
);
|
||||
},
|
||||
);
|
||||
|
@ -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,
|
||||
|
@ -1 +1,2 @@
|
||||
export * from './quickProfileModal';
|
||||
export * from './quickProfileModal';
|
||||
export * from './inputSupportModal';
|
@ -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,
|
||||
|
||||
})
|
@ -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>
|
||||
);
|
||||
};
|
1
src/components/organisms/inputSupportModal/index.ts
Normal file
1
src/components/organisms/inputSupportModal/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './container/inputSupportModal';
|
@ -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 = () => (
|
||||
<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
|
||||
};
|
||||
|
@ -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: {
|
||||
|
@ -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);
|
||||
// wait for modal to open and then show the keyboard
|
||||
setTimeout(() => {
|
||||
inputRef.current?.focus();
|
||||
}, 500);
|
||||
setVisible(true)
|
||||
|
||||
},
|
||||
}));
|
||||
|
||||
const _onClose = () => {
|
||||
setVisible(false);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<ActionSheet
|
||||
ref={sheetModalRef}
|
||||
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}
|
||||
handleCloseRef={handleCloseRef}
|
||||
/>
|
||||
)}
|
||||
</ActionSheet>
|
||||
</Portal>
|
||||
<InputSupportModal
|
||||
visible={visible && !!selectedPost}
|
||||
onClose={_onClose}
|
||||
>
|
||||
<QuickReplyModalContent
|
||||
fetchPost={fetchPost}
|
||||
selectedPost={selectedPost}
|
||||
inputRef={inputRef}
|
||||
onClose={_onClose}
|
||||
handleCloseRef={handleCloseRef}
|
||||
/>
|
||||
</InputSupportModal>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user