Merge pull request #13 from Automattic/feature/block-manager-focused-…

…state Block manager set or unset focus on block pressed
WordPress · Mar 20, 2018 · ba5a5fb · ba5a5fb
2 parents 3f840cd + 98f25d8
commit ba5a5fb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git a/block-management/block-holder.js b/block-management/block-holder.js
@@ -4,25 +4,22 @@
  */
 
 import React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native';
 import Toolbar from './toolbar';
 
 type PropsType = {
 	index: number,
 	blockType: string,
 	content: string,
+	focused: boolean,
 	onToolbarButtonPressed: ( button: number, index: number ) => void,
+	onBlockHolderPressed: ( rowId: number ) => void,
 };
 type StateType = { selected: boolean, focused: boolean };
 
 export default class BlockHolder extends React.Component<PropsType, StateType> {
-	state = {
-		selected: false,
-		focused: true,
-	};
-
 	renderToolbarIfBlockFocused() {
-		if ( this.state.focused ) {
+		if ( this.props.focused ) {
 			return (
 				<Toolbar index={ this.props.index } onButtonPressed={ this.props.onToolbarButtonPressed } />
 			);
@@ -35,15 +32,19 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 	render() {
 		// TODO: This is a place holder, this should call the edit() method of the block depending on this.props.blockType
 		return (
-			<View style={ styles.blockHolder }>
-				<View style={ styles.blockTitle }>
-					<Text>BlockType: { this.props.blockType }</Text>
-				</View>
-				<View style={ styles.blockContent }>
-					<Text>{ this.props.content }</Text>
+			<TouchableWithoutFeedback
+				onPress={ this.props.onBlockHolderPressed.bind( this, this.props.index ) }
+			>
+				<View style={ styles.blockHolder }>
+					<View style={ styles.blockTitle }>
+						<Text>BlockType: { this.props.blockType }</Text>
+					</View>
+					<View style={ styles.blockContent }>
+						<Text>{ this.props.content }</Text>
+					</View>
+					{ this.renderToolbarIfBlockFocused.bind( this )() }
 				</View>
-				{ this.renderToolbarIfBlockFocused.bind( this )() }
-			</View>
+			</TouchableWithoutFeedback>
 		);
 	}
 }

diff --git a/block-management/block-manager.js b/block-management/block-manager.js
@@ -11,7 +11,7 @@ import { ToolbarButton } from './constants';
 type PropsType = {};
 type StateType = {
 	refresh: boolean,
-	blocks: Array<{ key: string, blockType: string, content: string }>,
+	blocks: Array<{ key: string, blockType: string, content: string, focused: boolean }>,
 };
 
 export default class BlockManager extends React.Component<PropsType, StateType> {
@@ -26,36 +26,52 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 					key: '0',
 					blockType: 'title',
 					content: 'Hello World',
+					focused: false,
 				},
 				{
 					key: '1',
 					blockType: 'paragraph',
 					content:
 						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+					focused: false,
 				},
 				{
 					key: '2',
 					blockType: 'paragraph',
 					content:
 						'書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。',
+					focused: false,
 				},
 				{
 					key: '3',
 					blockType: 'code',
 					content: 'if name == "World":\n    return "Hello World"\nelse:\n    return "Hello Pony"',
+					focused: false,
 				},
 				{
 					key: '4',
 					blockType: 'paragraph',
 					content:
 						'Лорем ипсум долор сит амет, адиписци трацтатос еа еум. Меа аудиам малуиссет те, хас меис либрис елеифенд ин. Нец ех тота деленит сусципит. Яуас порро инструцтиор но нец.',
+					focused: false,
 				},
 			],
 		};
 	}
 
+	onBlockHolderPressed( rowId: number ) {
+		var blocks = this.state.blocks;
+		const currentBlockState = blocks[ rowId ].focused;
+		// Deselect all blocks
+		for ( let block of blocks ) {
+			block.focused = false;
+		}
+		// Select or deselect pressed block
+		blocks[ rowId ].focused = ! currentBlockState;
+		this.setState( { blocks: blocks, refresh: ! this.state.refresh } );
+	}
+
 	onToolbarButtonPressed( button: number, index: number ) {
-		console.log( 'Button: ' + button + ' - index: ' + index );
 		var blocks = this.state.blocks;
 		switch ( button ) {
 			case ToolbarButton.UP:
@@ -95,12 +111,14 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	}
 
 	renderItem( value: {
-		item: { key: string, blockType: string, content: string },
+		item: { key: string, blockType: string, content: string, focused: boolean },
 		index: number,
 	} ) {
 		return (
 			<BlockHolder
 				onToolbarButtonPressed={ this.onToolbarButtonPressed.bind( this ) }
+				onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) }
+				focused={ value.item.focused }
 				index={ value.index }
 				{ ...value.item }
 			/>