Adds OSX version of IconExplorer.

Examples/IconExplorer/IconList.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 import {
+  DeviceEventEmitter,
   ListView,
   Platform,
   StyleSheet,
   Text,
   TextInput,
   View,
-} from 'react-native';
+} from './react-native';
 
 const styles = StyleSheet.create({
   container: {
@@ -45,7 +46,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export default class ColoredView extends Component {
+export default class IconList extends Component {
   constructor(props) {
     super(props);
 
@@ -56,15 +57,41 @@ export default class ColoredView extends Component {
     };
   }
 
-  searchIcons(query) {
-    const glyphs = this.props.iconSet.glyphs.filter(glyph => {
+  componentDidMount() {
+    if (Platform.OS === 'osx') {
+      this._searchListner =  DeviceEventEmitter.addListener('onSearchIcons',
+        (e) => this.searchIcons(e.query.toLowerCase())
+      );
+      console.log({_searchListner: this._searchListner})
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._searchListner) {
+      this._searchListner.remove();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const glyphs = this.getFilteredGlyphs(nextProps.iconSet, this.state.filter);
+    this.setState({
+      dataSource: this.state.dataSource.cloneWithRows(glyphs),
+    });
+  }
+
+  getFilteredGlyphs(iconSet, query) {
+    return iconSet.glyphs.filter(glyph => {
       for (let i = 0; i < glyph.length; i++) {
         if (glyph[i].indexOf(query) !== -1) {
           return true;
         }
       }
       return false;
     });
+  }
+
+  searchIcons(query) {
+    const glyphs = this.getFilteredGlyphs(this.props.iconSet, query);
 
     this.setState({
       filter: query,
@@ -80,18 +107,20 @@ export default class ColoredView extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <View style={styles.searchBar}>
-          <TextInput
-            autoCapitalize="none"
-            autoCorrect={false}
-            autoFocus={true}
-            onChange={event => this.handleSearchChange(event)}
-            placeholder="Search an icon..."
-            style={styles.searchBarInput}
-            onFocus={() =>
-              this.refs.listview && this.refs.listview.getScrollResponder().scrollTo(0, 0)}
-          />
-        </View>
+        {Platform.OS !== 'osx' && (
+          <View style={styles.searchBar}>
+            <TextInput
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoFocus={true}
+              onChange={event => this.handleSearchChange(event)}
+              placeholder="Search an icon..."
+              style={styles.searchBarInput}
+              onFocus={() =>
+                this.refs.listview && this.refs.listview.getScrollResponder().scrollTo(0, 0)}
+            />
+          </View>
+          )}
         <View style={styles.separator} />
         <ListView
           dataSource={this.state.dataSource}

Examples/IconExplorer/IconSetList.js

@@ -8,7 +8,7 @@ import {
   Text,
   TouchableHighlight,
   View,
-} from 'react-native';
+} from './react-native';
 
 import dismissKeyboard from 'dismissKeyboard';
 

Examples/IconExplorer/README.md

@@ -0,0 +1,8 @@
+IconExplorer
+============
+
+To run on OSX you must first install `react-native-desktop` with:
+
+```
+$ npm install [email protected]
+```

Examples/IconExplorer/index.osx.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import {
+  AppRegistry,
+  Dimensions,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native-desktop';
+
+import Icon from 'react-native-vector-icons/Ionicons';
+import IconSetList from './IconSetList';
+import IconList from './IconList';
+
+const LEFT_PANEL_WIDTH = 300;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  leftPanel: {
+    width: LEFT_PANEL_WIDTH,
+  },
+  rightPanel: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  welcomeWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  welcomeText: {
+    color: '#999',
+    fontSize: 20,
+  },
+});
+
+class Welcome extends Component {
+  render() {
+    return (
+      <View style={styles.welcomeWrapper}>
+        <Text style={styles.welcomeText}>Choose an icon set on the left side</Text>
+      </View>
+    );
+  }
+}
+
+class IconExplorer extends Component {
+
+  constructor() {
+    super();
+    this.state = {
+      iconSet: null,
+      layout: Dimensions.get('window'),
+    };
+  }
+
+  render() {
+    const { iconSet, iconSetTitle, layout } = this.state;
+
+    return (
+      <View style={styles.container} onLayout={(e) => this.setState({layout: e.nativeEvent.layout})}>
+        <View style={styles.leftPanel}>
+          <IconSetList navigator={{ push: (route) => this.setState({ iconSet: route.iconSet }) }}/>
+        </View>
+        <View style={[styles.rightPanel, { width: layout.width - LEFT_PANEL_WIDTH }]}>
+          {(iconSet
+            ? (<IconList iconSet={iconSet} />)
+            : (<Welcome />)
+          )}
+        </View>
+      </View>
+    );
+  }
+}
+
+AppRegistry.registerComponent('IconExplorer', () => IconExplorer);