mobile components

Author: csepulv

color-mobile/ColorMobileSearchBox.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+ StyleSheet,
+ View,
+ TextInput,
+ ListView,
+ Text
+} from 'react-native';
+
+import MobileSearchBox from './MobileSearchBox';
+
+const styles = StyleSheet.create({
+ row: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ padding: 10
+ },
+ text: {
+ flex: 1,
+ }
+});
+
+const ColorListItem = ({result})=>{
+ return (
+ <View style={[styles.row, {backgroundColor: result.hex}]}>
+ <Text style={styles.text}>{result.name}</Text>
+ </View>
+ )
+};
+const ColorSearchBox = MobileSearchBox(ColorListItem);
+export default ColorSearchBox;

color-mobile/MobileSearchBox.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+ StyleSheet,
+ View,
+} from 'react-native';
+
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#eeeeee',
+ marginTop: 25
+ }
+});
+
+import MobileSearchInput from './MobileSearchInput';
+import MobileSearchResults from './MobileSearchResults';
+
+import SearchBox from './SearchBox'
+
+const MobileSearchFrame = ({children}) => {
+ return (
+ <View style={styles.container}>
+ {children}
+ </View>
+ );
+};
+
+const MobileSearchBox = ListItem => SearchBox(MobileSearchFrame, MobileSearchInput, MobileSearchResults(ListItem));
+
+export default MobileSearchBox

color-mobile/MobileSearchInput.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {TextInput} from 'react-native';
+
+const MobileSearchInput = ({query, onSubmit, onQueryUpdate}) => {
+
+ return (
+ <TextInput
+ style={{height: 40, paddingLeft: 8, borderColor: 'gray', borderWidth: 1}}
+ onChangeText={(text) => onQueryUpdate(text)}
+ value={query}
+ returnKeyType={'search'}
+ onSubmitEditing={() => onSubmit()}
+ />
+ );
+};
+
+MobileSearchInput.propTypes = {
+ query: React.PropTypes.string.isRequired,
+ onSubmit: React.PropTypes.func.isRequired,
+ onQueryUpdate: React.PropTypes.func.isRequired
+};
+
+export default MobileSearchInput;

color-mobile/MobileSearchResults.js

@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import {
+ StyleSheet,
+ View,
+ TextInput,
+ ListView,
+ Text
+} from 'react-native';
+const styles = StyleSheet.create({
+ separator: {
+ flex: 1,
+ height: 1,
+ backgroundColor: '#8E8E8E',
+ }
+});
+const dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.name !== r2.name});
+const MobileSearchResults = ListItem => {
+ return class extends Component {
+ // constructor(props) {
+ // super(props);
+ // this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.name !== r2.name});
+ // }
+
+ static propTypes = {
+ results: React.PropTypes.array.isRequired
+ };
+
+ renderRow = (rowData, sectionId, rowID) => {
+ return (
+ <ListItem result={rowData}/>
+ );
+ };
+
+ render() {
+ return (
+ <ListView enableEmptySections={true}
+ dataSource={ dataSource.cloneWithRows(this.props.results)}
+ renderRow={this.renderRow}
+ renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>}
+ />
+ );
+ }
+ };
+};
+
+export default MobileSearchResults;

color-mobile/SearchBox.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+
+import {observer} from 'mobx-react';
+
+const SearchBox = (SearchFrame, SearchInput, SearchResults) => {
+ return observer(class extends Component {
+ static propTypes = {
+ searchStore: React.PropTypes.object.isRequired
+ };
+
+ render() {
+ return (
+ <SearchFrame>
+ <SearchInput query={this.props.searchStore.query}
+ onQueryUpdate={value => this.props.searchStore.updateQuery(value)}
+ onSubmit={() => this.props.searchStore.search()}
+ />
+ <SearchResults results={this.props.searchStore.results.slice()}/>
+ </SearchFrame>
+ );
+ }
+ });
+};
+
+
+export default SearchBox

color-mobile/__tests__/SearchView.js

@@ -1,5 +1,5 @@
 import {extendObservable, runInAction} from 'mobx';
-import crayola from './resources/crayola.json'
+import crayola from './crayola.json'
 
 export default class Colors {
  constructor() {

color-mobile/colors.js

@@ -6,17 +6,17 @@
 
 import React, {Component} from 'react';
 import {AppRegistry} from 'react-native';
-import SearchView from './SearchView'
 
 import Colors from './colors';
-const colors = new Colors();
 
-export default class SearchBoxMobile extends Component {
+import ColorMobileSearchBox from './ColorMobileSearchBox';
+
+export default class App extends Component {
 
  render() {
  return (
- <SearchView colors={colors}/>
+ <ColorMobileSearchBox searchStore={new Colors()}/>
  );
  }
 }
-AppRegistry.registerComponent('SearchBoxMobile', () => SearchBoxMobile);
+AppRegistry.registerComponent('SearchBoxMobile', () => App);

color-mobile/resources/crayola.json color-mobile/crayola.jsoncolor-mobile/resources/crayola.json renamed to color-mobile/crayola.json

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+ StyleSheet,
+ View,
+} from 'react-native';
+
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#eeeeee',
+ marginTop: 25
+ }
+});
+
+import MobileSearchInput from './MobileSearchInput';
+import MobileSearchResults from './MobileSearchResults';
+
+import SearchBox from './SearchBox'
+
+const MobileSearchFrame = ({children}) => {
+ return (
+ <View style={styles.container}>
+ {children}
+ </View>
+ );
+};
+
+const MobileSearchBox = ListItem => SearchBox(MobileSearchFrame, MobileSearchInput, MobileSearchResults(ListItem));
+
+export default MobileSearchBox