Use callback state update for updates relying on previous (state, props)

WordPress · Jun 14, 2017 · 49233c0 · 49233c0
1 parent c650280
commit 49233c0
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 39 deletions.
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -365,9 +365,9 @@ export default class Editable extends wp.element.Component {
 			}
 		} );
 
-		this.setState( {
-			formats: merge( {}, this.state.formats, formats ),
-		} );
+		this.setState( ( state ) => ( {
+			formats: merge( {}, state.formats, formats ),
+		} ) );
 
 		this.editor.setDirty( true );
 	}

diff --git a/blocks/library/freeform/format-list.js b/blocks/library/freeform/format-list.js
@@ -45,9 +45,9 @@ class FormatList extends wp.element.Component {
 	}
 
 	toggleMenu() {
-		this.setState( {
-			open: ! this.state.open,
-		} );
+		this.setState( ( state ) => ( {
+			open: ! state.open,
+		} ) );
 	}
 
 	switchFormat( newValue ) {

diff --git a/components/form-token-field/index.js b/components/form-token-field/index.js
@@ -215,22 +215,22 @@ class FormTokenField extends Component {
 	}
 
 	handleUpArrowKey() {
-		this.setState( {
-			selectedSuggestionIndex: Math.max( ( this.state.selectedSuggestionIndex || 0 ) - 1, 0 ),
+		this.setState( ( state ) => ( {
+			selectedSuggestionIndex: Math.max( ( state.selectedSuggestionIndex || 0 ) - 1, 0 ),
 			selectedSuggestionScroll: true,
-		} );
+		} ) );
 
 		return true; // preventDefault
 	}
 
 	handleDownArrowKey() {
-		this.setState( {
+		this.setState( ( state, props ) => ( {
 			selectedSuggestionIndex: Math.min(
-				( this.state.selectedSuggestionIndex + 1 ) || 0,
-				this.getMatchingSuggestions().length - 1
+				( state.selectedSuggestionIndex + 1 ) || 0,
+				this.getMatchingSuggestions( state, props ).length - 1
 			),
 			selectedSuggestionScroll: true,
-		} );
+		} ) );
 
 		return true; // preventDefault
 	}
@@ -244,21 +244,21 @@ class FormTokenField extends Component {
 	}
 
 	moveInputToIndex( index ) {
-		this.setState( {
-			inputOffsetFromEnd: this.props.value.length - Math.max( index, -1 ) - 1,
-		} );
+		this.setState( ( state, props ) => ( {
+			inputOffsetFromEnd: props.value.length - Math.max( index, -1 ) - 1,
+		} ) );
 	}
 
 	moveInputBeforePreviousToken() {
-		this.setState( {
-			inputOffsetFromEnd: Math.min( this.state.inputOffsetFromEnd + 1, this.props.value.length ),
-		} );
+		this.setState( ( state, props ) => ( {
+			inputOffsetFromEnd: Math.min( state.inputOffsetFromEnd + 1, props.value.length ),
+		} ) );
 	}
 
 	moveInputAfterNextToken() {
-		this.setState( {
-			inputOffsetFromEnd: Math.max( this.state.inputOffsetFromEnd - 1, 0 ),
-		} );
+		this.setState( ( state ) => ( {
+			inputOffsetFromEnd: Math.max( state.inputOffsetFromEnd - 1, 0 ),
+		} ) );
 	}
 
 	deleteTokenBeforeInput() {
@@ -341,20 +341,20 @@ class FormTokenField extends Component {
 		return token;
 	}
 
-	getMatchingSuggestions() {
-		let suggestions = this.props.suggestions;
-		let match = this.props.saveTransform( this.state.incompleteTokenValue );
+	getMatchingSuggestions( state = this.state, props = this.props ) {
+		let suggestions = props.suggestions;
+		let match = props.saveTransform( state.incompleteTokenValue );
 		const startsWithMatch = [];
 		const containsMatch = [];
 
 		if ( match.length === 0 ) {
-			suggestions = difference( suggestions, this.props.value );
+			suggestions = difference( suggestions, props.value );
 		} else {
 			match = match.toLocaleLowerCase();
 
 			each( suggestions, ( suggestion ) => {
 				const index = suggestion.toLocaleLowerCase().indexOf( match );
-				if ( this.props.value.indexOf( suggestion ) === -1 ) {
+				if ( props.value.indexOf( suggestion ) === -1 ) {
 					if ( index === 0 ) {
 						startsWithMatch.push( suggestion );
 					} else if ( index > 0 ) {
@@ -366,7 +366,7 @@ class FormTokenField extends Component {
 			suggestions = startsWithMatch.concat( containsMatch );
 		}
 
-		return take( suggestions, this.props.maxSuggestions );
+		return take( suggestions, props.maxSuggestions );
 	}
 
 	getSelectedSuggestion() {

diff --git a/components/panel/body.js b/components/panel/body.js
@@ -20,9 +20,9 @@ class PanelBody extends Component {
 
 	toggle( event ) {
 		event.preventDefault();
-		this.setState( {
-			opened: ! this.state.opened,
-		} );
+		this.setState( ( state ) => ( {
+			opened: ! state.opened,
+		} ) );
 	}
 
 	render() {

diff --git a/editor/block-switcher/index.js b/editor/block-switcher/index.js
@@ -35,9 +35,9 @@ class BlockSwitcher extends wp.element.Component {
 	}
 
 	toggleMenu() {
-		this.setState( {
-			open: ! this.state.open,
-		} );
+		this.setState( ( state ) => ( {
+			open: ! state.open,
+		} ) );
 	}
 
 	switchBlockType( name ) {

diff --git a/editor/inserter/index.js b/editor/inserter/index.js
@@ -28,9 +28,9 @@ class Inserter extends wp.element.Component {
 	}
 
 	toggle() {
-		this.setState( {
-			opened: ! this.state.opened,
-		} );
+		this.setState( ( state ) => ( {
+			opened: ! state.opened,
+		} ) );
 	}
 
 	close() {

diff --git a/editor/sidebar/post-schedule/index.js b/editor/sidebar/post-schedule/index.js
@@ -32,7 +32,7 @@ class PostSchedule extends Component {
 
 	toggleDialog( event ) {
 		event.preventDefault();
-		this.setState( { opened: ! this.state.opened } );
+		this.setState( ( state ) => ( { opened: ! state.opened } ) );
 	}
 
 	handleClickOutside() {

diff --git a/editor/sidebar/post-visibility/index.js b/editor/sidebar/post-visibility/index.js
@@ -33,7 +33,7 @@ class PostVisibility extends Component {
 
 	toggleDialog( event ) {
 		event.preventDefault();
-		this.setState( { opened: ! this.state.opened } );
+		this.setState( ( state ) => ( { opened: ! state.opened } ) );
 	}
 
 	handleClickOutside() {