@salutejs/plasma-new-hope 0.148.0-canary.1418.10918226755.0 → 0.148.0-canary.1439.10921298477.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (262) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.css +18 -18
  2. package/cjs/components/Autocomplete/Autocomplete.styles.js +5 -5
  3. package/cjs/components/Autocomplete/Autocomplete.styles.js.map +1 -1
  4. package/cjs/components/Autocomplete/{Autocomplete.styles_4wbmok.css → Autocomplete.styles_192fzgs.css} +1 -1
  5. package/cjs/components/Autocomplete/Autocomplete.tokens.js +3 -0
  6. package/cjs/components/Autocomplete/Autocomplete.tokens.js.map +1 -1
  7. package/cjs/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
  8. package/cjs/components/Autocomplete/ui/TextField/TextField.styles.js.map +1 -1
  9. package/{es/components/Autocomplete/ui/TextField/TextField.styles_sx1sq7.css → cjs/components/Autocomplete/ui/TextField/TextField.styles_11nkcwo.css} +1 -1
  10. package/cjs/components/Combobox/ComboboxNew/Combobox.css +15 -15
  11. package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +11 -11
  12. package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
  13. package/{es/components/Combobox/ComboboxNew/Combobox.styles_iq2uzw.css → cjs/components/Combobox/ComboboxNew/Combobox.styles_1s09ifw.css} +1 -1
  14. package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +2 -0
  15. package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
  16. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +15 -15
  17. package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +15 -15
  18. package/cjs/components/DatePicker/DatePicker.tokens.js +1 -0
  19. package/cjs/components/DatePicker/DatePicker.tokens.js.map +1 -1
  20. package/cjs/components/DatePicker/RangeDate/RangeDate.css +12 -12
  21. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +12 -12
  22. package/cjs/components/DatePicker/SingleDate/SingleDate.css +14 -14
  23. package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  24. package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
  25. package/{es/components/DatePicker/SingleDate/SingleDate.styles_qt45m5.css → cjs/components/DatePicker/SingleDate/SingleDate.styles_1ekc7aj.css} +1 -1
  26. package/cjs/components/Pagination/Pagination.css +17 -17
  27. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +17 -17
  28. package/cjs/components/Range/Range.css +12 -12
  29. package/cjs/components/Select/Select.css +17 -17
  30. package/cjs/components/Select/Select.styles.js +3 -3
  31. package/cjs/components/Select/Select.styles.js.map +1 -1
  32. package/cjs/components/Select/{Select.styles_hzoeqc.css → Select.styles_1nzals0.css} +1 -1
  33. package/cjs/components/Select/Select.tokens.js +5 -1
  34. package/cjs/components/Select/Select.tokens.js.map +1 -1
  35. package/cjs/components/Select/ui/Inner/Inner.css +17 -17
  36. package/cjs/components/Select/ui/Inner/ui/Item/Item.css +17 -17
  37. package/cjs/components/Select/ui/Target/Target.css +12 -12
  38. package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +12 -12
  39. package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +29 -15
  40. package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
  41. package/cjs/components/Select/ui/Target/ui/Textfield/{Textfield.styles_rtzthp.css → Textfield.styles_11yj58s.css} +2 -2
  42. package/cjs/components/Slider/Slider.css +12 -12
  43. package/cjs/components/Slider/components/Double/Double.css +12 -12
  44. package/cjs/components/TextArea/TextArea.styles.js +27 -27
  45. package/cjs/components/TextArea/TextArea.styles.js.map +1 -1
  46. package/cjs/components/TextArea/{TextArea.styles_1fyj8ox.css → TextArea.styles_1kzzs11.css} +2 -2
  47. package/cjs/components/TextArea/TextArea.tokens.js +15 -0
  48. package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
  49. package/cjs/components/TextArea/variations/_view/base.js +1 -1
  50. package/cjs/components/TextArea/variations/_view/base.js.map +1 -1
  51. package/cjs/components/TextArea/variations/_view/base_8npjyq.css +1 -0
  52. package/cjs/components/TextField/TextField.js +1 -3
  53. package/cjs/components/TextField/TextField.js.map +1 -1
  54. package/cjs/components/TextField/TextField.styles.js +1 -1
  55. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  56. package/{es/components/TextField/TextField.styles_ht6ibd.css → cjs/components/TextField/TextField.styles_uponva.css} +1 -1
  57. package/cjs/components/TextField/TextField.tokens.js +3 -0
  58. package/cjs/components/TextField/TextField.tokens.js.map +1 -1
  59. package/cjs/index.css +54 -54
  60. package/cjs/index.js +0 -2
  61. package/cjs/index.js.map +1 -1
  62. package/emotion/cjs/components/Autocomplete/Autocomplete.styles.js +5 -5
  63. package/emotion/cjs/components/Autocomplete/Autocomplete.tokens.js +3 -0
  64. package/emotion/cjs/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
  65. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +6 -6
  66. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +2 -0
  67. package/emotion/cjs/components/DatePicker/DatePicker.tokens.js +1 -0
  68. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +5 -5
  69. package/emotion/cjs/components/Select/Select.styles.js +6 -6
  70. package/emotion/cjs/components/Select/Select.tokens.js +5 -1
  71. package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +27 -21
  72. package/emotion/cjs/components/TextArea/TextArea.styles.js +11 -11
  73. package/emotion/cjs/components/TextArea/TextArea.tokens.js +15 -0
  74. package/emotion/cjs/components/TextArea/variations/_view/base.js +1 -1
  75. package/emotion/cjs/components/TextField/TextField.js +2 -4
  76. package/emotion/cjs/components/TextField/TextField.styles.js +15 -15
  77. package/emotion/cjs/components/TextField/TextField.tokens.js +3 -0
  78. package/emotion/cjs/index.js +0 -11
  79. package/emotion/es/components/Autocomplete/Autocomplete.styles.js +5 -5
  80. package/emotion/es/components/Autocomplete/Autocomplete.tokens.js +3 -0
  81. package/emotion/es/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
  82. package/emotion/es/components/Combobox/ComboboxNew/Combobox.styles.js +6 -6
  83. package/emotion/es/components/Combobox/ComboboxNew/Combobox.tokens.js +2 -0
  84. package/emotion/es/components/DatePicker/DatePicker.tokens.js +1 -0
  85. package/emotion/es/components/DatePicker/SingleDate/SingleDate.styles.js +5 -5
  86. package/emotion/es/components/Select/Select.styles.js +6 -6
  87. package/emotion/es/components/Select/Select.tokens.js +5 -1
  88. package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +27 -21
  89. package/emotion/es/components/TextArea/TextArea.styles.js +11 -11
  90. package/emotion/es/components/TextArea/TextArea.tokens.js +15 -0
  91. package/emotion/es/components/TextArea/variations/_view/base.js +1 -1
  92. package/emotion/es/components/TextField/TextField.js +2 -4
  93. package/emotion/es/components/TextField/TextField.styles.js +15 -15
  94. package/emotion/es/components/TextField/TextField.tokens.js +3 -0
  95. package/emotion/es/index.js +1 -2
  96. package/es/components/Autocomplete/Autocomplete.css +18 -18
  97. package/es/components/Autocomplete/Autocomplete.styles.js +5 -5
  98. package/es/components/Autocomplete/Autocomplete.styles.js.map +1 -1
  99. package/es/components/Autocomplete/{Autocomplete.styles_4wbmok.css → Autocomplete.styles_192fzgs.css} +1 -1
  100. package/es/components/Autocomplete/Autocomplete.tokens.js +3 -0
  101. package/es/components/Autocomplete/Autocomplete.tokens.js.map +1 -1
  102. package/es/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
  103. package/es/components/Autocomplete/ui/TextField/TextField.styles.js.map +1 -1
  104. package/{cjs/components/Autocomplete/ui/TextField/TextField.styles_sx1sq7.css → es/components/Autocomplete/ui/TextField/TextField.styles_11nkcwo.css} +1 -1
  105. package/es/components/Combobox/ComboboxNew/Combobox.css +15 -15
  106. package/es/components/Combobox/ComboboxNew/Combobox.styles.js +11 -11
  107. package/es/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
  108. package/{cjs/components/Combobox/ComboboxNew/Combobox.styles_iq2uzw.css → es/components/Combobox/ComboboxNew/Combobox.styles_1s09ifw.css} +1 -1
  109. package/es/components/Combobox/ComboboxNew/Combobox.tokens.js +2 -0
  110. package/es/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
  111. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +15 -15
  112. package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +15 -15
  113. package/es/components/DatePicker/DatePicker.tokens.js +1 -0
  114. package/es/components/DatePicker/DatePicker.tokens.js.map +1 -1
  115. package/es/components/DatePicker/RangeDate/RangeDate.css +12 -12
  116. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +12 -12
  117. package/es/components/DatePicker/SingleDate/SingleDate.css +14 -14
  118. package/es/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  119. package/es/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
  120. package/{cjs/components/DatePicker/SingleDate/SingleDate.styles_qt45m5.css → es/components/DatePicker/SingleDate/SingleDate.styles_1ekc7aj.css} +1 -1
  121. package/es/components/Pagination/Pagination.css +17 -17
  122. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +17 -17
  123. package/es/components/Range/Range.css +12 -12
  124. package/es/components/Select/Select.css +17 -17
  125. package/es/components/Select/Select.styles.js +3 -3
  126. package/es/components/Select/Select.styles.js.map +1 -1
  127. package/es/components/Select/{Select.styles_hzoeqc.css → Select.styles_1nzals0.css} +1 -1
  128. package/es/components/Select/Select.tokens.js +5 -1
  129. package/es/components/Select/Select.tokens.js.map +1 -1
  130. package/es/components/Select/ui/Inner/Inner.css +17 -17
  131. package/es/components/Select/ui/Inner/ui/Item/Item.css +17 -17
  132. package/es/components/Select/ui/Target/Target.css +12 -12
  133. package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +12 -12
  134. package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +29 -15
  135. package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
  136. package/es/components/Select/ui/Target/ui/Textfield/{Textfield.styles_rtzthp.css → Textfield.styles_11yj58s.css} +2 -2
  137. package/es/components/Slider/Slider.css +12 -12
  138. package/es/components/Slider/components/Double/Double.css +12 -12
  139. package/es/components/TextArea/TextArea.styles.js +27 -27
  140. package/es/components/TextArea/TextArea.styles.js.map +1 -1
  141. package/es/components/TextArea/{TextArea.styles_1fyj8ox.css → TextArea.styles_1kzzs11.css} +2 -2
  142. package/es/components/TextArea/TextArea.tokens.js +15 -0
  143. package/es/components/TextArea/TextArea.tokens.js.map +1 -1
  144. package/es/components/TextArea/variations/_view/base.js +1 -1
  145. package/es/components/TextArea/variations/_view/base.js.map +1 -1
  146. package/es/components/TextArea/variations/_view/base_8npjyq.css +1 -0
  147. package/es/components/TextField/TextField.js +1 -3
  148. package/es/components/TextField/TextField.js.map +1 -1
  149. package/es/components/TextField/TextField.styles.js +1 -1
  150. package/es/components/TextField/TextField.styles.js.map +1 -1
  151. package/{cjs/components/TextField/TextField.styles_ht6ibd.css → es/components/TextField/TextField.styles_uponva.css} +1 -1
  152. package/es/components/TextField/TextField.tokens.js +3 -0
  153. package/es/components/TextField/TextField.tokens.js.map +1 -1
  154. package/es/index.css +54 -54
  155. package/es/index.js +0 -1
  156. package/es/index.js.map +1 -1
  157. package/package.json +4 -6
  158. package/styled-components/cjs/components/Autocomplete/Autocomplete.styles.js +2 -2
  159. package/styled-components/cjs/components/Autocomplete/Autocomplete.tokens.js +3 -0
  160. package/styled-components/cjs/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
  161. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +2 -2
  162. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +2 -0
  163. package/styled-components/cjs/components/DatePicker/DatePicker.tokens.js +1 -0
  164. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  165. package/styled-components/cjs/components/Select/Select.styles.js +2 -2
  166. package/styled-components/cjs/components/Select/Select.tokens.js +5 -1
  167. package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +15 -9
  168. package/styled-components/cjs/components/TextArea/TextArea.styles.js +2 -2
  169. package/styled-components/cjs/components/TextArea/TextArea.tokens.js +15 -0
  170. package/styled-components/cjs/components/TextArea/variations/_view/base.js +1 -1
  171. package/styled-components/cjs/components/TextField/TextField.js +1 -3
  172. package/styled-components/cjs/components/TextField/TextField.styles.js +1 -1
  173. package/styled-components/cjs/components/TextField/TextField.tokens.js +3 -0
  174. package/styled-components/cjs/index.js +0 -11
  175. package/styled-components/es/components/Autocomplete/Autocomplete.styles.js +2 -2
  176. package/styled-components/es/components/Autocomplete/Autocomplete.tokens.js +3 -0
  177. package/styled-components/es/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
  178. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js +2 -2
  179. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js +2 -0
  180. package/styled-components/es/components/DatePicker/DatePicker.tokens.js +1 -0
  181. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  182. package/styled-components/es/components/Select/Select.styles.js +2 -2
  183. package/styled-components/es/components/Select/Select.tokens.js +5 -1
  184. package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +15 -9
  185. package/styled-components/es/components/TextArea/TextArea.styles.js +2 -2
  186. package/styled-components/es/components/TextArea/TextArea.tokens.js +15 -0
  187. package/styled-components/es/components/TextArea/variations/_view/base.js +1 -1
  188. package/styled-components/es/components/TextField/TextField.js +1 -3
  189. package/styled-components/es/components/TextField/TextField.styles.js +1 -1
  190. package/styled-components/es/components/TextField/TextField.tokens.js +3 -0
  191. package/styled-components/es/index.js +1 -2
  192. package/types/components/Autocomplete/Autocomplete.styles.d.ts.map +1 -1
  193. package/types/components/Autocomplete/Autocomplete.tokens.d.ts +3 -0
  194. package/types/components/Autocomplete/Autocomplete.tokens.d.ts.map +1 -1
  195. package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
  196. package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts.map +1 -1
  197. package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts +2 -0
  198. package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts.map +1 -1
  199. package/types/components/DatePicker/DatePicker.tokens.d.ts +1 -0
  200. package/types/components/DatePicker/DatePicker.tokens.d.ts.map +1 -1
  201. package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
  202. package/types/components/Select/Select.styles.d.ts.map +1 -1
  203. package/types/components/Select/Select.tokens.d.ts +5 -1
  204. package/types/components/Select/Select.tokens.d.ts.map +1 -1
  205. package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts.map +1 -1
  206. package/types/components/TextArea/TextArea.styles.d.ts.map +1 -1
  207. package/types/components/TextArea/TextArea.tokens.d.ts +15 -0
  208. package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
  209. package/types/components/TextField/TextField.d.ts.map +1 -1
  210. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  211. package/types/components/TextField/TextField.tokens.d.ts +3 -0
  212. package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
  213. package/types/index.d.ts +0 -1
  214. package/types/index.d.ts.map +1 -1
  215. package/cjs/components/Mask/Mask.js +0 -46
  216. package/cjs/components/Mask/Mask.js.map +0 -1
  217. package/cjs/components/TextArea/variations/_view/base_jjtr9h.css +0 -1
  218. package/emotion/cjs/components/Mask/Mask.js +0 -56
  219. package/emotion/cjs/components/Mask/Mask.template-doc.mdx +0 -125
  220. package/emotion/cjs/components/Mask/Mask.types.js +0 -5
  221. package/emotion/cjs/components/Mask/index.js +0 -12
  222. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.js +0 -9
  223. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  224. package/emotion/cjs/examples/plasma_web/components/Mask/Mask.js +0 -9
  225. package/emotion/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  226. package/emotion/es/components/Mask/Mask.js +0 -46
  227. package/emotion/es/components/Mask/Mask.template-doc.mdx +0 -125
  228. package/emotion/es/components/Mask/Mask.types.js +0 -1
  229. package/emotion/es/components/Mask/index.js +0 -1
  230. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.js +0 -3
  231. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  232. package/emotion/es/examples/plasma_web/components/Mask/Mask.js +0 -3
  233. package/emotion/es/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  234. package/es/components/Mask/Mask.js +0 -42
  235. package/es/components/Mask/Mask.js.map +0 -1
  236. package/es/components/TextArea/variations/_view/base_jjtr9h.css +0 -1
  237. package/styled-components/cjs/components/Mask/Mask.js +0 -56
  238. package/styled-components/cjs/components/Mask/Mask.template-doc.mdx +0 -125
  239. package/styled-components/cjs/components/Mask/Mask.types.js +0 -5
  240. package/styled-components/cjs/components/Mask/index.js +0 -12
  241. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.js +0 -9
  242. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  243. package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.js +0 -9
  244. package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  245. package/styled-components/es/components/Mask/Mask.js +0 -46
  246. package/styled-components/es/components/Mask/Mask.template-doc.mdx +0 -125
  247. package/styled-components/es/components/Mask/Mask.types.js +0 -1
  248. package/styled-components/es/components/Mask/index.js +0 -1
  249. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.js +0 -3
  250. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  251. package/styled-components/es/examples/plasma_web/components/Mask/Mask.js +0 -3
  252. package/styled-components/es/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  253. package/types/components/Mask/Mask.d.ts +0 -5
  254. package/types/components/Mask/Mask.d.ts.map +0 -1
  255. package/types/components/Mask/Mask.types.d.ts +0 -62
  256. package/types/components/Mask/Mask.types.d.ts.map +0 -1
  257. package/types/components/Mask/index.d.ts +0 -2
  258. package/types/components/Mask/index.d.ts.map +0 -1
  259. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +0 -191
  260. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +0 -1
  261. package/types/examples/plasma_web/components/Mask/Mask.d.ts +0 -191
  262. package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +0 -1
