diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index ff626aada27646..c41a1263b6a5ab 100644 --- a/packages/editor/src/components/post-title/index.native.js +++ b/packages/editor/src/components/post-title/index.native.js @@ -8,9 +8,15 @@ import { withDispatch } from '@wordpress/data'; import { withFocusOutside } from '@wordpress/components'; import { withInstanceId, compose } from '@wordpress/compose'; +import { View } from 'react-native'; + +import styles from './style.scss'; + const minHeight = 30; class PostTitle extends Component { + titleViewRef: Object; + constructor() { super( ...arguments ); @@ -23,10 +29,23 @@ class PostTitle extends Component { }; } + componentDidMount() { + if ( this.props.ref ) { + this.props.ref( this ); + } + } + handleFocusOutside() { this.onUnselect(); } + focus() { + if ( this.titleViewRef ) { + this.titleViewRef.focus(); + this.setState( { isSelected: true } ); + } + } + onSelect() { this.setState( { isSelected: true } ); this.props.clearSelectedBlock(); @@ -41,34 +60,41 @@ class PostTitle extends Component { placeholder, style, title, + focusedBorderColor, + borderStyle, } = this.props; const decodedPlaceholder = decodeEntities( placeholder ); + const borderColor = this.state.isSelected ? focusedBorderColor : 'transparent'; return ( - { - this.props.onUpdate( value ); - } } - onContentSizeChange={ ( event ) => { - this.setState( { aztecHeight: event.aztecHeight } ); - } } - placeholder={ decodedPlaceholder } - value={ title } - onSplit={ this.props.onEnterPress } - setRef={ this.props.setRef } - > - + + { + this.props.onUpdate( value ); + } } + onContentSizeChange={ ( event ) => { + this.setState( { aztecHeight: event.aztecHeight } ); + } } + placeholder={ decodedPlaceholder } + value={ title } + onSplit={ this.props.onEnterPress } + setRef={ ( ref ) => { + this.titleViewRef = ref; + } } + > + + ); } } diff --git a/packages/editor/src/components/post-title/style.native.scss b/packages/editor/src/components/post-title/style.native.scss new file mode 100644 index 00000000000000..51879fd555c6b4 --- /dev/null +++ b/packages/editor/src/components/post-title/style.native.scss @@ -0,0 +1,6 @@ + +.titleContainer { + padding-left: 16; + padding-right: 16; + margin-top: 24; +}