Merge pull request #92 from robinmacharg/enhancement/value-formatter

Add a value formatter prop.

Author: marcocesarato

PROPS.md

@@ -26,7 +26,7 @@
 | `buttonTextColor`       | Custom color of the button of the Spinner                                                                                      | String           | Auto             |                                                  |
 | `buttonPressTextStyle`  | Button Style on Pressed state (Plus and Minus buttons)                                                                         | Object           |                  | Could overwrite other props                      |
 | `buttonTextStyle`       | Button text Style state (Plus and Minus buttons)                                                                               | Object           |                  | Could overwrite other props                      |
-| `colorAsBackground`     | Use color as background                                                                                                        | Bool             | `false`          |
+| `colorAsBackground`     | Use color as background                                                                                                        | Bool             | `false`          |                                                  |
 | `colorLeft`             | Custom color of the Spinner left button                                                                                        | String           | `#3E525F`        |                                                  |
 | `colorMax`              | Custom color of the Spinner when reach max value                                                                               | String           |                  |                                                  |
 | `colorMin`              | Custom color of the Spinner when reach min value                                                                               | String           |                  |                                                  |
@@ -39,12 +39,13 @@
 | `emptied`               | Set if input can be empty                                                                                                      | Boolean          | `false`          |                                                  |
 | `fontFamily`            | Custom fontFamily of the text input of the Spinner                                                                             | String           | System Default   |                                                  |
 | `fontSize`              | Custom fontSize of the text input of the Spinner                                                                               | Number           | `14`             |                                                  |
+| `formatter`             | Custom formatting of the Spinner text                                                                                          | Function         | `null`           | `(value) => { ...; return formattedValue }`.  `editable` must be `false` |
 | `height`                | Custom height of the Spinner                                                                                                   | Number           | `50`             |                                                  |
 | `initialValue`          | Initial value of the Spinner                                                                                                   | String<br>Number | `0`              |                                                  |
 | `inputStyle`            | Input Style (Text number at middle)                                                                                            | Object           |                  | Could overwrite other props                      |
 | `inputProps`            | Customized TextInput Component props                                                                                           | Object           | `null`           |                                                  |
 | `leftButtonProps`       | Customized left button (Touchable Component) props                                                                             | Object           | `null`           |                                                  |
-| `longStep`              | Value to increment or decrement the current spinner value `onLongPress`                                                        | String<br>Number | `step`           |
+| `longStep`              | Value to increment or decrement the current spinner value `onLongPress`                                                        | String<br>Number | `step`           |                                                  |
 | `maxLength`             | Limits the maximum number of characters that can be entered.                                                                   | Number           |                  |                                                  |
 | `max`                   | Max number permitted                                                                                                           | String<br>Number | `null`           |                                                  |
 | `min`                   | Min value permitted                                                                                                            | String<br>Number | `0`              |                                                  |

README.md

@@ -145,6 +145,7 @@ Check the "[Props List](PROPS.md)" file to have the complete list of component p
 | `typingTime`           | Time before debounce and trigger `onChange` event                                                                              | Number           | `750`   |                                   |
 | `type`                 | Type of spinner                                                                                                                | String           | `int`   | Can be `int` or `real`/`float`... |
 | `value`                | Controlled value of the Spinner                                                                                                | String<br>Number | `0`     |                                   |
+| `formatter`            | An optional function that is called to format the value for display                                                            | Function         | `null`  | Should return a `string`.  `editable` must be `false`.          |
 
 #### Screenshots
 

src/InputSpinner.js

@@ -484,14 +484,23 @@ class InputSpinner extends Component {
 			value = String(this._parseNum(value));
 		}
 		let hasPlaceholder = value === "0" && !isEmpty(this.props.placeholder);
-		return hasPlaceholder
-			? ""
-			: value.replace(
-					".",
-					!isEmpty(this.props.decimalSeparator)
-						? this.props.decimalSeparator
-						: ".",
-			  );
+		
+		let accountingForDecimals = hasPlaceholder
+		? ""
+		: value.replace(
+				".",
+				!isEmpty(this.props.decimalSeparator)
+					? this.props.decimalSeparator
+					: ".",
+		  );
+
+		// Only apply the formatter if the field is not user-editable
+		if (this.props.formatter !== null && typeof(this.props.formatter) === 'function' && !this.props.editable) {
+			return this.props.formatter(value)
+		}
+		else {
+			return accountingForDecimals
+		}
 	}
 
 	/**
@@ -1451,6 +1460,7 @@ InputSpinner.propTypes = {
 	leftButtonProps: PropTypes.object,
 	rightButtonProps: PropTypes.object,
 	buttonTextProps: PropTypes.object,
+	formatter: PropTypes.func,
 };
 
 InputSpinner.defaultProps = {
@@ -1512,6 +1522,7 @@ InputSpinner.defaultProps = {
 	leftButtonProps: null,
 	rightButtonProps: null,
 	buttonTextProps: null,
+	formatter: null,
 };
 
 export default InputSpinner;

src/index.d.ts

@@ -79,5 +79,6 @@ export interface ReactNativeInputSpinnerProps {
 	leftButtonProps?: object;
 	rightButtonProps?: object;
 	buttonTextProps?: TextProps;
+	formatter?(...args: unknown[]): unknown;
 }
 export default class InputSpinner extends Component<ReactNativeInputSpinnerProps> {}