Merge pull request #10 from testshallpass/add-render-props

Add render props

Author: testshallpass

README.md

@@ -55,4 +55,6 @@ valueChanged(value) {
 | ```activeOpacity``` | Number  | touch opacity | 0.4
 | ```disabledOpacity``` | Number  | when step button is disabled | 0.5
 | ```disabled``` | Boolean  | stepper disable state | false
+| ```renderIncrement``` | Function  | render increment component(s) | null
+| ```renderDecrement``` | Function  | render decrement component(s) | null
 

SimpleStepper.js

@@ -20,7 +20,9 @@ export default class SimpleStepper extends Component {
     disabledOpacity: PropTypes.number,
     incrementImage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     decrementImage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    renderDecrement: PropTypes.func,
+    renderIncrement: PropTypes.func
   };
   static defaultProps = {
     initialValue: 0,
@@ -39,7 +41,9 @@ export default class SimpleStepper extends Component {
     imageWidth: 36,
     activeOpacity: 0.4,
     disabledOpacity: 0.5,
-    disabled: false
+    disabled: false,
+    renderDecrement: null,
+    renderIncrement: null
   };
   constructor(props) {
     super(props);
@@ -221,6 +225,27 @@ export default class SimpleStepper extends Component {
     }
     return null;
   }
+  renderImage(renderProp, style, tintStyle, opacity, src) {
+    if (typeof renderProp == "function") {
+      const data = {
+        "style": style,
+        "tintStyle": tintStyle,
+        "opacity": opacity,
+        "source": src
+      }
+      return renderProp(data)
+    }
+    return (
+      <Image
+        style={[
+          style,
+          tintStyle,
+          { opacity: opacity }
+        ]}
+        source={src}
+       />
+    )
+  }
   render() {
     const {
       imageWidth,
@@ -233,18 +258,20 @@ export default class SimpleStepper extends Component {
       tintColor,
       backgroundColor,
       activeOpacity,
-      disabled
+      disabled,
+      renderDecrement,
+      renderIncrement,
     } = this.props;
-    var tintIncrementStyle = this.tintStyle(tintOnIncrementImage);
-    var tintDecrementStyle = this.tintStyle(tintOnDecrementImage);
-    var decrementImageSrc = this.imageSrc(decrementImage, "decrement");
-    var incrementImageSrc = this.imageSrc(incrementImage, "increment");
-    var incrementStyle = this.imageStyle(
+    const tintIncrementStyle = this.tintStyle(tintOnIncrementImage);
+    const tintDecrementStyle = this.tintStyle(tintOnDecrementImage);
+    const decrementImageSrc = this.imageSrc(decrementImage, "decrement");
+    const incrementImageSrc = this.imageSrc(incrementImage, "increment");
+    const incrementStyle = this.imageStyle(
       incrementImage,
       imageWidth,
       imageHeight
     );
-    var decrementStyle = this.imageStyle(
+    const decrementStyle = this.imageStyle(
       decrementImage,
       imageWidth,
       imageHeight
@@ -272,14 +299,9 @@ export default class SimpleStepper extends Component {
           onPress={this.decrementAction}
           disabled={hasReachedMin || disabled}
         >
-          <Image
-            style={[
-              decrementStyle,
-              tintDecrementStyle,
-              { opacity: decrementOpacity }
-            ]}
-            source={decrementImageSrc}
-          />
+        <View> 
+          {this.renderImage(renderDecrement, decrementStyle, tintDecrementStyle, decrementOpacity, decrementImageSrc)}
+        </View>
         </TouchableOpacity>
         <TouchableOpacity
           ref={ref => this.incrementButton = ref}
@@ -291,14 +313,9 @@ export default class SimpleStepper extends Component {
           onPress={this.incrementAction}
           disabled={hasReachedMax || disabled}
         >
-          <Image
-            style={[
-              incrementStyle,
-              tintIncrementStyle,
-              { opacity: incrementOpacity }
-            ]}
-            source={incrementImageSrc}
-          />
+        <View> 
+          {this.renderImage(renderIncrement, incrementStyle, tintIncrementStyle, incrementOpacity, incrementImageSrc)}
+        </View>        
         </TouchableOpacity>
       </View>
     );

__tests__/SimpleStepper-test.js

@@ -1,4 +1,4 @@
-import 'react-native';
+import {Image} from 'react-native';
 import React from 'react';
 import SimpleStepper from '../SimpleStepper';
 import renderer from 'react-test-renderer';
@@ -44,7 +44,7 @@ test('tintColor to be blue', () => {
 test('tintColor to be null', () => {
   const wrapper = shallow(<SimpleStepper />)
   const tintStyle = wrapper.instance().tintStyle(false)
-  expect(tintStyle).toEqual(null)
+  expect(tintStyle).toBeNull()
 });
 test('increment type imageSrc to be uri object', () => {
   const wrapper = shallow(<SimpleStepper />)
@@ -59,7 +59,7 @@ test('increment type imageSrc to be local asset number', () => {
 test('increment type imageSrc to be null', () => {
   const wrapper = shallow(<SimpleStepper />)
   const imageSrc = wrapper.instance().imageSrc(null, 'increment')
-  expect(imageSrc).toEqual(null)
+  expect(imageSrc).toBeNull()
 });
 test('decrement type imageSrc to be local asset number', () => {
   const wrapper = shallow(<SimpleStepper />)
@@ -69,7 +69,7 @@ test('decrement type imageSrc to be local asset number', () => {
 test('decrement type imageSrc to be undefined', () => {
   const wrapper = shallow(<SimpleStepper />)
   const imageSrc = wrapper.instance().imageSrc(undefined, 'decrement')
-  expect(imageSrc).toEqual(undefined)
+  expect(imageSrc).toBeUndefined()
 });
 test('unknown type imageSrc to be empty string', () => {
   const wrapper = shallow(<SimpleStepper />)
@@ -79,10 +79,20 @@ test('unknown type imageSrc to be empty string', () => {
 test('imageStyle to be null', () => {
   const wrapper = shallow(<SimpleStepper />)
   const imageStyle = wrapper.instance().imageStyle(null, 36, 36)
-  expect(imageStyle).toEqual(null)
+  expect(imageStyle).toBeNull()
 });
 test('imageStyle to be style object', () => {
   const wrapper = shallow(<SimpleStepper />)
   const imageStyle = wrapper.instance().imageStyle('https://facebook.github.io/react/img/logo_og.png', 69, 69)
   expect(imageStyle).toEqual({width: 69, height: 69})
+});
+test('renderImage to be Image', () => {
+  const wrapper = shallow(<SimpleStepper />)
+  const renderImage = wrapper.instance().renderImage('eeeee', {}, {}, 1, 1)
+  expect(renderImage).toEqual(<Image source={1} style={[{}, {}, {opacity: 1}]} />)
+});
+test('renderImage to be Mock Function', () => {
+  const wrapper = shallow(<SimpleStepper />)
+  const renderImage = wrapper.instance().renderImage(jest.fn, {}, {}, 1, 1)
+  expect(jest.isMockFunction(renderImage)).toEqual(true)
 });

__tests__/__snapshots__/SimpleStepper-test.js.snap

@@ -40,19 +40,21 @@ exports[`test renders correctly 1`] = `
     }
     testID={undefined}
     tvParallaxProperties={undefined}>
-    <Image
-      source={1}
-      style={
-        Array [
-          null,
-          Object {
-            "tintColor": "blue",
-          },
-          Object {
-            "opacity": 0.5,
-          },
-        ]
-      } />
+    <View>
+      <Image
+        source={1}
+        style={
+          Array [
+            null,
+            Object {
+              "tintColor": "blue",
+            },
+            Object {
+              "opacity": 0.5,
+            },
+          ]
+        } />
+    </View>
   </View>
   <View
     accessibilityComponentType={undefined}
@@ -82,19 +84,21 @@ exports[`test renders correctly 1`] = `
     }
     testID={undefined}
     tvParallaxProperties={undefined}>
-    <Image
-      source={1}
-      style={
-        Array [
-          null,
-          Object {
-            "tintColor": "blue",
-          },
-          Object {
-            "opacity": 1,
-          },
-        ]
-      } />
+    <View>
+      <Image
+        source={1}
+        style={
+          Array [
+            null,
+            Object {
+              "tintColor": "blue",
+            },
+            Object {
+              "opacity": 1,
+            },
+          ]
+        } />
+    </View>
   </View>
 </View>
 `;