Skip to content

Commit 8b76b63

Browse files
s-yadavs-yadav
committed
Fixed #2, #3
- Removed extra unknown props #2 @styks1987 - Corrected misspelled thousandSeparator #2 @styks1987 - Fixed development installation issue
1 parent 2a73bbe commit 8b76b63

File tree

11 files changed

+65
-45
lines changed

11 files changed

+65
-45
lines changed

‎.babelrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"presets": ["react","es2015"],
3+
"plugins": ["transform-object-assign"],
34
"env": {
45
"development": {
56
"plugins": [["react-transform", {

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules/**/*
22
*.swp
33
.DS_Store
4+
*.log

‎README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@
22
React component to format number in an input or as a text
33

44
### Features
5-
1. Allow prefix, suffix and thousand seperator.
5+
1. Allow prefix, suffix and thousand separator.
66
2. Allow format pattern.
77
3. Allow masking.
88
4. Allow custom formatting handler.
99
5. Allow formatting a input or a simple text
1010

1111
### Install
12-
Through npm
12+
Through npm
1313
`npm install react-number-format --save`
1414

1515
Or get compiled development and production version from ./dist
1616

1717
### Props
1818
| Props | Options | Default | Description |
1919
| ------------- |-------------| -----| -------- |
20-
| thousandSeperator | Boolean: true/false | false | Add thousand seperators on number |
20+
| thousandSeparator | Boolean: true/false | false | Add thousand separators on number |
2121
| prefix | String (ex : $) | none | Add a prefix before the number |
2222
| suffix | String (ex : /-) | none | Add a prefix after the number |
2323
| value | Number | null | Give initial value to number format |
@@ -26,11 +26,11 @@ Or get compiled development and production version from ./dist
2626
| mask | String (ex : _) | none | If mask defined, component will show non entered placed with masked value.
2727

2828
### Examples
29-
#### Prefix and thousand seperator : Format currency as text
29+
#### Prefix and thousand separator : Format currency as text
3030
```jsx
3131
var NumberFormat = require('react-number-format');
3232

33-
<NumberFormat value={2456981} displayType={'text'} thousandSeperator={true} prefix={'$'} />
33+
<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />
3434
```
3535
Output : $2,456,981
3636

@@ -40,9 +40,9 @@ Output : $2,456,981
4040
```
4141
Output : 4111 1111 1111 1111
4242

43-
#### Prefix and thousand seperator : Format currency in input
43+
#### Prefix and thousand separator : Format currency in input
4444
```jsx
45-
<NumberFormat thousandSeperator={true} prefix={'$'} />
45+
<NumberFormat thousandSeparator={true} prefix={'$'} />
4646
```
4747
![Screencast example](https://i.imgur.com/d0P2Db1.gif)
4848

‎dist/react-number-format.js‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/*!
2-
* react-number-format - 0.1.1
2+
* react-number-format - 0.1.2
33
* Author : Sudhanshu Yadav
44
* Copyright (c) 2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
55
*/
66
(function webpackUniversalModuleDefinition(root, factory) {
77
if(typeof exports === 'object' && typeof module === 'object')
8-
module.exports = factory(require("React"));
8+
module.exports = factory(require("react"));
99
else if(typeof define === 'function' && define.amd)
10-
define(["React"], factory);
10+
define(["react"], factory);
1111
else if(typeof exports === 'object')
12-
exports["NumberFormat"] = factory(require("React"));
12+
exports["NumberFormat"] = factory(require("react"));
1313
else
1414
root["NumberFormat"] = factory(root["React"]);
1515
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
@@ -144,7 +144,7 @@ return /******/ (function(modules) { // webpackBootstrap
144144
formatInput: function formatInput(val) {
145145
var _props2 = this.props;
146146
var prefix = _props2.prefix;
147-
var thousandSeperator = _props2.thousandSeperator;
147+
var thousandSeparator = _props2.thousandSeparator;
148148
var suffix = _props2.suffix;
149149
var mask = _props2.mask;
150150
var format = _props2.format;
@@ -163,7 +163,7 @@ return /******/ (function(modules) { // webpackBootstrap
163163
formattedValue = format(formattedValue);
164164
}
165165
} else {
166-
if (thousandSeperator) formattedValue = formattedValue.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
166+
if (thousandSeparator) formattedValue = formattedValue.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
167167

168168
//add prefix and suffix
169169
if (prefix) formattedValue = prefix + formattedValue;
@@ -218,16 +218,20 @@ return /******/ (function(modules) { // webpackBootstrap
218218
this.onChangeHandler(e, this.props.onInput);
219219
},
220220
render: function render() {
221-
var props = this.props;
221+
var props = _extends({}, this.props);
222222

223-
if (props.displayType === "text") {
223+
['thousandSeparator', 'displayType', 'prefix', 'suffix', 'format', 'mask', 'value'].forEach(function (key) {
224+
delete props[key];
225+
});
226+
227+
if (this.props.displayType === "text") {
224228
return React.createElement(
225229
'span',
226-
this.props,
230+
props,
227231
this.state.value
228232
);
229233
}
230-
return React.createElement('input', _extends({}, this.props, {
234+
return React.createElement('input', _extends({}, props, {
231235
type: 'tel',
232236
value: this.state.value,
233237
ref: 'input',

‎dist/react-number-format.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const App = React.createClass({
2323
<h3>
2424
Prefix and thousand seperator : Format currency as text
2525
</h3>
26-
<NumberFormat value={2456981} displayType={'text'} thousandSeperator={true} prefix={'$'} />
26+
<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />
2727
</div>
2828

2929
<div className="example">
@@ -37,7 +37,7 @@ const App = React.createClass({
3737
<h3>
3838
Prefix and thousand seperator : Format currency in input
3939
</h3>
40-
<NumberFormat thousandSeperator={true} prefix={'$'} />
40+
<NumberFormat thousandSeparator={true} prefix={'$'} />
4141
</div>
4242

4343
<div className="example">

‎lib/number_format.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ var NumberFormat = React.createClass({
7676
formatInput: function formatInput(val) {
7777
var _props2 = this.props;
7878
var prefix = _props2.prefix;
79-
var thousandSeperator = _props2.thousandSeperator;
79+
var thousandSeparator = _props2.thousandSeparator;
8080
var suffix = _props2.suffix;
8181
var mask = _props2.mask;
8282
var format = _props2.format;
@@ -95,7 +95,7 @@ var NumberFormat = React.createClass({
9595
formattedValue = format(formattedValue);
9696
}
9797
} else {
98-
if (thousandSeperator) formattedValue = formattedValue.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
98+
if (thousandSeparator) formattedValue = formattedValue.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
9999

100100
//add prefix and suffix
101101
if (prefix) formattedValue = prefix + formattedValue;
@@ -150,16 +150,20 @@ var NumberFormat = React.createClass({
150150
this.onChangeHandler(e, this.props.onInput);
151151
},
152152
render: function render() {
153-
var props = this.props;
153+
var props = _extends({}, this.props);
154154

155-
if (props.displayType === "text") {
155+
['thousandSeparator', 'displayType', 'prefix', 'suffix', 'format', 'mask', 'value'].forEach(function (key) {
156+
delete props[key];
157+
});
158+
159+
if (this.props.displayType === "text") {
156160
return React.createElement(
157161
'span',
158-
this.props,
162+
props,
159163
this.state.value
160164
);
161165
}
162-
return React.createElement('input', _extends({}, this.props, {
166+
return React.createElement('input', _extends({}, props, {
163167
type: 'tel',
164168
value: this.state.value,
165169
ref: 'input',

‎package.json‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
{
22
"name": "react-number-format",
33
"description": "React component to format number in an input or as a text.",
4-
"version": "0.1.1",
4+
"version": "0.1.2",
55
"main": "lib/number_format.js",
6-
"engines": {
7-
"node": "4.1.1"
8-
},
96
"author": "Sudhanshu Yadav",
107
"license": "MIT",
118
"repository": {
@@ -27,17 +24,19 @@
2724
],
2825
"scripts": {
2926
"start": "webpack-dev-server --content-base example/ --config webpack.dev.config.js --watch-poll --progress --inline --hot",
30-
"bundle": "set NODE_ENV=production && npm run compile && webpack --config webpack.bundle.config.js && karma start",
31-
"compile" : "babel src/number_format.js --out-file lib/number_format.js",
32-
"test": "set NODE_ENV=test && karma start"
27+
"bundle": "cross-env NODE_ENV=production npm run compile && cross-env NODE_ENV=production webpack --config webpack.bundle.config.js && cross-env NODE_ENV=production karma start",
28+
"compile": "cross-env NODE_ENV=production babel src/number_format.js --out-file lib/number_format.js",
29+
"test": "cross-env NODE_ENV=test karma start"
3330
},
3431
"devDependencies": {
3532
"babel-cli": "^6.7.5",
3633
"babel-core": "^6.7.2",
3734
"babel-eslint": "^6.0.0",
3835
"babel-loader": "^6.2.4",
3936
"babel-plugin-react-transform": "^2.0.2",
37+
"babel-plugin-transform-object-assign": "^6.8.0",
4038
"babel-preset-es2015": "^6.6.0",
39+
"babel-preset-react": "^6.11.1",
4140
"babel-register": "^6.7.2",
4241
"classnames": "^2.2.3",
4342
"eslint": "^2.5.3",

‎src/number_format.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const NumberFormat = React.createClass({
6868
return frmtdStr.substring(0,hashIdx + 1) + (lastIdx!==-1 ? frmtdStr.substring(lastIdx + 1, frmtdStr.length) :'');
6969
},
7070
formatInput : function(val){
71-
const {prefix, thousandSeperator, suffix, mask,format} = this.props;
71+
const {prefix, thousandSeparator, suffix, mask,format} = this.props;
7272
const maskPattern = format && typeof format == "string" && !!mask;
7373

7474
if(!val || !((val+"").match(/\d/g))) return {value :"", formattedValue: (maskPattern ? "" : "")}
@@ -85,7 +85,7 @@ const NumberFormat = React.createClass({
8585
}
8686
}
8787
else{
88-
if(thousandSeperator) formattedValue = formattedValue.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
88+
if(thousandSeparator) formattedValue = formattedValue.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
8989

9090
//add prefix and suffix
9191
if(prefix) formattedValue = prefix + formattedValue;
@@ -133,13 +133,19 @@ const NumberFormat = React.createClass({
133133
this.onChangeHandler(e,this.props.onInput);
134134
},
135135
render : function(){
136-
const {props} = this;
137-
if(props.displayType === "text"){
138-
return (<span {...this.props}>{this.state.value}</span>);
136+
const props = Object.assign({}, this.props);
137+
138+
['thousandSeparator', 'displayType', 'prefix', 'suffix', 'format', 'mask', 'value'].forEach((key) => {
139+
delete props[key];
140+
});
141+
142+
143+
if(this.props.displayType === "text"){
144+
return (<span {...props}>{this.state.value}</span>);
139145
}
140146
return (
141147
<input
142-
{...this.props}
148+
{...props}
143149
type='tel'
144150
value={this.state.value}
145151
ref="input"

‎test/input_test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ const FormatNumberInput = require('../src/number_format');
55
/*** format_number input as input ****/
66
describe('FormatNumberInput as input', () => {
77
it('should have initial value', () => {
8-
const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value={2456981} thousandSeperator={true} prefix={'$'} />);
8+
const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value={2456981} thousandSeparator={true} prefix={'$'} />);
99
const input = ReactTestUtils.findRenderedDOMComponentWithTag(
1010
component, 'input'
1111
);
1212
expect(input.value).toEqual("$2,456,981");
1313
});
1414

1515
it('should listen input event and formmat currency properly', () => {
16-
const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput thousandSeperator={true} prefix={'$'} />);
16+
const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput thousandSeparator={true} prefix={'$'} />);
1717
const input = ReactTestUtils.findRenderedDOMComponentWithTag(
1818
component, 'input'
1919
);
@@ -26,7 +26,7 @@ describe('FormatNumberInput as input', () => {
2626
});
2727

2828
it('should listen change event and formmat currency properly', () => {
29-
const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput thousandSeperator={true} prefix={'$'} />);
29+
const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput thousandSeparator={true} prefix={'$'} />);
3030
const input = ReactTestUtils.findRenderedDOMComponentWithTag(
3131
component, 'input'
3232
);
@@ -118,7 +118,7 @@ describe('FormatNumberInput as input', () => {
118118
/*** format_number input as text ****/
119119
describe('FormatNumberInput as text', () => {
120120
it('should format numbers to currency', () => {
121-
const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value={2456981} displayType={'text'} thousandSeperator={true} prefix={'$'} />);
121+
const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />);
122122
const span = ReactTestUtils.findRenderedDOMComponentWithTag(
123123
component, 'span'
124124
);

0 commit comments

Comments
 (0)