@maskito/kit - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

index.esm.js

@@ -1,2 +0,2 @@
-import { MASKITO_DEFAULT_OPTIONS, maskitoPipe } from '@maskito/core';
+import { MASKITO_DEFAULT_OPTIONS } from '@maskito/core';
 
@@ -551,31 +551,37 @@ const DEFAULT_MIN_DATE = new Date('0001-01-01');
 
+  const preprocessor = ({
+    elementState,
+    data
+  }) => {
+    const {
+      value,
+      selection
+    } = elementState;
+    return {
+      elementState: {
+        selection,
+        value: removePlaceholder(value)
+      },
+      data
+    };
+  };
+
+  const postprocessor = ({
+    value,
+    selection
+  }, initialElementState) => initialElementState.value && (focused || !focusedOnly) ? {
+    value: value + placeholder.slice(value.length),
+    selection
+  } : {
+    value,
+    selection
+  };
+
   return {
     plugins,
     removePlaceholder,
-    preprocessor: ({
-      elementState,
-      data
-    }) => {
-      const {
-        value,
-        selection
-      } = elementState;
-      return {
-        elementState: {
-          selection,
-          value: removePlaceholder(value)
-        },
-        data
-      };
-    },
-    postprocessor: ({
-      value,
-      selection
-    }, initialElementState) => initialElementState.value && (focused || !focusedOnly) ? {
-      value: value + placeholder.slice(value.length),
-      selection
-    } : {
-      value,
-      selection
-    }
+    preprocessor,
+    postprocessor,
+    preprocessors: [preprocessor],
+    postprocessors: [postprocessor]
   };
@@ -632,10 +638,10 @@ }
   const dateModeTemplate = mode.split('/').join(separator);
-  return {
+  return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), {
     mask: Array.from(dateModeTemplate).map(char => char === separator ? char : /\d/),
     overwriteMode: 'replace',
-    preprocessor: maskitoPipe(createZeroPlaceholdersPreprocessor(), createValidDatePreprocessor({
+    preprocessors: [createZeroPlaceholdersPreprocessor(), createValidDatePreprocessor({
       dateModeTemplate,
       dateSegmentsSeparator: separator
-    })),
-    postprocessor: createMinMaxDatePostprocessor({
+    })],
+    postprocessors: [createMinMaxDatePostprocessor({
       min,
@@ -645,4 +651,4 @@ max,
       dateSegmentSeparator: separator
-    })
-  };
+    })]
+  });
 }
@@ -732,11 +738,11 @@
   const dateMask = Array.from(dateModeTemplate).map(char => char === separator ? char : /\d/);
-  return {
+  return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), {
     mask: [...dateMask, ...Array.from(DATE_RANGE_SEPARATOR), ...dateMask],
     overwriteMode: 'replace',
-    preprocessor: maskitoPipe(createZeroPlaceholdersPreprocessor(), createValidDatePreprocessor({
+    preprocessors: [createZeroPlaceholdersPreprocessor(), createValidDatePreprocessor({
       dateModeTemplate,
       dateSegmentsSeparator: separator,
       datesSeparator: DATE_RANGE_SEPARATOR
-    })),
-    postprocessor: maskitoPipe(createMinMaxDatePostprocessor({
+    })],
+    postprocessors: [createMinMaxDatePostprocessor({
       min,
@@ -756,4 +762,4 @@ max,
       datesSeparator: DATE_RANGE_SEPARATOR
-    }))
-  };
+    })]
+  });
 }
@@ -989,10 +995,10 @@
   const dateModeTemplate = dateMode.split('/').join(dateSeparator);
-  return {
+  return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), {
     mask: [...Array.from(dateModeTemplate).map(char => char === dateSeparator ? char : /\d/), ...DATE_TIME_SEPARATOR.split(''), ...Array.from(timeMode).map(char => TIME_FIXED_CHARACTERS.includes(char) ? char : /\d/)],
     overwriteMode: 'replace',
-    preprocessor: maskitoPipe(createZeroPlaceholdersPreprocessor(), createValidDateTimePreprocessor({
+    preprocessors: [createZeroPlaceholdersPreprocessor(), createValidDateTimePreprocessor({
       dateModeTemplate,
       dateSegmentsSeparator: dateSeparator
-    })),
-    postprocessor: createMinMaxDateTimePostprocessor({
+    })],
+    postprocessors: [createMinMaxDateTimePostprocessor({
       min,
@@ -1002,7 +1008,59 @@ max,
       timeMode
-    })
-  };
+    })]
+  });
 }
 
