@salutejs/plasma-new-hope 0.141.0-canary.1418.10719164040.0 → 0.141.0-canary.1420.10717002054.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (89) hide show
  1. package/package.json +4 -4
  2. package/emotion/cjs/components/Mask/Mask.js +0 -227
  3. package/emotion/cjs/components/Mask/Mask.types.js +0 -5
  4. package/emotion/cjs/components/Mask/index.js +0 -12
  5. package/emotion/cjs/components/Mask/utils/constants.js +0 -31
  6. package/emotion/cjs/components/Mask/utils/createMask.js +0 -50
  7. package/emotion/cjs/components/Mask/utils/maskUtils.js +0 -248
  8. package/emotion/cjs/components/Mask/utils/parseMask.js +0 -36
  9. package/emotion/cjs/components/Mask/utils/processInput.js +0 -52
  10. package/emotion/cjs/components/Mask/utils/processMask.js +0 -99
  11. package/emotion/cjs/components/Mask/utils/selection.js +0 -48
  12. package/emotion/cjs/components/Mask/utils/types/input.types.js +0 -5
  13. package/emotion/cjs/components/Mask/utils/types/mask.types.js +0 -5
  14. package/emotion/cjs/components/Mask/utils/types/selectRange.types.js +0 -5
  15. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.js +0 -9
  16. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -131
  17. package/emotion/es/components/Mask/Mask.js +0 -219
  18. package/emotion/es/components/Mask/Mask.types.js +0 -1
  19. package/emotion/es/components/Mask/index.js +0 -1
  20. package/emotion/es/components/Mask/utils/constants.js +0 -25
  21. package/emotion/es/components/Mask/utils/createMask.js +0 -44
  22. package/emotion/es/components/Mask/utils/maskUtils.js +0 -242
  23. package/emotion/es/components/Mask/utils/parseMask.js +0 -30
  24. package/emotion/es/components/Mask/utils/processInput.js +0 -46
  25. package/emotion/es/components/Mask/utils/processMask.js +0 -93
  26. package/emotion/es/components/Mask/utils/selection.js +0 -42
  27. package/emotion/es/components/Mask/utils/types/input.types.js +0 -1
  28. package/emotion/es/components/Mask/utils/types/mask.types.js +0 -1
  29. package/emotion/es/components/Mask/utils/types/selectRange.types.js +0 -1
  30. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.js +0 -3
  31. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -131
  32. package/styled-components/cjs/components/Mask/Mask.js +0 -227
  33. package/styled-components/cjs/components/Mask/Mask.types.js +0 -5
  34. package/styled-components/cjs/components/Mask/index.js +0 -12
  35. package/styled-components/cjs/components/Mask/utils/constants.js +0 -31
  36. package/styled-components/cjs/components/Mask/utils/createMask.js +0 -50
  37. package/styled-components/cjs/components/Mask/utils/maskUtils.js +0 -248
  38. package/styled-components/cjs/components/Mask/utils/parseMask.js +0 -36
  39. package/styled-components/cjs/components/Mask/utils/processInput.js +0 -52
  40. package/styled-components/cjs/components/Mask/utils/processMask.js +0 -99
  41. package/styled-components/cjs/components/Mask/utils/selection.js +0 -48
  42. package/styled-components/cjs/components/Mask/utils/types/input.types.js +0 -5
  43. package/styled-components/cjs/components/Mask/utils/types/mask.types.js +0 -5
  44. package/styled-components/cjs/components/Mask/utils/types/selectRange.types.js +0 -5
  45. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.js +0 -9
  46. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -131
  47. package/styled-components/es/components/Mask/Mask.js +0 -219
  48. package/styled-components/es/components/Mask/Mask.types.js +0 -1
  49. package/styled-components/es/components/Mask/index.js +0 -1
  50. package/styled-components/es/components/Mask/utils/constants.js +0 -25
  51. package/styled-components/es/components/Mask/utils/createMask.js +0 -44
  52. package/styled-components/es/components/Mask/utils/maskUtils.js +0 -242
  53. package/styled-components/es/components/Mask/utils/parseMask.js +0 -30
  54. package/styled-components/es/components/Mask/utils/processInput.js +0 -46
  55. package/styled-components/es/components/Mask/utils/processMask.js +0 -93
  56. package/styled-components/es/components/Mask/utils/selection.js +0 -42
  57. package/styled-components/es/components/Mask/utils/types/input.types.js +0 -1
  58. package/styled-components/es/components/Mask/utils/types/mask.types.js +0 -1
  59. package/styled-components/es/components/Mask/utils/types/selectRange.types.js +0 -1
  60. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.js +0 -3
  61. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -131
  62. package/types/components/Mask/Mask.d.ts +0 -5
  63. package/types/components/Mask/Mask.d.ts.map +0 -1
  64. package/types/components/Mask/Mask.types.d.ts +0 -48
  65. package/types/components/Mask/Mask.types.d.ts.map +0 -1
  66. package/types/components/Mask/index.d.ts +0 -3
  67. package/types/components/Mask/index.d.ts.map +0 -1
  68. package/types/components/Mask/utils/constants.d.ts +0 -15
  69. package/types/components/Mask/utils/constants.d.ts.map +0 -1
  70. package/types/components/Mask/utils/createMask.d.ts +0 -19
  71. package/types/components/Mask/utils/createMask.d.ts.map +0 -1
  72. package/types/components/Mask/utils/maskUtils.d.ts +0 -44
  73. package/types/components/Mask/utils/maskUtils.d.ts.map +0 -1
  74. package/types/components/Mask/utils/parseMask.d.ts +0 -3
  75. package/types/components/Mask/utils/parseMask.d.ts.map +0 -1
  76. package/types/components/Mask/utils/processInput.d.ts +0 -15
  77. package/types/components/Mask/utils/processInput.d.ts.map +0 -1
  78. package/types/components/Mask/utils/processMask.d.ts +0 -9
  79. package/types/components/Mask/utils/processMask.d.ts.map +0 -1
  80. package/types/components/Mask/utils/selection.d.ts +0 -11
  81. package/types/components/Mask/utils/selection.d.ts.map +0 -1
  82. package/types/components/Mask/utils/types/input.types.d.ts +0 -26
  83. package/types/components/Mask/utils/types/input.types.d.ts.map +0 -1
  84. package/types/components/Mask/utils/types/mask.types.d.ts +0 -9
  85. package/types/components/Mask/utils/types/mask.types.d.ts.map +0 -1
  86. package/types/components/Mask/utils/types/selectRange.types.d.ts +0 -5
  87. package/types/components/Mask/utils/types/selectRange.types.d.ts.map +0 -1
  88. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +0 -191
  89. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +0 -1
