diff --git a/README.md b/README.md index b66da55..7e2bfcd 100644 --- a/README.md +++ b/README.md @@ -141,6 +141,30 @@ export function InputMask() { ); +} +``` + + - Mask verification completed and tested + +```js +import { useCompleteMask, presets } from "mask-hooks"; +import { useState } from "react"; + +export function InputMask() { + + const maskComplete = useCompleteMask(presets.DATE_STAMP, result => !isNaN(Date.parse(result))); + const [ data, setData ] = useState(maskComplete('')); + + return ( + + setData(maskComplete(input.currentTarget.value)) } + style={ { color: data.passing ? "#00ff00" : "#ff0000" } } + /> + + ); + } ``` @@ -168,7 +192,7 @@ function useMask(settings: MaskProps): (target: T) => stri - **Function `useCompleteMask`**: Returns a function to use the preconfigured mask with additional information in the result. ```ts -function useCompleteMask(settings: MaskProps): (target: T) => { result: string, completed: boolean; entries: number; cleaned: string; } +function useCompleteMask(settings: MaskProps, onComplete ?: (result : string, cleaned: string) => boolean): (target: T) => { result: string, completed: boolean; entries: number; cleaned: string; passing : boolean | null; } ``` - **Function `applyMask`**: use a mask directly on the target diff --git a/package.json b/package.json index a48702a..338c949 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mask-hooks", - "version": "3.0.0", + "version": "3.1.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 2222c76..bd10e88 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ -import Mask from './mask.class'; import type { MaskProps, Stringable } from './mask.class'; +import Mask from './mask.class'; export type MaskApplicator = (target : T) => O; @@ -8,6 +8,7 @@ export type CompleteMask = { completed : boolean; entries : number; cleaned : string; + passing : boolean | null; } export function useMask(settings : MaskProps) : MaskApplicator { @@ -17,17 +18,22 @@ export function useMask(settings : MaskProps) : MaskApplicator { } -export function useCompleteMask(settings : MaskProps) : MaskApplicator { +export function useCompleteMask(settings : MaskProps, onComplete ?: (result : string, cleaned: string) => boolean) : MaskApplicator { const mask = new Mask(settings); function apply(target : T) : CompleteMask { + + const result : string = mask.apply(target); + return ({ - result: mask.apply(target), + result, completed: mask.completed, entries: mask.entries, - cleaned: mask.cleaned - }) + cleaned: mask.cleaned, + passing: (typeof onComplete === 'function' && mask.completed) ? onComplete(result, mask.cleaned) : null + }); + } return apply.bind(mask); @@ -41,7 +47,8 @@ export function applyMask(target : T, settings : MaskProps } -export { default as presets, getPresetMask } from './presets.const'; +export { getPresetMask, default as presets } from './presets.const'; export type { PresetOption } from './presets.const'; +export { Mask }; export type { MaskProps, Stringable }; -export { Mask }; \ No newline at end of file + diff --git a/tests/index.spec.ts b/tests/index.spec.ts index c2f498b..e4df8f1 100644 --- a/tests/index.spec.ts +++ b/tests/index.spec.ts @@ -19,6 +19,16 @@ describe('Functions and hooks tests', () => { }); + test('Hook useCompleteMask with test', () => { + + const maskComplete = useCompleteMask(getPresetMask('DATE_STAMP'), result => !isNaN(Date.parse(result))); + + expect(maskComplete('20231').passing).toBe(null); + expect(maskComplete('20231125').passing).toBe(true); + expect(maskComplete('20231150').passing).toBe(false); + + }); + test('Function applyMask', () => { expect(applyMask('1a2b3c', getPresetMask('ONLY_LETTERS', { transform: 'uppercase' }))).toBe('ABC');