Use ES2015 classes for subcomponents instead of imported render functions

src/common/components/App.js

@@ -1,11 +1,11 @@
 'use strict';
 
-import Render from './AppRender';
+import AppRender from './AppRender';
 
 import { Component } from 'react';
 
 export default class App extends Component {
   render () {
-    return Render.call(this, this.props, this.state);
+    return <AppRender />;
   }
 }

src/common/components/AppRender.ios.js

@@ -5,24 +5,27 @@ import Formulae from './Formulae';
 import Keyboard from './Keyboard';
 
 import React, {
+  Component,
   StyleSheet,
   View
 } from 'react-native';
 
-export default function () {
-  return (
-    <View style={styles.container}>
-      <View style={styles.screen} >
-        <Screen />
+export default class AppRender extends Component {
+  Render () {
+    return (
+      <View style={styles.container}>
+        <View style={styles.screen} >
+          <Screen />
+        </View>
+        <View style={styles.formulae}>
+          <Formulae />
+        </View>
+        <View style={styles.keyboard}>
+          <Keyboard />
+        </View>
       </View>
-      <View style={styles.formulae}>
-        <Formulae />
-      </View>
-      <View style={styles.keyboard}>
-        <Keyboard />
-      </View>
-    </View>
-  );
+    );
+  }
 }
 
 var styles = StyleSheet.create({

src/common/components/AppRender.js

@@ -1,16 +1,18 @@
 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
 import Screen from './Screen';
 import Formulae from './Formulae';
 import Keyboard from './Keyboard';
 
-export default function () {
-  return (
-    <div className='main'>
-      <Screen />
-      <Formulae />
-      <Keyboard />
-    </div>
-  );
+export default class AppRender extends Component () {
+  Render () {
+    return (
+      <div className='main'>
+        <Screen />
+        <Formulae />
+        <Keyboard />
+      </div>
+    );
+  }
 }

src/common/components/Formulae.js

@@ -1,14 +1,10 @@
 'use strict';
 
 import Base from './FormulaeBase';
-import Render from './FormulaeRender';
+import FormulaeRender from './FormulaeRender';
 
 export default class Formulae extends Base {
-  constructor (props) {
-    super(props);
-  }
-
   render () {
-    return Render.call(this, this.props, this.state);
+    return <FormulaeRender />;
   }
 }

src/common/components/FormulaeRender.ios.js

@@ -1,22 +1,25 @@
 'use strict';
 
 import React, {
+  Component,
   StyleSheet,
   Text,
   View,
   TouchableHighlight
 } from 'react-native';
 
-export default function (props, state) {
-  return (
-    <View style={styles.formulae}>
-      {this.state.displayFormulae.map(function(formula) {
-        return <TouchableHighlight style={getFormulaStyles(formula.operator)} onPress={this.handleClick.bind(this, formula)} underlayColor='#cdcdcd'>
-          <Text style={styles.text}>{formula.literal}</Text>
-        </TouchableHighlight>
-      }, this)}
-    </View>
-  );
+export default class FormulaeRender extends Component {
+  Render () {
+    return (
+      <View style={styles.formulae}>
+        {this.state.displayFormulae.map(function(formula) {
+          return <TouchableHighlight style={getFormulaStyles(formula.operator)} onPress={this.handleClick.bind(this, formula)} underlayColor='#cdcdcd'>
+            <Text style={styles.text}>{formula.literal}</Text>
+          </TouchableHighlight>
+        }, this)}
+      </View>
+    );
+  }
 }
 
 var getFormulaStyles = function(operator) {

src/common/components/FormulaeRender.js

@@ -2,12 +2,14 @@
 
 import React from 'react';
 
-export default function (props, state) {
-  return (
-    <div className='formulae'>
-      {state.displayFormulae.map(function(formula) {
-        return <span key={formula.id} onClick={this.handleClick.bind(this, formula)} className={this.dynamicClass(formula.operator)}>{formula.literal}</span>
-      }, this)}
-    </div>
-  );
+export default class FormulaeRender extends Component {
+  Render () {
+    return (
+      <div className='formulae'>
+        {state.displayFormulae.map(function(formula) {
+          return <span key={formula.id} onClick={this.handleClick.bind(this, formula)} className={this.dynamicClass(formula.operator)}>{formula.literal}</span>
+        }, this)}
+      </div>
+    );
+  }
 }

src/common/components/Key.js

@@ -1,14 +1,10 @@
 'use strict';
 
 import Base from './KeyBase';
-import Render from './KeyRender';
+import KeyRender from './KeyRender';
 
 export default class Key extends Base {
-  constructor (props) {
-    super(props);
-  }
-
   render () {
-    return Render.call(this, this.props, this.state);
+    return <KeyRender />;
   }
 }

src/common/components/KeyRender.ios.js

@@ -1,43 +1,46 @@
 'use strict';
 
 import React, {
+  Component,
   StyleSheet,
   Text,
   View,
   TouchableHighlight
 } from 'react-native';
 
-export default function () {
-  if(this.props.keyType === 'number') {
-    return (
-      <View style={styles.keyNumber}>
-        <TouchableHighlight style={styles.button} onPress={this.handleClick} underlayColor='#cdcdcd'>
-          <Text style={styles.textButton}>
-            {this.props.keySymbol}
-          </Text>
-        </TouchableHighlight>
-      </View>
-    );
-  } else if(this.props.keyType === 'operator') {
-    return (
-      <View style={styles.keyOperator}>
-        <TouchableHighlight style={getOperatorStyles(this.props.keyValue)} onPress={this.handleClick} underlayColor='#cdcdcd'>
-          <Text style={styles.textButtonOperator}>
-            {this.props.keySymbol}
-          </Text>
-        </TouchableHighlight>
-      </View>
-    );
-  } else if(this.props.keyType === 'action') {
-    return (
-      <View style={styles.keyAction}>
-        <TouchableHighlight style={getActionStyles(this.props.keyValue)} onPress={this.handleClick} underlayColor='#cdcdcd'>
-          <Text style={getActionButtonStyles(this.props.keyValue)}>
-            {this.props.keySymbol}
-          </Text>
-        </TouchableHighlight>
-      </View>
-    );
+export default class KeyRender extends Component {
+  Render () {
+    if(this.props.keyType === 'number') {
+      return (
+        <View style={styles.keyNumber}>
+          <TouchableHighlight style={styles.button} onPress={this.handleClick} underlayColor='#cdcdcd'>
+            <Text style={styles.textButton}>
+              {this.props.keySymbol}
+            </Text>
+          </TouchableHighlight>
+        </View>
+      );
+    } else if(this.props.keyType === 'operator') {
+      return (
+        <View style={styles.keyOperator}>
+          <TouchableHighlight style={getOperatorStyles(this.props.keyValue)} onPress={this.handleClick} underlayColor='#cdcdcd'>
+            <Text style={styles.textButtonOperator}>
+              {this.props.keySymbol}
+            </Text>
+          </TouchableHighlight>
+        </View>
+      );
+    } else if(this.props.keyType === 'action') {
+      return (
+        <View style={styles.keyAction}>
+          <TouchableHighlight style={getActionStyles(this.props.keyValue)} onPress={this.handleClick} underlayColor='#cdcdcd'>
+            <Text style={getActionButtonStyles(this.props.keyValue)}>
+              {this.props.keySymbol}
+            </Text>
+          </TouchableHighlight>
+        </View>
+      );
+    }
   }
 }
 

src/common/components/KeyRender.js

@@ -1,36 +1,38 @@
 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
 
-export default function (props, state) {
-  var classString = 'key key-' + props.keyType;
-  if(state.isHighlighted) {
-    classString += ' highlight';
-  }
-  var classOperation = '';
-  if(props.keyType === 'operator') {
-    classOperation = 'operator ' + props.keyValue;
-  }
-  if(props.keyType === 'action') {
-    classOperation = 'action ' + props.keyValue;
-  }
-  if(props.keyType === 'number') {
-    return (
-      <div className={classString}
-          onClick={this.handleClick}
-          onMouseDown={this.onMouseDown}
-          onMouseUp={this.onMouseUp}>
-        <div className={classOperation}>{props.keySymbol}</div>
-      </div>
-    );
-  } else {
-    return (
-      <div className={classString}>
-        <div className={classOperation}
-          onClick={this.handleClick}
-          onMouseDown={this.onMouseDown}
-          onMouseUp={this.onMouseUp}>{props.keySymbol}</div>
-      </div>
-    );
+export default class KeyRender extends Component {
+  Render () {
+    var classString = 'key key-' + props.keyType;
+    if(state.isHighlighted) {
+      classString += ' highlight';
+    }
+    var classOperation = '';
+    if(props.keyType === 'operator') {
+      classOperation = 'operator ' + props.keyValue;
+    }
+    if(props.keyType === 'action') {
+      classOperation = 'action ' + props.keyValue;
+    }
+    if(props.keyType === 'number') {
+      return (
+        <div className={classString}
+            onClick={this.handleClick}
+            onMouseDown={this.onMouseDown}
+            onMouseUp={this.onMouseUp}>
+          <div className={classOperation}>{props.keySymbol}</div>
+        </div>
+      );
+    } else {
+      return (
+        <div className={classString}>
+          <div className={classOperation}
+            onClick={this.handleClick}
+            onMouseDown={this.onMouseDown}
+            onMouseUp={this.onMouseUp}>{props.keySymbol}</div>
+        </div>
+      );
+    }
   }
 }

src/common/components/Keyboard.js

@@ -1,11 +1,11 @@
 'use strict';
 
-import Render from './KeyboardRender';
+import KeyboardRender from './KeyboardRender';
 
 import { Component } from 'react';
 
 export default class Keyboard extends Component {
   render () {
-    return Render.call(this, this.props, this.state);
+    return <KeyboardRender />;
   }
 }