Merge pull request #15 from Automattic/feature/load-code-block

Load code block

App.test.js

@@ -2,10 +2,28 @@
 
 import React from 'react';
 import App from './App';
+import BlockHolder from './block-management/block-holder';
 
 import renderer from 'react-test-renderer';
 
 it( 'renders without crashing', () => {
 	const rendered = renderer.create( <App /> ).toJSON();
 	expect( rendered ).toBeTruthy();
 } );
+
+it( 'Code block is a TextInput', () => {
+	renderer
+		.create( <App /> )
+		.root.findAllByType( BlockHolder )
+		.forEach( blockHolder => {
+			if ( blockHolder.props.blockType === 'code' ) {
+				// TODO: hardcoded indices are ugly and error prone. Can we do better here?
+				const blockHolderContainer = blockHolder.children[ 0 ].children[ 0 ].children[ 0 ];
+				const contentComponent = blockHolderContainer.children[ 1 ];
+				const inputComponent =
+					contentComponent.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ]
+						.children[ 0 ].children[ 0 ];
+				expect( inputComponent.type ).toBe( 'TextInput' );
+			}
+		} );
+} );

block-management/block-holder.js

@@ -7,6 +7,9 @@ import React from 'react';
 import { StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native';
 import Toolbar from './toolbar';
 
+// Gutenberg imports
+import { settings as codeBlock } from '../gutenberg/blocks/library/code';
+
 type PropsType = {
 	index: number,
 	blockType: string,
@@ -29,8 +32,23 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 		}
 	}
 
+	getBlockForType() {
+		if ( this.props.blockType === 'code' ) {
+			const Code = codeBlock.edit;
+			// TODO: input text needs to be kept by updating the attributes
+			return (
+				<Code
+					attributes={ { content: this.props.content } }
+					setAttributes={ attrs => console.log( { attrs } ) }
+				/>
+			);
+		} else {
+			// Default block placeholder
+			return <Text>{ this.props.content }</Text>;
+		}
+	}
+
 	render() {
-		// TODO: This is a place holder, this should call the edit() method of the block depending on this.props.blockType
 		return (
 			<TouchableWithoutFeedback
 				onPress={ this.props.onBlockHolderPressed.bind( this, this.props.index ) }
@@ -39,9 +57,7 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 					<View style={ styles.blockTitle }>
 						<Text>BlockType: { this.props.blockType }</Text>
 					</View>
-					<View style={ styles.blockContent }>
-						<Text>{ this.props.content }</Text>
-					</View>
+					<View style={ styles.blockContainer }>{ this.getBlockForType.bind( this )() }</View>
 					{ this.renderToolbarIfBlockFocused.bind( this )() }
 				</View>
 			</TouchableWithoutFeedback>
@@ -53,8 +69,10 @@ const styles = StyleSheet.create( {
 	blockHolder: {
 		flex: 1,
 	},
-	blockContent: {
+	blockContainer: {
 		backgroundColor: 'white',
+	},
+	blockContent: {
 		padding: 10,
 	},
 	blockTitle: {

jest.android.json

@@ -0,0 +1,15 @@
+{
+    "preset": "react-native",
+    "haste": {
+        "defaultPlatform": "android",
+        "platforms": [
+            "android",
+            "ios",
+            "native"
+        ],
+        "providesModuleNodeModules": [
+            "react-native"
+        ]
+    }
+}
+

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "@wordpress/babel-preset-default": "^1.1.2",
+    "cross-env": "^5.1.4",
     "flow-bin": "0.56.0",
     "jest-expo": "25.0.0",
     "prettier": "git+https://github.com/Automattic/calypso-prettier.git#calypso-1.9",
@@ -16,6 +18,7 @@
     "android": "react-native-scripts android",
     "ios": "react-native-scripts ios",
     "test": "node node_modules/jest/bin/jest.js",
+    "test-android": "cross-env NODE_ENV=test jest --config jest.android.json",
     "flow": "flow",
     "prettier": "prettier --write *.js *block-management/*.js",
     "prettier-check": "prettier -l *.js *block-management/*.js"
@@ -24,7 +27,9 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "expo": "^25.0.0",
+    "jed": "^1.1.1",
     "react": "16.2.0",
     "react-native": "0.52.0"
   }