From 9674f7fce413a9cb1a8cf119d2d74dde9f788f14 Mon Sep 17 00:00:00 2001 From: ue Date: Thu, 14 Nov 2019 21:49:58 +0300 Subject: [PATCH 1/2] fixed editor colors enhanc gesture etc. --- src/components/editorElements/index.js | 3 +- .../textArea/view/textAreaStyles.js | 8 --- .../textArea/view/textAreaView.js | 25 -------- .../titleArea/view/titleAreaStyles.js | 1 + .../view/markdownEditorStyles.js | 1 + .../markdownEditor/view/markdownEditorView.js | 64 ++++++++++--------- .../view/markdownPreviewStyles.js | 1 - .../textInput/view/textInputStyles.js | 1 - src/index.js | 2 +- .../editor/container/editorContainer.js | 12 ++-- src/screens/editor/screen/editorScreen.js | 7 +- 11 files changed, 50 insertions(+), 75 deletions(-) delete mode 100644 src/components/editorElements/textArea/view/textAreaStyles.js delete mode 100644 src/components/editorElements/textArea/view/textAreaView.js diff --git a/src/components/editorElements/index.js b/src/components/editorElements/index.js index 2131c2d1f..bb1a0050f 100644 --- a/src/components/editorElements/index.js +++ b/src/components/editorElements/index.js @@ -1,6 +1,5 @@ import SummaryArea from './summaryArea/view/summaryAreaView'; import TagArea from './tagArea/view/tagAreaView'; -import TextArea from './textArea/view/textAreaView'; import TitleArea from './titleArea/view/titleAreaView'; -export { SummaryArea, TagArea, TextArea, TitleArea }; +export { SummaryArea, TagArea, TitleArea }; diff --git a/src/components/editorElements/textArea/view/textAreaStyles.js b/src/components/editorElements/textArea/view/textAreaStyles.js deleted file mode 100644 index d0375023e..000000000 --- a/src/components/editorElements/textArea/view/textAreaStyles.js +++ /dev/null @@ -1,8 +0,0 @@ -import EStyleSheet from 'react-native-extended-stylesheet'; - -export default EStyleSheet.create({ - container: { - flex: 1, - marginTop: 16, - }, -}); diff --git a/src/components/editorElements/textArea/view/textAreaView.js b/src/components/editorElements/textArea/view/textAreaView.js deleted file mode 100644 index 75120cae7..000000000 --- a/src/components/editorElements/textArea/view/textAreaView.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { PureComponent } from 'react'; -// Constants - -// Components -import { MarkdownEditor } from '../../../markdownEditor'; - -export default class TextAreaView extends PureComponent { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ - - constructor(props) { - super(props); - this.state = {}; - } - - // Component Life Cycles - - // Component Functions - - render() { - return ; - } -} diff --git a/src/components/editorElements/titleArea/view/titleAreaStyles.js b/src/components/editorElements/titleArea/view/titleAreaStyles.js index e4323dfd0..ffc7ed28d 100644 --- a/src/components/editorElements/titleArea/view/titleAreaStyles.js +++ b/src/components/editorElements/titleArea/view/titleAreaStyles.js @@ -8,5 +8,6 @@ export default EStyleSheet.create({ fontFamily: '$editorFont', textAlignVertical: 'top', paddingVertical: 0, + backgroundColor: '$primaryBackgroundColor', }, }); diff --git a/src/components/markdownEditor/view/markdownEditorStyles.js b/src/components/markdownEditor/view/markdownEditorStyles.js index 41abdd607..beb9179bd 100644 --- a/src/components/markdownEditor/view/markdownEditorStyles.js +++ b/src/components/markdownEditor/view/markdownEditorStyles.js @@ -14,6 +14,7 @@ export default EStyleSheet.create({ paddingBottom: 0, // On android side, textinput has default padding paddingHorizontal: 16, color: '$primaryBlack', + backgroundColor: '$primaryBackgroundColor', fontFamily: '$editorFont', textAlignVertical: 'top', }, diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index 5bd4f5dcc..dbd77a3df 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState, useRef, useEffect, useCallback } from 'react'; import { View, KeyboardAvoidingView, FlatList, Text, Platform, ScrollView } from 'react-native'; import ActionSheet from 'react-native-actionsheet'; import { renderPostBody } from '@esteemapp/esteem-render-helpers'; @@ -45,13 +45,13 @@ const MarkdownEditorView = ({ if (!isPreviewActive) { _setTextAndSelection({ selection: { start: 0, end: 0 }, text }); } - }, [isPreviewActive]); + }, [_setTextAndSelection, isPreviewActive, text]); useEffect(() => { if (text === '' && draftBody !== '') { _setTextAndSelection({ selection: { start: 0, end: 0 }, text: draftBody }); } - }, [draftBody]); + }, [_setTextAndSelection, draftBody, text]); useEffect(() => { if (editable === null) { @@ -63,7 +63,7 @@ const MarkdownEditorView = ({ } else { setEditable(!isLoading); } - }, [isLoading]); + }, [editable, isLoading]); useEffect(() => { if (uploadedImage && uploadedImage.url) { @@ -75,7 +75,7 @@ const MarkdownEditorView = ({ isImage: !!uploadedImage, }); } - }, [uploadedImage]); + }, [_setTextAndSelection, selection, text, uploadedImage]); useEffect(() => { setText(draftBody); @@ -91,41 +91,47 @@ const MarkdownEditorView = ({ handleIsFormValid(text); } } - }, [text]); + }, [_changeText, handleIsFormValid, text]); - const _changeText = input => { - setText(input); + const _changeText = useCallback( + input => { + setText(input); - if (onChange) { - onChange(input); - } + if (onChange) { + onChange(input); + } - if (handleIsValid) { - handleIsValid(componentID, !!(input && input.length)); - } + if (handleIsValid) { + handleIsValid(componentID, !!(input && input.length)); + } - if (handleOnTextChange) { - handleOnTextChange(input); - } - }; + if (handleOnTextChange) { + handleOnTextChange(input); + } + }, + [componentID, handleIsValid, handleOnTextChange, onChange], + ); const _handleOnSelectionChange = async event => { setSelection(event.nativeEvent.selection); }; - const _setTextAndSelection = ({ selection: _selection, text: _text }) => { - inputRef.current.setNativeProps({ - text: _text, - }); - // Workaround for iOS selection update issue - setTimeout(() => { + const _setTextAndSelection = useCallback( + ({ selection: _selection, text: _text }) => { inputRef.current.setNativeProps({ - selection: _selection, + text: _text, }); - setSelection(_selection); - }, 200); - _changeText(_text); - }; + // Workaround for iOS selection update issue + setTimeout(() => { + inputRef.current.setNativeProps({ + selection: _selection, + }); + setSelection(_selection); + }, 200); + _changeText(_text); + }, + [_changeText], + ); const _renderPreview = () => ( diff --git a/src/components/markdownEditor/view/markdownPreviewStyles.js b/src/components/markdownEditor/view/markdownPreviewStyles.js index f92a3e28d..e5a89e9be 100644 --- a/src/components/markdownEditor/view/markdownPreviewStyles.js +++ b/src/components/markdownEditor/view/markdownPreviewStyles.js @@ -1,7 +1,6 @@ import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ - view: {}, codeBlock: { fontFamily: 'Courier', fontWeight: '500', diff --git a/src/components/textInput/view/textInputStyles.js b/src/components/textInput/view/textInputStyles.js index 3bb825c83..2d00237e5 100644 --- a/src/components/textInput/view/textInputStyles.js +++ b/src/components/textInput/view/textInputStyles.js @@ -15,6 +15,5 @@ export default EStyleSheet.create({ input: { flex: 1, minHeight: 50, - backgroundColor: '$primaryWhiteLightBackground', }, }); diff --git a/src/index.js b/src/index.js index f4b57b5a6..1d8a54846 100755 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,9 @@ import React from 'react'; +import 'react-native-gesture-handler'; import { Provider, connect } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { IntlProvider } from 'react-intl'; import { useScreens } from 'react-native-screens'; - import { flattenMessages } from './utils/flattenMessages'; import messages from './config/locales'; diff --git a/src/screens/editor/container/editorContainer.js b/src/screens/editor/container/editorContainer.js index 3db98c28b..29b97b4b8 100644 --- a/src/screens/editor/container/editorContainer.js +++ b/src/screens/editor/container/editorContainer.js @@ -96,9 +96,9 @@ class EditorContainer extends Component { this.setState({ isEdit, draftPost: { - title: post.title, - body: post.markdownBody, - tags: post.json_metadata.tags, + title: get(post, 'title', ''), + body: get(post, 'markdownBody', ''), + tags: get(post, 'json_metadata.tags', []), }, }); } @@ -129,9 +129,9 @@ class EditorContainer extends Component { if (result) { this.setState({ draftPost: { - body: result.body, - title: result.title, - tags: result.tags.split(','), + body: get(result, 'body', ''), + title: get(result, 'title', ''), + tags: get(result, 'tags', '').split(','), }, }); } diff --git a/src/screens/editor/screen/editorScreen.js b/src/screens/editor/screen/editorScreen.js index d7deaebdd..ed9100d2a 100644 --- a/src/screens/editor/screen/editorScreen.js +++ b/src/screens/editor/screen/editorScreen.js @@ -14,6 +14,7 @@ import { TextArea, SummaryArea, PostForm, + MarkdownEditor, } from '../../../components'; // Styles @@ -73,7 +74,9 @@ class EditorScreen extends Component { isRemoveTag: true, }); - if (initialEditor) initialEditor(); + if (initialEditor) { + initialEditor(); + } }; _handleOnPressPreviewButton = () => { @@ -229,7 +232,7 @@ class EditorScreen extends Component { intl={intl} /> )} -