+function generateMaskExpression({
+  decimalSeparator,
+  isNegativeAllowed,
+  precision,
+  thousandSeparator,
+  prefix,
+  postfix
+}) {
+  const computedPrefix = computeAllOptionalCharsRegExp(prefix);
+  const digit = '\\d';
+  const optionalMinus = isNegativeAllowed ? `${CHAR_MINUS}?` : '';
+  const integerPart = thousandSeparator ? `[${digit}${escapeRegExp(thousandSeparator)}]*` : `[${digit}]*`;
+  const decimalPart = precision > 0 ? `(${escapeRegExp(decimalSeparator)}${digit}{0,${Number.isFinite(precision) ? precision : ''}})?` : '';
+  const computedPostfix = computeAllOptionalCharsRegExp(postfix);
+  return new RegExp(`^${computedPrefix}${optionalMinus}${integerPart}${decimalPart}${computedPostfix}$`);
+}
+
+function computeAllOptionalCharsRegExp(str) {
+  return str ? `${str.split('').map(char => `${escapeRegExp(char)}?`).join('')}` : '';
+}
+
+function getDefaultPseudoSeparators(decimalSeparator, thousandSeparator) {
+  return decimalSeparator === ',' || decimalSeparator === '.' ? ['.', ',', 'б', 'ю'].filter(char => char !== thousandSeparator && char !== decimalSeparator) : [];
+}
+
+function maskitoParseNumber(maskedNumber, decimalSeparator = '.') {
+  const hasNegativeSign = !!maskedNumber.match(new RegExp(`^\\D*[${CHAR_MINUS}\\${CHAR_HYPHEN}${CHAR_EN_DASH}${CHAR_EM_DASH}]`));
+  const unmaskedNumber = maskedNumber.replace(new RegExp(`[^\\d${escapeRegExp(decimalSeparator)}]`, 'g'), '').replace(decimalSeparator, '.');
+  return unmaskedNumber ? Number((hasNegativeSign ? CHAR_HYPHEN : '') + unmaskedNumber) : NaN;
+}
+
 /**
+ * This plugin is connected with {@link createMinMaxPostprocessor}:
+ * both validate `min`/`max` bounds of entered value (but at the different point of time).
+ */
+
+function createMinMaxPlugin({
+  min,
+  max,
+  decimalSeparator
+}) {
+  return maskitoEventHandler('blur', element => {
+    const parsedNumber = maskitoParseNumber(element.value, decimalSeparator);
+    const newValue = clamp(parsedNumber, min, max).toString();
+
+    if (newValue !== element.value) {
+      element.value = newValue;
+      element.dispatchEvent(new Event('input'));
+    }
+  });
+}
+
+/**
  * It pads EMPTY integer part with zero if decimal parts exists.
@@ -1105,33 +1163,9 @@ * It works on blur event only!
 
-function generateMaskExpression({
-  decimalSeparator,
-  isNegativeAllowed,
-  precision,
-  thousandSeparator,
-  prefix,
-  postfix
-}) {
-  const computedPrefix = computeAllOptionalCharsRegExp(prefix);
-  const digit = '\\d';
-  const optionalMinus = isNegativeAllowed ? `${CHAR_MINUS}?` : '';
-  const integerPart = thousandSeparator ? `[${digit}${escapeRegExp(thousandSeparator)}]*` : `[${digit}]*`;
-  const decimalPart = precision > 0 ? `(${escapeRegExp(decimalSeparator)}${digit}{0,${Number.isFinite(precision) ? precision : ''}})?` : '';
-  const computedPostfix = computeAllOptionalCharsRegExp(postfix);
-  return new RegExp(`^${computedPrefix}${optionalMinus}${integerPart}${decimalPart}${computedPostfix}$`);
-}
+/**
+ * This postprocessor is connected with {@link createMinMaxPlugin}:
+ * both validate `min`/`max` bounds of entered value (but at the different point of time).
+ */
 
