Socket
Socket
Sign inDemoInstall

react-input-mask

Package Overview
Dependencies
Maintainers
1
Versions
90
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-input-mask - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

tests/input-test.js

176

build/InputElement.js

@@ -42,8 +42,6 @@ // https://github.com/sanniassin/react-input-mask

getPrefix: function () {
var state = arguments.length <= 0 || arguments[0] === undefined ? this.state : arguments[0];
var prefix = "";
var mask = state.mask;
var mask = this.mask;
for (var i = 0; i < mask.length && this.isPermanentChar(i, state); ++i) {
for (var i = 0; i < mask.length && this.isPermanentChar(i); ++i) {
prefix += mask[i];

@@ -53,10 +51,7 @@ }

},
getFilledLength: function (value) {
var state = arguments.length <= 1 || arguments[1] === undefined ? this.state : arguments[1];
getFilledLength: function () {
var value = arguments.length <= 0 || arguments[0] === undefined ? this.state.value : arguments[0];
var i;
if (value == null) {
value = state.value;
}
var maskChar = state.maskChar;
var maskChar = this.maskChar;

@@ -69,3 +64,3 @@ if (!maskChar) {

var char = value[i];
if (!this.isPermanentChar(i, state) && this.isAllowedChar(char, i, state)) {
if (!this.isPermanentChar(i) && this.isAllowedChar(char, i)) {
break;

@@ -75,3 +70,3 @@ }

return ++i || this.getPrefix(state).length;
return ++i || this.getPrefix().length;
},

@@ -87,3 +82,4 @@ getLeftEditablePos: function (pos) {

getRightEditablePos: function (pos) {
var mask = this.state.mask;
var mask = this.mask;
for (var i = pos; i < mask.length; ++i) {

@@ -100,6 +96,5 @@ if (!this.isPermanentChar(i)) {

var value = arguments.length <= 0 || arguments[0] === undefined ? this.state.value : arguments[0];
var state = arguments.length <= 1 || arguments[1] === undefined ? this.state : arguments[1];
return !value.split("").some(function (char, i) {
return !_this.isPermanentChar(i, state) && _this.isAllowedChar(char, i, state);
return !_this.isPermanentChar(i) && _this.isAllowedChar(char, i);
});

@@ -109,5 +104,4 @@ },

var value = arguments.length <= 0 || arguments[0] === undefined ? this.state.value : arguments[0];
var state = arguments.length <= 1 || arguments[1] === undefined ? this.state : arguments[1];
return this.getFilledLength(value, state) === state.mask.length;
return this.getFilledLength(value) === this.mask.length;
},

@@ -124,10 +118,9 @@ createFilledArray: function (length, val) {

var state = arguments.length <= 1 || arguments[1] === undefined ? this.state : arguments[1];
var maskChar = state.maskChar;
var mask = state.mask;
var maskChar = this.maskChar;
var mask = this.mask;
if (!maskChar) {
var prefixLen = this.getPrefix(state).length;
value = this.insertRawSubstr("", value, 0, state);
while (value.length > prefixLen && this.isPermanentChar(value.length - 1, state)) {
var prefixLen = this.getPrefix().length;
value = this.insertRawSubstr("", value, 0);
while (value.length > prefixLen && this.isPermanentChar(value.length - 1)) {
value = value.slice(0, value.length - 1);

@@ -138,9 +131,9 @@ }

if (value) {
var emptyValue = this.formatValue("", state);
return this.insertRawSubstr(emptyValue, value, 0, state);
var emptyValue = this.formatValue("");
return this.insertRawSubstr(emptyValue, value, 0);
}
return value.split("").concat(this.createFilledArray(mask.length - value.length, null)).map(function (char, pos) {
if (_this2.isAllowedChar(char, pos, state)) {
if (_this2.isAllowedChar(char, pos)) {
return char;
} else if (_this2.isPermanentChar(pos, state)) {
} else if (_this2.isPermanentChar(pos)) {
return mask[pos];

@@ -155,3 +148,5 @@ }

var end = start + len;
var maskChar = this.state.maskChar;
var maskChar = this.maskChar;
var mask = this.mask;
if (!maskChar) {

@@ -164,3 +159,2 @@ var prefixLen = this.getPrefix().length;

}
var mask = this.state.mask;
return value.split("").map(function (char, i) {

@@ -180,12 +174,11 @@ if (i < start || i >= end) {

insertRawSubstr: function (value, substr, pos) {
var state = arguments.length <= 3 || arguments[3] === undefined ? this.state : arguments[3];
var mask = state.mask;
var maskChar = state.maskChar;
var mask = this.mask;
var maskChar = this.maskChar;
var isFilled = this.isFilled(value, state);
var isFilled = this.isFilled(value);
substr = substr.split("");
for (var i = pos; i < mask.length && substr.length;) {
if (!this.isPermanentChar(i, state) || mask[i] === substr[0]) {
if (!this.isPermanentChar(i) || mask[i] === substr[0]) {
var char = substr.shift();
if (this.isAllowedChar(char, i, state, true)) {
if (this.isAllowedChar(char, i, true)) {
if (i < value.length) {

@@ -195,3 +188,3 @@ if (maskChar || isFilled) {

} else {
value = this.formatValue(value.substr(0, i) + char + value.substr(i), state);
value = this.formatValue(value.substr(0, i) + char + value.substr(i));
}

@@ -213,11 +206,10 @@ } else if (!maskChar) {

getRawSubstrLength: function (value, substr, pos) {
var state = arguments.length <= 3 || arguments[3] === undefined ? this.state : arguments[3];
var mask = state.mask;
var maskChar = state.maskChar;
var mask = this.mask;
var maskChar = this.maskChar;
substr = substr.split("");
for (var i = pos; i < mask.length && substr.length;) {
if (!this.isPermanentChar(i, state) || mask[i] === substr[0]) {
if (!this.isPermanentChar(i) || mask[i] === substr[0]) {
var char = substr.shift();
if (this.isAllowedChar(char, i, state, true)) {
if (this.isAllowedChar(char, i, true)) {
++i;

@@ -232,8 +224,7 @@ }

isAllowedChar: function (char, pos) {
var state = arguments.length <= 2 || arguments[2] === undefined ? this.state : arguments[2];
var allowMaskChar = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3];
var mask = state.mask;
var maskChar = state.maskChar;
var allowMaskChar = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
var mask = this.mask;
var maskChar = this.maskChar;
if (this.isPermanentChar(pos, state)) {
if (this.isPermanentChar(pos)) {
return mask[pos] === char;

@@ -246,5 +237,3 @@ }

isPermanentChar: function (pos) {
var state = arguments.length <= 1 || arguments[1] === undefined ? this.state : arguments[1];
return state.permanents.indexOf(pos) !== -1;
return this.permanents.indexOf(pos) !== -1;
},

@@ -300,2 +289,6 @@ setCaretToEnd: function () {

var input;
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) {
setTimeout(fn, 0);
};
var setPos = function () {

@@ -318,3 +311,3 @@ if ("selectionStart" in input && "selectionEnd" in input) {

setPos();
setTimeout(setPos, 0);
raf(setPos);
}

@@ -367,18 +360,14 @@

var state = {
mask: mask.mask,
permanents: mask.permanents,
maskChar: "maskChar" in this.props ? this.props.maskChar : this.defaultMaskChar
};
this.mask = mask.mask;
this.permanents = mask.permanents, this.maskChar = "maskChar" in this.props ? this.props.maskChar : this.defaultMaskChar;
if (this.props.alwaysShowMask || value) {
value = this.formatValue(value, state);
value = this.formatValue(value);
}
state.value = value;
return state;
return { value: value };
},
componentWillMount: function () {
var _state = this.state;
var mask = _state.mask;
var value = _state.value;
var mask = this.mask;
var value = this.state.value;

@@ -391,36 +380,28 @@ if (mask && value) {

var mask = this.parseMask(nextProps.mask);
var maskChar = "maskChar" in nextProps ? nextProps.maskChar : this.defaultMaskChar;
var state = {
mask: mask.mask,
permanents: mask.permanents,
maskChar: maskChar
};
var isMaskChanged = mask.mask && mask.mask !== this.mask;
this.mask = mask.mask;
this.permanents = mask.permanents, this.maskChar = "maskChar" in nextProps ? nextProps.maskChar : this.defaultMaskChar;
var newValue = nextProps.value !== undefined ? this.getStringValue(nextProps.value) : this.state.value;
var isMaskChanged = mask.mask && mask.mask !== this.state.mask;
var showEmpty = nextProps.alwaysShowMask || this.isFocused();
if (isMaskChanged || mask.mask && (newValue || showEmpty)) {
newValue = this.formatValue(newValue, state);
newValue = this.formatValue(newValue);
if (isMaskChanged) {
var pos = this.lastCaretPos;
var filledLen = this.getFilledLength(newValue);
if (filledLen < pos) {
this.setCaretPos(this.getRightEditablePos(filledLen));
}
}
}
if (mask.mask && this.isEmpty(newValue, state) && !showEmpty) {
if (mask.mask && this.isEmpty(newValue) && !showEmpty) {
newValue = "";
}
if (this.state.value !== newValue) {
state.value = newValue;
this.setState({ value: newValue });
}
this.setState(state);
},
componentDidUpdate: function (prevProps, prevState) {
var mask = this.state.mask;
if (!mask) {
return;
}
var isMaskChanged = mask && mask !== prevState.mask;
var pos = this.lastCaretPos;
var filledLen = this.getFilledLength();
if (isMaskChanged && filledLen < pos) {
this.setCaretPos(this.getRightEditablePos(filledLen));
}
},
onKeyDown: function (event) {

@@ -492,6 +473,5 @@ var hasHandler = typeof this.props.onKeyDown === "function";

var caretPos = this.getCaretPos();
var _state2 = this.state;
var value = _state2.value;
var mask = _state2.mask;
var maskChar = _state2.maskChar;
var value = this.state.value;
var mask = this.mask;
var maskChar = this.maskChar;

@@ -531,8 +511,8 @@ var maskLen = mask.length;

this.pasteSelection = null;
this.pasteText(this.state.value, event.target.value, pasteSelection);
this.pasteText(this.state.value, event.target.value, pasteSelection, event);
return;
}
var caretPos = this.getCaretPos();
var maskLen = this.state.mask.length;
var maskChar = this.state.maskChar;
var maskLen = this.mask.length;
var maskChar = this.maskChar;
var target = event.target;

@@ -570,3 +550,3 @@ var value = target.value;

}
} else if (this.getFilledLength() < this.state.mask.length) {
} else if (this.getFilledLength() < this.mask.length) {
this.setCaretToEnd();

@@ -610,7 +590,7 @@ }

var selection = this.getSelection();
this.pasteText(value, text, selection);
this.pasteText(value, text, selection, event);
}
event.preventDefault();
},
pasteText: function (value, text, selection) {
pasteText: function (value, text, selection, event) {
var caretPos = selection.start;

@@ -625,7 +605,9 @@ if (selection.length) {

if (value !== this.getInputDOMNode().value) {
event.target.value = value;
if (event) {
event.target.value = value;
}
this.setState({
value: value
});
if (typeof this.props.onChange === "function") {
if (event && typeof this.props.onChange === "function") {
this.props.onChange(event);

@@ -640,3 +622,3 @@ }

var ourProps = {};
if (this.state.mask) {
if (this.mask) {
var handlersKeys = ["onFocus", "onBlur", "onChange", "onKeyDown", "onKeyPress", "onPaste"];

@@ -643,0 +625,0 @@ handlersKeys.forEach(function (key) {

167

InputElement.js

@@ -40,6 +40,6 @@ // https://github.com/sanniassin/react-input-mask

},
getPrefix: function(state = this.state) {
getPrefix: function() {
var prefix = "";
var { mask } = state;
for (var i = 0; i < mask.length && this.isPermanentChar(i, state); ++i) {
var { mask } = this;
for (var i = 0; i < mask.length && this.isPermanentChar(i); ++i) {
prefix += mask[i];

@@ -49,8 +49,5 @@ }

},
getFilledLength: function(value, state = this.state) {
getFilledLength: function(value = this.state.value) {
var i;
if (value == null) {
value = state.value;
}
var maskChar = state.maskChar;
var { maskChar } = this;

@@ -63,3 +60,3 @@ if (!maskChar) {

var char = value[i];
if (!this.isPermanentChar(i, state) && this.isAllowedChar(char, i, state)) {
if (!this.isPermanentChar(i) && this.isAllowedChar(char, i)) {
break;

@@ -69,3 +66,3 @@ }

return ++i || this.getPrefix(state).length;
return ++i || this.getPrefix().length;
},

@@ -81,3 +78,3 @@ getLeftEditablePos: function(pos) {

getRightEditablePos: function(pos) {
var mask = this.state.mask;
var { mask } = this;
for (var i = pos; i < mask.length; ++i) {

@@ -90,9 +87,9 @@ if (!this.isPermanentChar(i)) {

},
isEmpty: function(value = this.state.value, state = this.state) {
isEmpty: function(value = this.state.value) {
return !value.split("").some((char, i) =>
!this.isPermanentChar(i, state) && this.isAllowedChar(char, i, state)
!this.isPermanentChar(i) && this.isAllowedChar(char, i)
);
},
isFilled: function(value = this.state.value, state = this.state) {
return this.getFilledLength(value, state) === state.mask.length;
isFilled: function(value = this.state.value) {
return this.getFilledLength(value) === this.mask.length;
},

@@ -106,8 +103,8 @@ createFilledArray: function(length, val) {

},
formatValue: function(value, state = this.state) {
var { maskChar, mask } = state;
formatValue: function(value) {
var { maskChar, mask } = this;
if (!maskChar) {
var prefixLen = this.getPrefix(state).length;
value = this.insertRawSubstr("", value, 0, state);
while (value.length > prefixLen && this.isPermanentChar(value.length - 1, state)) {
var prefixLen = this.getPrefix().length;
value = this.insertRawSubstr("", value, 0);
while (value.length > prefixLen && this.isPermanentChar(value.length - 1)) {
value = value.slice(0, value.length - 1);

@@ -118,4 +115,4 @@ }

if (value) {
var emptyValue = this.formatValue("", state);
return this.insertRawSubstr(emptyValue, value, 0, state);
var emptyValue = this.formatValue("");
return this.insertRawSubstr(emptyValue, value, 0);
}

@@ -125,6 +122,6 @@ return value.split("")

.map((char, pos) => {
if (this.isAllowedChar(char, pos, state)) {
if (this.isAllowedChar(char, pos)) {
return char;
}
else if (this.isPermanentChar(pos, state)) {
else if (this.isPermanentChar(pos)) {
return mask[pos];

@@ -138,3 +135,3 @@ }

var end = start + len;
var maskChar = this.state.maskChar;
var { maskChar, mask } = this;
if (!maskChar) {

@@ -147,3 +144,2 @@ var prefixLen = this.getPrefix().length;

}
var mask = this.state.mask;
return value.split("")

@@ -164,10 +160,10 @@ .map((char, i) => {

},
insertRawSubstr: function(value, substr, pos, state = this.state) {
var { mask, maskChar } = state;
var isFilled = this.isFilled(value, state);
insertRawSubstr: function(value, substr, pos) {
var { mask, maskChar } = this;
var isFilled = this.isFilled(value);
substr = substr.split("");
for (var i = pos; i < mask.length && substr.length; ) {
if (!this.isPermanentChar(i, state) || mask[i] === substr[0]) {
if (!this.isPermanentChar(i) || mask[i] === substr[0]) {
var char = substr.shift();
if (this.isAllowedChar(char, i, state, true)) {
if (this.isAllowedChar(char, i, true)) {
if (i < value.length) {

@@ -178,3 +174,3 @@ if (maskChar || isFilled) {

else {
value = this.formatValue(value.substr(0, i) + char + value.substr(i), state);
value = this.formatValue(value.substr(0, i) + char + value.substr(i));
}

@@ -197,9 +193,9 @@ }

},
getRawSubstrLength: function(value, substr, pos, state = this.state) {
var { mask, maskChar } = state;
getRawSubstrLength: function(value, substr, pos) {
var { mask, maskChar } = this;
substr = substr.split("");
for (var i = pos; i < mask.length && substr.length; ) {
if (!this.isPermanentChar(i, state) || mask[i] === substr[0]) {
if (!this.isPermanentChar(i) || mask[i] === substr[0]) {
var char = substr.shift();
if (this.isAllowedChar(char, i, state, true)) {
if (this.isAllowedChar(char, i, true)) {
++i;

@@ -214,5 +210,5 @@ }

},
isAllowedChar: function(char, pos, state = this.state, allowMaskChar = false) {
var { mask, maskChar } = state;
if (this.isPermanentChar(pos, state)) {
isAllowedChar: function(char, pos, allowMaskChar = false) {
var { mask, maskChar } = this;
if (this.isPermanentChar(pos)) {
return mask[pos] === char;

@@ -224,4 +220,4 @@ }

},
isPermanentChar: function(pos, state = this.state) {
return state.permanents.indexOf(pos) !== -1;
isPermanentChar: function(pos) {
return this.permanents.indexOf(pos) !== -1;
},

@@ -279,2 +275,10 @@ setCaretToEnd: function() {

var input;
var raf = window.requestAnimationFrame
||
window.webkitRequestAnimationFrame
||
window.mozRequestAnimationFrame
||
function(fn) { setTimeout(fn, 0); };
var setPos = function() {

@@ -299,3 +303,3 @@ if ("selectionStart" in input && "selectionEnd" in input) {

setPos();
setTimeout(setPos, 0);
raf(setPos);
}

@@ -351,16 +355,15 @@

var state = {
mask: mask.mask,
permanents: mask.permanents,
maskChar: "maskChar" in this.props ? this.props.maskChar : this.defaultMaskChar
};
this.mask = mask.mask;
this.permanents = mask.permanents,
this.maskChar = "maskChar" in this.props ? this.props.maskChar : this.defaultMaskChar;
if (this.props.alwaysShowMask || value) {
value = this.formatValue(value, state);
value = this.formatValue(value);
}
state.value = value;
return state;
return { value };
},
componentWillMount: function() {
var { mask, value } = this.state;
var { mask } = this;
var { value } = this.state;
if (mask && value) {

@@ -372,9 +375,8 @@ this.setState({ value });

var mask = this.parseMask(nextProps.mask);
var maskChar = "maskChar" in nextProps ? nextProps.maskChar : this.defaultMaskChar;
var state = {
mask: mask.mask,
permanents: mask.permanents,
maskChar: maskChar
};
var isMaskChanged = mask.mask && mask.mask !== this.mask;
this.mask = mask.mask;
this.permanents = mask.permanents,
this.maskChar = "maskChar" in nextProps ? nextProps.maskChar : this.defaultMaskChar;
var newValue = nextProps.value !== undefined

@@ -384,27 +386,21 @@ ? this.getStringValue(nextProps.value)

var isMaskChanged = mask.mask && mask.mask !== this.state.mask;
var showEmpty = nextProps.alwaysShowMask || this.isFocused();
if (isMaskChanged || (mask.mask && (newValue || showEmpty))) {
newValue = this.formatValue(newValue, state);
newValue = this.formatValue(newValue);
if (isMaskChanged) {
var pos = this.lastCaretPos;
var filledLen = this.getFilledLength(newValue);
if (filledLen < pos) {
this.setCaretPos(this.getRightEditablePos(filledLen));
}
}
}
if (mask.mask && this.isEmpty(newValue, state) && !showEmpty) {
if (mask.mask && this.isEmpty(newValue) && !showEmpty) {
newValue = "";
}
if (this.state.value !== newValue) {
state.value = newValue;
this.setState({ value: newValue });
}
this.setState(state);
},
componentDidUpdate: function(prevProps, prevState) {
var mask = this.state.mask;
if (!mask) {
return;
}
var isMaskChanged = mask && mask !== prevState.mask;
var pos = this.lastCaretPos;
var filledLen = this.getFilledLength();
if (isMaskChanged && filledLen < pos) {
this.setCaretPos(this.getRightEditablePos(filledLen));
}
},
onKeyDown: function(event) {

@@ -478,3 +474,4 @@ var hasHandler = typeof this.props.onKeyDown === "function";

var caretPos = this.getCaretPos();
var { value, mask, maskChar } = this.state;
var { value } = this.state;
var { mask, maskChar } = this;
var maskLen = mask.length;

@@ -514,8 +511,8 @@ var prefixLen = this.getPrefix().length;

this.pasteSelection = null;
this.pasteText(this.state.value, event.target.value, pasteSelection);
this.pasteText(this.state.value, event.target.value, pasteSelection, event);
return;
}
var caretPos = this.getCaretPos();
var maskLen = this.state.mask.length;
var maskChar = this.state.maskChar;
var maskLen = this.mask.length;
var maskChar = this.maskChar;
var target = event.target;

@@ -555,3 +552,3 @@ var value = target.value;

}
else if (this.getFilledLength() < this.state.mask.length) {
else if (this.getFilledLength() < this.mask.length) {
this.setCaretToEnd();

@@ -595,7 +592,7 @@ }

var selection = this.getSelection();
this.pasteText(value, text, selection);
this.pasteText(value, text, selection, event);
}
event.preventDefault();
},
pasteText: function(value, text, selection) {
pasteText: function(value, text, selection, event) {
var caretPos = selection.start;

@@ -610,7 +607,9 @@ if (selection.length) {

if (value !== this.getInputDOMNode().value) {
event.target.value = value;
if (event) {
event.target.value = value;
}
this.setState({
value: value
});
if (typeof this.props.onChange === "function") {
if (event && typeof this.props.onChange === "function") {
this.props.onChange(event);

@@ -623,3 +622,3 @@ }

var ourProps = {};
if (this.state.mask) {
if (this.mask) {
var handlersKeys = ["onFocus", "onBlur", "onChange", "onKeyDown", "onKeyPress", "onPaste"];

@@ -626,0 +625,0 @@ handlersKeys.forEach((key) => {

21

package.json
{
"name": "react-input-mask",
"description": "Masked input component for React",
"version": "0.5.3",
"version": "0.5.4",
"homepage": "https://github.com/sanniassin/react-input-mask",

@@ -19,3 +19,7 @@ "license": "MIT",

"devDependencies": {
"babel": "^5.8.34"
"babel": "^5.8.34",
"babel-jest": "^5.3.0",
"jest": "^0.1.40",
"react": "^0.14.3",
"react-addons-test-utils": "^0.14.3"
},

@@ -25,4 +29,15 @@ "main": "build/InputElement.js",

"build": "babel InputElement.js -d build",
"prepublish": "npm run build"
"prepublish": "npm run build && npm test",
"test": "jest"
},
"jest": {
"scriptPreprocessor": "./node_modules/babel-jest",
"testDirectoryName": "tests",
"unmockedModulePathPatterns": [
"./node_modules/react",
"./node_modules/react-dom",
"./node_modules/react-addons-test-utils",
"./node_modules/fbjs"
]
},
"repository": {

@@ -29,0 +44,0 @@ "type": "git",

.npmignore

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc