react-native-masked-text
Advanced tools
Comparing version 1.6.4 to 1.6.5
@@ -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; |
@@ -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) | ||
} | ||
} |
@@ -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) | ||
} | ||
} |
{ | ||
"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" | ||
} | ||
} |
318
README.md
@@ -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. |
2313
493
118458