From 2f45c941b44c4652d8692833cbc56512fda48b5f Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Wed, 20 Feb 2019 11:58:33 +0300 Subject: [PATCH 1/6] Trigger onFocusStatusChange from PostTitle --- packages/editor/src/components/post-title/index.native.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index 59079073a62c9d..f139ddbba95aac 100644 --- a/packages/editor/src/components/post-title/index.native.js +++ b/packages/editor/src/components/post-title/index.native.js @@ -29,11 +29,13 @@ class PostTitle extends Component { onSelect() { this.setState( { isSelected: true } ); + this.props.onFocusStatusChange( true ) this.props.clearSelectedBlock(); } onUnselect() { this.setState( { isSelected: false } ); + this.props.onFocusStatusChange( false ); } render() { From c2c0c8be72cd47126322865821de19dc0b8d63cb Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Wed, 20 Feb 2019 16:45:09 +0300 Subject: [PATCH 2/6] Fix lint issue --- packages/editor/src/components/post-title/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index f139ddbba95aac..dca17e3de73616 100644 --- a/packages/editor/src/components/post-title/index.native.js +++ b/packages/editor/src/components/post-title/index.native.js @@ -29,7 +29,7 @@ class PostTitle extends Component { onSelect() { this.setState( { isSelected: true } ); - this.props.onFocusStatusChange( true ) + this.props.onFocusStatusChange( true ); this.props.clearSelectedBlock(); } From ab190c5221e7c42d457d0aa857ba7a3f75d5dd9c Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Thu, 21 Feb 2019 13:53:55 +0300 Subject: [PATCH 3/6] Update post title shadow mechanism Also open inner ref so that focus state can be updated when focus is made programmatically --- .../src/components/post-title/index.native.js | 71 ++++++++++++------- .../components/post-title/style.native.scss | 7 ++ 2 files changed, 54 insertions(+), 24 deletions(-) create mode 100644 packages/editor/src/components/post-title/style.native.scss diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index f4c26808e6f7eb..06de60b2d62b15 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,19 +29,30 @@ class PostTitle extends Component { }; } + componentDidMount() { + if ( this.props.onRef ) { + this.props.onRef( this ); + } + } + handleFocusOutside() { this.onUnselect(); } + focus() { + if ( this.titleViewRef ) { + this.titleViewRef.focus(); + this.setState( { isSelected: true } ); + } + } + onSelect() { this.setState( { isSelected: true } ); - this.props.onFocusStatusChange( true ); this.props.clearSelectedBlock(); } onUnselect() { this.setState( { isSelected: false } ); - this.props.onFocusStatusChange( false ); } render() { @@ -46,30 +63,36 @@ class PostTitle extends Component { } = this.props; const decodedPlaceholder = decodeEntities( placeholder ); + const focusedStyle = this.props.focusedStyle; + const borderColor = this.state.isSelected ? focusedStyle.borderColor : '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..cb4efeb6776d12 --- /dev/null +++ b/packages/editor/src/components/post-title/style.native.scss @@ -0,0 +1,7 @@ + +.titleContainer { + padding-left: 16; + padding-right: 16; + padding-top: 32; + padding-bottom: 16; +} From aead0026e3a19632a64535fc55048d7c9570f80d Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Thu, 21 Feb 2019 14:49:07 +0300 Subject: [PATCH 4/6] Update props --- packages/editor/src/components/post-title/index.native.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index 06de60b2d62b15..e7feed1dedb0ff 100644 --- a/packages/editor/src/components/post-title/index.native.js +++ b/packages/editor/src/components/post-title/index.native.js @@ -60,14 +60,15 @@ class PostTitle extends Component { placeholder, style, title, + focusedBorderColor, + borderStyle, } = this.props; const decodedPlaceholder = decodeEntities( placeholder ); - const focusedStyle = this.props.focusedStyle; - const borderColor = this.state.isSelected ? focusedStyle.borderColor : 'transparent'; + const borderColor = this.state.isSelected ? focusedBorderColor : 'transparent'; return ( - + Date: Thu, 21 Feb 2019 17:50:50 +0300 Subject: [PATCH 5/6] Update onRef as ref --- packages/editor/src/components/post-title/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index e7feed1dedb0ff..6f8a5ed47b8619 100644 --- a/packages/editor/src/components/post-title/index.native.js +++ b/packages/editor/src/components/post-title/index.native.js @@ -30,8 +30,8 @@ class PostTitle extends Component { } componentDidMount() { - if ( this.props.onRef ) { - this.props.onRef( this ); + if ( this.props.ref ) { + this.props.ref( this ); } } From 7f763d3e3f09e6db57ec9251e9ebfb50f0ba6c50 Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Thu, 21 Feb 2019 18:54:13 +0300 Subject: [PATCH 6/6] Update title padding&margin --- packages/editor/src/components/post-title/style.native.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-title/style.native.scss b/packages/editor/src/components/post-title/style.native.scss index cb4efeb6776d12..51879fd555c6b4 100644 --- a/packages/editor/src/components/post-title/style.native.scss +++ b/packages/editor/src/components/post-title/style.native.scss @@ -2,6 +2,5 @@ .titleContainer { padding-left: 16; padding-right: 16; - padding-top: 32; - padding-bottom: 16; + margin-top: 24; }