Feature/inserter modal

package.json

@@ -91,6 +91,7 @@
  "node-sass": "^4.8.3",
  "react": "16.3.1",
  "react-native": "0.55.4",
+ "react-native-modal": "^6.5.0",
  "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#bfccbaab6b5954e18f8b0ed441ba38275853b79c",
  "react-native-svg": "^6.5.2",
  "react-redux": "^5.0.7",

src/block-management/block-manager.js

@@ -4,14 +4,15 @@
  */
 
 import React from 'react';
-import { Platform, Switch, Text, View, FlatList, Picker, TextInput, KeyboardAvoidingView } from 'react-native';
+import { Platform, Switch, Text, View, FlatList, TextInput, KeyboardAvoidingView } from 'react-native';
 import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list';
 import BlockHolder from './block-holder';
 import { ToolbarButton } from './constants';
 import type { BlockType } from '../store/';
 import styles from './block-manager.scss';
+import BlockPicker from './block-picker';
 // Gutenberg imports
-import { getBlockType, getBlockTypes, serialize, createBlock } from '@wordpress/blocks';
+import { getBlockType, serialize, createBlock } from '@wordpress/blocks';
 
 export type BlockListType = {
  onChange: ( clientId: string, attributes: mixed ) => void,
@@ -36,8 +37,6 @@ type StateType = {
 };
 
 export default class BlockManager extends React.Component<PropsType, StateType> {
- availableBlockTypes = getBlockTypes();
-
  constructor( props: PropsType ) {
  super( props );
  this.state = {
@@ -75,8 +74,8 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 
  // TODO: in the near future this will likely be changed to onShowBlockTypePicker and bound to this.props
  // once we move the action to the toolbar
- showBlockTypePicker() {
- this.setState( { ...this.state, blockTypePickerVisible: true } );
+ showBlockTypePicker( show: boolean ) {
+ this.setState( { ...this.state, blockTypePickerVisible: show } );
  }
 
  onBlockTypeSelected( itemValue: string ) {
@@ -125,7 +124,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
  this.props.deleteBlockAction( clientId );
  break;
  case ToolbarButton.PLUS:
- this.showBlockTypePicker();
+ this.showBlockTypePicker( true );
  break;
  case ToolbarButton.SETTINGS:
  // TODO: implement settings
@@ -201,17 +200,14 @@ export default class BlockManager extends React.Component<PropsType, StateType>
  }
 
  const blockTypePicker = (
- <View>
- <Picker
- selectedValue={ this.state.selectedBlockType }
- onValueChange={ ( itemValue ) => {
- this.onBlockTypeSelected( itemValue );
- } } >
- { this.availableBlockTypes.map( ( item, index ) => {
- return ( <Picker.Item label={ item.title } value={ item.name } key={ index + 1 } /> );
- } ) }
- </Picker>
- </View>
+ <BlockPicker
+ visible={ this.state.blockTypePickerVisible }
+ onDismiss={ () => {
+ this.showBlockTypePicker( false );
+ } }
+ onValueSelected={ ( itemValue ) => {
+ this.onBlockTypeSelected( itemValue );
+ } } />
  );
 
  return (
@@ -228,7 +224,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
  </View>
  { this.state.showHtml && this.renderHTML() }
  { ! this.state.showHtml && list }
- { this.state.blockTypePickerVisible && blockTypePicker }
+ { blockTypePicker }
  </View>
  );
  }
@@ -249,16 +245,27 @@ export default class BlockManager extends React.Component<PropsType, StateType>
  }
 
  renderItem( value: { item: BlockType, clientId: string } ) {
+ const insertHere = (
+ <View style={ styles.containerStyleAddHere } >
+ <View style={ styles.lineStyleAddHere }></View>
+ <Text style={ styles.labelStyleAddHere } >ADD BLOCK HERE</Text>
+ <View style={ styles.lineStyleAddHere }></View>
+ </View>
+ );
+
  return (
- <BlockHolder
- key={ value.clientId }
- onToolbarButtonPressed={ this.onToolbarButtonPressed.bind( this ) }
- onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) }
- onChange={ this.onChange.bind( this ) }
- focused={ value.item.focused }
- clientId={ value.clientId }
- { ...value.item }
- />
+ <View>
+ <BlockHolder
+ key={ value.clientId }
+ onToolbarButtonPressed={ this.onToolbarButtonPressed.bind( this ) }
+ onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) }
+ onChange={ this.onChange.bind( this ) }
+ focused={ value.item.focused }
+ clientId={ value.clientId }
+ { ...value.item }
+ />
+ { this.state.blockTypePickerVisible && value.item.focused && insertHere }
+ </View>
  );
  }
 

src/block-management/block-manager.scss

@@ -27,3 +27,24 @@
  flex-direction: row;
  justify-content: flex-start;
 }
+
+.lineStyleAddHere {
+ flex: 1;
+ background-color: #0087be; // blue_wordpress
+ align-self: center;
+ height: 2px;
+}
+
+.labelStyleAddHere {
+ flex: 1;
+ text-align: center;
+ font-family: $default-monospace-font;
+ font-size: 12px;
+ font-weight: bold;
+}
+
+.containerStyleAddHere {
+ flex: 1;
+ flex-direction: row;
+ background-color: white;
+}

src/block-management/block-picker.js

