From 7461b316dac1c1f481a0be9e04f44a6ab561a396 Mon Sep 17 00:00:00 2001
From: Alexander Tartmin <alexander@tartmin.name>
Date: Wed, 22 Apr 2020 15:40:01 +0300
Subject: [PATCH] Added props for custom icons inside `plus-minus` buttons

---
 NumericInput/NumericInput.js | 18 ++++++++++++++----
 README.md                    |  5 ++++-
 index.d.ts                   |  3 +++
 package.json                 |  2 +-
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/NumericInput/NumericInput.js b/NumericInput/NumericInput.js
index 29255483..90e511e1 100644
--- a/NumericInput/NumericInput.js
+++ b/NumericInput/NumericInput.js
@@ -21,7 +21,7 @@ export default class NumericInput extends Component {
 
     // this.props refers to the new props
     componentDidUpdate() {
-        const initSent = !(this.props.initValue !== 0 && !this.props.initValue); 
+        const initSent = !(this.props.initValue !== 0 && !this.props.initValue);
 
         // compare the new value (props.initValue) with the existing/old one (this.state.value)
         if (this.props.initValue !== this.state.value && initSent) {
@@ -32,7 +32,7 @@ export default class NumericInput extends Component {
             });
         }
     }
-    
+
     updateBaseResolution = (width, height) => {
         calcSize = create({ width, height })
     }
@@ -231,13 +231,13 @@ export default class NumericInput extends Component {
         else return (
             <View style={inputContainerStyle}>
                 <Button onPress={this.dec} style={leftButtonStyle}>
-                    <Icon name='md-remove' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />
+                    {this.props.customDecIcon || <Icon name='md-remove' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />}
                 </Button>
                 <View style={[inputWraperStyle]}>
                     <TextInput {...this.props.extraTextInputProps} editable={editable} returnKeyType='done' underlineColorAndroid='rgba(0,0,0,0)' keyboardType='numeric' value={this.state.stringValue} onChangeText={this.onChange} style={inputStyle} ref={ref => this.ref = ref} onBlur={this.onBlur} onFocus={this.onFocus} />
                 </View>
                 <Button onPress={this.inc} style={rightButtonStyle}>
-                    <Icon name='md-add' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />
+                    {this.props.customIncIcon || <Icon name='md-add' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />}
                 </Button>
             </View>)
 
@@ -305,6 +305,14 @@ NumericInput.propTypes = {
     upDownButtonsBackgroundColor: PropTypes.string,
     rightButtonBackgroundColor: PropTypes.string,
     leftButtonBackgroundColor: PropTypes.string,
+    customDecIcon: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+    ]),
+    customIncIcon: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+    ]),
     editable: PropTypes.bool,
     reachMaxIncIconStyle: PropTypes.any,
     reachMaxDecIconStyle: PropTypes.any,
@@ -332,6 +340,8 @@ NumericInput.defaultProps = {
     upDownButtonsBackgroundColor: 'white',
     rightButtonBackgroundColor: 'white',
     leftButtonBackgroundColor: 'white',
+    customDecIcon: null,
+    customIncIcon: null,
     editable: true,
     validateOnBlur: true,
     reachMaxIncIconStyle: {},
diff --git a/README.md b/README.md
index 1ed67604..238e818f 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ enjoy!
 
 ## Installation
 ### Latest version
-v1.8.2
+v1.8.4
 #### if you have react-native-vector-icons installed in your project
 ```bash
 yarn add react-native-numeric-input
@@ -110,6 +110,8 @@ Name                                | Type                                | Defa
 **upDownButtonsBackgroundColor**    |`string`                             | `'white'`
 **rightButtonBackgroundColor**      |`string`                             | `'white'`
 **leftButtonBackgroundColor**       |`string`                             | `'white'`
+**customDecIcon**                   |`element` or `node`                  | none
+**customIncIcon**                   |`element` or `node`                  | none
 **totalHeight**                     |`number`                             | none
 **onChange**                        |`function`                           | none - required prop
 **onLimitReached**                  |`function`                           | none (empty function)
@@ -134,6 +136,7 @@ Name                                | Type                                | Defa
 * **reachMinDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case minValue is reached - **optional**
 * **onLimitReached** - added on version 1.7.0, used to handle event of min/max reached, **this function receives 2 arguments: (isMas:Boolean, msg:String)** like in the advanced example above - **optional**
 * **extraTextInputProps**  - added on version 1.8.0, used to add props used for the original TextInput component that are not used/supported in this component explicitly - **optional**
+* **customDecIcon** & **customIncIcon**  - added on version 1.8.4, used for custom icons inside `'plus-minus'` buttons - **optional**
 
 
 ## Versioning
diff --git a/index.d.ts b/index.d.ts
index b128e179..9a8f0669 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,4 +1,5 @@
 declare module 'react-native-numeric-input' {
+  import { ReactElement } from 'react';
   import { ViewStyle } from 'react-native'
   import { Color } from 'csstype'
 
@@ -22,6 +23,8 @@ declare module 'react-native-numeric-input' {
     upDownButtonsBackgroundColor?: Color
     rightButtonBackgroundColor?: Color
     leftButtonBackgroundColor?: Color
+    customDecIcon?: ReactElement<any>
+    customIncIcon?: ReactElement<any>
     totalHeight?: number
     onChange: (value: number) => void
     onLimitReached?: (isMax: boolean, msg: string) => void
diff --git a/package.json b/package.json
index ceaf333c..6c61461c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-numeric-input",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "a stylish numeric input for react native",
   "main": "index.js",
   "scripts": {