@salutejs/plasma-new-hope 0.149.0-canary.1418.10942866373.0 → 0.149.0-canary.1421.10953636107.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (241) hide show
  1. package/cjs/components/DatePicker/RangeDate/RangeDate.css +2 -0
  2. package/cjs/components/DatePicker/RangeDate/RangeDate.js +39 -2
  3. package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  4. package/cjs/components/DatePicker/SingleDate/SingleDate.css +2 -0
  5. package/cjs/components/DatePicker/SingleDate/SingleDate.js +26 -2
  6. package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  7. package/cjs/components/DatePicker/utils/setInitValue.js +12 -0
  8. package/cjs/components/DatePicker/utils/setInitValue.js.map +1 -0
  9. package/cjs/components/Slider/Slider.css +2 -0
  10. package/cjs/components/Slider/Slider.js +19 -6
  11. package/cjs/components/Slider/Slider.js.map +1 -1
  12. package/cjs/components/Slider/components/Double/Double.css +2 -0
  13. package/cjs/components/Slider/components/Double/Double.js +38 -2
  14. package/cjs/components/Slider/components/Double/Double.js.map +1 -1
  15. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +56 -0
  16. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js.map +1 -0
  17. package/cjs/components/Slider/components/Single/Single.css +2 -0
  18. package/cjs/components/Slider/components/Single/Single.js +35 -12
  19. package/cjs/components/Slider/components/Single/Single.js.map +1 -1
  20. package/cjs/components/Slider/utils/index.js +6 -0
  21. package/cjs/components/Slider/utils/index.js.map +1 -1
  22. package/cjs/components/TextArea/TextArea.js +3 -2
  23. package/cjs/components/TextArea/TextArea.js.map +1 -1
  24. package/cjs/components/TextField/TextField.js +1 -3
  25. package/cjs/components/TextField/TextField.js.map +1 -1
  26. package/cjs/hooks/useForm.js +131 -0
  27. package/cjs/hooks/useForm.js.map +1 -0
  28. package/cjs/index.css +2 -0
  29. package/cjs/index.js +5 -2
  30. package/cjs/index.js.map +1 -1
  31. package/cjs/utils/index.js.map +1 -1
  32. package/cjs/utils/inputHidden.js +15 -0
  33. package/cjs/utils/inputHidden.js.map +1 -0
  34. package/cjs/utils/inputHidden_1ciypqb.css +1 -0
  35. package/cjs/utils/setRefList.js +28 -0
  36. package/cjs/utils/setRefList.js.map +1 -0
  37. package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +39 -2
  38. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +26 -2
  39. package/emotion/cjs/components/DatePicker/utils/setInitValue.js +11 -0
  40. package/emotion/cjs/components/Slider/Slider.js +15 -6
  41. package/emotion/cjs/components/Slider/components/Double/Double.js +38 -2
  42. package/{styled-components/cjs/components/Mask/Mask.js → emotion/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js} +43 -38
  43. package/emotion/cjs/components/Slider/components/Single/Single.js +30 -7
  44. package/emotion/cjs/components/Slider/components/index.js +11 -0
  45. package/emotion/cjs/components/Slider/utils/index.js +6 -1
  46. package/emotion/cjs/components/TextArea/TextArea.js +3 -3
  47. package/emotion/cjs/components/TextField/TextField.js +2 -4
  48. package/emotion/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +245 -0
  49. package/emotion/cjs/examples/plasma_web/components/Form/Form.stories.tsx +245 -0
  50. package/emotion/cjs/hooks/index.js +8 -1
  51. package/emotion/cjs/hooks/useForm.js +137 -0
  52. package/emotion/cjs/index.js +0 -11
  53. package/emotion/cjs/utils/index.js +15 -0
  54. package/emotion/cjs/utils/inputHidden.js +10 -0
  55. package/emotion/cjs/utils/setRefList.js +27 -0
  56. package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +39 -2
  57. package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +26 -2
  58. package/emotion/es/components/DatePicker/utils/setInitValue.js +5 -0
  59. package/emotion/es/components/Slider/Slider.js +16 -6
  60. package/emotion/es/components/Slider/components/Double/Double.js +39 -3
  61. package/emotion/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +51 -0
  62. package/emotion/es/components/Slider/components/Single/Single.js +31 -8
  63. package/emotion/es/components/Slider/components/index.js +1 -0
  64. package/emotion/es/components/Slider/utils/index.js +5 -0
  65. package/emotion/es/components/TextArea/TextArea.js +4 -4
  66. package/emotion/es/components/TextField/TextField.js +2 -4
  67. package/emotion/es/examples/plasma_b2c/components/Form/Form.stories.tsx +245 -0
  68. package/emotion/es/examples/plasma_web/components/Form/Form.stories.tsx +245 -0
  69. package/emotion/es/hooks/index.js +2 -1
  70. package/emotion/es/hooks/useForm.js +128 -0
  71. package/emotion/es/index.js +1 -2
  72. package/emotion/es/utils/index.js +1 -0
  73. package/emotion/es/utils/inputHidden.js +4 -0
  74. package/emotion/es/utils/setRefList.js +20 -0
  75. package/es/components/DatePicker/RangeDate/RangeDate.css +2 -0
  76. package/es/components/DatePicker/RangeDate/RangeDate.js +39 -2
  77. package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  78. package/es/components/DatePicker/SingleDate/SingleDate.css +2 -0
  79. package/es/components/DatePicker/SingleDate/SingleDate.js +26 -2
  80. package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  81. package/es/components/DatePicker/utils/setInitValue.js +8 -0
  82. package/es/components/DatePicker/utils/setInitValue.js.map +1 -0
  83. package/es/components/Slider/Slider.css +2 -0
  84. package/es/components/Slider/Slider.js +20 -7
  85. package/es/components/Slider/Slider.js.map +1 -1
  86. package/es/components/Slider/components/Double/Double.css +2 -0
  87. package/es/components/Slider/components/Double/Double.js +39 -3
  88. package/es/components/Slider/components/Double/Double.js.map +1 -1
  89. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +52 -0
  90. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js.map +1 -0
  91. package/es/components/Slider/components/Single/Single.css +2 -0
  92. package/es/components/Slider/components/Single/Single.js +31 -8
  93. package/es/components/Slider/components/Single/Single.js.map +1 -1
  94. package/es/components/Slider/utils/index.js +6 -1
  95. package/es/components/Slider/utils/index.js.map +1 -1
  96. package/es/components/TextArea/TextArea.js +3 -2
  97. package/es/components/TextArea/TextArea.js.map +1 -1
  98. package/es/components/TextField/TextField.js +1 -3
  99. package/es/components/TextField/TextField.js.map +1 -1
  100. package/es/hooks/useForm.js +127 -0
  101. package/es/hooks/useForm.js.map +1 -0
  102. package/es/index.css +2 -0
  103. package/es/index.js +2 -1
  104. package/es/index.js.map +1 -1
  105. package/es/utils/index.js.map +1 -1
  106. package/es/utils/inputHidden.js +11 -0
  107. package/es/utils/inputHidden.js.map +1 -0
  108. package/es/utils/inputHidden_1ciypqb.css +1 -0
  109. package/es/utils/setRefList.js +23 -0
  110. package/es/utils/setRefList.js.map +1 -0
  111. package/package.json +3 -4
  112. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +39 -2
  113. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +26 -2
  114. package/styled-components/cjs/components/DatePicker/utils/setInitValue.js +11 -0
  115. package/styled-components/cjs/components/Slider/Slider.js +15 -6
  116. package/styled-components/cjs/components/Slider/components/Double/Double.js +38 -2
  117. package/{emotion/cjs/components/Mask/Mask.js → styled-components/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js} +43 -38
  118. package/styled-components/cjs/components/Slider/components/Single/Single.js +30 -7
  119. package/styled-components/cjs/components/Slider/components/index.js +11 -0
  120. package/styled-components/cjs/components/Slider/utils/index.js +6 -1
  121. package/styled-components/cjs/components/TextArea/TextArea.js +2 -2
  122. package/styled-components/cjs/components/TextField/TextField.js +1 -3
  123. package/styled-components/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +245 -0
  124. package/styled-components/cjs/examples/plasma_web/components/Form/Form.stories.tsx +245 -0
  125. package/styled-components/cjs/hooks/index.js +8 -1
  126. package/styled-components/cjs/hooks/useForm.js +137 -0
  127. package/styled-components/cjs/index.js +0 -11
  128. package/styled-components/cjs/utils/index.js +15 -0
  129. package/styled-components/cjs/utils/inputHidden.js +10 -0
  130. package/styled-components/cjs/utils/setRefList.js +27 -0
  131. package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +39 -2
  132. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +26 -2
  133. package/styled-components/es/components/DatePicker/utils/setInitValue.js +5 -0
  134. package/styled-components/es/components/Slider/Slider.js +16 -6
  135. package/styled-components/es/components/Slider/components/Double/Double.js +39 -3
  136. package/styled-components/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +51 -0
  137. package/styled-components/es/components/Slider/components/Single/Single.js +31 -8
  138. package/styled-components/es/components/Slider/components/index.js +1 -0
  139. package/styled-components/es/components/Slider/utils/index.js +5 -0
  140. package/styled-components/es/components/TextArea/TextArea.js +3 -3
  141. package/styled-components/es/components/TextField/TextField.js +1 -3
  142. package/styled-components/es/examples/plasma_b2c/components/Form/Form.stories.tsx +245 -0
  143. package/styled-components/es/examples/plasma_web/components/Form/Form.stories.tsx +245 -0
  144. package/styled-components/es/hooks/index.js +2 -1
  145. package/styled-components/es/hooks/useForm.js +128 -0
  146. package/styled-components/es/index.js +1 -2
  147. package/styled-components/es/utils/index.js +1 -0
  148. package/styled-components/es/utils/inputHidden.js +4 -0
  149. package/styled-components/es/utils/setRefList.js +20 -0
  150. package/types/components/DatePicker/RangeDate/RangeDate.d.ts +2 -0
  151. package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
  152. package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts +4 -0
  153. package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map +1 -1
  154. package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
  155. package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +4 -0
  156. package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -1
  157. package/types/components/DatePicker/utils/setInitValue.d.ts +2 -0
  158. package/types/components/DatePicker/utils/setInitValue.d.ts.map +1 -0
  159. package/types/components/Slider/Slider.d.ts.map +1 -1
  160. package/types/components/Slider/Slider.types.d.ts +2 -2
  161. package/types/components/Slider/Slider.types.d.ts.map +1 -1
  162. package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
  163. package/types/components/Slider/components/Double/Double.types.d.ts +2 -0
  164. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
  165. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.d.ts +4 -0
  166. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.d.ts.map +1 -0
  167. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.d.ts +5 -0
  168. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.d.ts.map +1 -0
  169. package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
  170. package/types/components/Slider/components/Single/Single.types.d.ts +3 -1
  171. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
  172. package/types/components/Slider/components/index.d.ts +2 -0
  173. package/types/components/Slider/components/index.d.ts.map +1 -1
  174. package/types/components/Slider/utils/index.d.ts +1 -0
  175. package/types/components/Slider/utils/index.d.ts.map +1 -1
  176. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  177. package/types/components/TextField/TextField.d.ts.map +1 -1
  178. package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +1 -0
  179. package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
  180. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +3 -1
  181. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
  182. package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +1 -0
  183. package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
  184. package/types/examples/plasma_web/components/Slider/Slider.d.ts +3 -1
  185. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
  186. package/types/hooks/index.d.ts +1 -0
  187. package/types/hooks/index.d.ts.map +1 -1
  188. package/types/hooks/useForm.d.ts +10 -0
  189. package/types/hooks/useForm.d.ts.map +1 -0
  190. package/types/index.d.ts +0 -1
  191. package/types/index.d.ts.map +1 -1
  192. package/types/utils/index.d.ts +1 -0
  193. package/types/utils/index.d.ts.map +1 -1
  194. package/types/utils/inputHidden.d.ts +3 -0
  195. package/types/utils/inputHidden.d.ts.map +1 -0
  196. package/types/utils/setRefList.d.ts +6 -0
  197. package/types/utils/setRefList.d.ts.map +1 -0
  198. package/cjs/components/Mask/Mask.js +0 -45
  199. package/cjs/components/Mask/Mask.js.map +0 -1
  200. package/emotion/cjs/components/Mask/Mask.template-doc.mdx +0 -125
  201. package/emotion/cjs/components/Mask/index.js +0 -12
  202. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.js +0 -9
  203. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  204. package/emotion/cjs/examples/plasma_web/components/Mask/Mask.js +0 -9
  205. package/emotion/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  206. package/emotion/es/components/Mask/Mask.js +0 -45
  207. package/emotion/es/components/Mask/Mask.template-doc.mdx +0 -125
  208. package/emotion/es/components/Mask/index.js +0 -1
  209. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.js +0 -3
  210. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  211. package/emotion/es/examples/plasma_web/components/Mask/Mask.js +0 -3
  212. package/emotion/es/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  213. package/es/components/Mask/Mask.js +0 -41
  214. package/es/components/Mask/Mask.js.map +0 -1
  215. package/styled-components/cjs/components/Mask/Mask.template-doc.mdx +0 -125
  216. package/styled-components/cjs/components/Mask/index.js +0 -12
  217. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.js +0 -9
  218. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  219. package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.js +0 -9
  220. package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  221. package/styled-components/es/components/Mask/Mask.js +0 -45
  222. package/styled-components/es/components/Mask/Mask.template-doc.mdx +0 -125
  223. package/styled-components/es/components/Mask/index.js +0 -1
  224. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.js +0 -3
  225. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  226. package/styled-components/es/examples/plasma_web/components/Mask/Mask.js +0 -3
  227. package/styled-components/es/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  228. package/types/components/Mask/Mask.d.ts +0 -5
  229. package/types/components/Mask/Mask.d.ts.map +0 -1
  230. package/types/components/Mask/Mask.types.d.ts +0 -62
  231. package/types/components/Mask/Mask.types.d.ts.map +0 -1
  232. package/types/components/Mask/index.d.ts +0 -2
  233. package/types/components/Mask/index.d.ts.map +0 -1
  234. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +0 -191
  235. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +0 -1
  236. package/types/examples/plasma_web/components/Mask/Mask.d.ts +0 -191
  237. package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +0 -1
  238. /package/emotion/cjs/components/{Mask/Mask.types.js → Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js} +0 -0
  239. /package/emotion/es/components/{Mask/Mask.types.js → Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js} +0 -0
  240. /package/styled-components/cjs/components/{Mask/Mask.types.js → Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js} +0 -0
  241. /package/styled-components/es/components/{Mask/Mask.types.js → Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js} +0 -0
