Skip to content

Commit

Permalink
Add multiple delimiters option
Browse files Browse the repository at this point in the history
  • Loading branch information
@nosir
nosir committed Jul 31, 2016
1 parent 564ea8b commit ef7a2c4
Show file tree
Hide file tree
Showing 11 changed files with 163 additions and 45 deletions.
4 changes: 2 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
"form",
"input"
],
"version": "0.5.2",
"version": "0.6.0",
"author": {
"name": "Max Huang",
"email": "[email protected]",
"homepage": "http://github.com/nosir"
},
"license": "Apache License 2.0",
"license": "Apache-2.0",
"ignore": [
"**/.*",
"gulp-tasks",
Expand Down
50 changes: 41 additions & 9 deletions dist/cleave-react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ return /******/ (function(modules) { // webpackBootstrap
charCode = event.which || event.keyCode;

// hit backspace when last character is delimiter
if (charCode === 8 && pps.result.slice(-1) === pps.delimiter) {
if (charCode === 8 && Util.isDelimiter(pps.result.slice(-1), pps.delimiter, pps.delimiters)) {
pps.backspace = true;
} else {
pps.backspace = false;
Expand All @@ -202,7 +202,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (pps.numeral) {
event.target.rawValue = pps.numeralFormatter.getRawValue(pps.result);
} else {
event.target.rawValue = Util.strip(pps.result, pps.delimiterRE);
event.target.rawValue = Util.stripDelimiters(pps.result, pps.delimiter, pps.delimiters);
}

owner.registeredEvents.onChange(event);
Expand All @@ -218,7 +218,7 @@ return /******/ (function(modules) { // webpackBootstrap
// case 2: last character is not delimiter which is:
// 12|34* -> hit backspace -> 1|34*

if (!pps.numeral && pps.backspace && value.slice(-1) !== pps.delimiter) {
if (!pps.numeral && pps.backspace && !Util.isDelimiter(value.slice(-1), pps.delimiter, pps.delimiters)) {
value = Util.headStr(value, value.length - 1);
}

Expand All @@ -244,7 +244,7 @@ return /******/ (function(modules) { // webpackBootstrap
}

// strip delimiters
value = Util.strip(value, pps.delimiterRE);
value = Util.stripDelimiters(value, pps.delimiter, pps.delimiters);

// strip prefix
value = Util.getPrefixStrippedValue(value, pps.prefixLength);
Expand Down Expand Up @@ -278,7 +278,7 @@ return /******/ (function(modules) { // webpackBootstrap
value = Util.headStr(value, pps.maxLength);

// apply blocks
pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter);
pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter, pps.delimiters);

// nothing changed
// prevent update value to avoid caret position change
Expand Down Expand Up @@ -736,6 +736,34 @@ return /******/ (function(modules) { // webpackBootstrap
return value.replace(re, '');
},

isDelimiter: function isDelimiter(letter, delimiter, delimiters) {
// single delimiter
if (delimiters.length === 0) {
return letter === delimiter;
}

// multiple delimiters
return delimiters.some(function (current) {
if (letter === current) {
return true;
}
});
},

stripDelimiters: function stripDelimiters(value, delimiter, delimiters) {
// single delimiter
if (delimiters.length === 0) {
return value.replace(new RegExp('\\' + delimiter, 'g'), '');
}

// multiple delimiters
delimiters.forEach(function (current) {
value = value.replace(new RegExp('\\' + current, 'g'), '');
});

return value;
},

headStr: function headStr(str, length) {
return str.slice(0, length);
},
Expand All @@ -754,8 +782,10 @@ return /******/ (function(modules) { // webpackBootstrap
return value.slice(prefixLength);
},

getFormattedValue: function getFormattedValue(value, blocks, blocksLength, delimiter) {
var result = '';
getFormattedValue: function getFormattedValue(value, blocks, blocksLength, delimiter, delimiters) {
var result = '',
multipleDelimiters = delimiters.length > 0,
currentDelimiter;

blocks.forEach(function (length, index) {
if (value.length > 0) {
Expand All @@ -764,8 +794,10 @@ return /******/ (function(modules) { // webpackBootstrap

result += sub;

currentDelimiter = multipleDelimiters ? delimiters[index] || currentDelimiter : delimiter;

if (sub.length === length && index < blocksLength - 1) {
result += delimiter;
result += currentDelimiter;
}

// update remaining string
Expand Down Expand Up @@ -837,7 +869,7 @@ return /******/ (function(modules) { // webpackBootstrap
target.initValue = opts.initValue || '';

target.delimiter = opts.delimiter || opts.delimiter === '' ? opts.delimiter : opts.date ? '/' : opts.numeral ? ',' : opts.phone ? ' ' : ' ';
target.delimiterRE = new RegExp('\\' + (target.delimiter || ' '), 'g');
target.delimiters = opts.delimiters || [];

target.blocks = opts.blocks || [];
target.blocksLength = target.blocks.length;
Expand Down
4 changes: 2 additions & 2 deletions dist/cleave-react.min.js
View file

Large diffs are not rendered by default.

50 changes: 41 additions & 9 deletions dist/cleave.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ Cleave.prototype = {
charCode = event.which || event.keyCode;

// hit backspace when last character is delimiter
if (charCode === 8 && owner.element.value.slice(-1) === pps.delimiter) {
if (charCode === 8 && Cleave.Util.isDelimiter(owner.element.value.slice(-1), pps.delimiter, pps.delimiters)) {
pps.backspace = true;

return;
Expand All @@ -123,7 +123,7 @@ Cleave.prototype = {
// case 2: last character is not delimiter which is:
// 12|34* -> hit backspace -> 1|34*
// note: no need to apply this for numeral mode
if (!pps.numeral && pps.backspace && value.slice(-1) !== pps.delimiter) {
if (!pps.numeral && pps.backspace && !Cleave.Util.isDelimiter(value.slice(-1), pps.delimiter, pps.delimiters)) {
value = Util.headStr(value, value.length - 1);
}

Expand All @@ -149,7 +149,7 @@ Cleave.prototype = {
}

// strip delimiters
value = Util.strip(value, pps.delimiterRE);
value = Util.stripDelimiters(value, pps.delimiter, pps.delimiters);

// strip prefix
value = Util.getPrefixStrippedValue(value, pps.prefixLength);
Expand Down Expand Up @@ -183,7 +183,7 @@ Cleave.prototype = {
value = Util.headStr(value, pps.maxLength);

// apply blocks
pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter);
pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter, pps.delimiters);

// nothing changed
// prevent update value to avoid caret position change
Expand Down Expand Up @@ -247,7 +247,7 @@ Cleave.prototype = {
return pps.numeralFormatter.getRawValue(inputValue);
}

return Cleave.Util.strip(inputValue, pps.delimiterRE);
return Cleave.Util.stripDelimiters(inputValue, pps.delimiter, pps.delimiters);
},

getFormattedValue: function () {
Expand Down Expand Up @@ -288,6 +288,34 @@ var Util = {
return value.replace(re, '');
},

isDelimiter: function (letter, delimiter, delimiters) {
// single delimiter
if (delimiters.length === 0) {
return letter === delimiter;
}

// multiple delimiters
return delimiters.some(function (current) {
if (letter === current) {
return true;
}
});
},

stripDelimiters: function (value, delimiter, delimiters) {
// single delimiter
if (delimiters.length === 0) {
return value.replace(new RegExp('\\' + delimiter, 'g'), '');
}

// multiple delimiters
delimiters.forEach(function (current) {
value = value.replace(new RegExp('\\' + current, 'g'), '');
});

return value;
},

headStr: function (str, length) {
return str.slice(0, length);
},
Expand All @@ -306,8 +334,10 @@ var Util = {
return value.slice(prefixLength);
},

getFormattedValue: function (value, blocks, blocksLength, delimiter) {
var result = '';
getFormattedValue: function (value, blocks, blocksLength, delimiter, delimiters) {
var result = '',
multipleDelimiters = delimiters.length > 0,
currentDelimiter;

blocks.forEach(function (length, index) {
if (value.length > 0) {
Expand All @@ -316,8 +346,10 @@ var Util = {

result += sub;

currentDelimiter = multipleDelimiters ? (delimiters[index] || currentDelimiter) : delimiter;

if (sub.length === length && index < blocksLength - 1) {
result += delimiter;
result += currentDelimiter;
}

// update remaining string
Expand Down Expand Up @@ -386,7 +418,7 @@ var DefaultProperties = {
(opts.numeral ? ',' :
(opts.phone ? ' ' :
' ')));
target.delimiterRE = new RegExp('\\' + (target.delimiter || ' '), 'g');
target.delimiters = opts.delimiters || [];

target.blocks = opts.blocks || [];
target.blocksLength = target.blocks.length;
Expand Down
4 changes: 2 additions & 2 deletions dist/cleave.min.js
View file

Large diffs are not rendered by default.

34 changes: 28 additions & 6 deletions doc/options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@
- [numeralDecimalScale](#numeraldecimalscale)
- [numeralDecimalMark](#numeraldecimalmark)
- General config:
- [delimiter](#delimiter)
- [blocks](#blocks)
- [delimiter](#delimiter)
- [delimiters](#delimiters)
- [prefix](#prefix)
- [numericOnly](#numericonly)
- [uppercase](#uppercase)
Expand Down Expand Up @@ -214,6 +215,24 @@ You can also custom the [prefix](#prefix) for numeral

## General config

### `blocks`

An `Array` value indicates the groups to format the input value. It will insert delimiters in between these groups.

This option is ignored by `creditCard`, `phone`, `date` and `numeral` shortcuts mode.

**Default value**: `[]`

```js
new Cleave('.my-input', {
blocks: [2, 5, 5]
});
```

```js
// XX XXXXX XXXXX
```

### `delimiter`

A `String` value indicates the delimiter to use in formatting.
Expand All @@ -231,22 +250,25 @@ new Cleave('.my-input', {
// XXXX-XXXX-XXXX-XXXX
```

### `blocks`
### `delimiters`

An `Array` value indicates the groups to format the input value. It will insert delimiters in between these groups.
An `Array` value indicates the multiple delimiters to use in formatting.

Ignored by `creditCard`, `phone` and `date` shortcuts mode, the value will be set internally.
This option is ignored by `creditCard`, `phone`, `date` and `numeral` shortcuts mode.

When delimiters array is defined, single [delimiter](#delimiter) option is ignored.

**Default value**: `[]`

```js
new Cleave('.my-input', {
blocks: [2, 5, 5]
blocks: [3, 3, 3, 2],
delimiter: ['.', '.', '-']
});
```

```js
// XX XXXXX XXXXX
// XXX.XXX.XXX-XX
```

### `prefix`
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"form",
"input"
],
"version": "0.5.2",
"version": "0.6.0",
"author": {
"name": "Max Huang",
"url": "http://github.com/nosir",
Expand Down
10 changes: 5 additions & 5 deletions src/Cleave.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ Cleave.prototype = {
charCode = event.which || event.keyCode;

// hit backspace when last character is delimiter
if (charCode === 8 && owner.element.value.slice(-1) === pps.delimiter) {
if (charCode === 8 && Cleave.Util.isDelimiter(owner.element.value.slice(-1), pps.delimiter, pps.delimiters)) {
pps.backspace = true;

return;
Expand All @@ -121,7 +121,7 @@ Cleave.prototype = {
// case 2: last character is not delimiter which is:
// 12|34* -> hit backspace -> 1|34*
// note: no need to apply this for numeral mode
if (!pps.numeral && pps.backspace && value.slice(-1) !== pps.delimiter) {
if (!pps.numeral && pps.backspace && !Cleave.Util.isDelimiter(value.slice(-1), pps.delimiter, pps.delimiters)) {
value = Util.headStr(value, value.length - 1);
}

Expand All @@ -147,7 +147,7 @@ Cleave.prototype = {
}

// strip delimiters
value = Util.strip(value, pps.delimiterRE);
value = Util.stripDelimiters(value, pps.delimiter, pps.delimiters);

// strip prefix
value = Util.getPrefixStrippedValue(value, pps.prefixLength);
Expand Down Expand Up @@ -181,7 +181,7 @@ Cleave.prototype = {
value = Util.headStr(value, pps.maxLength);

// apply blocks
pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter);
pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter, pps.delimiters);

// nothing changed
// prevent update value to avoid caret position change
Expand Down Expand Up @@ -245,7 +245,7 @@ Cleave.prototype = {
return pps.numeralFormatter.getRawValue(inputValue);
}

return Cleave.Util.strip(inputValue, pps.delimiterRE);
return Cleave.Util.stripDelimiters(inputValue, pps.delimiter, pps.delimiters);
},

getFormattedValue: function () {
Expand Down
Loading

0 comments on commit ef7a2c4

Please sign in to comment.