Skip to content

Commit

Permalink
Merge pull request #92 from robinmacharg/enhancement/value-formatter
Browse files Browse the repository at this point in the history 
Add a value formatter prop.
  • Loading branch information
@marcocesarato
marcocesarato authored Mar 23, 2023
2 parents bff7bce + 5d55504 commit 31969ca
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 10 deletions.
5 changes: 3 additions & 2 deletions PROPS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | | |
Expand All @@ -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` | |
Expand Down
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
27 changes: 19 additions & 8 deletions src/InputSpinner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}

/**
Expand Down Expand Up @@ -1451,6 +1460,7 @@ InputSpinner.propTypes = {
leftButtonProps: PropTypes.object,
rightButtonProps: PropTypes.object,
buttonTextProps: PropTypes.object,
formatter: PropTypes.func,
};

InputSpinner.defaultProps = {
Expand Down Expand Up @@ -1512,6 +1522,7 @@ InputSpinner.defaultProps = {
leftButtonProps: null,
rightButtonProps: null,
buttonTextProps: null,
formatter: null,
};

export default InputSpinner;
1 change: 1 addition & 0 deletions src/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,5 +79,6 @@ export interface ReactNativeInputSpinnerProps {
leftButtonProps?: object;
rightButtonProps?: object;
buttonTextProps?: TextProps;
formatter?(...args: unknown[]): unknown;
}
export default class InputSpinner extends Component<ReactNativeInputSpinnerProps> {}

0 comments on commit 31969ca

Please sign in to comment.