@@ -0,0 +1,77 @@
+/**
+ * @format
+ * @flow
+ */
+import React, { Component } from 'react';
+import { FlatList, Text, TouchableHighlight, View } from 'react-native';
+import Modal from 'react-native-modal';
+import styles from './block-picker.scss';
+// Gutenberg imports
+import { getBlockTypes } from '@wordpress/blocks';
+
+type PropsType = {
+ visible: boolean,
+ style?: StyleSheet,
+ onValueSelected: ( itemValue: string, itemIndex: number ) => void,
+ onDismiss: () => void,
+};
+
+// TODO: not used for now - will hold currently selected Block Type, probably makes sense for the inspector
+type StateType = {
+ selectedIndex: number,
+};
+
+export default class BlockPicker extends Component<PropsType, StateType> {
+ availableBlockTypes = getBlockTypes();
+
+ constructor( props: PropsType ) {
+ super( props );
+ this.state = {
+ selectedIndex: 0,
+ };
+ }
+
+ render() {
+ return (
+ <Modal
+ animationType="slide"
+ transparent={ true }
+ isVisible={ this.props.visible }
+ onSwipe={ this.props.onDismiss.bind( this ) }
+ swipeDirection="down"
+ style={ [ styles.bottomModal, this.props.style ] }
+ backdropColor={ 'lightgrey' }
+ backdropOpacity={ 0.4 }
+ onBackdropPress={ this.props.onDismiss.bind( this ) }>
+ <View style={ styles.modalContent }>
+ <View style={ styles.shortLineStyle } />
+ <View>
+ <Text style={ styles.title }>ADD BLOCK</Text>
+ </View>
+ <View style={ styles.lineStyle } />
+ <FlatList
+ numColumns={ 3 }
+ data={ this.availableBlockTypes }
+ keyExtractor={ ( item ) => item.name }
+ renderItem={ ( { item } ) =>
+ <TouchableHighlight
+ style={ styles.touchableArea }
+ underlayColor={ 'transparent' }
+ activeOpacity={ .5 }
+ onPress={ this.props.onValueSelected.bind( this, item.name ) }>
+ <View style={ styles.modalItem }>
+ <View style={ styles.modalIcon }>
+ { /* TODO: ICON IMAGE GOES HERE */ }
+ { /* <Text>{ item.icon.src }</Text> */ }
+ <Text>icon</Text>
+ </View>
+ <Text style={ styles.modalItemLabel }>{ item.title }</Text>
+ </View>
+ </TouchableHighlight>
+ }
+ />
+ </View>
+ </Modal>
+ );
+ }
+}

src/block-management/block-picker.scss

@@ -0,0 +1,76 @@
+/** @format */
+
+@import '../variables.scss';
+
+.title {
+ font-family: $default-monospace-font;
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 8px;
+}
+
+.lineStyle {
+ border-bottom-color: lightgray;
+ border-bottom-width: 1px;
+ width: 100%;
+}
+
+.shortLineStyle {
+ border-bottom-color: lightgray;
+ border-bottom-width: 2px;
+ margin-bottom: 8px;
+ width: 40px;
+}
+
+.bottomModal {
+ justify-content: flex-end;
+ margin: 0px;
+}
+
+.touchableArea {
+ border-radius: 4px 4px 4px 4px;
+}
+
+.modalContent {
+ background-color: white;
+ padding-top: 8;
+ padding-bottom: 8;
+ justify-content: center;
+ align-items: center;
+ border-radius: 10px 10px 0px 0px;
+ border-color: grey;
+ border-width: 1px;
+}
+
+.modalItem { 
+ flex: 1 1 auto;
+ margin: 5px;
+ width: 100px;
+ align-self: stretch;
+ justify-content: center;
+ align-items: center;
+}
+
+.modalIcon {
+ flex: 1 1 auto;
+ background-color: lightgray;
+ padding-left: 8;
+ padding-right: 8;
+ padding-top: 8;
+ padding-bottom: 8;
+ margin: 4px;
+ width: 72px;
+ height: 48px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px 4px 4px 4px;
+}
+
+.modalItemLabel {
+ background-color: transparent;
+ padding-left: 2;
+ padding-right: 2;
+ padding-top: 2;
+ padding-bottom: 2;
+ justify-content: center;
+}

yarn.lock

@@ -6214,7 +6214,7 @@ promise@^7.0.3, promise@^7.1.1:
  dependencies:
  asap "~2.0.3"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  dependencies:
@@ -6334,6 +6334,12 @@ react-is@^16.3.1:
  version "16.4.2"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88"
 
+react-native-animatable@^1.2.4:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.0.tgz#b5c3940fc758cfd9b2fe54613a457c4b6962b46e"
+ dependencies:
+ prop-types "^15.5.10"
+
 react-native-crypto@^2.0.1:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/react-native-crypto/-/react-native-crypto-2.1.2.tgz#cfe68cad51cd1f73a4202b7ac164f96c1144cb2a"
@@ -6348,6 +6354,13 @@ react-native-crypto@^2.0.1:
  pbkdf2 "3.0.8"
  public-encrypt "^4.0.0"
 
+react-native-modal@^6.5.0:
+ version "6.5.0"
+ resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-6.5.0.tgz#46220b2289a41597d344c1db17454611b426a758"
+ dependencies:
+ prop-types "^15.6.1"
+ react-native-animatable "^1.2.4"
+
 react-native-randombytes@^2.2.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/react-native-randombytes/-/react-native-randombytes-2.3.0.tgz#3ed6f8a4a803c453d787961047f6b2650d7c7335"