-function computeAllOptionalCharsRegExp(str) {
-  return str ? `${str.split('').map(char => `${escapeRegExp(char)}?`).join('')}` : '';
-}
-
-function getDefaultPseudoSeparators(decimalSeparator, thousandSeparator) {
-  return decimalSeparator === ',' || decimalSeparator === '.' ? ['.', ',', 'б', 'ю'].filter(char => char !== thousandSeparator && char !== decimalSeparator) : [];
-}
-
-function maskitoParseNumber(maskedNumber, decimalSeparator = '.') {
-  const negativeSign = maskedNumber.match(new RegExp(`^[${CHAR_MINUS}\\${CHAR_HYPHEN}${CHAR_EN_DASH}${CHAR_EM_DASH}]`));
-  return Number((negativeSign ? CHAR_HYPHEN : '') + maskedNumber.replace(new RegExp(`[^\\d${escapeRegExp(decimalSeparator)}]`, 'g'), '').replace(decimalSeparator, '.'));
-}
-
-function createMaxValidationPostprocessor({
+function createMinMaxPostprocessor({
+  min,
   max,
@@ -1144,4 +1178,18 @@ decimalSeparator
   }) => {
-    if (maskitoParseNumber(value, decimalSeparator) > max) {
-      const newValue = `${max}`.replace('.', decimalSeparator);
+    const parsedNumber = maskitoParseNumber(value, decimalSeparator);
+    const limitedValue =
+    /**
+     * We cannot limit lower bound if user enters positive number.
+     * The same for upper bound and negative number.
+     * ___
+     * @example (min = 5)
+     * Empty input => Without this condition user cannot type 42 (the first digit will be rejected)
+     * ___
+     * @example (max = -10)
+     * Value is -10 => Without this condition user cannot delete 0 to enter another digit
+     */
+    parsedNumber > 0 ? Math.min(parsedNumber, max) : Math.max(parsedNumber, min);
+
+    if (!Number.isNaN(parsedNumber) && limitedValue !== parsedNumber) {
+      const newValue = `${limitedValue}`.replace('.', decimalSeparator).replace(CHAR_HYPHEN, CHAR_MINUS);
       return {
@@ -1363,3 +1411,4 @@ value: newValue,
   max = Number.MAX_SAFE_INTEGER,
-  isNegativeAllowed = true,
+  min = Number.MIN_SAFE_INTEGER,
+  isNegativeAllowed = min < 0,
   precision = 0,
@@ -1374,3 +1423,3 @@ thousandSeparator = CHAR_NO_BREAK_SPACE,
   const pseudoMinuses = [CHAR_HYPHEN, CHAR_EN_DASH, CHAR_EM_DASH].filter(char => char !== thousandSeparator && char !== decimalSeparator);
-  return {
+  return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), {
     mask: generateMaskExpression({
@@ -1384,3 +1433,3 @@ decimalSeparator,
     }),
-    preprocessor: maskitoPipe(createPseudoCharactersPreprocessor(CHAR_MINUS, pseudoMinuses), createPseudoCharactersPreprocessor(decimalSeparator, decimalPseudoSeparators), createNotEmptyIntegerPartPreprocessor({
+    preprocessors: [createPseudoCharactersPreprocessor(CHAR_MINUS, pseudoMinuses), createPseudoCharactersPreprocessor(decimalSeparator, decimalPseudoSeparators), createNotEmptyIntegerPartPreprocessor({
       decimalSeparator,
@@ -1392,5 +1441,6 @@ precision
       thousandSeparator
-    }), createZeroPrecisionPreprocessor(precision, decimalSeparator)),
-    postprocessor: maskitoPipe(createLeadingZeroesValidationPostprocessor(decimalSeparator, thousandSeparator), createMaxValidationPostprocessor({
+    }), createZeroPrecisionPreprocessor(precision, decimalSeparator)],
+    postprocessors: [createLeadingZeroesValidationPostprocessor(decimalSeparator, thousandSeparator), createMinMaxPostprocessor({
       decimalSeparator,
+      min,
       max
@@ -1406,4 +1456,8 @@ }), maskitoPrefixPostprocessorGenerator(prefix), maskitoPostfixPostprocessorGenerator(postfix), createThousandSeparatorPostprocessor({
       precision
-    })),
-    plugins: [createNotEmptyIntegerPlugin(decimalSeparator)],
+    })],
+    plugins: [createNotEmptyIntegerPlugin(decimalSeparator), createMinMaxPlugin({
+      min,
+      max,
+      decimalSeparator
+    })],
     overwriteMode: decimalZeroPadding ? ({
@@ -1413,3 +1467,3 @@ value,
     }) => from <= value.indexOf(decimalSeparator) ? 'shift' : 'replace' : 'shift'
-  };
+  });
 }
@@ -1494,9 +1548,9 @@
   const enrichedTimeSegmentMaxValues = Object.assign(Object.assign({}, DEFAULT_TIME_SEGMENT_MAX_VALUES), timeSegmentMaxValues);
-  return {
+  return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), {
     mask: Array.from(mode).map(char => TIME_FIXED_CHARACTERS.includes(char) ? char : /\d/),
-    preprocessor: maskitoPipe(createZeroPlaceholdersPreprocessor(), createMaxValidationPreprocessor(enrichedTimeSegmentMaxValues)),
+    preprocessors: [createZeroPlaceholdersPreprocessor(), createMaxValidationPreprocessor(enrichedTimeSegmentMaxValues)],
     overwriteMode: 'replace'
-  };
+  });
 }
 
 export { maskitoCaretGuard, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator, maskitoDateTimeOptionsGenerator, maskitoEventHandler, maskitoNumberOptionsGenerator, maskitoParseNumber, maskitoPostfixPostprocessorGenerator, maskitoPrefixPostprocessorGenerator, maskitoRejectEvent, maskitoTimeOptionsGenerator, maskitoWithPlaceholder };

