From 41cb6b53fd6499e5d1fc9a564959a5ddff7b42c8 Mon Sep 17 00:00:00 2001 From: ue Date: Mon, 22 Oct 2018 15:43:28 +0300 Subject: [PATCH] validation added --- package-lock.json | 11 +++-- package.json | 1 + .../tagArea/view/tagAreaView.js | 10 ++++ .../titleArea/view/titleAreaView.js | 16 +++++-- .../editorHeader/view/editorHeaderStyles.js | 1 - .../markdownEditor/view/markdownEditorView.js | 18 +++++-- src/components/postForm/view/postFormView.js | 12 +++++ src/screens/editor/screen/editorScreen.js | 47 +++++++++++++++---- src/utils/editor.js | 2 +- 9 files changed, 97 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index d74c6bc4e..aa893bec9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7653,9 +7653,9 @@ } }, "lodash": { - "version": "4.17.10", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", - "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" }, "lodash-es": { "version": "4.17.11", @@ -8573,6 +8573,11 @@ "tween-functions": "^1.0.1" }, "dependencies": { + "lodash": { + "version": "4.17.10", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", + "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" + }, "react-native-keyboard-aware-scroll-view": { "version": "0.5.0", "resolved": "http://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.5.0.tgz", diff --git a/package.json b/package.json index 9524c6b2d..40daa9ec5 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@esteemapp/react-native-tags": "^1.3.1", "crypto-js": "^3.1.9-1", "dsteem": "^0.10.1", + "lodash": "^4.17.11", "moment": "^2.22.2", "native-base": "^2.8.1", "react": "^16.5.0", diff --git a/src/components/editorElements/tagArea/view/tagAreaView.js b/src/components/editorElements/tagArea/view/tagAreaView.js index 4e3b9bfcc..cc7e95da0 100644 --- a/src/components/editorElements/tagArea/view/tagAreaView.js +++ b/src/components/editorElements/tagArea/view/tagAreaView.js @@ -26,6 +26,9 @@ export default class TagAreaView extends Component { // Component Functions _handleOnChange = (text, i) => { + const { onChange } = this.props; + const { chips } = this.state; + this.setState({ currentText: text.trim() }); // if (text.indexOf(' ') > 0 && text) { @@ -35,6 +38,10 @@ export default class TagAreaView extends Component { if (!text && i !== 0) { this._handleTagRemove(i); } + + // if (onChange) { + // this.props.onChange(chips); + // } }; _handleOnBlur = () => { @@ -48,6 +55,8 @@ export default class TagAreaView extends Component { this.setState({ chips: [...chips, currentText.trim()], }); + + this.props.onChange(chips); } }; @@ -57,6 +66,7 @@ export default class TagAreaView extends Component { this.setState({ chips: chips.filter((_, _i) => _i !== i), }); + this.props.onChange(chips); }; render() { diff --git a/src/components/editorElements/titleArea/view/titleAreaView.js b/src/components/editorElements/titleArea/view/titleAreaView.js index 0d44fd68c..8e9d82543 100644 --- a/src/components/editorElements/titleArea/view/titleAreaView.js +++ b/src/components/editorElements/titleArea/view/titleAreaView.js @@ -22,22 +22,32 @@ export default class TitleAreaView extends Component { // Component Life Cycles // Component Functions + _handleOnChange = (text) => { + const { onChange, handleIsValid, componentID } = this.props; + if (onChange) { + onChange(text); + } + + if (handleIsValid) { + handleIsValid(componentID, !!(text && text.length)); + } + }; render() { - const { onChange, value, isPreviewActive } = this.props; + const { value, isPreviewActive } = this.props; return ( onChange && onChange(text)} + onChangeText={text => this._handleOnChange(text)} value={value} {...this.props} /> diff --git a/src/components/editorHeader/view/editorHeaderStyles.js b/src/components/editorHeader/view/editorHeaderStyles.js index 9d8d1ef99..69d9adfb9 100644 --- a/src/components/editorHeader/view/editorHeaderStyles.js +++ b/src/components/editorHeader/view/editorHeaderStyles.js @@ -36,7 +36,6 @@ export default EStyleSheet.create({ }, textButtonEnable: { color: '$primaryBlue', - fontWeight: 'bold', }, textButtonWrapper: { justifyContent: 'center', diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index 8181315f4..bab93f503 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -27,13 +27,21 @@ export default class MarkdownEditorView extends Component { } changeText = (input) => { - const { handleOnTextChange } = this.props; + const { + onChange, handleOnTextChange, handleIsValid, componentID, + } = this.props; this.setState({ text: input }); - if (handleOnTextChange) { - handleOnTextChange(input); + if (onChange) { + onChange(input); } + + if (handleIsValid) { + handleIsValid(componentID, !!(input && input.length)); + } + + handleOnTextChange && handleOnTextChange(input); }; _handleOnSelectionChange = (event) => { @@ -115,9 +123,9 @@ export default class MarkdownEditorView extends Component { {!isPreviewActive ? ( this.changeText(text)} onSelectionChange={this._handleOnSelectionChange} - placeHolder="What would you like to write about today?" + placeholder="What would you like to write about today?" placeholderTextColor="#c1c5c7" ref={textInput => (this.textInput = textInput)} selection={selection} diff --git a/src/components/postForm/view/postFormView.js b/src/components/postForm/view/postFormView.js index 778f58c7f..9037dbb6f 100644 --- a/src/components/postForm/view/postFormView.js +++ b/src/components/postForm/view/postFormView.js @@ -1,6 +1,11 @@ import React, { Component, Fragment } from 'react'; class PostFormView extends Component { + constructor(props) { + super(props); + this.state = {}; + } + _handleOnSubmitEditing = (returnKeyType = null, inputElement = null) => { const { handleOnSubmit, isFormValid } = this.props; @@ -12,6 +17,12 @@ class PostFormView extends Component { } }; + _handleOnChange = (componentID, value, isValid = null) => { + const { handleFormUpdate } = this.props; + + handleFormUpdate(componentID, value, !!isValid || !!value); + }; + render() { const { children, isFormValid, isPreviewActive } = this.props; @@ -21,6 +32,7 @@ class PostFormView extends Component { if (child) { return React.cloneElement(child, { onSubmitEditing: item => this._handleOnSubmitEditing(child.props.returnKeyType, item), + onChange: value => this._handleOnChange(child.props.componentID, value), returnKeyType: isFormValid ? 'done' : 'next', isPreviewActive, }); diff --git a/src/screens/editor/screen/editorScreen.js b/src/screens/editor/screen/editorScreen.js index 7e6a6f426..7ecc6abdc 100644 --- a/src/screens/editor/screen/editorScreen.js +++ b/src/screens/editor/screen/editorScreen.js @@ -24,6 +24,8 @@ export class EditorScreen extends Component { this.state = { isPreviewActive: false, wordsCount: null, + formFields: {}, + isFormValid: false, }; } @@ -36,8 +38,8 @@ export class EditorScreen extends Component { this.setState({ isPreviewActive: !isPreviewActive }); }; - _handleOnTextChange = (text) => { - const _wordsCount = getWordsCount(text); + _setWordsCount = (content) => { + const _wordsCount = getWordsCount(content); const { wordsCount } = this.state; if (_wordsCount !== wordsCount) { @@ -47,8 +49,36 @@ export class EditorScreen extends Component { _handleOnSubmit = () => {}; + _handleIsFormValid = () => { + const { formFields } = this.state; + + this.setState({ + isFormValid: + formFields['title-area'] + && formFields['text-area'] + && formFields['tag-area'] + && formFields['title-area'].isValid + && formFields['text-area'].isValid + && formFields['tag-area'].isValid, + }); + }; + + _handleFormUpdate = (componentID, content, isValid) => { + const { formFields } = this.state; + const newFormFields = formFields; + + newFormFields[componentID] = { + content, + isValid, + }; + + this.setState({ formFields: newFormFields }); + + this._handleIsFormValid(); + }; + render() { - const { isPreviewActive, wordsCount } = this.state; + const { isPreviewActive, wordsCount, isFormValid } = this.state; return ( @@ -56,16 +86,17 @@ export class EditorScreen extends Component { isPreviewActive={isPreviewActive} quickTitle={wordsCount > 0 && `${wordsCount} words`} handleOnPressPreviewButton={this._handleOnPressPreviewButton} - isFormValid + isFormValid={isFormValid} /> - - -