Merge pull request #55 from nosir/bug-fix

[bug-fix] Ongoing till the end

README.md

@@ -62,8 +62,8 @@ Now in your JavaScript
 
 ```js
 var cleave = new Cleave('.input-phone', {
-    phone:      true,
-    regionCode: '{country}'
+    phone: true,
+    phoneRegionCode: '{country}'
 });
 ```
 
@@ -171,7 +171,7 @@ gulp mocha && gulp eslint
 - [ ] AngularJS component (WIP...)
 - [ ] PhantomJS / Jest browser tests
 
-> Then to contributors, we have a [not in the plan](https://github.com/nosir/cleave.js/blob/master/doc/not-in-the-plan.md) list you may concern.
+> For contributors, we have a [not in the plan](https://github.com/nosir/cleave.js/blob/master/doc/not-in-the-plan.md) list you may concern.
 
 ## Get in touch
 - Bugs / Suggestions: [open an issue](https://github.com/nosir/cleave.js/issues)

bower.json

@@ -8,7 +8,7 @@
     "form",
     "input"
   ],
-  "version": "0.4.8",
+  "version": "0.4.9",
   "author": {
     "name": "Max Huang",
     "email": "[email protected]",

dist/cleave.js

@@ -122,8 +122,8 @@ Cleave.prototype = {
         // 1234*| -> hit backspace -> 123|
         // case 2: last character is not delimiter which is:
         // 12|34* -> hit backspace -> 1|34*
-
-        if (pps.backspace && value.slice(-1) !== pps.delimiter) {
+        // note: no need to apply this for numeral mode
+        if (!pps.numeral && pps.backspace && value.slice(-1) !== pps.delimiter) {
             value = Util.headStr(value, value.length - 1);
         }
 
@@ -240,9 +240,14 @@ Cleave.prototype = {
     },
 
     getRawValue: function () {
-        var owner = this, pps = owner.properties;
+        var owner = this, pps = owner.properties,
+            inputValue = owner.element.value;
 
-        return Cleave.Util.strip(owner.element.value, pps.delimiterRE);
+        if (pps.numeral) {
+            return pps.numeralFormatter.getRawValue(inputValue);
+        }
+
+        return Cleave.Util.strip(inputValue, pps.delimiterRE);
     },
 
     getFormattedValue: function () {
@@ -375,8 +380,13 @@ var DefaultProperties = {
 
         target.initValue = opts.initValue || '';
 
-        target.delimiter = opts.delimiter || (target.date ? '/' : (target.numeral ? ',' : ' '));
-        target.delimiterRE = new RegExp('\\' + target.delimiter, 'g');
+        target.delimiter =
+            (opts.delimiter || opts.delimiter === '') ? opts.delimiter :
+                (opts.date ? '/' :
+                    (opts.numeral ? ',' :
+                        (opts.phone ? ' ' :
+                            ' ')));
+        target.delimiterRE = new RegExp('\\' + (target.delimiter || ' '), 'g');
 
         target.blocks = opts.blocks || [];
         target.blocksLength = target.blocks.length;
@@ -592,7 +602,8 @@ var NumeralFormatter = function (numeralDecimalMark,
     owner.numeralDecimalMark = numeralDecimalMark || '.';
     owner.numeralDecimalScale = numeralDecimalScale || 2;
     owner.numeralThousandsGroupStyle = numeralThousandsGroupStyle || NumeralFormatter.groupStyle.thousand;
-    owner.delimiter = delimiter || ',';
+    owner.delimiter = (delimiter || delimiter === '') ? delimiter : ',';
+    owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
 };
 
 NumeralFormatter.groupStyle = {
@@ -602,6 +613,10 @@ NumeralFormatter.groupStyle = {
 };
 
 NumeralFormatter.prototype = {
+    getRawValue: function (value) {
+        return value.replace(this.delimiterRE, '').replace(this.numeralDecimalMark, '.');
+    },
+
     format: function (value) {
         var owner = this, parts, partInteger, partDecimal = '';
 
@@ -656,8 +671,9 @@ if (typeof module === 'object' && typeof module.exports === 'object') {
 var PhoneFormatter = function (formatter, delimiter) {
     var owner = this;
 
-    owner.delimiter = delimiter || ' ';
-    owner.delimiterRE = new RegExp('\\' + owner.delimiter, 'g');
+    owner.delimiter = (delimiter || delimiter === '') ? delimiter : ' ';
+    owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
+
     owner.formatter = formatter;
 };
 

doc/options.md

@@ -49,6 +49,8 @@ new Cleave('.my-input', {
 ...
 ```
 
+You can also custom the [delimiter](#delimiter) for credit card numbers
+
 ### `onCreditCardTypeChanged`
 
 A callback `Function`. Triggered after credit card type changes.
@@ -97,6 +99,8 @@ new Cleave('.my-input', {
 // 202 XXX XXXX
 ```
 
+You can also custom the [delimiter](#delimiter) for phone numbers
+
 ## Date
 
 ### `date`
@@ -126,6 +130,8 @@ new Cleave('.my-input', {
 ['Y', 'm', 'd']: 1965/04/26
 ```
 
+You can also custom the [delimiter](#delimiter) for date
+
 ## Numerals
 
 ### `numeral`
@@ -204,6 +210,8 @@ new Cleave('.my-input', {
 // 1.234.567,89
 ```
 
+You can also custom the [prefix](#prefix) for numeral
+
 ## General config
 
 ### `delimiter`

package.json

@@ -10,7 +10,7 @@
     "form",
     "input"
   ],
-  "version": "0.4.8",
+  "version": "0.4.9",
   "author": {
     "name": "Max Huang",
     "url": "http://github.com/nosir",

src/Cleave.js

@@ -120,8 +120,8 @@ Cleave.prototype = {
         // 1234*| -> hit backspace -> 123|
         // case 2: last character is not delimiter which is:
         // 12|34* -> hit backspace -> 1|34*
-
-        if (pps.backspace && value.slice(-1) !== pps.delimiter) {
+        // note: no need to apply this for numeral mode
+        if (!pps.numeral && pps.backspace && value.slice(-1) !== pps.delimiter) {
             value = Util.headStr(value, value.length - 1);
         }
 
@@ -238,9 +238,14 @@ Cleave.prototype = {
     },
 
     getRawValue: function () {
-        var owner = this, pps = owner.properties;
+        var owner = this, pps = owner.properties,
+            inputValue = owner.element.value;
+
+        if (pps.numeral) {
+            return pps.numeralFormatter.getRawValue(inputValue);
+        }
 
-        return Cleave.Util.strip(owner.element.value, pps.delimiterRE);
+        return Cleave.Util.strip(inputValue, pps.delimiterRE);
     },
 
     getFormattedValue: function () {

src/Cleave.react.js

@@ -138,7 +138,11 @@ var Cleave = React.createClass({
 
         owner.onInput(event.target.value);
 
-        event.target.rawValue = Util.strip(pps.result, pps.delimiterRE);
+        if (pps.numeral) {
+            event.target.rawValue = pps.numeralFormatter.getRawValue(pps.result);
+        } else {
+            event.target.rawValue = Util.strip(pps.result, pps.delimiterRE);
+        }
 
         owner.registeredEvents.onChange(event);
     },
@@ -152,7 +156,7 @@ var Cleave = React.createClass({
         // case 2: last character is not delimiter which is:
         // 12|34* -> hit backspace -> 1|34*
 
-        if (pps.backspace && value.slice(-1) !== pps.delimiter) {
+        if (!pps.numeral && pps.backspace && value.slice(-1) !== pps.delimiter) {
             value = Util.headStr(value, value.length - 1);
         }
 

src/common/DefaultProperties.js

@@ -45,8 +45,13 @@ var DefaultProperties = {
 
         target.initValue = opts.initValue || '';
 
-        target.delimiter = opts.delimiter || (target.date ? '/' : (target.numeral ? ',' : ' '));
-        target.delimiterRE = new RegExp('\\' + target.delimiter, 'g');
+        target.delimiter =
+            (opts.delimiter || opts.delimiter === '') ? opts.delimiter :
+                (opts.date ? '/' :
+                    (opts.numeral ? ',' :
+                        (opts.phone ? ' ' :
+                            ' ')));
+        target.delimiterRE = new RegExp('\\' + (target.delimiter || ' '), 'g');
 
         target.blocks = opts.blocks || [];
         target.blocksLength = target.blocks.length;

src/shortcuts/NumeralFormatter.js

@@ -9,7 +9,8 @@ var NumeralFormatter = function (numeralDecimalMark,
     owner.numeralDecimalMark = numeralDecimalMark || '.';
     owner.numeralDecimalScale = numeralDecimalScale || 2;
     owner.numeralThousandsGroupStyle = numeralThousandsGroupStyle || NumeralFormatter.groupStyle.thousand;
-    owner.delimiter = delimiter || ',';
+    owner.delimiter = (delimiter || delimiter === '') ? delimiter : ',';
+    owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
 };
 
 NumeralFormatter.groupStyle = {
@@ -19,6 +20,10 @@ NumeralFormatter.groupStyle = {
 };
 
 NumeralFormatter.prototype = {
+    getRawValue: function (value) {
+        return value.replace(this.delimiterRE, '').replace(this.numeralDecimalMark, '.');
+    },
+
     format: function (value) {
         var owner = this, parts, partInteger, partDecimal = '';
 

src/shortcuts/PhoneFormatter.js

@@ -3,8 +3,9 @@
 var PhoneFormatter = function (formatter, delimiter) {
     var owner = this;
 
-    owner.delimiter = delimiter || ' ';
-    owner.delimiterRE = new RegExp('\\' + owner.delimiter, 'g');
+    owner.delimiter = (delimiter || delimiter === '') ? delimiter : ' ';
+    owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
+
     owner.formatter = formatter;
 };
 

test/NumeralFormatter_spec.js

@@ -22,6 +22,10 @@ describe('NumeralFormatter', function () {
             title.push('Delimiter: ' + numeral.delimiter);
         }
 
+        if (numeral.delimiterOff) {
+            title.push('Delimiter Off: ' + numeral.delimiterOff);
+        }
+
         describe(title.join(', '), function () {
             var numeralFormatter = new NumeralFormatter(
                 numeral.numeralDecimalMark,

test/PhoneFormatter_spec.js

@@ -31,4 +31,16 @@ describe('PhoneFormatter', function () {
             });
         });
     });
+
+    describe('delimiter off', function () {
+        var delimiter = phones.delimiterOff;
+
+        var phoneNumberFormatter = new PhoneFormatter(new PhoneTypeFormatter.Cleave.AsYouTypeFormatter(delimiter.region), delimiter.sign);
+
+        _.each(delimiter.format, function (format) {
+            it('should format ' + delimiter.region + ' phone number ' + format[0] + ' to ' + format[1], function () {
+                phoneNumberFormatter.format(format[0]).should.eql(format[1]);
+            });
+        });
+    });
 });

test/fixtures/numeral.json

@@ -76,6 +76,16 @@
       ]
     ]
   },
+  {
+    "numeralDecimalMark": ".",
+    "delimiter": "",
+    "numbers": [
+      [
+        "1,234,567.89",
+        "1234567.89"
+      ]
+    ]
+  },
   {
     "thousandsGroupStyle": "lakh",
     "numeralDecimalScale": 4,

test/fixtures/phone.json

@@ -116,5 +116,19 @@
         "07-7010-8054"
       ]
     ]
+  },
+  "delimiterOff": {
+    "region": "AU",
+    "sign": "",
+    "format": [
+      [
+        "+61 7 7010 8054",
+        "+61770108054"
+      ],
+      [
+        "(613) 555-0117",
+        "6135550117"
+      ]
+    ]
   }
 }