Skip to content

Commit

Permalink
mask accept string
Browse files Browse the repository at this point in the history
  • Loading branch information
@guilhermeasn
guilhermeasn committed Jan 7, 2024
1 parent 0c4233c commit e6ffe0a
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 45 deletions.
8 changes: 4 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import { useState } from "react";
export default function InputMask() {

const mask = useMask({
masks: [ 'R$ #,##' ],
masks: '$ #,##',
placeholder: '0',
reverse: true,
infinity: {
Expand Down Expand Up @@ -69,7 +69,7 @@ import { useMask } from 'mask-hooks';
export default function Time() {

const time = useMask({
masks: [ '[0-23]:[0-59]:[0-59]' ]
masks: '[0-23]:[0-59]:[0-59]'
});

return (
Expand Down Expand Up @@ -203,7 +203,7 @@ function useCompleteMask(settings: MaskProps, onComplete ?: (result : string, cl
- **Function `applyMask`**: use a mask directly on the target

```ts
function applyMask<T extends Stringable>(target: T, settings: MaskProps): string
function applyMask<T extends Stringable>(target : T, settingsOrMasks : MaskProps | string | string[]) : string
```

- **Class `Mask`**: application mask core
Expand Down Expand Up @@ -250,7 +250,7 @@ The useMask receives the settings parameter of type MaskProps. See available set

|Prop|Type|Default|Details|
|---|---|---|---|
|**masks**|`Array<string>`||The masks that will be applied to the target. By default the characters `?`, `#`, `@` will be replaced by letters or numbers, numbers, letters, respectively. This character pattern can be changed. You can also use a Numerical Range to limit a numeric value to be entered using the pattern [\<number\>-\<number\>]. To escape a replacement character use `\` before it.|
|**masks**|`string`<br />`Array<string>`||The masks that will be applied to the target. By default the characters `?`, `#`, `@` will be replaced by letters or numbers, numbers, letters, respectively. This character pattern can be changed. You can also use a Numerical Range to limit a numeric value to be entered using the pattern [\<number\>-\<number\>]. To escape a replacement character use `\` before it.|
|**placeholder**|`string`|`''`|Autofill of the mask to be filled|
|**reverse**|`boolean`|`false`|Mask fill in inverted mode|
|**transform**|`'uppercase'`<br />`'lowercase'`<br />`'capitalize'`<br />`'capitalizeAll'`<br />`'none'`|`'none'`|Apply a transformation to the result string|
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mask-hooks",
"version": "3.2.1",
"version": "3.3.0",
"description": "Lightweight package with functions and hooks for masking data inputs and outputs for Node.JS projects",
"main": "dist/common/index.js",
"module": "dist/module/index.js",
Expand Down
4 changes: 2 additions & 2 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ export function useCompleteMask(settings : MaskProps, onComplete ?: (result : st

}

export function applyMask<T extends Stringable>(target : T, settings : MaskProps) : string {
export function applyMask<T extends Stringable>(target : T, settingsOrMasks : MaskProps | string | string[]) : string {

const mask = new Mask(settings);
const mask = new Mask(typeof settingsOrMasks === 'object' && !Array.isArray(settingsOrMasks) ? settingsOrMasks : { masks: settingsOrMasks });
return mask.apply(target);

}
Expand Down
12 changes: 7 additions & 5 deletions src/mask.class.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
*/

export type MaskProps = {
masks : string[];
masks : string[] | string;
patterns ?: { [key in string] : RegExp };
placeholder ?: string;
reverse ?: boolean;
Expand All @@ -27,6 +27,8 @@ export type MaskProps = {
maxentries ?: number | null;
}

export type RequiredMaskProps = Required<{ masks : string[] } & Omit<MaskProps, 'masks'>>;

type Extra = {
each : number;
add : string;
Expand All @@ -40,7 +42,7 @@ export default class Mask {

/* STATIC RESOURCES */

public static defaultPatterns : Required<MaskProps>['patterns'] = {
public static defaultPatterns : RequiredMaskProps['patterns'] = {
// test only one char at a time
'#': /[0-9]/,
'@': /[A-Za-z]/,
Expand All @@ -51,7 +53,7 @@ export default class Mask {
return target.split('').reverse().join('');
}

public static transform(target : string, type : Required<MaskProps>['transform']) : string {
public static transform(target : string, type : RequiredMaskProps['transform']) : string {

function capitalize(target : string, all: boolean = false) : string {
if(all) return target.split(' ').reduce((p, c, i) => i ? p + ' ' + capitalize(c) : capitalize(c), '');
Expand Down Expand Up @@ -99,7 +101,7 @@ export default class Mask {
private _cleaned : string = '';
private _remnant : string[][];

private _props : Required<MaskProps>;
private _props : RequiredMaskProps;

/* PUBLIC METHODS */

Expand Down Expand Up @@ -148,7 +150,7 @@ export default class Mask {

}

public get props() : Readonly<Required<MaskProps>> {
public get props() : Readonly<RequiredMaskProps> {
return this._props;
}

Expand Down
48 changes: 24 additions & 24 deletions src/presets.const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,54 +40,54 @@ export function getPresetMask(preset : PresetOption, change : Partial<MaskProps>
const presets : { [key in PresetOption] : MaskProps } = {

ONLY_NUMBERS: {
masks: [ '#' ],
masks: '#',
infinity: true
},

ONLY_LETTERS: {
masks: [ '@' ],
masks: '@',
infinity: true
},

ONLY_CHARS: {
masks: [ '?' ],
masks: '?',
infinity: true
},

DATE_STAMP: {
masks: [ '####-##-##' ]
masks: '####-##-##'
},

DATE_PTBR: {
masks: [ '##/##/####' ]
masks: '##/##/####'
},

DATETIME_STAMP: {
masks: [ '####-##-## ##:##:##' ]
masks: '####-##-## ##:##:##'
},

DATETIME_PTBR: {
masks: [ '##/##/#### ##:##' ]
masks: '##/##/#### ##:##'
},

DATE_STAMP_LIMITED: {
masks: [ '[1800-2200]-[1-12]-[1-31]' ]
masks: '[1800-2200]-[1-12]-[1-31]'
},

DATE_PTBR_LIMITED: {
masks: [ '[1-31]/[1-12]/[1800-2200]' ]
masks: '[1-31]/[1-12]/[1800-2200]'
},

DATETIME_STAMP_LIMITED: {
masks: [ '[1800-2200]-[1-12]-[1-31] [0-23]:[0-59]:[0-59]' ]
masks: '[1800-2200]-[1-12]-[1-31] [0-23]:[0-59]:[0-59]'
},

DATETIME_PTBR_LIMITED: {
masks: [ '[1-31]/[1-12]/[1800-2200] [0-23]:[0-59]' ]
masks: '[1-31]/[1-12]/[1800-2200] [0-23]:[0-59]'
},

PHONE_USA: {
masks: [ '(###) ###-####' ]
masks: '(###) ###-####'
},

PHONE_BR: {
Expand All @@ -98,7 +98,7 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

CURRENCY_POINT: {
masks: [ '#.##' ],
masks: '#.##',
placeholder: '0',
reverse: true,
infinity: {
Expand All @@ -108,7 +108,7 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

CURRENCY_COMMA: {
masks: [ '#,##' ],
masks: '#,##',
placeholder: '0',
reverse: true,
infinity: {
Expand All @@ -118,7 +118,7 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

CURRENCY_DOLLAR: {
masks: [ '$#.##' ],
masks: '$#.##',
placeholder: '0',
reverse: true,
infinity: {
Expand All @@ -128,7 +128,7 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

CURRENCY_PTBR: {
masks: [ 'R$ #,##' ],
masks: 'R$ #,##',
placeholder: '0',
reverse: true,
infinity: {
Expand All @@ -138,7 +138,7 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

CURRENCY_DOLLAR_LIMITED: {
masks: [ '$#.##' ],
masks: '$#.##',
placeholder: '0',
reverse: true,
infinity: {
Expand All @@ -149,7 +149,7 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

CURRENCY_PTBR_LIMITED: {
masks: [ 'R$ #,##' ],
masks: 'R$ #,##',
placeholder: '0',
reverse: true,
infinity: {
Expand All @@ -160,11 +160,11 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

DOCUMENT_CPF: {
masks: [ '###.###.###-##' ]
masks: '###.###.###-##'
},

DOCUMENT_CNPJ: {
masks: [ '##.###.###/####-##' ]
masks: '##.###.###/####-##'
},

DOCUMENT_CPF_CNPJ: {
Expand All @@ -175,15 +175,15 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

ZIPCODE_USA: {
masks: [ '#####' ]
masks: '#####'
},

ZIPCODE_BR: {
masks: [ '##.###-###' ]
masks: '##.###-###'
},

PRODUCT_KEY: {
masks: [ '?????-?????-?????-?????-?????' ],
masks: '?????-?????-?????-?????-?????',
transform: 'uppercase'
},

Expand All @@ -197,7 +197,7 @@ const presets : { [key in PresetOption] : MaskProps } = {
},

CAPITALIZE_ALL: {
masks: [ '.' ],
masks: '.',
patterns: { '.': /./ },
infinity: true,
transform: 'capitalizeAll'
Expand Down
1 change: 1 addition & 0 deletions tests/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ describe('Functions and hooks tests', () => {
test('Function applyMask', () => {

expect(applyMask('1a2b3c', getPresetMask('ONLY_LETTERS', { transform: 'uppercase' }))).toBe('ABC');
expect(applyMask('1a2b3c', '###')).toBe('123');

});

Expand Down
15 changes: 6 additions & 9 deletions tests/mask.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ describe('Mask class tests', () => {

test('Apply mask and transform', () => {

const masks = [ '=> @@@@@ @@@!' ];
const masks = '=> @@@@@ @@@!';
const target = 'aBcDefGh';

expect(new Mask({ masks, transform: 'none' }).apply(target)).toBe('=> aBcDe fGh!');
Expand Down Expand Up @@ -214,9 +214,6 @@ describe('Mask class tests', () => {

test('Mask strange types', () => {

// @ts-ignore
expect(new Mask({ masks: '1#3#5' }).apply('24')).toBe('12345');

// @ts-ignore
expect(new Mask({ masks: 12345 }).apply('')).toBe('12345');

Expand All @@ -228,7 +225,7 @@ describe('Mask class tests', () => {
test('Mask numerical range in date', () => {

const mask = new Mask({
masks: [ '[1-31]/[1-12]/[1900-2100]' ]
masks: '[1-31]/[1-12]/[1900-2100]'
});

expect(mask.apply('4302010')).toBe('04/03/2010');
Expand All @@ -248,7 +245,7 @@ describe('Mask class tests', () => {
test('Mask numerical range misc', () => {

const mask = new Mask({
masks: [ '[50-2300]' ]
masks: '[50-2300]'
});

expect(mask.apply('4')).toBe('04');
Expand All @@ -261,19 +258,19 @@ describe('Mask class tests', () => {
test('Mask numerical range escape', () => {

const mask = new Mask({
masks: [ 'a[0-3]b\\[0-3]c' ]
masks: 'a[0-3]b\\[0-3]c'
});

expect(mask.apply('000')).toBe('a0b[0-3]c');

const mask2 = new Mask({
masks: [ '[0-9] (\\[0-9]) - ###' ]
masks: '[0-9] (\\[0-9]) - ###'
});

expect(mask2.apply('0123')).toBe('0 ([0-9]) - 123');

const mask3 = new Mask({
masks: [ '[0-99]\\[0-99] ?' ],
masks: '[0-99]\\[0-99] ?',
infinity: true
});

Expand Down

0 comments on commit e6ffe0a

Please sign in to comment.