@@ -1,242 +0,0 @@
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 MaskUtils = /*#__PURE__*/function () {
13
- function MaskUtils(showPrefix, maskChar, maskString, reformat) {
14
- _classCallCheck(this, MaskUtils);
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(MaskUtils, [{
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 must have only 1 char');
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 must have the same length as 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
- var result;
114
- if (this.reformat) {
115
- result = this.reformat({
116
- value: data,
117
- selection: this.selection
118
- });
119
- } else {
120
- var dataList;
121
- if (Array.isArray(data)) {
122
- dataList = data;
123
- } else {
124
- dataList = [];
125
- for (var i = 0; i < data.length; i++) {
126
- dataList.push({
127
- "char": data[i],
128
- type: CharType.User
129
- });
130
- }
131
- }
132
- result = processInput({
133
- data: dataList,
134
- selection: this.selection,
135
- mask: this.mask,
136
- maskChar: this.maskChar,
137
- maskString: this.maskString,
138
- showPrefix: this.showPrefix
139
- });
140
- }
141
- this.applyChanges(result);
142
- }
143
- }, {
144
- key: "removePreviosOrSelected",
145
- value: function removePreviosOrSelected() {
146
- var _this$selection2 = this.selection,
147
- start = _this$selection2.start,
148
- end = _this$selection2.end;
149
- if (start === end) {
150
- var newStart = end - 1 < 0 ? 0 : end - 1;
151
- this.setSelection = {
152
- start: newStart,
153
- end: end
154
- };
155
- }
156
- this.input('');
157
- }
158
- }, {
159
- key: "removeNextOrSelected",
160
- value: function removeNextOrSelected() {
161
- var _this$selection3 = this.selection,
162
- start = _this$selection3.start,
163
- end = _this$selection3.end;
164
- if (start === end) {
165
- this.setSelection = {
166
- start: start,
167
- end: end + 1
168
- };
169
- }
170
- this.input('');
171
- }
172
- }, {
173
- key: "paste",
174
- value: function paste(value) {
175
- this.input(value);
176
- }
177
- }, {
178
- key: "input",
179
- value: function input(_input) {
180
- var result;
181
- if (this.reformat) {
182
- result = this.reformat({
183
- value: this.value,
184
- input: _input,
185
- selection: this.selection
186
- });
187
- } else {
188
- var tmpValue = removeSelectedRange({
189
- value: this.value,
190
- selection: this.selection,
191
- maskChar: this.maskChar,
192
- maskString: String(this.maskString)
193
- });
194
- this.selection.end = this.selection.start;
195
- result = processInput({
196
- data: tmpValue,
197
- input: _input,
198
- selection: this.selection,
199
- mask: this.mask,
200
- maskChar: this.maskChar,
201
- maskString: this.maskString,
202
- showPrefix: this.showPrefix
203
- });
204
- }
205
- this.applyChanges(result);
206
- }
207
- }, {
208
- key: "applyChanges",
209
- value: function applyChanges(result) {
210
- var oldMaskedValue = this.maskedValue;
211
- var oldVisibleValue = this.visibleValue;
212
- var oldSelection = this.selection;
213
- this.value = result.value;
214
- this.maskedValue = result.maskedValue;
215
- this.visibleValue = result.visibleValue;
216
- this.setSelection = result.selection;
217
- if (oldMaskedValue !== this.maskedValue || oldVisibleValue !== this.visibleValue || oldSelection.start !== this.selection.start || oldSelection.end !== this.selection.end) {
218
- this.notify();
219
- }
220
- }
221
- }, {
222
- key: "subscribe",
223
- value: function subscribe(callback) {
224
- this.callbacks.push(callback);
225
- }
226
- }, {
227
- key: "unsubscribe",
228
- value: function unsubscribe(callback) {
229
- this.callbacks = this.callbacks.filter(function (item) {
230
- return item !== callback;
231
- });
232
- }
233
- }, {
234
- key: "notify",
235
- value: function notify() {
236
- var state = this.getState;
237
- this.callbacks.forEach(function (callback) {
238
- callback(state);
239
- });
240
- }
241
- }]);
242
- }();
@@ -1,30 +0,0 @@
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
- };
@@ -1,46 +0,0 @@
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
- };
@@ -1,93 +0,0 @@
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 = null;
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
- };
@@ -1,42 +0,0 @@
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
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1,3 +0,0 @@
1
- import { composeMask } from '../../../../components/Mask';
2
- import { TextField } from '../TextField/TextField';
3
- export var Mask = /*#__PURE__*/composeMask(TextField);
@@ -1,131 +0,0 @@
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
- const onValueChange = action('onValueChange');
12
-
13
- const sizes = ['l', 'm', 's', 'xs'];
14
- const views = ['default', 'positive', 'warning', 'negative'];
15
-
16
- const meta: Meta<typeof Mask> = {
17
- title: 'plasma_b2c/Mask',
18
- component: Mask,
19
- decorators: [WithTheme],
20
- argTypes: {
21
- view: {
22
- options: views,
23
- control: {
24
- type: 'select',
25
- },
26
- },
27
- size: {
28
- options: sizes,
29
- control: {
30
- type: 'inline-radio',
31
- },
32
- },
33
- },
34
- };
35
-
36
- export default meta;
37
-
38
- type StoryPropsDefault = Omit<
39
- ComponentProps<typeof Mask>,
40
- | 'helperBlock'
41
- | 'contentLeft'
42
- | 'htmlSize'
43
- | 'contentRight'
44
- | 'type'
45
- | 'name'
46
- | 'onFocus'
47
- | 'onBlur'
48
- | 'onChange'
49
- | 'value'
50
- | 'checked'
51
- | 'maxLength'
52
- | 'minLength'
53
- | 'required'
54
- | 'enumerationType'
55
- | 'chips'
56
- | 'onChangeChips'
57
- >;
58
-
59
- const StoryDemo = ({ view, ...rest }: StoryPropsDefault) => {
60
- return (
61
- <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '50%' }}>
62
- <Mask
63
- label="Маска телефона"
64
- mask="+7 (000) 000 - 00 - 00"
65
- maskChar="_"
66
- showPrefix={false}
67
- view={view}
68
- onChange={onChange}
69
- onValueChange={onValueChange}
70
- {...rest}
71
- />
72
-
73
- <Mask
74
- label="Маска телефона: отображается всегда"
75
- mask="+7 (000) 000 - 00 - 00"
76
- maskChar="_"
77
- view={view}
78
- alwaysShowMask
79
- onChange={onChange}
80
- onValueChange={onValueChange}
81
- {...rest}
82
- />
83
-
84
- <Mask
85
- label="Маска даты"
86
- mask="00/00/0000"
87
- maskString="DD/MM/YYYY"
88
- alwaysShowMask
89
- view={view}
90
- onChange={onChange}
91
- onValueChange={onValueChange}
92
- {...rest}
93
- />
94
-
95
- <Mask
96
- label="Маска даты: значения по умолчанию"
97
- // eslint-disable-next-line no-octal-escape
98
- mask="12.\04.0000"
99
- maskChar="_"
100
- alwaysShowMask
101
- view={view}
102
- onChange={onChange}
103
- onValueChange={onValueChange}
104
- {...rest}
105
- />
106
-
107
- <Mask
108
- label="Маска времени"
109
- mask="00:00"
110
- maskChar="_"
111
- alwaysShowMask
112
- view={view}
113
- onChange={onChange}
114
- onValueChange={onValueChange}
115
- {...rest}
116
- />
117
- </div>
118
- );
119
- };
120
-
121
- export const Default: StoryObj<StoryPropsDefault> = {
122
- args: {
123
- size: 'l',
124
- view: 'default',
125
- labelPlacement: 'outer',
126
- placeholder: 'Заполните поле',
127
- disabled: false,
128
- readOnly: false,
129
- },
130
- render: (args) => <StoryDemo {...args} />,
131
- };