From 1eebf2bc84048390b217a255dcb17af71ccd56b8 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Wed, 28 Oct 2020 12:16:38 +0500 Subject: [PATCH] fix editor not showing keyboard --- apps/mobile/src/views/Editor/index.js | 651 ++++++++++++++------------ 1 file changed, 343 insertions(+), 308 deletions(-) diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index c0838e3aa..c299c5d5c 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -1,341 +1,376 @@ -import React, {useEffect, useState} from 'react'; -import {BackHandler, KeyboardAvoidingView, Platform, SafeAreaView, StatusBar, View,} from 'react-native'; +import React, {createRef, useEffect, useState} from 'react'; +import { + BackHandler, + KeyboardAvoidingView, + Platform, + SafeAreaView, + StatusBar, + TextInput, + View, +} from 'react-native'; import WebView from 'react-native-webview'; import {ActionIcon} from '../../components/ActionIcon'; -import {ActionSheetEvent, simpleDialogEvent,} from '../../components/DialogManager/recievers'; -import {TEMPLATE_EXIT_FULLSCREEN, TEMPLATE_NEW_NOTE,} from '../../components/DialogManager/Templates'; +import { + ActionSheetEvent, + simpleDialogEvent, +} from '../../components/DialogManager/recievers'; +import { + TEMPLATE_EXIT_FULLSCREEN, + TEMPLATE_NEW_NOTE, +} from '../../components/DialogManager/Templates'; import {useTracked} from '../../provider'; -import {eSendEvent, eSubscribeEvent, eUnSubscribeEvent, ToastEvent,} from '../../services/EventManager'; -import {eClearEditor, eCloseFullscreenEditor, eOnLoadNote, eOpenFullscreenEditor,} from '../../utils/Events'; +import { + eSendEvent, + eSubscribeEvent, + eUnSubscribeEvent, + ToastEvent, +} from '../../services/EventManager'; +import { + eClearEditor, + eCloseFullscreenEditor, + eOnLoadNote, + eOpenFullscreenEditor, +} from '../../utils/Events'; import {exitEditorAnimation} from '../../utils/Animations'; import {editing} from '../../utils'; import { - _onMessage, - _onShouldStartLoadWithRequest, - checkNote, - clearEditor, clearTimer, - EditorWebView, - getNote, - injectedJS, - isNotedEdited, - loadNote, - onWebViewLoad, - post, - sourceUri, + _onMessage, + _onShouldStartLoadWithRequest, + checkNote, + clearEditor, + clearTimer, + EditorWebView, + getNote, + injectedJS, + isNotedEdited, + loadNote, + onWebViewLoad, + post, + sourceUri, } from './Functions'; -import {normalize} from "../../utils/SizeUtils"; -import {DDS} from "../../services/DeviceDetection"; +import {normalize} from '../../utils/SizeUtils'; +import {DDS} from '../../services/DeviceDetection'; +import {sleep} from '../../utils/TimeUtils'; let handleBack; let tapCount = 0; +const textInput = createRef(); const Editor = ({noMenu}) => { - // Global State - const [state,] = useTracked(); - const {colors, premiumUser} = state; - const [fullscreen, setFullscreen] = useState(false); + // Global State + const [state] = useTracked(); + const {colors, premiumUser} = state; + const [fullscreen, setFullscreen] = useState(false); - // FUNCTIONS + // FUNCTIONS - useEffect(() => { - let c = {...colors}; - c.factor = normalize(1); - post('theme', colors); - }, [colors.bg]); + useEffect(() => { + let c = {...colors}; + c.factor = normalize(1); + post('theme', colors); + }, [colors.bg]); - useEffect(() => { - if (!DDS.isTab) return; - if (noMenu) { - post('nomenu', true); - } else { - post('nomenu', false); - } - }, [noMenu]); + useEffect(() => { + if (!DDS.isTab) return; + if (noMenu) { + post('nomenu', true); + } else { + post('nomenu', false); + } + }, [noMenu]); - useEffect(() => { - eSubscribeEvent(eOnLoadNote, load); - eSubscribeEvent(eCloseFullscreenEditor, closeFullscreen); - eSubscribeEvent(eClearEditor, onCallClear); - return () => { - eUnSubscribeEvent(eClearEditor, onCallClear); - eUnSubscribeEvent(eCloseFullscreenEditor, closeFullscreen); - eUnSubscribeEvent(eOnLoadNote, load); - }; - }, []); - - useEffect(() => { - if (!noMenu && DDS.isTab) { - handleBack = BackHandler.addEventListener('hardwareBackPress', () => { - simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN()); - editing.isFullscreen = false; - return true; - }); - } - - return () => { - clearTimer() - if (handleBack) { - handleBack.remove(); - handleBack = null; - } - }; - }, [noMenu]); - - const load = async (item) => { - console.log("loading new note"); - await loadNote(item); - if (!DDS.isTab) { - handleBack = BackHandler.addEventListener( - 'hardwareBackPress', - _onHardwareBackPress, - ); - } + useEffect(() => { + eSubscribeEvent(eOnLoadNote, load); + eSubscribeEvent(eCloseFullscreenEditor, closeFullscreen); + eSubscribeEvent(eClearEditor, onCallClear); + return () => { + eUnSubscribeEvent(eClearEditor, onCallClear); + eUnSubscribeEvent(eCloseFullscreenEditor, closeFullscreen); + eUnSubscribeEvent(eOnLoadNote, load); }; + }, []); - const onCallClear = async () => { - if (editing.currentlyEditing) { - exitEditorAnimation(); - } - await clearEditor(); - }; - const closeFullscreen = () => { - setFullscreen(false); + useEffect(() => { + if (!noMenu && DDS.isTab) { + handleBack = BackHandler.addEventListener('hardwareBackPress', () => { + simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN()); + editing.isFullscreen = false; + return true; + }); + } + + return () => { + clearTimer(); + if (handleBack) { + handleBack.remove(); + handleBack = null; + } }; + }, [noMenu]); - useEffect(() => { - EditorWebView.current?.reload(); - }, [premiumUser]); + const load = async (item) => { + console.log('loading new note'); + await loadNote(item); + if (item.type === 'new') { + await sleep(500); + textInput.current?.focus(); + await sleep(300); + post('focusTitle'); + Platform.OS === 'android' ? EditorWebView.current?.requestFocus() : null; + } + if (!DDS.isTab) { + handleBack = BackHandler.addEventListener( + 'hardwareBackPress', + _onHardwareBackPress, + ); + } + }; - const _onHardwareBackPress = async () => { - if (editing.currentlyEditing) { - if (tapCount > 0) { - await _onBackPress(); - return true; - } else { - tapCount = 1; - setTimeout(() => { - tapCount = 0; - }, 3000); - ToastEvent.show('Press back again to exit editor', 'success'); - return true; - } - } - }; + const onCallClear = async () => { + if (editing.currentlyEditing) { + exitEditorAnimation(); + } + await clearEditor(); + }; + const closeFullscreen = () => { + setFullscreen(false); + }; - const _onBackPress = async () => { - editing.currentlyEditing = true; - if (DDS.isTab && !DDS.isSmallTab) { - simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN()); - } else { - exitEditorAnimation(); + useEffect(() => { + EditorWebView.current?.reload(); + }, [premiumUser]); - if (checkNote() && isNotedEdited()) { - ToastEvent.show('Note Saved!', 'success'); - } - await clearEditor(); - if (handleBack) { - handleBack.remove(); - handleBack = null; - } - } - }; + const _onHardwareBackPress = async () => { + if (editing.currentlyEditing) { + if (tapCount > 0) { + await _onBackPress(); + return true; + } else { + tapCount = 1; + setTimeout(() => { + tapCount = 0; + }, 3000); + ToastEvent.show('Press back again to exit editor', 'success'); + return true; + } + } + }; - return ( - { + editing.currentlyEditing = true; + if (DDS.isTab && !DDS.isSmallTab) { + simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN()); + } else { + exitEditorAnimation(); + + if (checkNote() && isNotedEdited()) { + ToastEvent.show('Note Saved!', 'success'); + } + await clearEditor(); + if (handleBack) { + handleBack.remove(); + handleBack = null; + } + } + }; + + return ( + + + + {noMenu || DDS.isPhone || DDS.isSmallTab ? ( + + ) : ( + + )} + + + {DDS.isTab && !DDS.isSmallTab ? ( + + ) : ( + + )} + + - - {noMenu || DDS.isPhone || DDS.isSmallTab ? ( - - ) : ( - - )} + { + simpleDialogEvent(TEMPLATE_NEW_NOTE); + }} + /> + {DDS.isTab && !DDS.isSmallTab && !fullscreen ? ( + { + eSendEvent(eOpenFullscreenEditor); + setFullscreen(true); + editing.isFullscreen = true; + post( + JSON.stringify({ + type: 'nomenu', + value: false, + }), + ); + }} + /> + ) : null} - - {DDS.isTab && !DDS.isSmallTab ? ( - - ) : ( - - )} + { + post('undo'); + }} + /> + { + post('redo'); + }} + /> - - { - simpleDialogEvent(TEMPLATE_NEW_NOTE); - }} - /> - {DDS.isTab && !DDS.isSmallTab && !fullscreen ? ( - { - eSendEvent(eOpenFullscreenEditor); - setFullscreen(true); - editing.isFullscreen = true; - post( - JSON.stringify({ - type: 'nomenu', - value: false, - }), - ); - }} - /> - ) : null} + { + ActionSheetEvent( + getNote(), + true, + true, + ['Add to', 'Share', 'Export', 'Delete'], + ['Dark Mode', 'Add to Vault', 'Pin', 'Favorite'], + ); + }} + /> + + - { - post('undo'); - }} - /> - { - post('redo'); - }} - /> - - { - ActionSheetEvent( - getNote(), - true, - true, - ['Add to', 'Share', 'Export', 'Delete'], - ['Dark Mode', 'Add to Vault', 'Pin', 'Favorite'], - ); - }} - /> - - - - console.log(error)} - onLoad={async () => await onWebViewLoad(noMenu, premiumUser, colors)} - javaScriptEnabled={true} - injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null} - onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest} - renderLoading={() => ( - - )} - cacheMode="LOAD_DEFAULT" - cacheEnabled={false} - domStorageEnabled={true} - scrollEnabled={false} - bounces={false} - allowFileAccess={true} - scalesPageToFit={true} - allowingReadAccessToURL={Platform.OS === 'android' ? true : null} - allowFileAccessFromFileURLs={true} - allowUniversalAccessFromFileURLs={true} - originWhitelist={['*']} - source={ - Platform.OS === 'ios' - ? {uri: sourceUri} - : { - uri: 'file:///android_asset/texteditor.html', - baseUrl: 'file:///android_asset/', - } - } - style={{ - height: '100%', - maxHeight: '100%', - width: '100%', - backgroundColor: 'transparent', - marginTop: - DDS.isTab && !DDS.isSmallTab - ? Platform.OS === 'ios' - ? 0 - : StatusBar.currentHeight - : 0, - }} - onMessage={_onMessage} - /> - - - ); + console.log(error)} + onLoad={async () => await onWebViewLoad(noMenu, premiumUser, colors)} + javaScriptEnabled={true} + injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null} + onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest} + renderLoading={() => ( + + )} + cacheMode="LOAD_DEFAULT" + cacheEnabled={false} + domStorageEnabled={true} + scrollEnabled={false} + bounces={false} + allowFileAccess={true} + scalesPageToFit={true} + allowingReadAccessToURL={Platform.OS === 'android' ? true : null} + allowFileAccessFromFileURLs={true} + allowUniversalAccessFromFileURLs={true} + originWhitelist={['*']} + source={ + Platform.OS === 'ios' + ? {uri: sourceUri} + : { + uri: 'file:///android_asset/texteditor.html', + baseUrl: 'file:///android_asset/', + } + } + style={{ + height: '100%', + maxHeight: '100%', + width: '100%', + backgroundColor: 'transparent', + marginTop: + DDS.isTab && !DDS.isSmallTab + ? Platform.OS === 'ios' + ? 0 + : StatusBar.currentHeight + : 0, + }} + onMessage={_onMessage} + /> + + + ); }; export default Editor;