Skip to content

Commit

Permalink
Merge pull request #781 from wordpress-mobile/try/html-view-code-share
Browse files Browse the repository at this point in the history
HTMLInputView refactor to better share code.
  • Loading branch information
etoledom authored Mar 26, 2019
2 parents b657981 + d496c64 commit bd1ebf5
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 94 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@ $padding: 8;
$backgroundColor: white;
$htmlFont: $default-monospace-font;

.container {
.keyboardAvoidingView {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}

.container {
flex: 1;
}
59 changes: 13 additions & 46 deletions src/components/html-text-input-ui/html-text-input-ui.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
/**
* External dependencies
*/
import React from 'react';
import { TextInput, ScrollView } from 'react-native';
import * as React from 'react';
import { ScrollView } from 'react-native';

/**
* Internal dependencies
Expand All @@ -16,60 +16,27 @@ import styles from './html-text-input-ui.scss';
import KeyboardAvoidingView from '../keyboard-avoiding-view';

type PropsType = {
setTitleAction: string => void,
value: string,
title: string,
parentHeight: number,
onChangeHTMLText: string => mixed,
onBlurHTMLText: () => mixed,
titlePlaceholder: string,
htmlPlaceholder: string,
parentHeight: number,
children: React.Node,
};

type StateType = {
contentHeight: number,
};

export default class HTMLInputViewUI extends React.Component<PropsType, StateType> {
constructor() {
super( ...arguments );

this.state = {
contentHeight: 0,
};
}
class HTMLInputContainer extends React.Component<PropsType, StateType> {
static scrollEnabled: boolean;

render() {
return (
<KeyboardAvoidingView style={ styles.container } parentHeight={ this.props.parentHeight }>
<ScrollView
style={ { flex: 1 } }
keyboardDismissMode="interactive" >
<TextInput
autoCorrect={ false }
textAlignVertical="center"
numberOfLines={ 1 }
style={ styles.htmlViewTitle }
value={ this.props.title }
placeholder={ this.props.titlePlaceholder }
onChangeText={ this.props.setTitleAction }
/>
<TextInput
autoCorrect={ false }
textAlignVertical="top"
multiline
style={ { ...styles.htmlView, height: this.state.contentHeight + 16 } }
value={ this.props.value }
onChangeText={ this.props.onChangeHTMLText }
onBlur={ this.props.onBlurHTMLText }
placeholder={ this.props.htmlPlaceholder }
scrollEnabled={ false }
onContentSizeChange={ ( event ) => {
this.setState( { contentHeight: event.nativeEvent.contentSize.height } );
} }
/>
<KeyboardAvoidingView style={ styles.keyboardAvoidingView } parentHeight={ this.props.parentHeight }>
<ScrollView style={ styles.scrollView } >
{ this.props.children }
</ScrollView>
</KeyboardAvoidingView>
);
}
}

HTMLInputContainer.scrollEnabled = false;

export default HTMLInputContainer;
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
padding-left: $padding;
padding-right: $padding;
padding-top: $padding;
padding-bottom: $padding;
padding-bottom: $padding + 16;
}

.htmlViewTitle {
Expand All @@ -19,3 +19,7 @@
padding-top: $padding;
padding-bottom: $padding;
}

.scrollView {
flex: 1;
}
48 changes: 15 additions & 33 deletions src/components/html-text-input-ui/html-text-input-ui.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
/**
* External dependencies
*/
import React from 'react';
import { TextInput, UIManager, PanResponder } from 'react-native';
import * as React from 'react';
import { UIManager, PanResponder } from 'react-native';

/**
* Internal dependencies
Expand All @@ -16,20 +16,15 @@ import styles from './html-text-input-ui.scss';
import KeyboardAvoidingView from '../keyboard-avoiding-view';

type PropsType = {
setTitleAction: string => void,
value: string,
title: string,
parentHeight: number,
onChangeHTMLText: string => mixed,
onBlurHTMLText: () => mixed,
titlePlaceholder: string,
htmlPlaceholder: string,
parentHeight: number,
children: React.Node,
};

type StateType = {
};

export default class HTMLInputViewUI extends React.Component<PropsType, StateType> {
class HTMLInputContainer extends React.Component<PropsType, StateType> {
static scrollEnabled: boolean;
panResponder: PanResponder;

constructor() {
Expand All @@ -40,7 +35,7 @@ export default class HTMLInputViewUI extends React.Component<PropsType, StateTyp

onPanResponderMove: ( e, gestureState ) => {
if ( gestureState.dy > 100 && gestureState.dy < 110 ) {
//Keyboard.dismiss() and this.textInput.blur() is not working here
//Keyboard.dismiss() and this.textInput.blur() are not working here
//They require to know the currentlyFocusedID under the hood but
//during this gesture there's no currentlyFocusedID
UIManager.blur( e.target );
Expand All @@ -52,29 +47,16 @@ export default class HTMLInputViewUI extends React.Component<PropsType, StateTyp
render() {
return (
<KeyboardAvoidingView
style={ styles.container }
style={ styles.keyboardAvoidingView }
{ ...this.panResponder.panHandlers }
parentHeight={ this.props.parentHeight }>
<TextInput
autoCorrect={ false }
textAlignVertical="center"
numberOfLines={ 1 }
style={ styles.htmlViewTitle }
value={ this.props.title }
placeholder={ this.props.titlePlaceholder }
onChangeText={ this.props.setTitleAction }
/>
<TextInput
autoCorrect={ false }
textAlignVertical="top"
multiline
style={ { ...styles.htmlView } }
value={ this.props.value }
onChangeText={ this.props.onChangeHTMLText }
onBlur={ this.props.onBlurHTMLText }
placeholder={ this.props.htmlPlaceholder }
/>
parentHeight={ this.props.parentHeight }
>
{ this.props.children }
</KeyboardAvoidingView>
);
}
}

HTMLInputContainer.scrollEnabled = true;

export default HTMLInputContainer;
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,4 @@ $title-height: 32;
padding-top: $padding;
padding-bottom: $padding;
height: $title-height;

}
}
36 changes: 25 additions & 11 deletions src/components/html-text-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ import { withInstanceId, compose } from '@wordpress/compose';
* External dependencies
*/
import React from 'react';
import { TextInput } from 'react-native';

/**
* Internal dependencies
*/
import HTMLInputViewUI from './html-text-input-ui/html-text-input-ui';
import HTMLInputContainer from './html-text-input-ui/html-text-input-ui';
import styles from './html-text-input-ui/html-text-input-ui.scss';

type PropsType = {
onChange: string => mixed,
Expand Down Expand Up @@ -80,16 +82,28 @@ export class HTMLInputView extends React.Component<PropsType, StateType> {

render() {
return (
<HTMLInputViewUI
setTitleAction={ this.props.setTitleAction }
value={ this.state.value }
title={ this.props.title }
parentHeight={ this.props.parentHeight }
onChangeHTMLText={ this.edit }
onBlurHTMLText={ this.stopEditing }
titlePlaceholder={ __( 'Add title' ) }
htmlPlaceholder={ __( 'Start writing…' ) }
/>
<HTMLInputContainer parentHeight={ this.props.parentHeight }>
<TextInput
autoCorrect={ false }
textAlignVertical="center"
numberOfLines={ 1 }
style={ styles.htmlViewTitle }
value={ this.props.title }
placeholder={ __( 'Add title' ) }
onChangeText={ this.props.setTitleAction }
/>
<TextInput
autoCorrect={ false }
textAlignVertical="top"
multiline
style={ styles.htmlView }
value={ this.state.value }
onChangeText={ this.edit }
onBlur={ this.stopEditing }
placeholder={ __( 'Start writing…' ) }
scrollEnabled={ HTMLInputContainer.scrollEnabled }
/>
</HTMLInputContainer>
);
}
}
Expand Down

0 comments on commit bd1ebf5

Please sign in to comment.