@salutejs/plasma-new-hope 0.144.0-canary.1430.10833771822.0 → 0.145.0-canary.1418.10848257808.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. package/emotion/cjs/components/Mask/Mask.js +213 -0
  2. package/emotion/cjs/components/Mask/Mask.types.js +5 -0
  3. package/emotion/cjs/components/Mask/index.js +12 -0
  4. package/emotion/cjs/components/Mask/utils/constants.js +29 -0
  5. package/emotion/cjs/components/Mask/utils/createMask.js +50 -0
  6. package/emotion/cjs/components/Mask/utils/mask.js +241 -0
  7. package/emotion/cjs/components/Mask/utils/parseMask.js +36 -0
  8. package/emotion/cjs/components/Mask/utils/processInput.js +52 -0
  9. package/emotion/cjs/components/Mask/utils/processMask.js +99 -0
  10. package/emotion/cjs/components/Mask/utils/selection.js +48 -0
  11. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.js +9 -0
  12. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +125 -0
  13. package/emotion/es/components/Mask/Mask.js +205 -0
  14. package/emotion/es/components/Mask/Mask.types.js +1 -0
  15. package/emotion/es/components/Mask/index.js +1 -0
  16. package/emotion/es/components/Mask/utils/constants.js +23 -0
  17. package/emotion/es/components/Mask/utils/createMask.js +44 -0
  18. package/emotion/es/components/Mask/utils/mask.js +235 -0
  19. package/emotion/es/components/Mask/utils/parseMask.js +30 -0
  20. package/emotion/es/components/Mask/utils/processInput.js +46 -0
  21. package/emotion/es/components/Mask/utils/processMask.js +93 -0
  22. package/emotion/es/components/Mask/utils/selection.js +42 -0
  23. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.js +3 -0
  24. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +125 -0
  25. package/package.json +2 -2
  26. package/styled-components/cjs/components/Mask/Mask.js +213 -0
  27. package/styled-components/cjs/components/Mask/Mask.types.js +5 -0
  28. package/styled-components/cjs/components/Mask/index.js +12 -0
  29. package/styled-components/cjs/components/Mask/utils/constants.js +29 -0
  30. package/styled-components/cjs/components/Mask/utils/createMask.js +50 -0
  31. package/styled-components/cjs/components/Mask/utils/mask.js +241 -0
  32. package/styled-components/cjs/components/Mask/utils/parseMask.js +36 -0
  33. package/styled-components/cjs/components/Mask/utils/processInput.js +52 -0
  34. package/styled-components/cjs/components/Mask/utils/processMask.js +99 -0
  35. package/styled-components/cjs/components/Mask/utils/selection.js +48 -0
  36. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.js +9 -0
  37. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +125 -0
  38. package/styled-components/es/components/Mask/Mask.js +205 -0
  39. package/styled-components/es/components/Mask/Mask.types.js +1 -0
  40. package/styled-components/es/components/Mask/index.js +1 -0
  41. package/styled-components/es/components/Mask/utils/constants.js +23 -0
  42. package/styled-components/es/components/Mask/utils/createMask.js +44 -0
  43. package/styled-components/es/components/Mask/utils/mask.js +235 -0
  44. package/styled-components/es/components/Mask/utils/parseMask.js +30 -0
  45. package/styled-components/es/components/Mask/utils/processInput.js +46 -0
  46. package/styled-components/es/components/Mask/utils/processMask.js +93 -0
  47. package/styled-components/es/components/Mask/utils/selection.js +42 -0
  48. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.js +3 -0
  49. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +125 -0
  50. package/types/components/Mask/Mask.d.ts +5 -0
  51. package/types/components/Mask/Mask.d.ts.map +1 -0
  52. package/types/components/Mask/Mask.types.d.ts +84 -0
  53. package/types/components/Mask/Mask.types.d.ts.map +1 -0
  54. package/types/components/Mask/index.d.ts +2 -0
  55. package/types/components/Mask/index.d.ts.map +1 -0
  56. package/types/components/Mask/utils/constants.d.ts +15 -0
  57. package/types/components/Mask/utils/constants.d.ts.map +1 -0
  58. package/types/components/Mask/utils/createMask.d.ts +19 -0
  59. package/types/components/Mask/utils/createMask.d.ts.map +1 -0
  60. package/types/components/Mask/utils/mask.d.ts +42 -0
  61. package/types/components/Mask/utils/mask.d.ts.map +1 -0
  62. package/types/components/Mask/utils/parseMask.d.ts +3 -0
  63. package/types/components/Mask/utils/parseMask.d.ts.map +1 -0
  64. package/types/components/Mask/utils/processInput.d.ts +13 -0
  65. package/types/components/Mask/utils/processInput.d.ts.map +1 -0
  66. package/types/components/Mask/utils/processMask.d.ts +7 -0
  67. package/types/components/Mask/utils/processMask.d.ts.map +1 -0
  68. package/types/components/Mask/utils/selection.d.ts +10 -0
  69. package/types/components/Mask/utils/selection.d.ts.map +1 -0
  70. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +191 -0
  71. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +1 -0
