@alfalab/core-components-masked-input 7.0.0 → 7.1.0-snapshot-92b8690

package/dynamic-mixins/Component.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { InputProps } from '@alfalab/core-components-input';
+declare type Mask = Array<string | RegExp>;
+export declare 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[];
+    };
+};
+export declare 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'];
+};
+export declare const PLACEHOLDER_CHAR = "\u2000";
+export declare const MaskedInput: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-input/components/base-input").BaseInputProps, "FormControlComponent"> & {
+    breakpoint?: number | undefined;
+    client?: "desktop" | "mobile" | 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 {};

package/dynamic-mixins/Component.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var textMaskCore = require('text-mask-core');
+var dynamicMixins = require('@alfalab/core-components-input/dynamic-mixins');
+var index_module = require('./index.module.css.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+// Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000
+var PLACEHOLDER_CHAR = '\u2000';
+var MaskedInput = React__default.default.forwardRef(function (_a, ref) {
+    var _b;
+    var mask = _a.mask, _c = _a.keepCharPositions, keepCharPositions = _c === void 0 ? false : _c, value = _a.value, defaultValue = _a.defaultValue, className = _a.className, onBeforeDisplay = _a.onBeforeDisplay, onChange = _a.onChange, onClear = _a.onClear, restProps = tslib.__rest(_a, ["mask", "keepCharPositions", "value", "defaultValue", "className", "onBeforeDisplay", "onChange", "onClear"]);
+    var _d = React.useState(null), inputNode = _d[0], setInputNode = _d[1];
+    var textMask = React.useRef(null);
+    var _e = React.useState(value || defaultValue || ''), inputValue = _e[0], setInputValue = _e[1];
+    // Не показываем сырое значение до применения маски
+    var _f = React.useState(true), textHidden = _f[0], setTextHidden = _f[1];
+    var update = React.useCallback(function (newValue) {
+        if (newValue === void 0) { newValue = ''; }
+        if (textMask.current && inputNode) {
+            try {
+                textMask.current.update(newValue);
+            }
+            catch (e) {
+                // ignore masking errors
+            }
+            setInputValue(inputNode.value);
+        }
+    }, [inputNode]);
+    var handleInputChange = React.useCallback(function (event) {
+        update(event.target.value);
+        if (onChange) {
+            onChange(event, {
+                value: event.target.value,
+            });
+        }
+    }, [onChange, update]);
+    var handleClear = React.useCallback(function (event) {
+        update('');
+        if (onClear)
+            onClear(event);
+    }, [onClear, update]);
+    React.useEffect(function () {
+        if (inputNode) {
+            textMask.current = textMaskCore.createTextMaskInputElement({
+                mask: mask,
+                inputElement: inputNode,
+                pipe: onBeforeDisplay,
+                guide: false,
+                keepCharPositions: keepCharPositions,
+                showMask: false,
+                placeholderChar: PLACEHOLDER_CHAR,
+                rawValue: '',
+                currentCaretPosition: 0,
+                previousConformedValue: '',
+            });
+        }
+    }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);
+    React.useEffect(function () {
+        update(value || defaultValue);
+    }, [value, update, defaultValue]);
+    React.useEffect(function () {
+        setTextHidden(false);
+    }, []);
+    return (React__default.default.createElement(dynamicMixins.Input, tslib.__assign({}, restProps, { className: cn__default.default(className, (_b = {}, _b[index_module.textHidden] = textHidden, _b)), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs__default.default([ref, setInputNode]) })));
+});
+MaskedInput.displayName = 'MaskedInput';
+
+exports.MaskedInput = MaskedInput;
+exports.PLACEHOLDER_CHAR = PLACEHOLDER_CHAR;
+//# sourceMappingURL=Component.js.map

package/dynamic-mixins/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { ChangeEvent, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\nimport { createTextMaskInputElement, TextMaskInputElement } from 'text-mask-core';\n\nimport { Input, InputProps } from '@alfalab/core-components-input';\n\nimport styles from './index.module.css';\n\n// TODO: заставить rollup добавлять кастомные декларации в сборку\ntype Mask = Array<string | RegExp>;\nexport type TextMaskConfig = {\n    currentCaretPosition: number;\n    rawValue: string;\n    previousConformedValue: string;\n    mask?: Mask | ((rawValue: string) => Mask);\n    guide?: boolean;\n    showMask?: boolean;\n    placeholderChar?: string;\n    keepCharPositions?: boolean;\n    pipe?: (\n        conformedValue: string,\n        config: TextMaskConfig,\n    ) => false | string | { value: string; indexesOfPipedChars: number[] };\n};\n\nexport type MaskedInputProps = InputProps & {\n    /**\n     * Маска для поля ввода\n     * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#mask-array\n     */\n    mask?: TextMaskConfig['mask'];\n\n    /**\n     * Управляет поведением компонента при удалении символов\n     */\n    keepCharPositions?: TextMaskConfig['keepCharPositions'];\n\n    /**\n     * Дает возможность изменить значение поля перед рендером\n     */\n    onBeforeDisplay?: TextMaskConfig['pipe'];\n};\n\n// Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \\u2000\nexport const PLACEHOLDER_CHAR = '\\u2000';\n\nexport const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(\n    (\n        {\n            mask,\n            keepCharPositions = false,\n            value,\n            defaultValue,\n            className,\n            onBeforeDisplay,\n            onChange,\n            onClear,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const [inputNode, setInputNode] = useState<HTMLInputElement | null>(null);\n        const textMask = useRef<TextMaskInputElement | null>(null);\n\n        const [inputValue, setInputValue] = useState(value || defaultValue || '');\n        // Не показываем сырое значение до применения маски\n        const [textHidden, setTextHidden] = useState(true);\n\n        const update = useCallback(\n            (newValue = '') => {\n                if (textMask.current && inputNode) {\n                    try {\n                        textMask.current.update(newValue);\n                    } catch (e) {\n                        // ignore masking errors\n                    }\n\n                    setInputValue(inputNode.value);\n                }\n            },\n            [inputNode],\n        );\n\n        const handleInputChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                update(event.target.value);\n\n                if (onChange) {\n                    onChange(event, {\n                        value: event.target.value,\n                    });\n                }\n            },\n            [onChange, update],\n        );\n\n        const handleClear = useCallback(\n            (event: MouseEvent<HTMLButtonElement>) => {\n                update('');\n                if (onClear) onClear(event);\n            },\n            [onClear, update],\n        );\n\n        useEffect(() => {\n            if (inputNode) {\n                textMask.current = createTextMaskInputElement({\n                    mask,\n                    inputElement: inputNode,\n                    pipe: onBeforeDisplay,\n                    guide: false,\n                    keepCharPositions,\n                    showMask: false,\n                    placeholderChar: PLACEHOLDER_CHAR,\n                    rawValue: '',\n                    currentCaretPosition: 0,\n                    previousConformedValue: '',\n                });\n            }\n        }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);\n\n        useEffect(() => {\n            update(value || defaultValue);\n        }, [value, update, defaultValue]);\n\n        useEffect(() => {\n            setTextHidden(false);\n        }, []);\n\n        return (\n            <Input\n                {...restProps}\n                className={cn(className, { [styles.textHidden]: textHidden })}\n                value={inputValue}\n                onChange={handleInputChange}\n                onClear={handleClear}\n                ref={mergeRefs([ref, setInputNode])}\n            />\n        );\n    },\n);\n\nMaskedInput.displayName = 'MaskedInput';\n"],"names":["React","__rest","useState","useRef","useCallback","useEffect","createTextMaskInputElement","Input","__assign","cn","styles","mergeRefs"],"mappings":"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"}

package/dynamic-mixins/index.css

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

package/dynamic-mixins/index.d.ts

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

package/dynamic-mixins/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.MaskedInput = Component.MaskedInput;
+exports.PLACEHOLDER_CHAR = Component.PLACEHOLDER_CHAR;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dynamic-mixins/index.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"textHidden":"masked-input__textHidden_1w511"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/dynamic-mixins/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":[".textHidden input {\n    opacity: 0;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,YAAY,CAAC,gCAAgC,CAAC;;;;"}

package/esm/index.css

@@ -1,3 +1,3 @@
-.masked-input__textHidden_1lxuc input {
+.masked-input__textHidden_1w511 input {
     opacity: 0;
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"textHidden":"masked-input__textHidden_1lxuc"};
+var styles = {"textHidden":"masked-input__textHidden_1w511"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/index.css

@@ -1,3 +1,3 @@
-.masked-input__textHidden_1lxuc input {
+.masked-input__textHidden_1w511 input {
     opacity: 0;
 }

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"textHidden":"masked-input__textHidden_1lxuc"};
+var styles = {"textHidden":"masked-input__textHidden_1w511"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.css

@@ -1,3 +1,3 @@
-.masked-input__textHidden_1lxuc input {
+.masked-input__textHidden_1w511 input {
     opacity: 0;
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"textHidden":"masked-input__textHidden_1lxuc"};
+const styles = {"textHidden":"masked-input__textHidden_1w511"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-masked-input",
-    "version": "7.0.0",
+    "version": "7.1.0-snapshot-92b8690",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -10,7 +10,7 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-input": "^16.0.0",
+        "@alfalab/core-components-input": "16.1.0-snapshot-92b8690",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
         "text-mask-core": "^5.1.2",
@@ -24,6 +24,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.0.0",
-    "varsVersion": "10.0.0"
+    "themesVersion": "14.1.0-snapshot-92b8690",
+    "varsVersion": "10.1.0-snapshot-92b8690"
 }