@@ -1,125 +0,0 @@
1
- ---
2
- id: mask
3
- title: Mask
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- import Tabs from '@theme/Tabs';
9
- import TabItem from '@theme/TabItem';
10
-
11
- # Mask
12
- <Description name="Mask" />
13
- <PropsTable name="Mask" exclude={['css']} />
14
-
15
- ## Использование
16
- Компонент `Mask` представляет собой поле ввода с возможностью маскирования значения.
17
- Он реализован на компоненте [TextField](https://plasma.sberdevices.ru/b2c/components/textfield/)
18
- и наследует практически все его свойства (`size`, `view`, `disabled`, `label` и тд.)
19
-
20
- ```tsx live
21
- import React from 'react';
22
- import { Mask } from '@salutejs/{{ package }}';
23
- import { IconDone } from '@salutejs/plasma-icons';
24
-
25
- export function App() {
26
- return (
27
- <div>
28
- <Mask
29
- label="Лейбл"
30
- leftHelper="Подсказка к полю"
31
- placeholder="Введите дату"
32
- mask="00/00/0000"
33
- maskString="DD/MM/YYYY"
34
- size="l"
35
- />
36
- </div>
37
- );
38
- }
39
- ```
40
-
41
- ### Маска
42
- Маска задается с помощью свойства `mask`.
43
- Поддерживает следующие символы:
44
-
45
- | Обозначение | Описание |
46
- |-------------|---------------------------------------|
47
- | 0 | любая цифра от 0 до 9 |
48
- | a (англ.) | A-Z, a-z |
49
- | я | А-Я, а-я, ё, Ё |
50
- | q | буква "q" |
51
- | 2 | цифра "2" |
52
- | * | любой символ |
53
- | \ | символ экранирования "\a" - буква "a" |
54
-
55
-
56
- <Tabs>
57
- <TabItem value="phone" label="Маска телефона">
58
- Пример маски для ввода телефона
59
-
60
- ```tsx live
61
- import React from 'react';
62
- import { Mask } from '@salutejs/{{ package }}';
63
-
64
- export function App() {
65
- return (
66
- <div>
67
- <Mask
68
- label="Маска телефона"
69
- placeholder="Введите телефон"
70
- mask="+7 (000) 000 - 00 - 00"
71
- maskChar="_"
72
- size="l"
73
- alwaysShowMask
74
- />
75
- </div>
76
- );
77
- }
78
- ```
79
- </TabItem>
80
- <TabItem value="date" label="Маска даты">
81
- Пример маски для ввода даты
82
-
83
- ```tsx live
84
- import React from 'react';
85
- import { Mask } from '@salutejs/{{ package }}';
86
-
87
- export function App() {
88
- return (
89
- <div>
90
- <Mask
91
- label="Маска даты"
92
- placeholder="Введите дату"
93
- mask="00/00/0000"
94
- maskString="DD/MM/YYYY"
95
- size="l"
96
- />
97
- </div>
98
- );
99
- }
100
- ```
101
- </TabItem>
102
- <TabItem value="time" label="Маска времени">
103
- Пример маски для ввода даты
104
-
105
- ```tsx live
106
- import React from 'react';
107
- import { Mask } from '@salutejs/{{ package }}';
108
-
109
- export function App() {
110
- return (
111
- <div>
112
- <Mask
113
- label="Маска времени"
114
- placeholder="Введите время"
115
- mask="1\0:00"
116
- maskChar="_"
117
- size="l"
118
- showPrefix
119
- />
120
- </div>
121
- );
122
- }
123
- ```
124
- </TabItem>
125
- </Tabs>
@@ -1 +0,0 @@
1
- export { composeMask } from './Mask';
@@ -1,3 +0,0 @@
1
- import { composeMask } from '../../../../components/Mask';
2
- import { TextField } from '../TextField/TextField';
3
- export var Mask = /*#__PURE__*/composeMask(TextField);
@@ -1,127 +0,0 @@
1
- import React, { useEffect, useRef } 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
- showStartChars={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
- value="+79123"
80
- name="example"
81
- />
82
-
83
- <Mask
84
- label="Маска даты"
85
- mask="00/00/0000"
86
- maskString="DD/MM/YYYY"
87
- alwaysShowMask
88
- view={view}
89
- onChange={onChange}
90
- {...rest}
91
- />
92
-
93
- <Mask
94
- label="Маска даты: значения по умолчанию"
95
- // eslint-disable-next-line no-octal-escape
96
- mask="12.\04.0000"
97
- maskChar="_"
98
- alwaysShowMask
99
- view={view}
100
- onChange={onChange}
101
- {...rest}
102
- />
103
-
104
- <Mask
105
- label="Маска времени"
106
- mask="00:00"
107
- maskChar="_"
108
- alwaysShowMask
109
- view={view}
110
- onChange={onChange}
111
- {...rest}
112
- />
113
- </div>
114
- );
115
- };
116
-
117
- export const Default: StoryObj<StoryPropsDefault> = {
118
- args: {
119
- size: 'l',
120
- view: 'default',
121
- labelPlacement: 'outer',
122
- placeholder: 'Заполните поле',
123
- disabled: false,
124
- readOnly: false,
125
- },
126
- render: (args) => <StoryDemo {...args} />,
127
- };
@@ -1,3 +0,0 @@
1
- import { composeMask } from '../../../../components/Mask';
2
- import { TextField } from '../TextField/TextField';
3
- export var Mask = /*#__PURE__*/composeMask(TextField);
@@ -1,125 +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
-
12
- const sizes = ['l', 'm', 's', 'xs'];
13
- const views = ['default', 'positive', 'warning', 'negative'];
14
-
15
- const meta: Meta<typeof Mask> = {
16
- title: 'plasma_web/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
- showStartChars={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
- };
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import type { FC } from 'react';
3
- import type { CustomInputProps, MaskProps } from './Mask.types';
4
- export declare const composeMask: <T extends CustomInputProps>(InputComponent: React.FC<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T & MaskProps> & React.RefAttributes<HTMLInputElement>>;
5
- //# sourceMappingURL=Mask.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Mask.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/Mask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAqBhE,eAAO,MAAM,WAAW,4KAWvB,CAAC"}
@@ -1,62 +0,0 @@
1
- import type { InputHTMLAttributes } from 'react';
2
- import type { IMaskItem, IInputValue, ISelectRange, IInputState } from '@salutejs/input-core';
3
- export declare type MaskProps = {
4
- /**
5
- * Маска.
6
- * Поддерживаются следующие символы:
7
- * * 0 — любая цифра 0-9
8
- * * \* — любой символ
9
- * * a — A-Z, a-z
10
- * * я — А-Я, а-я, ё, Ё
11
- * * q — буква "q"
12
- * * 2 — цифра "2"
13
- * * \a — "\\" - символ экранирования; "a" - буква
14
- */
15
- mask?: string;
16
- /**
17
- * Символ маскирования.
18
- */
19
- maskChar?: string;
20
- /**
21
- * Строка, которая будет отображена в незаполненную часть маски.
22
- * Если передать maskString, то maskChar игнорируется.
23
- */
24
- maskString?: string;
25
- /**
26
- * Набор соответствий маски и маскируемого значения.
27
- */
28
- maskFormat?: Array<IMaskItem>;
29
- /**
30
- * Отображать ли маску во время ввода.
31
- */
32
- showMask?: boolean;
33
- /**
34
- * Отображать ли маску всегда.
35
- */
36
- alwaysShowMask?: boolean;
37
- /**
38
- * Отображать ли префикс маски. Например у маски телефона "+7"
39
- */
40
- showStartChars?: boolean;
41
- /**
42
- * Значение по умолчанию.
43
- */
44
- defaultValue?: string;
45
- /**
46
- * Функция форматирования, которая позволяет задать собственные правила форматирования.
47
- */
48
- reformat?: (params: {
49
- value: Array<IInputValue> | string;
50
- selection: ISelectRange;
51
- input?: string;
52
- }) => IInputState;
53
- /**
54
- * Callback при изменении значения маски с дополнительной информацией.
55
- */
56
- onValueChange?: (params: {
57
- maskedValue: string;
58
- value: string;
59
- }) => void;
60
- };
61
- export declare type CustomInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'>;
62
- //# sourceMappingURL=Mask.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Mask.types.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/Mask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE9F,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,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;QAAC,SAAS,EAAE,YAAY,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,WAAW,CAAC;IACpH;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,oBAAY,gBAAgB,GAAG,IAAI,CAC/B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAC9D,CAAC"}
@@ -1,2 +0,0 @@
1
- export { composeMask } from './Mask';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Mask/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC"}
@@ -1,191 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const Mask: import("react").ForwardRefExoticComponent<(Omit<import("../../../../engines/types").PropsType<{
3
- view: {
4
- default: import("@linaria/core").LinariaClassName;
5
- positive: import("@linaria/core").LinariaClassName;
6
- warning: import("@linaria/core").LinariaClassName;
7
- negative: import("@linaria/core").LinariaClassName;
8
- };
9
- size: {
10
- l: import("@linaria/core").LinariaClassName;
11
- m: import("@linaria/core").LinariaClassName;
12
- s: import("@linaria/core").LinariaClassName;
13
- xs: import("@linaria/core").LinariaClassName;
14
- };
15
- labelPlacement: {
16
- inner: import("@linaria/core").LinariaClassName;
17
- outer: import("@linaria/core").LinariaClassName;
18
- };
19
- disabled: {
20
- true: import("@linaria/core").LinariaClassName;
21
- };
22
- readOnly: {
23
- true: import("@linaria/core").LinariaClassName;
24
- };
25
- }> & {
26
- size?: string | undefined;
27
- view?: string | undefined;
28
- readOnly?: boolean | undefined;
29
- disabled?: boolean | undefined;
30
- } & {
31
- label?: string | undefined;
32
- labelPlacement?: "inner" | "outer" | undefined;
33
- leftHelper?: string | undefined;
34
- contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
35
- contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
36
- textBefore?: string | undefined;
37
- textAfter?: string | undefined;
38
- onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
39
- } & {
40
- requiredPlacement?: "left" | "right" | undefined;
41
- } & {
42
- required: true;
43
- optional?: false | undefined;
44
- } & {
45
- chips?: undefined;
46
- onChangeChips?: undefined;
47
- enumerationType?: "plain" | undefined;
48
- onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
49
- } & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement> & import("../../../../components/Mask/Mask.types").MaskProps, "ref"> | Omit<import("../../../../engines/types").PropsType<{
50
- view: {
51
- default: import("@linaria/core").LinariaClassName;
52
- positive: import("@linaria/core").LinariaClassName;
53
- warning: import("@linaria/core").LinariaClassName;
54
- negative: import("@linaria/core").LinariaClassName;
55
- };
56
- size: {
57
- l: import("@linaria/core").LinariaClassName;
58
- m: import("@linaria/core").LinariaClassName;
59
- s: import("@linaria/core").LinariaClassName;
60
- xs: import("@linaria/core").LinariaClassName;
61
- };
62
- labelPlacement: {
63
- inner: import("@linaria/core").LinariaClassName;
64
- outer: import("@linaria/core").LinariaClassName;
65
- };
66
- disabled: {
67
- true: import("@linaria/core").LinariaClassName;
68
- };
69
- readOnly: {
70
- true: import("@linaria/core").LinariaClassName;
71
- };
72
- }> & {
73
- size?: string | undefined;
74
- view?: string | undefined;
75
- readOnly?: boolean | undefined;
76
- disabled?: boolean | undefined;
77
- } & {
78
- label?: string | undefined;
79
- labelPlacement?: "inner" | "outer" | undefined;
80
- leftHelper?: string | undefined;
81
- contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
82
- contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
83
- textBefore?: string | undefined;
84
- textAfter?: string | undefined;
85
- onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
86
- } & {
87
- requiredPlacement?: "left" | "right" | undefined;
88
- } & {
89
- required: true;
90
- optional?: false | undefined;
91
- } & {
92
- enumerationType: "chip";
93
- onSearch?: undefined;
94
- chips?: import("../../../../components/TextField/TextField.types").TextFieldPrimitiveValue[] | undefined;
95
- onChangeChips?: ((value: import("../../../../components/TextField/TextField.types").TextFieldPrimitiveValue[]) => void) | undefined;
96
- } & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement> & import("../../../../components/Mask/Mask.types").MaskProps, "ref"> | Omit<import("../../../../engines/types").PropsType<{
97
- view: {
98
- default: import("@linaria/core").LinariaClassName;
99
- positive: import("@linaria/core").LinariaClassName;
100
- warning: import("@linaria/core").LinariaClassName;
101
- negative: import("@linaria/core").LinariaClassName;
102
- };
103
- size: {
104
- l: import("@linaria/core").LinariaClassName;
105
- m: import("@linaria/core").LinariaClassName;
106
- s: import("@linaria/core").LinariaClassName;
107
- xs: import("@linaria/core").LinariaClassName;
108
- };
109
- labelPlacement: {
110
- inner: import("@linaria/core").LinariaClassName;
111
- outer: import("@linaria/core").LinariaClassName;
112
- };
113
- disabled: {
114
- true: import("@linaria/core").LinariaClassName;
115
- };
116
- readOnly: {
117
- true: import("@linaria/core").LinariaClassName;
118
- };
119
- }> & {
120
- size?: string | undefined;
121
- view?: string | undefined;
122
- readOnly?: boolean | undefined;
123
- disabled?: boolean | undefined;
124
- } & {
125
- label?: string | undefined;
126
- labelPlacement?: "inner" | "outer" | undefined;
127
- leftHelper?: string | undefined;
128
- contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
129
- contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
130
- textBefore?: string | undefined;
131
- textAfter?: string | undefined;
132
- onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
133
- } & {
134
- requiredPlacement?: "left" | "right" | undefined;
135
- } & {
136
- optional?: true | undefined;
137
- required?: false | undefined;
138
- } & {
139
- chips?: undefined;
140
- onChangeChips?: undefined;
141
- enumerationType?: "plain" | undefined;
142
- onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
143
- } & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement> & import("../../../../components/Mask/Mask.types").MaskProps, "ref"> | Omit<import("../../../../engines/types").PropsType<{
144
- view: {
145
- default: import("@linaria/core").LinariaClassName;
146
- positive: import("@linaria/core").LinariaClassName;
147
- warning: import("@linaria/core").LinariaClassName;
148
- negative: import("@linaria/core").LinariaClassName;
149
- };
150
- size: {
151
- l: import("@linaria/core").LinariaClassName;
152
- m: import("@linaria/core").LinariaClassName;
153
- s: import("@linaria/core").LinariaClassName;
154
- xs: import("@linaria/core").LinariaClassName;
155
- };
156
- labelPlacement: {
157
- inner: import("@linaria/core").LinariaClassName;
158
- outer: import("@linaria/core").LinariaClassName;
159
- };
160
- disabled: {
161
- true: import("@linaria/core").LinariaClassName;
162
- };
163
- readOnly: {
164
- true: import("@linaria/core").LinariaClassName;
165
- };
166
- }> & {
167
- size?: string | undefined;
168
- view?: string | undefined;
169
- readOnly?: boolean | undefined;
170
- disabled?: boolean | undefined;
171
- } & {
172
- label?: string | undefined;
173
- labelPlacement?: "inner" | "outer" | undefined;
174
- leftHelper?: string | undefined;
175
- contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
176
- contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
177
- textBefore?: string | undefined;
178
- textAfter?: string | undefined;
179
- onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
180
- } & {
181
- requiredPlacement?: "left" | "right" | undefined;
182
- } & {
183
- optional?: true | undefined;
184
- required?: false | undefined;
185
- } & {
186
- enumerationType: "chip";
187
- onSearch?: undefined;
188
- chips?: import("../../../../components/TextField/TextField.types").TextFieldPrimitiveValue[] | undefined;
189
- onChangeChips?: ((value: import("../../../../components/TextField/TextField.types").TextFieldPrimitiveValue[]) => void) | undefined;
190
- } & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement> & import("../../../../components/Mask/Mask.types").MaskProps, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
191
- //# sourceMappingURL=Mask.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Mask.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Mask/Mask.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2QAAyB,CAAC"}