react-native-masked-text
Advanced tools
@@ -1,66 +0,73 @@ | ||
| import { CnpjMask } from '../lib/masks'; | ||
| import { CnpjMask } from '../lib/masks' | ||
| test('getType results cnpj', () => { | ||
| var expected = 'cnpj'; | ||
| var received = CnpjMask.getType(); | ||
| var expected = 'cnpj' | ||
| var received = CnpjMask.getType() | ||
| expect(received).toBe(expected); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| }) | ||
| test('79885262000130 results 79.885.262/0001-30', () => { | ||
| var mask = new CnpjMask(); | ||
| var expected = '79.885.262/0001-30'; | ||
| var received = mask.getValue('79885262000130'); | ||
| var mask = new CnpjMask() | ||
| var expected = '79.885.262/0001-30' | ||
| var received = mask.getValue('79885262000130') | ||
| expect(received).toBe(expected); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| }) | ||
| test('798852 results 79.885.2', () => { | ||
| var mask = new CnpjMask(); | ||
| var expected = '79.885.2'; | ||
| var received = mask.getValue('798852'); | ||
| var mask = new CnpjMask() | ||
| var expected = '79.885.2' | ||
| var received = mask.getValue('798852') | ||
| expect(received).toBe(expected); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| }) | ||
| test('79885262000130 results 79.885.262/0001-30 and is valid', () => { | ||
| var mask = new CnpjMask(); | ||
| var expected = '79.885.262/0001-30'; | ||
| var received = mask.getValue('79885262000130'); | ||
| var isValid = mask.validate(received); | ||
| var mask = new CnpjMask() | ||
| var expected = '79.885.262/0001-30' | ||
| var received = mask.getValue('79885262000130') | ||
| var isValid = mask.validate(received) | ||
| expect(received).toBe(expected); | ||
| expect(isValid).toBe(true); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| expect(isValid).toBe(true) | ||
| }) | ||
| test('79885262000140 results 79.885.262/0001-40 and is not valid', () => { | ||
| var mask = new CnpjMask(); | ||
| var expected = '79.885.262/0001-40'; | ||
| var received = mask.getValue('79885262000140'); | ||
| var isValid = mask.validate(received); | ||
| var mask = new CnpjMask() | ||
| var expected = '79.885.262/0001-40' | ||
| var received = mask.getValue('79885262000140') | ||
| var isValid = mask.validate(received) | ||
| expect(received).toBe(expected); | ||
| expect(isValid).toBe(false); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| expect(isValid).toBe(false) | ||
| }) | ||
| test('7988526200013 results 79.885.262/0001-3 and is not valid', () => { | ||
| var mask = new CnpjMask(); | ||
| var expected = '79.885.262/0001-3'; | ||
| var received = mask.getValue('7988526200013'); | ||
| var isValid = mask.validate(received); | ||
| var mask = new CnpjMask() | ||
| var expected = '79.885.262/0001-3' | ||
| var received = mask.getValue('7988526200013') | ||
| var isValid = mask.validate(received) | ||
| expect(received).toBe(expected); | ||
| expect(isValid).toBe(false); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| expect(isValid).toBe(false) | ||
| }) | ||
| test('79885262000130 results 79.885.262/0001-30 and raw value 79885262000130', () => { | ||
| var mask = new CnpjMask(); | ||
| var expected = '79.885.262/0001-30'; | ||
| var received = mask.getValue('79885262000130'); | ||
| var mask = new CnpjMask() | ||
| var expected = '79.885.262/0001-30' | ||
| var received = mask.getValue('79885262000130') | ||
| var expectedRawValue = '79885262000130'; | ||
| var receivedRawValue = mask.getRawValue(received); | ||
| var expectedRawValue = '79885262000130' | ||
| var receivedRawValue = mask.getRawValue(received) | ||
| expect(received).toBe(expected); | ||
| expect(receivedRawValue).toBe(expectedRawValue); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| expect(receivedRawValue).toBe(expectedRawValue) | ||
| }) | ||
| test('empty cnpj is invalid', () => { | ||
| var mask = new CnpjMask() | ||
| var received = mask.validate('', {}) | ||
| expect(received).toBeFalsy() | ||
| }) |
@@ -1,66 +0,73 @@ | ||
| import { CpfMask } from '../lib/masks'; | ||
| import { CpfMask } from '../lib/masks' | ||
| test('getType results cpf', () => { | ||
| var expected = 'cpf'; | ||
| var received = CpfMask.getType(); | ||
| var expected = 'cpf' | ||
| var received = CpfMask.getType() | ||
| expect(received).toBe(expected); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| }) | ||
| test('12312312356 results 123.123.123-56', () => { | ||
| var mask = new CpfMask(); | ||
| var expected = '123.123.123-56'; | ||
| var received = mask.getValue('12312312356'); | ||
| var mask = new CpfMask() | ||
| var expected = '123.123.123-56' | ||
| var received = mask.getValue('12312312356') | ||
| expect(received).toBe(expected); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| }) | ||
| test('123123 results 123.123', () => { | ||
| var mask = new CpfMask(); | ||
| var expected = '123.123'; | ||
| var received = mask.getValue('123123'); | ||
| var mask = new CpfMask() | ||
| var expected = '123.123' | ||
| var received = mask.getValue('123123') | ||
| expect(received).toBe(expected); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| }) | ||
| test('07833823678 results 078.338.236-78 and is valid', () => { | ||
| var mask = new CpfMask(); | ||
| var expected = '078.338.236-78'; | ||
| var received = mask.getValue('07833823678'); | ||
| var isValid = mask.validate(received); | ||
| var mask = new CpfMask() | ||
| var expected = '078.338.236-78' | ||
| var received = mask.getValue('07833823678') | ||
| var isValid = mask.validate(received) | ||
| expect(received).toBe(expected); | ||
| expect(isValid).toBe(true); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| expect(isValid).toBe(true) | ||
| }) | ||
| test('11111111111 results 111.111.111-11 and is not valid', () => { | ||
| var mask = new CpfMask(); | ||
| var expected = '111.111.111-11'; | ||
| var received = mask.getValue('11111111111'); | ||
| var isValid = mask.validate(received); | ||
| var mask = new CpfMask() | ||
| var expected = '111.111.111-11' | ||
| var received = mask.getValue('11111111111') | ||
| var isValid = mask.validate(received) | ||
| expect(received).toBe(expected); | ||
| expect(isValid).toBe(false); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| expect(isValid).toBe(false) | ||
| }) | ||
| test('1234567890 results 123.456.789-0 and is not valid', () => { | ||
| var mask = new CpfMask(); | ||
| var expected = '123.456.789-0'; | ||
| var received = mask.getValue('1234567890'); | ||
| var isValid = mask.validate(received); | ||
| var mask = new CpfMask() | ||
| var expected = '123.456.789-0' | ||
| var received = mask.getValue('1234567890') | ||
| var isValid = mask.validate(received) | ||
| expect(received).toBe(expected); | ||
| expect(isValid).toBe(false); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| expect(isValid).toBe(false) | ||
| }) | ||
| test('12312312356 results 123.123.123-56 and raw value 12312312356', () => { | ||
| var mask = new CpfMask(); | ||
| var expected = '123.123.123-56'; | ||
| var received = mask.getValue('12312312356'); | ||
| var mask = new CpfMask() | ||
| var expected = '123.123.123-56' | ||
| var received = mask.getValue('12312312356') | ||
| var expectedRawValue = '12312312356'; | ||
| var receivedRawValue = mask.getRawValue(received); | ||
| var expectedRawValue = '12312312356' | ||
| var receivedRawValue = mask.getRawValue(received) | ||
| expect(received).toBe(expected); | ||
| expect(receivedRawValue).toBe(expectedRawValue); | ||
| }); | ||
| expect(received).toBe(expected) | ||
| expect(receivedRawValue).toBe(expectedRawValue) | ||
| }) | ||
| test('empty cpf is invalid', () => { | ||
| var mask = new CpfMask() | ||
| var received = mask.validate('', {}) | ||
| expect(received).toBeFalsy() | ||
| }) |
@@ -12,3 +12,3 @@ Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined;}else{return get(parent,property,receiver);}}else if("value"in desc){return desc.value;}else{var getter=desc.get;if(getter===undefined){return undefined;}return getter.call(receiver);}};var _base=require('./_base.mask');var _base2=_interopRequireDefault(_base);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;} | ||
| var exp=/\.|\-|\//g; | ||
| cnpj=cnpj.toString().replace(exp,""); | ||
| cnpj=cnpj.toString().replace(exp,''); | ||
| var digito=new Number(eval(cnpj.charAt(12)+cnpj.charAt(13))); | ||
@@ -40,3 +40,4 @@ | ||
| value,settings){ | ||
| return validateCnpj(value); | ||
| var isEmpty=(value||'').trim().length===0; | ||
| return!isEmpty&&validateCnpj(value); | ||
| }}],[{key:'getType',value:function getType(){return'cnpj';}}]);return CnpjMask;}(_base2.default);exports.default=CnpjMask; |
@@ -6,7 +6,7 @@ Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined;}else{return get(parent,property,receiver);}}else if("value"in desc){return desc.value;}else{var getter=desc.get;if(getter===undefined){return undefined;}return getter.call(receiver);}};var _base=require('./_base.mask');var _base2=_interopRequireDefault(_base);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;} | ||
| var validateCPF=function validateCPF(cpf){ | ||
| if(cpf==""){ | ||
| if(cpf==''){ | ||
| return true; | ||
| } | ||
| cpf=cpf.replace(/\./gi,"").replace(/-/gi,""); | ||
| cpf=cpf.replace(/\./gi,'').replace(/-/gi,''); | ||
| var isValid=true; | ||
@@ -19,3 +19,15 @@ var sum; | ||
| if(cpf.length!=11||cpf=="00000000000"||cpf=="11111111111"||cpf=="22222222222"||cpf=="33333333333"||cpf=="44444444444"||cpf=="55555555555"||cpf=="66666666666"||cpf=="77777777777"||cpf=="88888888888"||cpf=="99999999999"){ | ||
| if( | ||
| cpf.length!=11|| | ||
| cpf=='00000000000'|| | ||
| cpf=='11111111111'|| | ||
| cpf=='22222222222'|| | ||
| cpf=='33333333333'|| | ||
| cpf=='44444444444'|| | ||
| cpf=='55555555555'|| | ||
| cpf=='66666666666'|| | ||
| cpf=='77777777777'|| | ||
| cpf=='88888888888'|| | ||
| cpf=='99999999999') | ||
| { | ||
| isValid=false; | ||
@@ -70,3 +82,4 @@ } | ||
| value,settings){ | ||
| return validateCPF(value); | ||
| var isEmpty=(value||'').trim().length===0; | ||
| return!isEmpty&&validateCPF(value); | ||
| }}],[{key:'getType',value:function getType(){return'cpf';}}]);return CpfMask;}(_base2.default);exports.default=CpfMask; |
+29
-28
@@ -1,41 +0,42 @@ | ||
| import BaseMask from './_base.mask'; | ||
| import BaseMask from './_base.mask' | ||
| const CNPJ_MASK = '99.999.999/9999-99'; | ||
| const CNPJ_MASK = '99.999.999/9999-99' | ||
| const validateCnpj = cnpj => { | ||
| var valida = new Array(6,5,4,3,2,9,8,7,6,5,4,3,2); | ||
| var dig1= new Number; | ||
| var dig2= new Number; | ||
| var i = 0; | ||
| var valida = new Array(6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2) | ||
| var dig1 = new Number() | ||
| var dig2 = new Number() | ||
| var i = 0 | ||
| var exp = /\.|\-|\//g; | ||
| cnpj = cnpj.toString().replace( exp, "" ); | ||
| var digito = new Number(eval(cnpj.charAt(12)+cnpj.charAt(13))); | ||
| var exp = /\.|\-|\//g | ||
| cnpj = cnpj.toString().replace(exp, '') | ||
| var digito = new Number(eval(cnpj.charAt(12) + cnpj.charAt(13))) | ||
| for(i = 0; i<valida.length; i++){ | ||
| dig1 += (i>0? (cnpj.charAt(i-1)*valida[i]):0); | ||
| dig2 += cnpj.charAt(i)*valida[i]; | ||
| } | ||
| dig1 = (((dig1%11)<2)? 0:(11-(dig1%11))); | ||
| dig2 = (((dig2%11)<2)? 0:(11-(dig2%11))); | ||
| for (i = 0; i < valida.length; i++) { | ||
| dig1 += i > 0 ? cnpj.charAt(i - 1) * valida[i] : 0 | ||
| dig2 += cnpj.charAt(i) * valida[i] | ||
| } | ||
| dig1 = dig1 % 11 < 2 ? 0 : 11 - dig1 % 11 | ||
| dig2 = dig2 % 11 < 2 ? 0 : 11 - dig2 % 11 | ||
| return (((dig1*10)+dig2) == digito); | ||
| return dig1 * 10 + dig2 == digito | ||
| } | ||
| export default class CnpjMask extends BaseMask { | ||
| static getType() { | ||
| return 'cnpj'; | ||
| } | ||
| static getType() { | ||
| return 'cnpj' | ||
| } | ||
| getValue(value, settings) { | ||
| return this.getVMasker().toPattern(value, CNPJ_MASK); | ||
| } | ||
| getValue(value, settings) { | ||
| return this.getVMasker().toPattern(value, CNPJ_MASK) | ||
| } | ||
| getRawValue(maskedValue, settings) { | ||
| return super.removeNotNumbers(maskedValue); | ||
| getRawValue(maskedValue, settings) { | ||
| return super.removeNotNumbers(maskedValue) | ||
| } | ||
| validate(value, settings) { | ||
| return validateCnpj(value); | ||
| } | ||
| } | ||
| validate(value, settings) { | ||
| var isEmpty = (value || '').trim().length === 0 | ||
| return !isEmpty && validateCnpj(value) | ||
| } | ||
| } |
+75
-62
@@ -1,70 +0,83 @@ | ||
| import BaseMask from './_base.mask'; | ||
| import BaseMask from './_base.mask' | ||
| const CPF_MASK = '999.999.999-99'; | ||
| const CPF_MASK = '999.999.999-99' | ||
| const validateCPF = (cpf) => { | ||
| if (cpf == "") { | ||
| return true; | ||
| } | ||
| cpf = cpf.replace(/\./gi, "").replace(/-/gi, ""); | ||
| var isValid = true; | ||
| var sum; | ||
| var rest; | ||
| var i; | ||
| i = 0; | ||
| sum = 0; | ||
| if (cpf.length != 11 || cpf == "00000000000" || cpf == "11111111111" || cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf == "99999999999") { | ||
| isValid = false; | ||
| } | ||
| for (i = 1; i <= 9; i++) { | ||
| sum = sum + parseInt(cpf.substring(i - 1, i)) * (11 - i); | ||
| } | ||
| rest = (sum * 10) % 11; | ||
| if ((rest == 10) || (rest == 11)) { | ||
| rest = 0; | ||
| } | ||
| if (rest != parseInt(cpf.substring(9, 10))) { | ||
| isValid = false; | ||
| } | ||
| sum = 0; | ||
| for (i = 1; i <= 10; i++) { | ||
| sum = sum + parseInt(cpf.substring(i - 1, i)) * (12 - i); | ||
| } | ||
| rest = (sum * 10) % 11; | ||
| if ((rest == 10) || (rest == 11)) { | ||
| rest = 0; | ||
| } | ||
| if (rest != parseInt(cpf.substring(10, 11))) { | ||
| isValid = false; | ||
| } | ||
| return isValid; | ||
| const validateCPF = cpf => { | ||
| if (cpf == '') { | ||
| return true | ||
| } | ||
| cpf = cpf.replace(/\./gi, '').replace(/-/gi, '') | ||
| var isValid = true | ||
| var sum | ||
| var rest | ||
| var i | ||
| i = 0 | ||
| sum = 0 | ||
| if ( | ||
| cpf.length != 11 || | ||
| cpf == '00000000000' || | ||
| cpf == '11111111111' || | ||
| cpf == '22222222222' || | ||
| cpf == '33333333333' || | ||
| cpf == '44444444444' || | ||
| cpf == '55555555555' || | ||
| cpf == '66666666666' || | ||
| cpf == '77777777777' || | ||
| cpf == '88888888888' || | ||
| cpf == '99999999999' | ||
| ) { | ||
| isValid = false | ||
| } | ||
| for (i = 1; i <= 9; i++) { | ||
| sum = sum + parseInt(cpf.substring(i - 1, i)) * (11 - i) | ||
| } | ||
| rest = (sum * 10) % 11 | ||
| if (rest == 10 || rest == 11) { | ||
| rest = 0 | ||
| } | ||
| if (rest != parseInt(cpf.substring(9, 10))) { | ||
| isValid = false | ||
| } | ||
| sum = 0 | ||
| for (i = 1; i <= 10; i++) { | ||
| sum = sum + parseInt(cpf.substring(i - 1, i)) * (12 - i) | ||
| } | ||
| rest = (sum * 10) % 11 | ||
| if (rest == 10 || rest == 11) { | ||
| rest = 0 | ||
| } | ||
| if (rest != parseInt(cpf.substring(10, 11))) { | ||
| isValid = false | ||
| } | ||
| return isValid | ||
| } | ||
| export default class CpfMask extends BaseMask { | ||
| static getType() { | ||
| return 'cpf'; | ||
| } | ||
| static getType() { | ||
| return 'cpf' | ||
| } | ||
| getValue(value, settings) { | ||
| return this.getVMasker().toPattern(value, CPF_MASK); | ||
| } | ||
| getValue(value, settings) { | ||
| return this.getVMasker().toPattern(value, CPF_MASK) | ||
| } | ||
| getRawValue(maskedValue, settings) { | ||
| return super.removeNotNumbers(maskedValue); | ||
| } | ||
| getRawValue(maskedValue, settings) { | ||
| return super.removeNotNumbers(maskedValue) | ||
| } | ||
| validate(value, settings) { | ||
| return validateCPF(value); | ||
| } | ||
| } | ||
| validate(value, settings) { | ||
| var isEmpty = (value || '').trim().length === 0 | ||
| return !isEmpty && validateCPF(value) | ||
| } | ||
| } |
+37
-37
| { | ||
| "name": "react-native-masked-text", | ||
| "version": "1.6.4", | ||
| "description": "Text and TextInput with mask for React Native applications", | ||
| "licenses": [ | ||
| { | ||
| "type": "MIT", | ||
| "url": "https://www.opensource.org/licenses/mit-license.php" | ||
| } | ||
| ], | ||
| "main": "./dist/index.js", | ||
| "scripts": { | ||
| "clean": "rimraf dist", | ||
| "test": "jest", | ||
| "build": "babel ./index.js ./lib/*.js ./lib/**/*.js -d ./dist", | ||
| "prepublish": "npm run clean && npm run build" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/benhurott/react-native-masked-text.git" | ||
| }, | ||
| "keywords": ["mask", "text", "textinput", "react-native"], | ||
| "author": "Ben-hur Santos Ott", | ||
| "license": "ISC", | ||
| "bugs": { | ||
| "url": "https://github.com/benhurott/react-native-masked-text/issues" | ||
| }, | ||
| "homepage": "https://github.com/benhurott/react-native-masked-text#readme", | ||
| "dependencies": { | ||
| "moment": "^2.19.1", | ||
| "tinymask": "^1.0.2" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "^6.26.0", | ||
| "babel-preset-react-native": "^1.9.1", | ||
| "jest": "^19.0.2", | ||
| "rimraf": "^2.6.2" | ||
| } | ||
| "name": "react-native-masked-text", | ||
| "version": "1.6.5", | ||
| "description": "Text and TextInput with mask for React Native applications", | ||
| "licenses": [ | ||
| { | ||
| "type": "MIT", | ||
| "url": "https://www.opensource.org/licenses/mit-license.php" | ||
| } | ||
| ], | ||
| "main": "./dist/index.js", | ||
| "scripts": { | ||
| "clean": "rimraf dist", | ||
| "test": "jest", | ||
| "build": "babel ./index.js ./lib/*.js ./lib/**/*.js -d ./dist", | ||
| "prepublish": "npm run clean && npm run build" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/benhurott/react-native-masked-text.git" | ||
| }, | ||
| "keywords": ["mask", "text", "textinput", "react-native"], | ||
| "author": "Ben-hur Santos Ott", | ||
| "license": "ISC", | ||
| "bugs": { | ||
| "url": "https://github.com/benhurott/react-native-masked-text/issues" | ||
| }, | ||
| "homepage": "https://github.com/benhurott/react-native-masked-text#readme", | ||
| "dependencies": { | ||
| "moment": "^2.19.1", | ||
| "tinymask": "^1.0.2" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "^6.26.0", | ||
| "babel-preset-react-native": "^1.9.1", | ||
| "jest": "^19.0.2", | ||
| "rimraf": "^2.6.2" | ||
| } | ||
| } |
+165
-153
@@ -8,19 +8,21 @@ # react-native-masked-text | ||
| ## Supported Versions | ||
| ## Supported Versions | ||
| React-native: 0.32.0 or higher | ||
| ## Install | ||
| `npm install react-native-masked-text --save` | ||
| ## Usage (TextInputMask) | ||
| ```jsx | ||
| import React, {Component} from 'react'; | ||
| import React, { Component } from 'react' | ||
| // import the component | ||
| import {TextInputMask} from 'react-native-masked-text'; | ||
| import { TextInputMask } from 'react-native-masked-text' | ||
| export default class MyComponent extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| super(props) | ||
| } | ||
@@ -32,7 +34,7 @@ | ||
| // because in this case, the day and the hour is invalid. | ||
| let valid = this.refs['myDateText'].isValid(); | ||
| let valid = this.refs['myDateText'].isValid() | ||
| // get converted value. Using type=datetime, it returns the moment object. | ||
| // If it's using type=money, it returns a Number object. | ||
| let rawValue = this.refs['myDateText'].getRawValue(); | ||
| let rawValue = this.refs['myDateText'].getRawValue() | ||
| } | ||
@@ -48,7 +50,7 @@ | ||
| format: 'DD-MM-YYYY HH:mm:ss' | ||
| }} /> | ||
| ); | ||
| }} | ||
| /> | ||
| ) | ||
| } | ||
| } | ||
| ``` | ||
@@ -60,16 +62,16 @@ | ||
| *credit-card*: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc). <br /> | ||
| *cpf*: use the mask `999.999.999-99` and `numeric` keyboard. <br /> | ||
| *cnpj*: use the mask `99.999.999/9999-99` and `numeric` keyboard. <br /> | ||
| *zip-code*: use the mask `99999-999` and `numeric` keyboard. <br /> | ||
| *only-numbers*: accept only numbers on field with `numeric` keyboard. <br /> | ||
| *money*: use the mask `R$ 0,00` on the field with `numeric` keyboard. It accepts options (see later in this doc). <br /> | ||
| *cel-phone*: use the mask `(99) 9999-9999` or `(99) 99999-9999` (changing automaticaly by length). It accepts options (see later in this doc). <br /> | ||
| *datetime*: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc). <br /> | ||
| *custom*: use your custom mask (see the options props later in this doc). <br /> | ||
| _credit-card_: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc). <br /> | ||
| _cpf_: use the mask `999.999.999-99` and `numeric` keyboard. <br /> | ||
| _cnpj_: use the mask `99.999.999/9999-99` and `numeric` keyboard. <br /> | ||
| _zip-code_: use the mask `99999-999` and `numeric` keyboard. <br /> | ||
| _only-numbers_: accept only numbers on field with `numeric` keyboard. <br /> | ||
| _money_: use the mask `R$ 0,00` on the field with `numeric` keyboard. It accepts options (see later in this doc). <br /> | ||
| _cel-phone_: use the mask `(99) 9999-9999` or `(99) 99999-9999` (changing automaticaly by length). It accepts options (see later in this doc). <br /> | ||
| _datetime_: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc). <br /> | ||
| _custom_: use your custom mask (see the options props later in this doc). <br /> | ||
| #### onChangeText | ||
| Invoked after new value applied to mask. | ||
| ```jsx | ||
@@ -88,3 +90,2 @@ /** | ||
| #### checkText | ||
@@ -115,8 +116,7 @@ | ||
| const Textfield = MKTextField.textfield() | ||
| .withPlaceholder('Text...') | ||
| .withStyle(styles.textfield) | ||
| .build(); | ||
| .withPlaceholder('Text...') | ||
| .withStyle(styles.textfield) | ||
| .build() | ||
| <TextInputMask | ||
| ;<TextInputMask | ||
| ref={'myDateText'} | ||
@@ -126,3 +126,4 @@ type={'money'} | ||
| customTextInput={Textfield} | ||
| placeholder="Enter text to see events" /> | ||
| placeholder="Enter text to see events" | ||
| /> | ||
| ``` | ||
@@ -135,50 +136,49 @@ | ||
| ```jsx | ||
| import React from 'react'; | ||
| import { StyleSheet, View } from 'react-native'; | ||
| import React from 'react' | ||
| import { StyleSheet, View } from 'react-native' | ||
| import { TextInputMask } from 'react-native-masked-text'; | ||
| import { Kaede } from 'react-native-textinput-effects'; | ||
| import { TextInputMask } from 'react-native-masked-text' | ||
| import { Kaede } from 'react-native-textinput-effects' | ||
| export default class App extends React.Component { | ||
| constructor(props) { | ||
| super(props) | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { | ||
| birthday: '' | ||
| } | ||
| } | ||
| this.state = { | ||
| birthday: '' | ||
| } | ||
| } | ||
| render() { | ||
| return ( | ||
| <View style={styles.container}> | ||
| <TextInputMask | ||
| ref={'myDateText'} | ||
| // here we set the custom component and their props. | ||
| customTextInput={Kaede} | ||
| customTextInputProps={{ | ||
| style:{ width: '80%' }, | ||
| label:'Birthday' | ||
| }} | ||
| type={'datetime'} | ||
| options={{ | ||
| format: 'DD-MM-YYYY HH:mm:ss' | ||
| }} | ||
| // don't forget: the value and state! | ||
| onChangeText={birthday => this.setState({ birthday })} | ||
| value={this.state.birthday} /> | ||
| </View> | ||
| ); | ||
| } | ||
| render() { | ||
| return ( | ||
| <View style={styles.container}> | ||
| <TextInputMask | ||
| ref={'myDateText'} | ||
| // here we set the custom component and their props. | ||
| customTextInput={Kaede} | ||
| customTextInputProps={{ | ||
| style: { width: '80%' }, | ||
| label: 'Birthday' | ||
| }} | ||
| type={'datetime'} | ||
| options={{ | ||
| format: 'DD-MM-YYYY HH:mm:ss' | ||
| }} | ||
| // don't forget: the value and state! | ||
| onChangeText={birthday => this.setState({ birthday })} | ||
| value={this.state.birthday} | ||
| /> | ||
| </View> | ||
| ) | ||
| } | ||
| } | ||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| backgroundColor: '#fff', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| } | ||
| }); | ||
| container: { | ||
| flex: 1, | ||
| backgroundColor: '#fff', | ||
| alignItems: 'center', | ||
| justifyContent: 'center' | ||
| } | ||
| }) | ||
| ``` | ||
@@ -202,21 +202,25 @@ | ||
| // when you call getElement method, the instance of native TextInput will returned. | ||
| this.refs['myText'].getElement().focus(); | ||
| this.refs['myText'].getElement().focus() | ||
| } | ||
| render() { | ||
| return ( | ||
| <View style={styles.container}> | ||
| <View> | ||
| <TextInputMask ref='myText' type={'only-numbers'} style={styles.input}/> | ||
| </View> | ||
| <View> | ||
| <Button | ||
| onPress={this.onGoFocus.bind(this)} | ||
| title="Go Focus Hue" | ||
| color="#841584" | ||
| /> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } | ||
| render() { | ||
| return ( | ||
| <View style={styles.container}> | ||
| <View> | ||
| <TextInputMask | ||
| ref="myText" | ||
| type={'only-numbers'} | ||
| style={styles.input} | ||
| /> | ||
| </View> | ||
| <View> | ||
| <Button | ||
| onPress={this.onGoFocus.bind(this)} | ||
| title="Go Focus Hue" | ||
| color="#841584" | ||
| /> | ||
| </View> | ||
| </View> | ||
| ) | ||
| } | ||
| } | ||
@@ -229,32 +233,34 @@ ``` | ||
| **For `type={'money'}`** <br /> | ||
| * *options={...}* | ||
| * `precision` (Number, default 2): the decimal places. | ||
| * `separator` (String, default ','): the decimal separator. | ||
| * `delimiter` (String, default '.'): the thousand separator. | ||
| * `unit`: (String, default 'R$'): the prefix text. | ||
| * `suffixUnit` (String, default ''): the suffix text. | ||
| * `zeroCents` (Boolean, default false): if must show cents. | ||
| * _options={...}_ | ||
| _ `precision` (Number, default 2): the decimal places. | ||
| _ `separator` (String, default ','): the decimal separator. | ||
| _ `delimiter` (String, default '.'): the thousand separator. | ||
| _ `unit`: (String, default 'R$'): the prefix text. | ||
| _ `suffixUnit` (String, default ''): the suffix text. | ||
| _ `zeroCents` (Boolean, default false): if must show cents. | ||
| **For `type={'cel-phone'}`** <br /> | ||
| * *options={...}* | ||
| * `withDDD` (Boolean, default true): if the ddd will be include in the mask. | ||
| * `dddMask` (String, default '(99) '): the default mask applied if `withDDD` is true. | ||
| * _options={...}_ | ||
| _ `withDDD` (Boolean, default true): if the ddd will be include in the mask. | ||
| _ `dddMask` (String, default '(99) '): the default mask applied if `withDDD` is true. | ||
| **For `type={'datetime'}`** <br /> | ||
| * *options={...}* | ||
| * `format` (String, default DD/MM/YYYY HH:mm:ss): moment date format. It accepts the following: | ||
| * DD/MM/YYYY HH:mm:ss | ||
| * DD/MM/YYYY | ||
| * MM/DD/YYYY | ||
| * YYYY/MM/DD | ||
| * HH:mm:ss | ||
| * HH:mm | ||
| * HH | ||
| * *You can use all of dates with `-` instead of `/` if you want* | ||
| * _options={...}_ | ||
| _ `format` (String, default DD/MM/YYYY HH:mm:ss): moment date format. It accepts the following: | ||
| _ DD/MM/YYYY HH:mm:ss | ||
| _ DD/MM/YYYY | ||
| _ MM/DD/YYYY | ||
| _ YYYY/MM/DD | ||
| _ HH:mm:ss | ||
| _ HH:mm | ||
| _ HH \* _You can use all of dates with `-` instead of `/` if you want_ | ||
| **For `type={'custom'}`** <br /> | ||
| * *options={...}* | ||
| * _options={...}_ | ||
| ```jsx | ||
@@ -311,49 +317,28 @@ { | ||
| } | ||
| ``` | ||
| **For `type={'credit-card'}`** <br /> | ||
| * *options={...}* | ||
| * `obfuscated` (Boolean, default false): if the mask must be `9999 **** **** 9999` | ||
| * _options={...}_ \* `obfuscated` (Boolean, default false): if the mask must be `9999 **** **** 9999` | ||
| ### Methods | ||
| * `getElement()`: return the instance of *TextInput* component. | ||
| * `isValid()`: if the value inputed is valid for the mask. | ||
| * *credit-card*: return true if the mask is complete. | ||
| * *cpf*: return true if the mask is complete and cpf is valid. | ||
| * *cnpj*: return true if the mask is complete and cnpj is valid. | ||
| * *zip-code*: return true if the mask is complete. | ||
| * *only-numbers*: always returns true. | ||
| * *money*: always returns true. | ||
| * *cel-phone*: return true if the mask is complete. | ||
| * *datetime*: return true if the date value is valid for format. | ||
| * *custom*: use custom validation, if it not exist, always returns true. | ||
| * `getRawValue()`: get the converted value of mask. | ||
| * *credit-card*: return the array with the value parts. Ex: `1234 1234 1234 1234` returns `[1234, 1234, 1234, 1234]`. | ||
| * *cpf*: return the value without mask. | ||
| * *cnpj*: return the value without mask. | ||
| * *zip-code*: return the value without mask. | ||
| * *only-numbers*: return the value without mask. | ||
| * *money*: return the Number value. Ex: `R$ 1.234,56` returns `1234.56`. | ||
| * *cel-phone*: return the value without mask. | ||
| * *datetime*: return the `moment` object for the date and format. | ||
| * *custom*: use custom method (passed in options). If it not exists, returns the current value. | ||
| * `getElement()`: return the instance of _TextInput_ component. | ||
| * `isValid()`: if the value inputed is valid for the mask. \* _credit-card_: return true if the mask is complete. \* _cpf_: return true if the mask is complete and cpf is valid. \* _cnpj_: return true if the mask is complete and cnpj is valid. \* _zip-code_: return true if the mask is complete. \* _only-numbers_: always returns true. \* _money_: always returns true. \* _cel-phone_: return true if the mask is complete. \* _datetime_: return true if the date value is valid for format. \* _custom_: use custom validation, if it not exist, always returns true. | ||
| * `getRawValue()`: get the converted value of mask. \* _credit-card_: return the array with the value parts. Ex: `1234 1234 1234 1234` returns `[1234, 1234, 1234, 1234]`. \* _cpf_: return the value without mask. \* _cnpj_: return the value without mask. \* _zip-code_: return the value without mask. \* _only-numbers_: return the value without mask. \* _money_: return the Number value. Ex: `R$ 1.234,56` returns `1234.56`. \* _cel-phone_: return the value without mask. \* _datetime_: return the `moment` object for the date and format. \* _custom_: use custom method (passed in options). If it not exists, returns the current value. | ||
| ## Usage (TextMask) | ||
| ```jsx | ||
| import React, {Component} from 'react'; | ||
| import React, { Component } from 'react' | ||
| // import the component | ||
| import {TextMask} from 'react-native-masked-text'; | ||
| import { TextMask } from 'react-native-masked-text' | ||
| export default class MyComponent extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| super(props) | ||
| this.state = { | ||
| text: '4567123409871234' | ||
| }; | ||
| } | ||
| } | ||
@@ -370,35 +355,36 @@ | ||
| obfuscated: true | ||
| }} /> | ||
| ); | ||
| }} | ||
| /> | ||
| ) | ||
| } | ||
| } | ||
| ``` | ||
| ### Props | ||
| The same of *TextInputMask*, but for React-Native *Text* component instead *TextInput*. | ||
| The same of _TextInputMask_, but for React-Native _Text_ component instead _TextInput_. | ||
| <br /> | ||
| *Warning*: if the value not match the mask, it will not appear. | ||
| _Warning_: if the value not match the mask, it will not appear. | ||
| ### Methods | ||
| `getElement()`: return the instance of *Text* component. | ||
| `getElement()`: return the instance of _Text_ component. | ||
| ## Extra (MaskService) | ||
| If you want, we expose the `MaskService`. You can use it: | ||
| **Methods** | ||
| * static toMask(type, value, settings): mask a value. | ||
| * `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...) | ||
| * `value` (String, required): the value to be masked | ||
| * `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter | ||
| _ `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...) | ||
| _ `value` (String, required): the value to be masked \* `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter | ||
| * static isValid(type, value, settings): validate if the mask and the value match. | ||
| * `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...) | ||
| * `value` (String, required): the value to be masked | ||
| * `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter | ||
| _ `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...) | ||
| _ `value` (String, required): the value to be masked \* `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter | ||
| Ex: | ||
| ``` jsx | ||
| import {MaskService} from 'react-native-masked-text' | ||
| ```jsx | ||
| import { MaskService } from 'react-native-masked-text' | ||
@@ -409,3 +395,3 @@ var money = MaskService.toMask('money', '123', { | ||
| delimiter: ',' | ||
| }); | ||
| }) | ||
@@ -416,10 +402,17 @@ // money -> US$ 1.23 | ||
| ## Throubleshooting | ||
| * If the `es2015` error throw by babel, try run `react-native start --reset-cache` | ||
| # Changelog | ||
| # Changelog | ||
| ## 1.6.5 | ||
| * Fixing validation for CPF and CNPJ when empty string is inputed. | ||
| ## 1.6.4 | ||
| * Fixing wrong format when use money mask and values with only one decimal place (`1.9`) (thanks to [Pablo](https://github.com/rochapablo)). | ||
| ## 1.6.3 | ||
| * Fixing moment version (thanks to [Edward Coleridge Smith](https://github.com/edcs)) | ||
@@ -429,12 +422,16 @@ * Adding pre-builded lib to improve build phase (thanks to [Giorgi Bagdavadze](https://github.com/notgiorgi)) | ||
| ## 1.6.2 | ||
| * Fixing custom mask when removing value in middle of the text. (thanks to [Aleksandr Kompaniets](https://github.com/Oxyaction)) | ||
| * KNOW ISSUE: the custom mask is not allowing user to input white spaces for `*` translation temporarily. | ||
| _ KNOW ISSUE: the custom mask is not allowing user to input white spaces for `_` translation temporarily. | ||
| ## 1.6.1 | ||
| * Fixing duplicated custom text input component. (thanks to [Pablo](https://github.com/rochapablo)) | ||
| ## 1.6.0 | ||
| * Add compatibility to [react-native-textinput-effects](https://github.com/halilb/react-native-textinput-effects) by using `customTextInputProps` (thanks to [Pablo](https://github.com/rochapablo)) | ||
| ## 1.5.3 | ||
| * Fix suffix backspace (thanks to [Thomas Kekeisen](https://github.com/blaues0cke)) | ||
@@ -444,42 +441,55 @@ * Fix last character on custom mask (thanks to [Daniel Maly](https://github.com/DanielMaly)) | ||
| ## 1.5.2 | ||
| * Adding `keyboardType` to custom mask. (thanks to [Nurbek Abulgazin](https://github.com/nurbek-ab)) | ||
| ## 1.5.1 | ||
| * Adding `tinymask` to fix some custom mask issues. | ||
| ## 1.5.0 | ||
| * Adding new and powerfull `custom` engine mask \m/. | ||
| ## 1.4.0 | ||
| * Adding `customTextInput` to allow other inputs instead native TextInput. (thanks to [Hellon Canella](https://github.com/helloncanella)) | ||
| ## 1.3.4 | ||
| * Remove default value from mask to allow placeholder on text-input (thanks to [Cuong Hoang](https://github.com/cuonghv91)). | ||
| * Please, caution. This can cause some runtime breaking if you update to this version. | ||
| * Remove default value from mask to allow placeholder on text-input (thanks to [Cuong Hoang](https://github.com/cuonghv91)). \* Please, caution. This can cause some runtime breaking if you update to this version. | ||
| ## 1.3.3 | ||
| * Update dependencies (thanks to [Vlad-Zhukov](https://github.com/Vlad-Zhukov)) | ||
| ## 1.3.2 | ||
| * Fix: ignoring Jet Brains ide files (thanks to [Vlad-Zhukov](https://github.com/Vlad-Zhukov)) | ||
| ## 1.3.1 | ||
| * Performance: adding check if the next value to be applied to the mask is equal as actual and prevent state change. | ||
| ## 1.3.0 | ||
| * Feat: now you can check and prevent input text on `TextInputMask` using `checkText` prop. | ||
| ## 1.2.2 | ||
| * Fix: fixing es2015 preset (thanks to [vagnercsouza](https://github.com/vagnercsouza), [barakcoh](https://github.com/barakcoh), Marvin Santos) | ||
| ## 1.2.1 | ||
| * Fix: fixing white space after unit on money mask. | ||
| ## 1.2.0 | ||
| * Adding `getRawValue`. | ||
| ## 1.1.1 | ||
| * Fixing toolbox-service reference (thanks to [ziftinpeki](https://github.com/ziftinpeki)). | ||
| ## 1.1.0 | ||
| * Adding credit-card mask. | ||
@@ -489,2 +499,3 @@ * Refactoring base mask to contain helpfull functions. | ||
| ## 1.0.0 | ||
| * Adding datetime and cnpj masks. | ||
@@ -497,2 +508,3 @@ * [Breaking Change] Refactoring MaskService. | ||
| ## 0.3.6 | ||
| * Fix vanilla-mask path on windows. |
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
2313
1.85%493
2.49%118458
-0.2%