lib/masks/date-range/date-range-mask.d.ts

@@ -10,3 +10,3 @@ import { MaskitoOptions } from '@maskito/core';
     maxLength?: Partial<MaskitoDateSegments<number>>;
-}): MaskitoOptions;
+}): Required<MaskitoOptions>;
 //# sourceMappingURL=date-range-mask.d.ts.map

lib/masks/date-time/date-time-mask.d.ts

@@ -9,3 +9,3 @@ import { MaskitoOptions } from '@maskito/core';
     min?: Date;
-}): MaskitoOptions;
+}): Required<MaskitoOptions>;
 //# sourceMappingURL=date-time-mask.d.ts.map

lib/masks/date/date-mask.d.ts

@@ -8,3 +8,3 @@ import { MaskitoOptions } from '@maskito/core';
     min?: Date;
-}): MaskitoOptions;
+}): Required<MaskitoOptions>;
 //# sourceMappingURL=date-mask.d.ts.map

lib/masks/number/number-mask.d.ts

 import { MaskitoOptions } from '@maskito/core';
-export declare function maskitoNumberOptionsGenerator({ max, isNegativeAllowed, precision, thousandSeparator, decimalSeparator, decimalPseudoSeparators, decimalZeroPadding, prefix, postfix, }?: {
+export declare function maskitoNumberOptionsGenerator({ max, min, isNegativeAllowed, precision, thousandSeparator, decimalSeparator, decimalPseudoSeparators, decimalZeroPadding, prefix, postfix, }?: {
+    min?: number;
     max?: number;
+    /**
+     * @deprecated use `min > 0` instead of `isNegativeAllowed: false`
+     * TODO: delete in 1.x.x
+     */
     isNegativeAllowed?: boolean;
@@ -12,3 +17,3 @@ precision?: number;
     postfix?: string;
-}): MaskitoOptions;
+}): Required<MaskitoOptions>;
 //# sourceMappingURL=number-mask.d.ts.map

lib/masks/number/plugins/index.d.ts

@@ -0,2 +1,3 @@
+export * from './min-max.plugin';
 export * from './not-empty-integer.plugin';
 //# sourceMappingURL=index.d.ts.map

lib/masks/number/processors/index.d.ts

 export * from './decimal-zero-padding-postprocessor';
 export * from './leading-zeroes-validation-postprocessor';
-export * from './max-validation-postprocessor';
+export * from './min-max-postprocessor';
 export * from './non-removable-chars-deletion-preprocessor';
@@ -5,0 +5,0 @@ export * from './not-empty-integer-part-preprocessor';

lib/masks/time/time-mask.d.ts

@@ -6,3 +6,3 @@ import { MaskitoOptions } from '@maskito/core';
     timeSegmentMaxValues?: Partial<MaskitoTimeSegments<number>>;
-}): MaskitoOptions;
+}): Required<MaskitoOptions>;
 //# sourceMappingURL=time-mask.d.ts.map

lib/processors/with-placeholder.d.ts

 import { MaskitoOptions } from '@maskito/core';
-export declare function maskitoWithPlaceholder(placeholder: string, focusedOnly?: boolean): Pick<Required<MaskitoOptions>, 'plugins' | 'postprocessor' | 'preprocessor'> & {
+export declare function maskitoWithPlaceholder(placeholder: string, focusedOnly?: boolean): Pick<Required<MaskitoOptions>, 'plugins' | 'postprocessor' | 'postprocessors' | 'preprocessor' | 'preprocessors'> & {
     removePlaceholder: (value: string) => string;
 };
 //# sourceMappingURL=with-placeholder.d.ts.map

package.json

 {
   "name": "@maskito/kit",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "The optional framework-agnostic Maskito's package with ready-to-use masks",
@@ -33,3 +33,3 @@ "keywords": [
   "peerDependencies": {
-    "@maskito/core": "^0.14.0"
+    "@maskito/core": "^0.15.0"
   },
@@ -36,0 +36,0 @@ "main": "./index.umd.js",

No alert changes

Improved metrics

Total package byte prevSize

167807

increased by3.39%

Number of package files

174

increased by1.16%

Lines of code

3285

increased by3.63%

No dependency changes