@alfalab/core-components-masked-input 6.3.18 → 6.3.19

package/Component.js

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"textHidden":"masked-input__textHidden_1gxmc"};
+var styles = {"textHidden":"masked-input__textHidden_mrvxw"};
 require('./index.css')
 
 // Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000

package/esm/Component.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { createTextMaskInputElement } from 'text-mask-core';
 import { Input } from '@alfalab/core-components-input/esm';
 
-var styles = {"textHidden":"masked-input__textHidden_1gxmc"};
+var styles = {"textHidden":"masked-input__textHidden_mrvxw"};
 require('./index.css')
 
 // Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ubv8 */
-.masked-input__textHidden_1gxmc input {
+/* hash: 1vhqg */
+.masked-input__textHidden_mrvxw input {
     opacity: 0;
 }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ubv8 */
-.masked-input__textHidden_1gxmc input {
+/* hash: 1vhqg */
+.masked-input__textHidden_mrvxw input {
     opacity: 0;
 }

package/modern/Component.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { createTextMaskInputElement } from 'text-mask-core';
 import { Input } from '@alfalab/core-components-input/modern';
 
-const styles = {"textHidden":"masked-input__textHidden_1gxmc"};
+const styles = {"textHidden":"masked-input__textHidden_mrvxw"};
 require('./index.css')
 
 // Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ubv8 */
-.masked-input__textHidden_1gxmc input {
+/* hash: 1vhqg */
+.masked-input__textHidden_mrvxw input {
     opacity: 0;
 }

package/moderncssm/Component.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { InputProps } from "@alfalab/core-components-input";
+type Mask = Array<string | RegExp>;
+type TextMaskConfig = {
+    currentCaretPosition: number;
+    rawValue: string;
+    previousConformedValue: string;
+    mask?: Mask | ((rawValue: string) => Mask);
+    guide?: boolean;
+    showMask?: boolean;
+    placeholderChar?: string;
+    keepCharPositions?: boolean;
+    pipe?: (conformedValue: string, config: TextMaskConfig) => false | string | {
+        value: string;
+        indexesOfPipedChars: number[];
+    };
+};
+type MaskedInputProps = InputProps & {
+    /**
+     * Маска для поля ввода
+     * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#mask-array
+     */
+    mask?: TextMaskConfig['mask'];
+    /**
+     * Управляет поведением компонента при удалении символов
+     */
+    keepCharPositions?: TextMaskConfig['keepCharPositions'];
+    /**
+     * Дает возможность изменить значение поля перед рендером
+     */
+    onBeforeDisplay?: TextMaskConfig['pipe'];
+};
+declare const PLACEHOLDER_CHAR = "\u2000";
+declare const MaskedInput: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-input/components/base-input").BaseInputProps, "FormControlComponent"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & {
+    /**
+     * Маска для поля ввода
+     * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#mask-array
+     */
+    mask?: TextMaskConfig['mask'];
+    /**
+     * Управляет поведением компонента при удалении символов
+     */
+    keepCharPositions?: TextMaskConfig['keepCharPositions'];
+    /**
+     * Дает возможность изменить значение поля перед рендером
+     */
+    onBeforeDisplay?: TextMaskConfig['pipe'];
+} & React.RefAttributes<HTMLInputElement>>;
+export { TextMaskConfig, MaskedInputProps, PLACEHOLDER_CHAR, MaskedInput };

package/moderncssm/Component.js

@@ -0,0 +1,66 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { createTextMaskInputElement } from 'text-mask-core';
+import { Input } from '@alfalab/core-components-input/moderncssm';
+import styles from './index.module.css';
+
+// Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000
+const PLACEHOLDER_CHAR = '\u2000';
+const MaskedInput = React.forwardRef(({ mask, keepCharPositions = false, value, defaultValue, className, onBeforeDisplay, onChange, onClear, ...restProps }, ref) => {
+    const [inputNode, setInputNode] = useState(null);
+    const textMask = useRef(null);
+    const [inputValue, setInputValue] = useState(value || defaultValue || '');
+    // Не показываем сырое значение до применения маски
+    const [textHidden, setTextHidden] = useState(true);
+    const update = useCallback((newValue = '') => {
+        if (textMask.current && inputNode) {
+            try {
+                textMask.current.update(newValue);
+            }
+            catch (e) {
+                // ignore masking errors
+            }
+            setInputValue(inputNode.value);
+        }
+    }, [inputNode]);
+    const handleInputChange = useCallback((event) => {
+        update(event.target.value);
+        if (onChange) {
+            onChange(event, {
+                value: event.target.value,
+            });
+        }
+    }, [onChange, update]);
+    const handleClear = useCallback((event) => {
+        update('');
+        if (onClear)
+            onClear(event);
+    }, [onClear, update]);
+    useEffect(() => {
+        if (inputNode) {
+            textMask.current = createTextMaskInputElement({
+                mask,
+                inputElement: inputNode,
+                pipe: onBeforeDisplay,
+                guide: false,
+                keepCharPositions,
+                showMask: false,
+                placeholderChar: PLACEHOLDER_CHAR,
+                rawValue: '',
+                currentCaretPosition: 0,
+                previousConformedValue: '',
+            });
+        }
+    }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);
+    useEffect(() => {
+        update(value || defaultValue);
+    }, [value, update, defaultValue]);
+    useEffect(() => {
+        setTextHidden(false);
+    }, []);
+    return (React.createElement(Input, { ...restProps, className: cn(className, { [styles.textHidden]: textHidden }), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs([ref, setInputNode]) }));
+});
+MaskedInput.displayName = 'MaskedInput';
+
+export { MaskedInput, PLACEHOLDER_CHAR };

package/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { MaskedInput, PLACEHOLDER_CHAR } from './Component.js';

package/moderncssm/index.module.css

@@ -0,0 +1,3 @@
+.textHidden input {
+    opacity: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-masked-input",
-    "version": "6.3.18",
+    "version": "6.3.19",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,12 +14,12 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^15.0.5",
+        "@alfalab/core-components-input": "^15.1.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "^1.1.0",
         "text-mask-core": "^5.1.2",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }