diff --git a/README.md b/README.md index bc8f2b0..1cfdfa7 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ import { useState } from "react"; export default function InputMask() { const mask = useMask({ - masks: [ 'R$ #,##' ], + masks: '$ #,##', placeholder: '0', reverse: true, infinity: { @@ -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 ( @@ -203,7 +203,7 @@ function useCompleteMask(settings: MaskProps, onComplete ?: (result : string, cl - **Function `applyMask`**: use a mask directly on the target ```ts -function applyMask(target: T, settings: MaskProps): string +function applyMask(target : T, settingsOrMasks : MaskProps | string | string[]) : string ``` - **Class `Mask`**: application mask core @@ -250,7 +250,7 @@ The useMask receives the settings parameter of type MaskProps. See available set |Prop|Type|Default|Details| |---|---|---|---| -|**masks**|`Array`||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 [\-\]. To escape a replacement character use `\` before it.| +|**masks**|`string`
`Array`||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 [\-\]. 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'`
`'lowercase'`
`'capitalize'`
`'capitalizeAll'`
`'none'`|`'none'`|Apply a transformation to the result string| diff --git a/package.json b/package.json index 252f450..ea71a6a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/index.ts b/src/index.ts index bd10e88..cf87412 100644 --- a/src/index.ts +++ b/src/index.ts @@ -40,9 +40,9 @@ export function useCompleteMask(settings : MaskProps, onComplete ?: (result : st } -export function applyMask(target : T, settings : MaskProps) : string { +export function applyMask(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); } diff --git a/src/mask.class.ts b/src/mask.class.ts index 941aade..7f382ef 100644 --- a/src/mask.class.ts +++ b/src/mask.class.ts @@ -18,7 +18,7 @@ */ export type MaskProps = { - masks : string[]; + masks : string[] | string; patterns ?: { [key in string] : RegExp }; placeholder ?: string; reverse ?: boolean; @@ -27,6 +27,8 @@ export type MaskProps = { maxentries ?: number | null; } +export type RequiredMaskProps = Required<{ masks : string[] } & Omit>; + type Extra = { each : number; add : string; @@ -40,7 +42,7 @@ export default class Mask { /* STATIC RESOURCES */ - public static defaultPatterns : Required['patterns'] = { + public static defaultPatterns : RequiredMaskProps['patterns'] = { // test only one char at a time '#': /[0-9]/, '@': /[A-Za-z]/, @@ -51,7 +53,7 @@ export default class Mask { return target.split('').reverse().join(''); } - public static transform(target : string, type : Required['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), ''); @@ -99,7 +101,7 @@ export default class Mask { private _cleaned : string = ''; private _remnant : string[][]; - private _props : Required; + private _props : RequiredMaskProps; /* PUBLIC METHODS */ @@ -148,7 +150,7 @@ export default class Mask { } - public get props() : Readonly> { + public get props() : Readonly { return this._props; } diff --git a/src/presets.const.ts b/src/presets.const.ts index f75e963..af65f47 100644 --- a/src/presets.const.ts +++ b/src/presets.const.ts @@ -40,54 +40,54 @@ export function getPresetMask(preset : PresetOption, change : Partial 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: { @@ -98,7 +98,7 @@ const presets : { [key in PresetOption] : MaskProps } = { }, CURRENCY_POINT: { - masks: [ '#.##' ], + masks: '#.##', placeholder: '0', reverse: true, infinity: { @@ -108,7 +108,7 @@ const presets : { [key in PresetOption] : MaskProps } = { }, CURRENCY_COMMA: { - masks: [ '#,##' ], + masks: '#,##', placeholder: '0', reverse: true, infinity: { @@ -118,7 +118,7 @@ const presets : { [key in PresetOption] : MaskProps } = { }, CURRENCY_DOLLAR: { - masks: [ '$#.##' ], + masks: '$#.##', placeholder: '0', reverse: true, infinity: { @@ -128,7 +128,7 @@ const presets : { [key in PresetOption] : MaskProps } = { }, CURRENCY_PTBR: { - masks: [ 'R$ #,##' ], + masks: 'R$ #,##', placeholder: '0', reverse: true, infinity: { @@ -138,7 +138,7 @@ const presets : { [key in PresetOption] : MaskProps } = { }, CURRENCY_DOLLAR_LIMITED: { - masks: [ '$#.##' ], + masks: '$#.##', placeholder: '0', reverse: true, infinity: { @@ -149,7 +149,7 @@ const presets : { [key in PresetOption] : MaskProps } = { }, CURRENCY_PTBR_LIMITED: { - masks: [ 'R$ #,##' ], + masks: 'R$ #,##', placeholder: '0', reverse: true, infinity: { @@ -160,11 +160,11 @@ const presets : { [key in PresetOption] : MaskProps } = { }, DOCUMENT_CPF: { - masks: [ '###.###.###-##' ] + masks: '###.###.###-##' }, DOCUMENT_CNPJ: { - masks: [ '##.###.###/####-##' ] + masks: '##.###.###/####-##' }, DOCUMENT_CPF_CNPJ: { @@ -175,15 +175,15 @@ const presets : { [key in PresetOption] : MaskProps } = { }, ZIPCODE_USA: { - masks: [ '#####' ] + masks: '#####' }, ZIPCODE_BR: { - masks: [ '##.###-###' ] + masks: '##.###-###' }, PRODUCT_KEY: { - masks: [ '?????-?????-?????-?????-?????' ], + masks: '?????-?????-?????-?????-?????', transform: 'uppercase' }, @@ -197,7 +197,7 @@ const presets : { [key in PresetOption] : MaskProps } = { }, CAPITALIZE_ALL: { - masks: [ '.' ], + masks: '.', patterns: { '.': /./ }, infinity: true, transform: 'capitalizeAll' diff --git a/tests/index.spec.ts b/tests/index.spec.ts index e4df8f1..3206c3c 100644 --- a/tests/index.spec.ts +++ b/tests/index.spec.ts @@ -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'); }); diff --git a/tests/mask.spec.ts b/tests/mask.spec.ts index 6cbc2a2..0c3c216 100644 --- a/tests/mask.spec.ts +++ b/tests/mask.spec.ts @@ -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!'); @@ -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'); @@ -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'); @@ -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'); @@ -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 });