@@ -0,0 +1,235 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
3
+ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
4
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
5
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
+ import { charType, defaultFormatChars } from './constants';
9
+ import { parseMask } from './parseMask';
10
+ import { processInput } from './processInput';
11
+ import { removeSelectedRange } from './selection';
12
+ export var Mask = /*#__PURE__*/function () {
13
+ function Mask(showPrefix, maskChar, maskString, reformat) {
14
+ _classCallCheck(this, Mask);
15
+ _defineProperty(this, "selection", void 0);
16
+ _defineProperty(this, "value", void 0);
17
+ _defineProperty(this, "maskedValue", void 0);
18
+ _defineProperty(this, "visibleValue", void 0);
19
+ _defineProperty(this, "mask", void 0);
20
+ _defineProperty(this, "maskChar", void 0);
21
+ _defineProperty(this, "maskFormatMap", void 0);
22
+ _defineProperty(this, "showPrefix", void 0);
23
+ _defineProperty(this, "callbacks", void 0);
24
+ _defineProperty(this, "maskString", void 0);
25
+ _defineProperty(this, "reformat", void 0);
26
+ this.value = '';
27
+ this.mask = [];
28
+ this.maskedValue = '';
29
+ this.visibleValue = '';
30
+ this.selection = {
31
+ start: 0,
32
+ end: 0
33
+ };
34
+ this.callbacks = [];
35
+ this.maskFormatMap = this.parseMaskFormat;
36
+ this.showPrefix = showPrefix;
37
+ this.maskChar = maskChar;
38
+ this.maskString = maskString;
39
+ this.reformat = reformat;
40
+ }
41
+ return _createClass(Mask, [{
42
+ key: "parseMaskFormat",
43
+ get: function get() {
44
+ return defaultFormatChars.reduce(function (acc, current) {
45
+ acc[String(current.str)] = current;
46
+ return acc;
47
+ }, {});
48
+ }
49
+ }, {
50
+ key: "getSelection",
51
+ get: function get() {
52
+ var _this$selection = this.selection,
53
+ start = _this$selection.start,
54
+ end = _this$selection.end;
55
+ return {
56
+ start: start,
57
+ end: end
58
+ };
59
+ }
60
+ }, {
61
+ key: "getState",
62
+ get: function get() {
63
+ return {
64
+ value: this.value,
65
+ maskedValue: this.maskedValue,
66
+ visibleValue: this.visibleValue,
67
+ selection: this.selection
68
+ };
69
+ }
70
+ }, {
71
+ key: "setSelection",
72
+ set: function set(newSelection) {
73
+ this.selection = newSelection;
74
+ }
75
+ }, {
76
+ key: "setShowStartChars",
77
+ set: function set(show) {
78
+ this.showPrefix = show;
79
+ }
80
+ }, {
81
+ key: "updateMask",
82
+ value: function updateMask(newMask) {
83
+ this.mask = parseMask(newMask, this.maskFormatMap);
84
+ this.updateValue(this.value);
85
+ }
86
+ }, {
87
+ key: "updateMaskChar",
88
+ value: function updateMaskChar(newMaskChar) {
89
+ if (this.maskChar.length > 1) {
90
+ throw new Error('maskChar должен содержать только 1 символ');
91
+ }
92
+ this.maskChar = newMaskChar;
93
+ this.updateValue(this.value);
94
+ }
95
+ }, {
96
+ key: "updateMaskString",
97
+ value: function updateMaskString(newMaskString) {
98
+ if (newMaskString && newMaskString.length !== this.mask.length) {
99
+ throw new Error('maskString должна иметь такую же длину, как и mask');
100
+ }
101
+ this.maskString = newMaskString;
102
+ this.updateValue(this.value);
103
+ }
104
+ }, {
105
+ key: "updateReformat",
106
+ value: function updateReformat(newReformat) {
107
+ this.reformat = newReformat;
108
+ this.updateValue(this.value);
109
+ }
110
+ }, {
111
+ key: "updateValue",
112
+ value: function updateValue(data) {
113
+ if (this.reformat) {
114
+ var _result = this.reformat({
115
+ value: data,
116
+ selection: this.selection
117
+ });
118
+ return this.applyChanges(_result);
119
+ }
120
+ var dataList = Array.isArray(data) ? data : Array.from(data).reduce(function (acc, _char) {
121
+ acc.push({
122
+ "char": _char,
123
+ type: charType.User
124
+ });
125
+ return acc;
126
+ }, []);
127
+ var result = processInput({
128
+ data: dataList,
129
+ selection: this.selection,
130
+ mask: this.mask,
131
+ maskChar: this.maskChar,
132
+ maskString: this.maskString,
133
+ showPrefix: this.showPrefix
134
+ });
135
+ this.applyChanges(result);
136
+ }
137
+ }, {
138
+ key: "removePreviousOrSelected",
139
+ value: function removePreviousOrSelected() {
140
+ var _this$selection2 = this.selection,
141
+ start = _this$selection2.start,
142
+ end = _this$selection2.end;
143
+ if (start === end) {
144
+ var newStart = end - 1 < 0 ? 0 : end - 1;
145
+ this.setSelection = {
146
+ start: newStart,
147
+ end: end
148
+ };
149
+ }
150
+ this.input('');
151
+ }
152
+ }, {
153
+ key: "removeNextOrSelected",
154
+ value: function removeNextOrSelected() {
155
+ var _this$selection3 = this.selection,
156
+ start = _this$selection3.start,
157
+ end = _this$selection3.end;
158
+ if (start === end) {
159
+ this.setSelection = {
160
+ start: start,
161
+ end: end + 1
162
+ };
163
+ }
164
+ this.input('');
165
+ }
166
+ }, {
167
+ key: "paste",
168
+ value: function paste(value) {
169
+ this.input(value);
170
+ }
171
+ }, {
172
+ key: "input",
173
+ value: function input(_input) {
174
+ if (this.reformat) {
175
+ var _result2 = this.reformat({
176
+ value: this.value,
177
+ input: _input,
178
+ selection: this.selection
179
+ });
180
+ return this.applyChanges(_result2);
181
+ }
182
+ var tmpValue = removeSelectedRange({
183
+ value: this.value,
184
+ selection: this.selection,
185
+ maskChar: this.maskChar,
186
+ maskString: String(this.maskString)
187
+ });
188
+ this.selection.end = this.selection.start;
189
+ var result = processInput({
190
+ data: tmpValue,
191
+ input: _input,
192
+ selection: this.selection,
193
+ mask: this.mask,
194
+ maskChar: this.maskChar,
195
+ maskString: this.maskString,
196
+ showPrefix: this.showPrefix
197
+ });
198
+ this.applyChanges(result);
199
+ }
200
+ }, {
201
+ key: "applyChanges",
202
+ value: function applyChanges(result) {
203
+ var oldMaskedValue = this.maskedValue;
204
+ var oldVisibleValue = this.visibleValue;
205
+ var oldSelection = this.selection;
206
+ this.value = result.value;
207
+ this.maskedValue = result.maskedValue;
208
+ this.visibleValue = result.visibleValue;
209
+ this.setSelection = result.selection;
210
+ if (oldMaskedValue !== this.maskedValue || oldVisibleValue !== this.visibleValue || oldSelection.start !== this.selection.start || oldSelection.end !== this.selection.end) {
211
+ this.notify();
212
+ }
213
+ }
214
+ }, {
215
+ key: "subscribe",
216
+ value: function subscribe(callback) {
217
+ this.callbacks.push(callback);
218
+ }
219
+ }, {
220
+ key: "unsubscribe",
221
+ value: function unsubscribe(callback) {
222
+ this.callbacks = this.callbacks.filter(function (item) {
223
+ return item !== callback;
224
+ });
225
+ }
226
+ }, {
227
+ key: "notify",
228
+ value: function notify() {
229
+ var state = this.getState;
230
+ this.callbacks.forEach(function (callback) {
231
+ callback(state);
232
+ });
233
+ }
234
+ }]);
235
+ }();
@@ -0,0 +1,30 @@
1
+ import { escapeChar } from './constants';
2
+ export var parseMask = function parseMask(mask, format) {
3
+ if (!mask) {
4
+ return [];
5
+ }
6
+ var stack = [];
7
+ var escape = false;
8
+ mask.split('').forEach(function (maskChar) {
9
+ var item = format === null || format === void 0 ? void 0 : format[maskChar];
10
+ if (escape && item) {
11
+ item = undefined;
12
+ escape = false;
13
+ }
14
+ if (!item) {
15
+ if (!escape && maskChar === escapeChar) {
16
+ escape = true;
17
+ return;
18
+ }
19
+ escape = false;
20
+ stack.push({
21
+ "char": maskChar
22
+ });
23
+ return;
24
+ }
25
+ if (item.regexp) {
26
+ stack.push(item);
27
+ }
28
+ });
29
+ return stack;
30
+ };
@@ -0,0 +1,46 @@
1
+ import { charType } from './constants';
2
+ import { processMask } from './processMask';
3
+ export var processInput = function processInput(args) {
4
+ var data = args.data,
5
+ _args$input = args.input,
6
+ input = _args$input === void 0 ? '' : _args$input,
7
+ selection = args.selection,
8
+ mask = args.mask,
9
+ _args$maskChar = args.maskChar,
10
+ maskChar = _args$maskChar === void 0 ? '' : _args$maskChar,
11
+ _args$maskString = args.maskString,
12
+ maskString = _args$maskString === void 0 ? '' : _args$maskString,
13
+ showPrefix = args.showPrefix;
14
+ var _processMask = processMask(data, mask, input, maskChar, maskString, selection),
15
+ value = _processMask.value,
16
+ maskedValue = _processMask.maskedValue,
17
+ inputValuesApplied = _processMask.inputValuesApplied;
18
+ var selectionPosition = selection.start + inputValuesApplied;
19
+ var bound = value.length - 1;
20
+ var charsCount = 0;
21
+ while (bound >= 0 && value[bound].type !== charType.User) {
22
+ if (value[bound].type === charType.Mask) {
23
+ charsCount = 0;
24
+ }
25
+ if (value[bound].type === charType.Char) {
26
+ charsCount++;
27
+ }
28
+ bound--;
29
+ }
30
+ if (showPrefix || bound >= 0 || input && input.trim()) {
31
+ bound += charsCount;
32
+ }
33
+ var visibleValue = '';
34
+ for (var i = 0; i <= bound; i++) {
35
+ visibleValue += value[i]["char"];
36
+ }
37
+ return {
38
+ value: value,
39
+ visibleValue: visibleValue,
40
+ maskedValue: maskedValue,
41
+ selection: {
42
+ start: selectionPosition,
43
+ end: selectionPosition
44
+ }
45
+ };
46
+ };
@@ -0,0 +1,93 @@
1
+ import { charType } from './constants';
2
+ export var processMask = function processMask(data, mask, input, maskChar, maskString, selection) {
3
+ var value = [];
4
+ var valueIndex = 0;
5
+ var pastedIndex = 0;
6
+ var maskedValue = '';
7
+ var inputValuesApplied = 0;
8
+ var processMaskPartAsChar = function processMaskPartAsChar(maskPart, pastedValuesStack, item) {
9
+ if (pastedValuesStack && pastedValuesStack[0] === maskPart["char"]) {
10
+ pastedIndex++;
11
+ } else if (item && (item["char"] === maskPart["char"] || item.type !== charType.User) || input) {
12
+ valueIndex++;
13
+ }
14
+ value.push({
15
+ "char": String(maskPart["char"]),
16
+ type: charType.Char
17
+ });
18
+ if (pastedValuesStack) {
19
+ inputValuesApplied++;
20
+ }
21
+ maskedValue += maskPart["char"];
22
+ };
23
+ var processMaskPartAsRegExp = function processMaskPartAsRegExp(maskPart, maskIndex, pastedValuesStack, item) {
24
+ var _maskPart$regexp2;
25
+ var part;
26
+ if (pastedValuesStack) {
27
+ var i = 0;
28
+ while (!(maskPart !== null && maskPart !== void 0 && (_maskPart$regexp = maskPart.regexp) !== null && _maskPart$regexp !== void 0 && _maskPart$regexp.test(pastedValuesStack[i])) && pastedValuesStack.length > i) {
29
+ var _maskPart$regexp;
30
+ i++;
31
+ pastedIndex++;
32
+ }
33
+ if (pastedValuesStack.length > i) {
34
+ pastedIndex++;
35
+ inputValuesApplied++;
36
+ valueIndex++;
37
+ part = pastedValuesStack[i];
38
+ value.push({
39
+ "char": part,
40
+ type: charType.User
41
+ });
42
+ maskedValue += part;
43
+ }
44
+ }
45
+ if (part) {
46
+ return;
47
+ }
48
+ if (item && item.type === charType.Char && data.length > valueIndex + 1) {
49
+ valueIndex++;
50
+ processMaskItem(maskPart, maskIndex);
51
+ return;
52
+ }
53
+ if (item && item.type === charType.User && maskPart !== null && maskPart !== void 0 && (_maskPart$regexp2 = maskPart.regexp) !== null && _maskPart$regexp2 !== void 0 && _maskPart$regexp2.test(item["char"])) {
54
+ value.push({
55
+ "char": item["char"],
56
+ type: charType.User
57
+ });
58
+ maskedValue += item["char"];
59
+ valueIndex++;
60
+ return;
61
+ }
62
+ part = maskString ? maskString[maskIndex] : maskChar;
63
+ value.push({
64
+ "char": part,
65
+ type: charType.Mask
66
+ });
67
+ if (data.length > maskIndex) {
68
+ valueIndex++;
69
+ }
70
+ maskedValue += part;
71
+ };
72
+ var processMaskItem = function processMaskItem(maskPart, maskIndex) {
73
+ var item = data.length > valueIndex ? data[valueIndex] : null;
74
+ var pastedValuesStack = '';
75
+ if (selection.start <= maskIndex && pastedIndex < input.length) {
76
+ pastedValuesStack = input.slice(pastedIndex);
77
+ }
78
+ if (maskPart["char"]) {
79
+ return processMaskPartAsChar(maskPart, pastedValuesStack, item);
80
+ }
81
+ if (maskPart.regexp) {
82
+ return processMaskPartAsRegExp(maskPart, maskIndex, pastedValuesStack, item);
83
+ }
84
+ };
85
+ mask.forEach(function (maskPart, maskIndex) {
86
+ processMaskItem(maskPart, maskIndex);
87
+ });
88
+ return {
89
+ value: value,
90
+ maskedValue: maskedValue,
91
+ inputValuesApplied: inputValuesApplied
92
+ };
93
+ };
@@ -0,0 +1,42 @@
1
+ import { charType } from './constants';
2
+ var copyMaskChar = function copyMaskChar(count, maskChar) {
3
+ var res = [];
4
+ for (var i = 0; i < count; i++) {
5
+ res.push({
6
+ "char": maskChar,
7
+ type: charType.Mask
8
+ });
9
+ }
10
+ return res;
11
+ };
12
+ var pasteMaskSymbols = function pasteMaskSymbols(maskString, maskChar, selection) {
13
+ if (maskString) {
14
+ var res = [];
15
+ for (var i = selection.start; i < selection.end; i++) {
16
+ res.push({
17
+ "char": maskString[i],
18
+ type: charType.Mask
19
+ });
20
+ }
21
+ return res;
22
+ }
23
+ return copyMaskChar(selection.end - selection.start, maskChar);
24
+ };
25
+ export var removeSelectedRange = function removeSelectedRange(args) {
26
+ var value = args.value,
27
+ selection = args.selection,
28
+ maskChar = args.maskChar,
29
+ maskString = args.maskString;
30
+ if (selection.end < selection.start) {
31
+ var tmp = selection.end;
32
+ selection.end = selection.start;
33
+ selection.start = tmp;
34
+ }
35
+ if (selection.start === selection.end) {
36
+ return value;
37
+ }
38
+ if (value.length > selection.start) {
39
+ return value.slice(0, selection.start).concat(pasteMaskSymbols(maskString, maskChar, selection), value.slice(selection.end, value.length));
40
+ }
41
+ return value;
42
+ };
@@ -0,0 +1,3 @@
1
+ import { composeMask } from '../../../../components/Mask';
2
+ import { TextField } from '../TextField/TextField';
3
+ export var Mask = /*#__PURE__*/composeMask(TextField);
@@ -0,0 +1,125 @@
1
+ import React from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { StoryObj, Meta } from '@storybook/react';
4
+ import { action } from '@storybook/addon-actions';
5
+
6
+ import { WithTheme } from '../../../_helpers';
7
+
8
+ import { Mask } from './Mask';
9
+
10
+ const onChange = action('onChange');
11
+
12
+ const sizes = ['l', 'm', 's', 'xs'];
13
+ const views = ['default', 'positive', 'warning', 'negative'];
14
+
15
+ const meta: Meta<typeof Mask> = {
16
+ title: 'plasma_b2c/Mask',
17
+ component: Mask,
18
+ decorators: [WithTheme],
19
+ argTypes: {
20
+ view: {
21
+ options: views,
22
+ control: {
23
+ type: 'select',
24
+ },
25
+ },
26
+ size: {
27
+ options: sizes,
28
+ control: {
29
+ type: 'inline-radio',
30
+ },
31
+ },
32
+ },
33
+ };
34
+
35
+ export default meta;
36
+
37
+ type StoryPropsDefault = Omit<
38
+ ComponentProps<typeof Mask>,
39
+ | 'helperBlock'
40
+ | 'contentLeft'
41
+ | 'htmlSize'
42
+ | 'contentRight'
43
+ | 'type'
44
+ | 'name'
45
+ | 'onFocus'
46
+ | 'onBlur'
47
+ | 'onChange'
48
+ | 'value'
49
+ | 'checked'
50
+ | 'maxLength'
51
+ | 'minLength'
52
+ | 'required'
53
+ | 'enumerationType'
54
+ | 'chips'
55
+ | 'onChangeChips'
56
+ >;
57
+
58
+ const StoryDemo = ({ view, ...rest }: StoryPropsDefault) => {
59
+ return (
60
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '50%' }}>
61
+ <Mask
62
+ label="Маска телефона"
63
+ mask="+7 (000) 000 - 00 - 00"
64
+ maskChar="_"
65
+ showPrefix={false}
66
+ view={view}
67
+ onChange={onChange}
68
+ {...rest}
69
+ />
70
+
71
+ <Mask
72
+ label="Маска телефона: отображается всегда"
73
+ mask="+7 (000) 000 - 00 - 00"
74
+ maskChar="_"
75
+ view={view}
76
+ alwaysShowMask
77
+ onChange={onChange}
78
+ {...rest}
79
+ />
80
+
81
+ <Mask
82
+ label="Маска даты"
83
+ mask="00/00/0000"
84
+ maskString="DD/MM/YYYY"
85
+ alwaysShowMask
86
+ view={view}
87
+ onChange={onChange}
88
+ {...rest}
89
+ />
90
+
91
+ <Mask
92
+ label="Маска даты: значения по умолчанию"
93
+ // eslint-disable-next-line no-octal-escape
94
+ mask="12.\04.0000"
95
+ maskChar="_"
96
+ alwaysShowMask
97
+ view={view}
98
+ onChange={onChange}
99
+ {...rest}
100
+ />
101
+
102
+ <Mask
103
+ label="Маска времени"
104
+ mask="00:00"
105
+ maskChar="_"
106
+ alwaysShowMask
107
+ view={view}
108
+ onChange={onChange}
109
+ {...rest}
110
+ />
111
+ </div>
112
+ );
113
+ };
114
+
115
+ export const Default: StoryObj<StoryPropsDefault> = {
116
+ args: {
117
+ size: 'l',
118
+ view: 'default',
119
+ labelPlacement: 'outer',
120
+ placeholder: 'Заполните поле',
121
+ disabled: false,
122
+ readOnly: false,
123
+ },
124
+ render: (args) => <StoryDemo {...args} />,
125
+ };
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import type { FC } from 'react';
3
+ import type { MaskProps } from './Mask.types';
4
+ export declare const composeMask: <T extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">>(InputComponent: React.FC<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T & MaskProps> & React.RefAttributes<HTMLInputElement>>;
5
+ //# sourceMappingURL=Mask.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Mask.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/Mask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAe,EAAE,EAAmC,MAAM,OAAO,CAAC;AAK9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK9C,eAAO,MAAM,WAAW,qNA4NlB,CAAC"}
@@ -0,0 +1,84 @@
1
+ import type { ChangeEvent } from 'react';
2
+ import { charType } from './utils/constants';
3
+ export declare type SelectRange = {
4
+ start: number;
5
+ end: number;
6
+ };
7
+ export declare type MaskInfo = {
8
+ str?: string;
9
+ regexp?: RegExp;
10
+ char?: string;
11
+ };
12
+ export declare type MaskItemsMap = {
13
+ [key: string]: MaskInfo;
14
+ };
15
+ export declare type InputValueInfo = {
16
+ char: string;
17
+ type: typeof charType[keyof typeof charType];
18
+ };
19
+ export declare type InputState = {
20
+ value: Array<InputValueInfo> | string;
21
+ visibleValue: string;
22
+ maskedValue: string;
23
+ selection: SelectRange;
24
+ };
25
+ export declare type ReformatFn = (params: {
26
+ value: Array<InputValueInfo> | string;
27
+ selection: SelectRange;
28
+ input?: string;
29
+ }) => InputState;
30
+ export declare type CreateInputArgs = {
31
+ value: string;
32
+ mask?: string;
33
+ maskChar?: string;
34
+ maskString?: string;
35
+ showPrefix?: boolean;
36
+ reformat?: ReformatFn;
37
+ };
38
+ export declare type MaskProps = {
39
+ /**
40
+ * Маска.
41
+ * Поддерживаются следующие символы:
42
+ * 0 — любая цифра 0-9
43
+ * * — любой символ
44
+ * a — A-Z, a-z
45
+ * я — А-Я, а-я, ё, Ё
46
+ * q — буква "q"
47
+ * 2 — цифра "2"
48
+ * \a — "\" - символ экранирования; "a" - буква
49
+ */
50
+ mask?: string;
51
+ /**
52
+ * Символ маскирования.
53
+ */
54
+ maskChar?: string;
55
+ /**
56
+ * Строка, которая будет отображена в незаполненную часть маски.
57
+ * Если передать maskString, то maskChar игнорируется.
58
+ */
59
+ maskString?: string;
60
+ /**
61
+ * Отображать ли маску во время ввода.
62
+ */
63
+ showMask?: boolean;
64
+ /**
65
+ * Отображать ли маску всегда.
66
+ */
67
+ alwaysShowMask?: boolean;
68
+ /**
69
+ * Отображать ли префикс маски. Например у маски телефона "+7"
70
+ */
71
+ showPrefix?: boolean;
72
+ /**
73
+ * Функция форматирования, которая позволяет задать собственные правила форматирования.
74
+ */
75
+ reformat?: ReformatFn;
76
+ /**
77
+ * Callback при изменении значения маски
78
+ */
79
+ onChange?: (event: ChangeEvent<HTMLInputElement>, params: {
80
+ maskedValue: string;
81
+ value: string;
82
+ }) => void;
83
+ };
84
+ //# sourceMappingURL=Mask.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Mask.types.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/Mask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,oBAAY,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC3B,CAAC;AAEF,oBAAY,cAAc,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;CAChD,CAAC;AAEF,oBAAY,UAAU,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,oBAAY,UAAU,GAAG,CAAC,MAAM,EAAE;IAC9B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC;IACtC,SAAS,EAAE,WAAW,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,KAAK,UAAU,CAAC;AAEjB,oBAAY,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,oBAAY,SAAS,GAAG;IACpB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7G,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { composeMask } from './Mask';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC"}