From 92274d0cf2ab3a003b3b99485cf898b84e85a9ab Mon Sep 17 00:00:00 2001 From: ue Date: Mon, 22 Oct 2018 09:52:11 +0300 Subject: [PATCH] created postForm parrent component --- .../tagArea/view/tagAreaView.js | 9 ++--- .../titleArea/view/titleAreaView.js | 10 +++--- .../editorHeader/view/editorHeaderStyles.js | 8 ++++- .../editorHeader/view/editorHeaderView.js | 9 +++-- .../markdownEditor/view/markdownEditorView.js | 1 + src/components/postForm/index.js | 4 +++ src/components/postForm/view/postFormView.js | 33 +++++++++++++++++++ src/screens/editor/screen/editorScreen.js | 17 ++++++++-- 8 files changed, 77 insertions(+), 14 deletions(-) create mode 100644 src/components/postForm/index.js create mode 100644 src/components/postForm/view/postFormView.js diff --git a/src/components/editorElements/tagArea/view/tagAreaView.js b/src/components/editorElements/tagArea/view/tagAreaView.js index 8e0111efc..0d5b2c384 100644 --- a/src/components/editorElements/tagArea/view/tagAreaView.js +++ b/src/components/editorElements/tagArea/view/tagAreaView.js @@ -1,4 +1,4 @@ -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; import { View } from 'react-native'; // Constants @@ -6,6 +6,7 @@ import { View } from 'react-native'; import { Chip } from '../../../basicUIElements'; // Styles import styles from './tagAreaStyles'; +import globalStyles from '../../../../globalStyles'; export default class TagAreaView extends Component { /* Props @@ -63,7 +64,7 @@ export default class TagAreaView extends Component { const { chips } = this.state; return ( - + {chips.map((chip, i) => ( this._handleOnBlur()} blurOnSubmit autoCapitalize="none" - returnKeyType="next" + {...this.props} /> ))} - + ); } } diff --git a/src/components/editorElements/titleArea/view/titleAreaView.js b/src/components/editorElements/titleArea/view/titleAreaView.js index 90b5d48a7..bac4dab89 100644 --- a/src/components/editorElements/titleArea/view/titleAreaView.js +++ b/src/components/editorElements/titleArea/view/titleAreaView.js @@ -1,11 +1,12 @@ -import React, { Component, Fragment } from 'react'; -import { TextInput } from 'react-native'; +import React, { Component } from 'react'; +import { TextInput, View } from 'react-native'; // Constants // Components // Styles import styles from './titleAreaStyles'; +import globalStyles from '../../../../globalStyles'; export default class TitleAreaView extends Component { /* Props @@ -26,7 +27,7 @@ export default class TitleAreaView extends Component { const { onChange, value } = this.props; return ( - + onChange && onChange(text)} value={value} + {...this.props} /> - + ); } } diff --git a/src/components/editorHeader/view/editorHeaderStyles.js b/src/components/editorHeader/view/editorHeaderStyles.js index 23287b88a..9d8d1ef99 100644 --- a/src/components/editorHeader/view/editorHeaderStyles.js +++ b/src/components/editorHeader/view/editorHeaderStyles.js @@ -29,9 +29,15 @@ export default EStyleSheet.create({ alignSelf: 'center', }, textButton: { - color: '$iconColor', fontSize: 16, }, + textButtonDisable: { + color: '$iconColor', + }, + textButtonEnable: { + color: '$primaryBlue', + fontWeight: 'bold', + }, textButtonWrapper: { justifyContent: 'center', }, diff --git a/src/components/editorHeader/view/editorHeaderView.js b/src/components/editorHeader/view/editorHeaderView.js index 3fcd28223..ae5b4ae74 100644 --- a/src/components/editorHeader/view/editorHeaderView.js +++ b/src/components/editorHeader/view/editorHeaderView.js @@ -12,7 +12,8 @@ import styles from './editorHeaderStyles'; class EditorHeaderView extends Component { /* Props * ------------------------------------------------ - * @prop { type } name - Description.... + * @prop { boolean } isFormValid - Righst button propertie + * @prop { string } quickTitle - Left side behind back button text */ constructor(props) { @@ -30,6 +31,7 @@ class EditorHeaderView extends Component { handleOnPressPreviewButton, isPreviewActive, quickTitle, + isFormValid, } = this.props; return ( @@ -55,7 +57,10 @@ class EditorHeaderView extends Component { name={isPreviewActive ? 'ios-eye' : 'ios-eye-off'} /> diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index eb113612b..8181315f4 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -125,6 +125,7 @@ export default class MarkdownEditorView extends Component { style={styles.textWrapper} underlineColorAndroid="transparent" value={text} + {...this.props} /> ) : ( this._renderPreview() diff --git a/src/components/postForm/index.js b/src/components/postForm/index.js new file mode 100644 index 000000000..8806a97b5 --- /dev/null +++ b/src/components/postForm/index.js @@ -0,0 +1,4 @@ +import PostForm from './view/postFormView'; + +export { PostForm }; +export default PostForm; diff --git a/src/components/postForm/view/postFormView.js b/src/components/postForm/view/postFormView.js new file mode 100644 index 000000000..20bd77882 --- /dev/null +++ b/src/components/postForm/view/postFormView.js @@ -0,0 +1,33 @@ +import React, { Component, Fragment } from 'react'; + +class PostFormView extends Component { + _handleOnSubmitEditing = (returnKeyType = null, inputElement = null) => { + const { handleOnSubmit, isFormValid } = this.props; + + if (isFormValid && handleOnSubmit && returnKeyType === 'done') { + handleOnSubmit(); + } else if (returnKeyType === 'next' && inputElement) { + // TODO: its accept current input but its should be next input ref + inputElement.focus(); + } + }; + + render() { + const { children, isFormValid } = this.props; + + return ( + + {React.Children.map(children, (child) => { + if (child) { + return React.cloneElement(child, { + onSubmitEditing: item => this._handleOnSubmitEditing(child.props.returnKeyType, item), + returnKeyType: isFormValid ? 'done' : 'next', + }); + } + })} + + ); + } +} + +export default PostFormView; diff --git a/src/screens/editor/screen/editorScreen.js b/src/screens/editor/screen/editorScreen.js index 9db3d752d..5d4997a3a 100644 --- a/src/screens/editor/screen/editorScreen.js +++ b/src/screens/editor/screen/editorScreen.js @@ -9,6 +9,7 @@ import { getWordsCount } from '../../../utils/editor'; // Components import { EditorHeader } from '../../../components/editorHeader'; import { TitleArea, TagArea, TextArea } from '../../../components/editorElements'; +import { PostForm } from '../../../components/postForm'; // Styles import globalStyles from '../../../globalStyles'; @@ -44,6 +45,8 @@ export class EditorScreen extends Component { } }; + _handleOnSubmit = () => {}; + render() { const { isPreviewActive, wordsCount } = this.state; @@ -53,12 +56,20 @@ export class EditorScreen extends Component { isPreviewActive={isPreviewActive} quickTitle={wordsCount > 0 && `${wordsCount} words`} handleOnPressPreviewButton={this._handleOnPressPreviewButton} + isFormValid /> - + - -