@@ -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,42 +0,0 @@
1
- import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
- import React, { forwardRef, useState, useImperativeHandle } from 'react';
3
- import maskInputCompose from '@salutejs/react-maskinput';
4
-
5
- var _excluded = ["maskFormat"];
6
- var defaultFormatChars = [{
7
- str: '0',
8
- regexp: /[0-9]/
9
- }, {
10
- str: '*',
11
- regexp: /./
12
- }, {
13
- str: 'a',
14
- regexp: /[a-zA-Z]/
15
- }, {
16
- str: 'я',
17
- regexp: /[а-яА-ЯёЁ]/
18
- }];
19
- var composeMask = function composeMask(InputComponent) {
20
- var MaskedInput = maskInputCompose(InputComponent);
21
- return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
22
- var _ref$maskFormat = _ref.maskFormat,
23
- maskFormat = _ref$maskFormat === void 0 ? defaultFormatChars : _ref$maskFormat,
24
- rest = _objectWithoutProperties(_ref, _excluded);
25
- var _useState = useState(null),
26
- _useState2 = _slicedToArray(_useState, 2),
27
- ref = _useState2[0],
28
- setRef = _useState2[1];
29
- useImperativeHandle(outerRef, function () {
30
- return ref;
31
- }, [ref]);
32
- return /*#__PURE__*/React.createElement(MaskedInput, _extends({
33
- getReference: function getReference(el) {
34
- return setRef(el);
35
- },
36
- maskFormat: maskFormat
37
- }, rest));
38
- });
39
- };
40
-
41
- export { composeMask };
42
- //# sourceMappingURL=Mask.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Mask.js","sources":["../../../src/components/Mask/Mask.tsx"],"sourcesContent":["import React, { forwardRef, useImperativeHandle, useState } from 'react';\nimport type { FC } from 'react';\nimport maskInputCompose from '@salutejs/react-maskinput';\n\nimport type { CustomInputProps, MaskProps } from './Mask.types';\n\nconst defaultFormatChars = [\n {\n str: '0',\n regexp: /[0-9]/,\n },\n {\n str: '*',\n regexp: /./,\n },\n {\n str: 'a',\n regexp: /[a-zA-Z]/,\n },\n {\n str: 'я',\n regexp: /[а-яА-ЯёЁ]/,\n },\n];\n\nexport const composeMask = <T extends CustomInputProps>(InputComponent: FC<T>) => {\n const MaskedInput = maskInputCompose(InputComponent);\n\n return forwardRef<HTMLInputElement, T & MaskProps>(({ maskFormat = defaultFormatChars, ...rest }, outerRef) => {\n const [ref, setRef] = useState<HTMLInputElement | null>(null);\n\n useImperativeHandle(outerRef, () => ref as HTMLInputElement, [ref]);\n\n return <MaskedInput getReference={(el) => setRef(el)} maskFormat={maskFormat} {...(rest as T)} />;\n });\n};\n"],"names":["defaultFormatChars","str","regexp","composeMask","InputComponent","MaskedInput","maskInputCompose","forwardRef","_ref","outerRef","_ref$maskFormat","maskFormat","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","ref","setRef","useImperativeHandle","React","createElement","_extends","getReference","el"],"mappings":";;;;;AAMA,IAAMA,kBAAkB,GAAG,CACvB;AACIC,EAAAA,GAAG,EAAE,GAAG;AACRC,EAAAA,MAAM,EAAE,OAAA;AACZ,CAAC,EACD;AACID,EAAAA,GAAG,EAAE,GAAG;AACRC,EAAAA,MAAM,EAAE,GAAA;AACZ,CAAC,EACD;AACID,EAAAA,GAAG,EAAE,GAAG;AACRC,EAAAA,MAAM,EAAE,UAAA;AACZ,CAAC,EACD;AACID,EAAAA,GAAG,EAAE,GAAG;AACRC,EAAAA,MAAM,EAAE,YAAA;AACZ,CAAC,CACJ,CAAA;IAEYC,WAAW,GAAG,SAAdA,WAAWA,CAAgCC,cAAqB,EAAK;AAC9E,EAAA,IAAMC,WAAW,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;AAEpD,EAAA,oBAAOG,UAAU,CAAkC,UAAAC,IAAA,EAA+CC,QAAQ,EAAK;AAAA,IAAA,IAAAC,eAAA,GAAAF,IAAA,CAAzDG,UAAU;AAAVA,MAAAA,UAAU,GAAAD,eAAA,KAAGV,KAAAA,CAAAA,GAAAA,kBAAkB,GAAAU,eAAA;AAAKE,MAAAA,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;AAC1F,IAAA,IAAAC,SAAA,GAAsBC,QAAQ,CAA0B,IAAI,CAAC;MAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAtDI,MAAAA,GAAG,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,MAAAA,MAAM,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;IAElBI,mBAAmB,CAACZ,QAAQ,EAAE,YAAA;AAAA,MAAA,OAAMU,GAAG,CAAA;AAAA,KAAoB,EAAE,CAACA,GAAG,CAAC,CAAC,CAAA;AAEnE,IAAA,oBAAOG,KAAA,CAAAC,aAAA,CAAClB,WAAW,EAAAmB,QAAA,CAAA;MAACC,YAAY,EAAE,SAAAA,YAAAA,CAACC,EAAE,EAAA;QAAA,OAAKN,MAAM,CAACM,EAAE,CAAC,CAAA;OAAC;AAACf,MAAAA,UAAU,EAAEA,UAAAA;KAAiBC,EAAAA,IAAI,CAAS,CAAC,CAAA;AACrG,GAAC,CAAC,CAAA;AACN;;;;"}
@@ -1 +0,0 @@
1
- .bofyi4a .textarea-container{-webkit-transition:box-shadow 0.1s ease-in-out;transition:box-shadow 0.1s ease-in-out;border-radius:var(--plasma-textarea-border-radius);box-shadow:inset 0 0 0 var(--plasma-textarea-border-size,1px) var(--plasma-textarea-border-color);}.bofyi4a .textarea-wrapper{-webkit-transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;box-shadow:inset 0 0 0 var(--plasma-textarea-border-size,1px) var(--plasma-textarea-input-border-color);}.bofyi4a:focus-within:not([readonly]) .textarea-wrapper{background-color:var(--plasma-textarea-input-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-textarea-border-size,1px) var(--plasma-textarea-input-border-color-focus);}.bofyi4a:focus-within:not([readonly]) .textarea-container{box-shadow:inset 0 0 0 var(--plasma-textarea-border-size,1px) var(--plasma-textarea-border-color-focus);}.bofyi4a:focus-within:not([readonly]) .textarea-helpers{background-color:var(--plasma-textarea-helpers-background-color-focus);}.bofyi4a:hover:not([disabled]):not([readonly]):not(:focus-within) .textarea-container{box-shadow:inset 0 0 0 var(--plasma-textarea-border-size,1px) var(--plasma-textarea-border-color-hover);}.bofyi4a:hover:not([disabled]):not([readonly]):not(:focus-within) .textarea-wrapper{box-shadow:inset 0 0 0 var(--plasma-textarea-border-size,1px) var(--plasma-textarea-input-border-color-hover);background-color:var(--plasma-textarea-input-background-color-hover);}.bofyi4a:hover:not([disabled]):not([readonly]):not(:focus-within) .textarea-wrapper + .textarea-helpers{background-color:var(--plasma-textarea-helpers-background-color-hover);}.bofyi4a:active:not([disabled]):not([readonly]):not(:focus-within) .textarea-wrapper{box-shadow:inset 0 0 0 var(--plasma-textarea-border-size,1px) var(--plasma-textarea-input-border-color-active);background-color:var(--plasma-textarea-input-background-color-active);}.bofyi4a:active:not([disabled]):not([readonly]):not(:focus-within) .textarea-wrapper + .textarea-helpers{background-color:var(--plasma-textarea-helpers-background-color-active);}
@@ -1,56 +0,0 @@
1
- "use strict";
2
-
3
- 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); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.composeMask = void 0;
8
- var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
- var _reactMaskinput = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("@salutejs/react-maskinput"));
10
- var _excluded = ["maskFormat"];
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
14
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
16
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
17
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
18
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
19
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
20
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
21
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
22
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
23
- var defaultFormatChars = [{
24
- str: '0',
25
- regexp: /[0-9]/
26
- }, {
27
- str: '*',
28
- regexp: /./
29
- }, {
30
- str: 'a',
31
- regexp: /[a-zA-Z]/
32
- }, {
33
- str: 'я',
34
- regexp: /[а-яА-ЯёЁ]/
35
- }];
36
- var composeMask = exports.composeMask = function composeMask(InputComponent) {
37
- var MaskedInput = (0, _reactMaskinput["default"])(InputComponent);
38
- return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRef) {
39
- var _ref$maskFormat = _ref.maskFormat,
40
- maskFormat = _ref$maskFormat === void 0 ? defaultFormatChars : _ref$maskFormat,
41
- rest = _objectWithoutProperties(_ref, _excluded);
42
- var _useState = (0, _react.useState)(null),
43
- _useState2 = _slicedToArray(_useState, 2),
44
- ref = _useState2[0],
45
- setRef = _useState2[1];
46
- (0, _react.useImperativeHandle)(outerRef, function () {
47
- return ref;
48
- }, [ref]);
49
- return /*#__PURE__*/_react["default"].createElement(MaskedInput, _extends({
50
- getReference: function getReference(el) {
51
- return setRef(el);
52
- },
53
- maskFormat: maskFormat
54
- }, rest));
55
- });
56
- };
@@ -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,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "composeMask", {
7
- enumerable: true,
8
- get: function get() {
9
- return _Mask.composeMask;
10
- }
11
- });
12
- var _Mask = /*#__PURE__*/require("./Mask");
@@ -1,9 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Mask = void 0;
7
- var _Mask = /*#__PURE__*/require("../../../../components/Mask");
8
- var _TextField = /*#__PURE__*/require("../TextField/TextField");
9
- var Mask = exports.Mask = /*#__PURE__*/(0, _Mask.composeMask)(_TextField.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,9 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Mask = void 0;
7
- var _Mask = /*#__PURE__*/require("../../../../components/Mask");
8
- var _TextField = /*#__PURE__*/require("../TextField/TextField");
9
- var Mask = exports.Mask = /*#__PURE__*/(0, _Mask.composeMask)(_TextField.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
- };