@vkontakte/vkui 4.21.0 → 4.22.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (248) hide show
  1. package/.cache/.eslintcache +1 -1
  2. package/.cache/.stylelintcache +1 -1
  3. package/.cache/.tsbuildinfo +271 -37
  4. package/.cache/ts/src/components/Avatar/Avatar.d.ts +2 -0
  5. package/.cache/ts/src/components/Cell/Cell.d.ts +11 -0
  6. package/.cache/ts/src/components/Cell/CellCheckbox/CellCheckbox.d.ts +5 -0
  7. package/.cache/ts/src/components/Cell/CellDragger/CellDragger.d.ts +6 -0
  8. package/.cache/ts/src/components/Cell/useDraggable.d.ts +13 -0
  9. package/.cache/ts/src/components/CustomSelect/CustomSelect.d.ts +0 -1
  10. package/.cache/ts/src/components/DropdownIcon/DropdownIcon.d.ts +3 -0
  11. package/.cache/ts/src/components/GridAvatar/GridAvatar.d.ts +9 -0
  12. package/.cache/ts/src/components/InitialsAvatar/InitialsAvatar.d.ts +33 -0
  13. package/.cache/ts/src/components/Removable/Removable.d.ts +2 -1
  14. package/.cache/ts/src/components/TabbarItem/TabbarItem.d.ts +3 -1
  15. package/.cache/ts/src/index.d.ts +4 -0
  16. package/dist/cjs/components/ActionSheet/ActionSheet.js +1 -12
  17. package/dist/cjs/components/ActionSheet/ActionSheet.js.map +1 -1
  18. package/dist/cjs/components/Avatar/Avatar.d.ts +2 -0
  19. package/dist/cjs/components/Avatar/Avatar.js +7 -3
  20. package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
  21. package/dist/cjs/components/CardScroll/CardScroll.js +1 -1
  22. package/dist/cjs/components/CardScroll/CardScroll.js.map +1 -1
  23. package/dist/cjs/components/Cell/Cell.d.ts +11 -0
  24. package/dist/cjs/components/Cell/Cell.js +109 -182
  25. package/dist/cjs/components/Cell/Cell.js.map +1 -1
  26. package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.d.ts +5 -0
  27. package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js +50 -0
  28. package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js.map +1 -0
  29. package/dist/cjs/components/Cell/CellDragger/CellDragger.d.ts +6 -0
  30. package/dist/cjs/components/Cell/CellDragger/CellDragger.js +53 -0
  31. package/dist/cjs/components/Cell/CellDragger/CellDragger.js.map +1 -0
  32. package/dist/cjs/components/Cell/useDraggable.d.ts +13 -0
  33. package/dist/cjs/components/Cell/useDraggable.js +142 -0
  34. package/dist/cjs/components/Cell/useDraggable.js.map +1 -0
  35. package/dist/cjs/components/ChipsSelect/ChipsSelect.js +2 -2
  36. package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
  37. package/dist/cjs/components/CustomSelect/CustomSelect.d.ts +0 -1
  38. package/dist/cjs/components/CustomSelect/CustomSelect.js +2 -3
  39. package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
  40. package/dist/cjs/components/DropdownIcon/DropdownIcon.d.ts +3 -0
  41. package/dist/cjs/components/DropdownIcon/DropdownIcon.js +37 -0
  42. package/dist/cjs/components/DropdownIcon/DropdownIcon.js.map +1 -0
  43. package/dist/cjs/components/FocusTrap/FocusTrap.js +3 -5
  44. package/dist/cjs/components/FocusTrap/FocusTrap.js.map +1 -1
  45. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js +1 -0
  46. package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  47. package/dist/cjs/components/GridAvatar/GridAvatar.d.ts +9 -0
  48. package/dist/cjs/components/GridAvatar/GridAvatar.js +61 -0
  49. package/dist/cjs/components/GridAvatar/GridAvatar.js.map +1 -0
  50. package/dist/cjs/components/InitialsAvatar/InitialsAvatar.d.ts +33 -0
  51. package/dist/cjs/components/InitialsAvatar/InitialsAvatar.js +64 -0
  52. package/dist/cjs/components/InitialsAvatar/InitialsAvatar.js.map +1 -0
  53. package/dist/cjs/components/NativeSelect/NativeSelect.js +2 -2
  54. package/dist/cjs/components/NativeSelect/NativeSelect.js.map +1 -1
  55. package/dist/cjs/components/Progress/Progress.js +6 -3
  56. package/dist/cjs/components/Progress/Progress.js.map +1 -1
  57. package/dist/cjs/components/Removable/Removable.d.ts +2 -1
  58. package/dist/cjs/components/Removable/Removable.js +20 -10
  59. package/dist/cjs/components/Removable/Removable.js.map +1 -1
  60. package/dist/cjs/components/SelectMimicry/SelectMimicry.js +2 -2
  61. package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map +1 -1
  62. package/dist/cjs/components/Tabbar/Tabbar.js +3 -1
  63. package/dist/cjs/components/Tabbar/Tabbar.js.map +1 -1
  64. package/dist/cjs/components/TabbarItem/TabbarItem.d.ts +3 -1
  65. package/dist/cjs/components/TabbarItem/TabbarItem.js +29 -11
  66. package/dist/cjs/components/TabbarItem/TabbarItem.js.map +1 -1
  67. package/dist/cjs/components/View/View.js +53 -42
  68. package/dist/cjs/components/View/View.js.map +1 -1
  69. package/dist/cjs/components/View/ViewInfinite.js +63 -52
  70. package/dist/cjs/components/View/ViewInfinite.js.map +1 -1
  71. package/dist/cjs/index.d.ts +4 -0
  72. package/dist/cjs/index.js +16 -0
  73. package/dist/cjs/index.js.map +1 -1
  74. package/dist/cjs/lib/prefixClass.js +7 -6
  75. package/dist/cjs/lib/prefixClass.js.map +1 -1
  76. package/dist/components/ActionSheet/ActionSheet.js +1 -11
  77. package/dist/components/ActionSheet/ActionSheet.js.map +1 -1
  78. package/dist/components/Avatar/Avatar.d.ts +2 -0
  79. package/dist/components/Avatar/Avatar.js +4 -2
  80. package/dist/components/Avatar/Avatar.js.map +1 -1
  81. package/dist/components/CardScroll/CardScroll.js +1 -1
  82. package/dist/components/CardScroll/CardScroll.js.map +1 -1
  83. package/dist/components/Cell/Cell.d.ts +11 -0
  84. package/dist/components/Cell/Cell.js +103 -177
  85. package/dist/components/Cell/Cell.js.map +1 -1
  86. package/dist/components/Cell/CellCheckbox/CellCheckbox.d.ts +5 -0
  87. package/dist/components/Cell/CellCheckbox/CellCheckbox.js +31 -0
  88. package/dist/components/Cell/CellCheckbox/CellCheckbox.js.map +1 -0
  89. package/dist/components/Cell/CellDragger/CellDragger.d.ts +6 -0
  90. package/dist/components/Cell/CellDragger/CellDragger.js +30 -0
  91. package/dist/components/Cell/CellDragger/CellDragger.js.map +1 -0
  92. package/dist/components/Cell/useDraggable.d.ts +13 -0
  93. package/dist/components/Cell/useDraggable.js +126 -0
  94. package/dist/components/Cell/useDraggable.js.map +1 -0
  95. package/dist/components/ChipsSelect/ChipsSelect.js +2 -2
  96. package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
  97. package/dist/components/CustomSelect/CustomSelect.d.ts +0 -1
  98. package/dist/components/CustomSelect/CustomSelect.js +3 -5
  99. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  100. package/dist/components/DropdownIcon/DropdownIcon.d.ts +3 -0
  101. package/dist/components/DropdownIcon/DropdownIcon.js +19 -0
  102. package/dist/components/DropdownIcon/DropdownIcon.js.map +1 -0
  103. package/dist/components/FocusTrap/FocusTrap.js +3 -5
  104. package/dist/components/FocusTrap/FocusTrap.js.map +1 -1
  105. package/dist/components/FormLayoutGroup/FormLayoutGroup.js +1 -0
  106. package/dist/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  107. package/dist/components/GridAvatar/GridAvatar.d.ts +9 -0
  108. package/dist/components/GridAvatar/GridAvatar.js +41 -0
  109. package/dist/components/GridAvatar/GridAvatar.js.map +1 -0
  110. package/dist/components/InitialsAvatar/InitialsAvatar.d.ts +33 -0
  111. package/dist/components/InitialsAvatar/InitialsAvatar.js +46 -0
  112. package/dist/components/InitialsAvatar/InitialsAvatar.js.map +1 -0
  113. package/dist/components/NativeSelect/NativeSelect.js +2 -2
  114. package/dist/components/NativeSelect/NativeSelect.js.map +1 -1
  115. package/dist/components/Progress/Progress.js +6 -3
  116. package/dist/components/Progress/Progress.js.map +1 -1
  117. package/dist/components/Removable/Removable.d.ts +2 -1
  118. package/dist/components/Removable/Removable.js +20 -11
  119. package/dist/components/Removable/Removable.js.map +1 -1
  120. package/dist/components/SelectMimicry/SelectMimicry.js +2 -2
  121. package/dist/components/SelectMimicry/SelectMimicry.js.map +1 -1
  122. package/dist/components/Tabbar/Tabbar.js +3 -1
  123. package/dist/components/Tabbar/Tabbar.js.map +1 -1
  124. package/dist/components/TabbarItem/TabbarItem.d.ts +3 -1
  125. package/dist/components/TabbarItem/TabbarItem.js +26 -10
  126. package/dist/components/TabbarItem/TabbarItem.js.map +1 -1
  127. package/dist/components/View/View.js +53 -42
  128. package/dist/components/View/View.js.map +1 -1
  129. package/dist/components/View/ViewInfinite.js +65 -54
  130. package/dist/components/View/ViewInfinite.js.map +1 -1
  131. package/dist/components.css +1 -1
  132. package/dist/components.css.map +1 -1
  133. package/dist/cssm/components/ActionSheet/ActionSheet.js +1 -11
  134. package/dist/cssm/components/ActionSheet/ActionSheet.js.map +1 -1
  135. package/dist/cssm/components/Avatar/Avatar.js +4 -2
  136. package/dist/cssm/components/Avatar/Avatar.js.map +1 -1
  137. package/dist/cssm/components/CardScroll/CardScroll.js +1 -1
  138. package/dist/cssm/components/CardScroll/CardScroll.js.map +1 -1
  139. package/dist/cssm/components/Cell/Cell.css +1 -1
  140. package/dist/cssm/components/Cell/Cell.js +103 -177
  141. package/dist/cssm/components/Cell/Cell.js.map +1 -1
  142. package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.css +1 -0
  143. package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.js +32 -0
  144. package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.js.map +1 -0
  145. package/dist/cssm/components/Cell/CellDragger/CellDragger.css +1 -0
  146. package/dist/cssm/components/Cell/CellDragger/CellDragger.js +31 -0
  147. package/dist/cssm/components/Cell/CellDragger/CellDragger.js.map +1 -0
  148. package/dist/cssm/components/Cell/useDraggable.js +126 -0
  149. package/dist/cssm/components/Cell/useDraggable.js.map +1 -0
  150. package/dist/cssm/components/ChipsSelect/ChipsSelect.js +2 -2
  151. package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
  152. package/dist/cssm/components/CustomSelect/CustomSelect.js +3 -5
  153. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  154. package/dist/cssm/components/DropdownIcon/DropdownIcon.css +1 -0
  155. package/dist/cssm/components/DropdownIcon/DropdownIcon.js +20 -0
  156. package/dist/cssm/components/DropdownIcon/DropdownIcon.js.map +1 -0
  157. package/dist/cssm/components/FocusTrap/FocusTrap.js +3 -5
  158. package/dist/cssm/components/FocusTrap/FocusTrap.js.map +1 -1
  159. package/dist/cssm/components/FormItem/FormItem.css +1 -1
  160. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.css +1 -1
  161. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js +1 -0
  162. package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
  163. package/dist/cssm/components/GridAvatar/GridAvatar.css +1 -0
  164. package/dist/cssm/components/GridAvatar/GridAvatar.js +42 -0
  165. package/dist/cssm/components/GridAvatar/GridAvatar.js.map +1 -0
  166. package/dist/cssm/components/InitialsAvatar/InitialsAvatar.css +1 -0
  167. package/dist/cssm/components/InitialsAvatar/InitialsAvatar.js +52 -0
  168. package/dist/cssm/components/InitialsAvatar/InitialsAvatar.js.map +1 -0
  169. package/dist/cssm/components/NativeSelect/NativeSelect.js +2 -2
  170. package/dist/cssm/components/NativeSelect/NativeSelect.js.map +1 -1
  171. package/dist/cssm/components/Progress/Progress.js +6 -3
  172. package/dist/cssm/components/Progress/Progress.js.map +1 -1
  173. package/dist/cssm/components/Removable/Removable.css +1 -1
  174. package/dist/cssm/components/Removable/Removable.js +20 -11
  175. package/dist/cssm/components/Removable/Removable.js.map +1 -1
  176. package/dist/cssm/components/Select/Select.css +1 -1
  177. package/dist/cssm/components/SelectMimicry/SelectMimicry.js +2 -2
  178. package/dist/cssm/components/SelectMimicry/SelectMimicry.js.map +1 -1
  179. package/dist/cssm/components/SimpleCell/SimpleCell.css +1 -1
  180. package/dist/cssm/components/Tabbar/Tabbar.css +1 -1
  181. package/dist/cssm/components/Tabbar/Tabbar.js +3 -1
  182. package/dist/cssm/components/Tabbar/Tabbar.js.map +1 -1
  183. package/dist/cssm/components/TabbarItem/TabbarItem.css +1 -1
  184. package/dist/cssm/components/TabbarItem/TabbarItem.js +26 -10
  185. package/dist/cssm/components/TabbarItem/TabbarItem.js.map +1 -1
  186. package/dist/cssm/components/TabsItem/TabsItem.css +1 -1
  187. package/dist/cssm/components/View/View.js +53 -42
  188. package/dist/cssm/components/View/View.js.map +1 -1
  189. package/dist/cssm/components/View/ViewInfinite.js +65 -54
  190. package/dist/cssm/components/View/ViewInfinite.js.map +1 -1
  191. package/dist/cssm/index.js +2 -0
  192. package/dist/cssm/index.js.map +1 -1
  193. package/dist/cssm/lib/prefixClass.js +7 -6
  194. package/dist/cssm/lib/prefixClass.js.map +1 -1
  195. package/dist/cssm/styles/components.css +1 -1
  196. package/dist/index.d.ts +4 -0
  197. package/dist/index.js +2 -0
  198. package/dist/index.js.map +1 -1
  199. package/dist/lib/prefixClass.js +7 -6
  200. package/dist/lib/prefixClass.js.map +1 -1
  201. package/dist/vkui.css +1 -1
  202. package/dist/vkui.css.map +1 -1
  203. package/package.json +1 -1
  204. package/src/components/ActionSheet/ActionSheet.tsx +1 -8
  205. package/src/components/Avatar/Avatar.tsx +5 -2
  206. package/src/components/CardScroll/CardScroll.tsx +4 -1
  207. package/src/components/Cell/Cell.css +22 -45
  208. package/src/components/Cell/Cell.tsx +101 -162
  209. package/src/components/Cell/CellCheckbox/CellCheckbox.css +17 -0
  210. package/src/components/Cell/CellCheckbox/CellCheckbox.tsx +42 -0
  211. package/src/components/Cell/CellDragger/CellDragger.css +4 -0
  212. package/src/components/Cell/CellDragger/CellDragger.tsx +40 -0
  213. package/src/components/Cell/Readme.md +89 -51
  214. package/src/components/Cell/useDraggable.tsx +112 -0
  215. package/src/components/ChipsSelect/ChipsSelect.tsx +2 -2
  216. package/src/components/CustomSelect/CustomSelect.tsx +3 -4
  217. package/src/components/DropdownIcon/DropdownIcon.css +3 -0
  218. package/src/components/DropdownIcon/DropdownIcon.tsx +20 -0
  219. package/src/components/Epic/Readme.md +1 -0
  220. package/src/components/FocusTrap/FocusTrap.tsx +11 -8
  221. package/src/components/FormItem/FormItem.css +8 -8
  222. package/src/components/FormLayoutGroup/FormLayoutGroup.css +9 -3
  223. package/src/components/FormLayoutGroup/FormLayoutGroup.tsx +10 -1
  224. package/src/components/GridAvatar/GridAvatar.css +37 -0
  225. package/src/components/GridAvatar/GridAvatar.tsx +55 -0
  226. package/src/components/GridAvatar/Readme.md +12 -0
  227. package/src/components/InitialsAvatar/InitialsAvatar.css +53 -0
  228. package/src/components/InitialsAvatar/InitialsAvatar.tsx +90 -0
  229. package/src/components/InitialsAvatar/Readme.md +14 -0
  230. package/src/components/ModalRoot/Readme.md +2 -2
  231. package/src/components/NativeSelect/NativeSelect.tsx +2 -2
  232. package/src/components/Progress/Progress.tsx +8 -3
  233. package/src/components/Removable/Removable.css +9 -20
  234. package/src/components/Removable/Removable.tsx +19 -11
  235. package/src/components/Select/Select.css +1 -1
  236. package/src/components/SelectMimicry/SelectMimicry.tsx +2 -2
  237. package/src/components/SimpleCell/SimpleCell.css +10 -27
  238. package/src/components/Tabbar/Tabbar.css +15 -4
  239. package/src/components/Tabbar/Tabbar.tsx +3 -1
  240. package/src/components/TabbarItem/Readme.md +72 -0
  241. package/src/components/TabbarItem/TabbarItem.css +65 -14
  242. package/src/components/TabbarItem/TabbarItem.tsx +46 -22
  243. package/src/components/TabsItem/TabsItem.css +5 -2
  244. package/src/components/View/View.tsx +37 -31
  245. package/src/components/View/ViewInfinite.tsx +44 -38
  246. package/src/index.ts +4 -0
  247. package/src/lib/prefixClass.ts +9 -6
  248. package/src/styles/components.css +4 -0
@@ -17,7 +17,6 @@ import { useTimeout } from "../../hooks/useTimeout";
17
17
  import { useAdaptivity } from "../../hooks/useAdaptivity";
18
18
  import { useObjectMemo } from "../../hooks/useObjectMemo";
19
19
  import { warnOnce } from "../../lib/warnOnce";
20
- import { noop } from '@vkontakte/vkjs';
21
20
  import "./ActionSheet.css";
22
21
  var warn = warnOnce('ActionSheet');
23
22
  export var ActionSheet = function ActionSheet(_ref) {
@@ -40,11 +39,8 @@ export var ActionSheet = function ActionSheet(_ref) {
40
39
  return setClosing(true);
41
40
  };
42
41
 
43
- var closeAction = React.useRef(noop);
44
-
45
42
  var afterClose = function afterClose() {
46
43
  restProps.onClose();
47
- closeAction.current();
48
44
  };
49
45
 
50
46
  if (process.env.NODE_ENV === 'development' && !restProps.onClose) {
@@ -72,16 +68,10 @@ export var ActionSheet = function ActionSheet(_ref) {
72
68
  }, [closing]);
73
69
  var onItemClick = React.useCallback(function (action, autoclose) {
74
70
  return function (event) {
75
- event.persist();
71
+ action && action(event);
76
72
 
77
73
  if (autoclose) {
78
- closeAction.current = function () {
79
- return action && action(event);
80
- };
81
-
82
74
  setClosing(true);
83
- } else {
84
- action && action(event);
85
75
  }
86
76
  };
87
77
  }, []);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":["React","PopoutWrapper","ViewWidth","ViewHeight","IOS","ActionSheetDropdownDesktop","ActionSheetDropdown","hasReactNode","ActionSheetContext","Caption","usePlatform","useTimeout","useAdaptivity","useObjectMemo","warnOnce","noop","warn","ActionSheet","children","className","header","text","style","iosCloseItem","restProps","platform","useState","closing","setClosing","onClose","closeAction","useRef","afterClose","current","process","env","NODE_ENV","viewWidth","viewHeight","hasMouse","isDesktop","SMALL_TABLET","MEDIUM","timeout","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","autoclose","event","persist","contextValue","DropdownComponent","defaultProps","popupDirection"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT;AACA,SAASC,SAAT,EAAoBC,UAApB;AACA,SAASC,GAAT;AACA,SAASC,0BAAT;AACA,SAASC,mBAAT;AACA,SAASC,YAAT;AACA,SAASC,kBAAT;AACA,OAAOC,OAAP;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,aAAT;AACA,SAASC,aAAT;AACA,SAASC,QAAT;AAEA,SAASC,IAAT,QAAqB,iBAArB;AACA;AAyBA,IAAMC,IAAI,GAAGF,QAAQ,CAAC,aAAD,CAArB;AAEA,OAAO,IAAMG,WAAuC,GAAG,SAA1CA,WAA0C,OAQ/B;AAAA,MAPtBC,QAOsB,QAPtBA,QAOsB;AAAA,MANtBC,SAMsB,QANtBA,SAMsB;AAAA,MALtBC,MAKsB,QALtBA,MAKsB;AAAA,MAJtBC,IAIsB,QAJtBA,IAIsB;AAAA,MAHtBC,KAGsB,QAHtBA,KAGsB;AAAA,MAFtBC,YAEsB,QAFtBA,YAEsB;AAAA,MADnBC,SACmB;;AACtB,MAAMC,QAAQ,GAAGf,WAAW,EAA5B;;AACA,wBAA8BV,KAAK,CAAC0B,QAAN,CAAe,KAAf,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,MAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,WAAMD,UAAU,CAAC,IAAD,CAAhB;AAAA,GAAhB;;AAEA,MAAME,WAAW,GAAG9B,KAAK,CAAC+B,MAAN,CAA2BhB,IAA3B,CAApB;;AACA,MAAMiB,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBR,IAAAA,SAAS,CAACK,OAAV;AACAC,IAAAA,WAAW,CAACG,OAAZ;AACD,GAHD;;AAKA,MAAIC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IAA0C,CAACZ,SAAS,CAACK,OAAzD,EAAkE;AAChEb,IAAAA,IAAI,CAAC,6CAAD,CAAJ;AACD;;AAED,uBAA4CJ,aAAa,EAAzD;AAAA,MAAQyB,SAAR,kBAAQA,SAAR;AAAA,MAAmBC,UAAnB,kBAAmBA,UAAnB;AAAA,MAA+BC,QAA/B,kBAA+BA,QAA/B;;AACA,MAAMC,SAAS,GAAGH,SAAS,IAAInC,SAAS,CAACuC,YAAvB,KAAwCF,QAAQ,IAAID,UAAU,IAAInC,UAAU,CAACuC,MAA7E,CAAlB;AAEA,MAAMC,OAAO,GAAGlB,QAAQ,KAAKrB,GAAb,GAAmB,GAAnB,GAAyB,GAAzC;AAEA,MAAMwC,wBAAwB,GAAGjC,UAAU,CAACqB,UAAD,EAAaW,OAAb,CAA3C;AACA3C,EAAAA,KAAK,CAAC6C,SAAN,CAAgB,YAAM;AACpB,QAAIlB,OAAJ,EAAa;AACX,UAAIa,SAAJ,EAAe;AACbR,QAAAA,UAAU;AACX,OAFD,MAEO;AACLY,QAAAA,wBAAwB,CAACE,GAAzB;AACD;AACF,KAND,MAMO;AACLF,MAAAA,wBAAwB,CAACG,KAAzB;AACD;AACF,GAVD,EAUG,CAACpB,OAAD,CAVH;AAYA,MAAMqB,WAAW,GAAGhD,KAAK,CAACiD,WAAN,CAAoC,UAACC,MAAD,EAASC,SAAT;AAAA,WAAuB,UAACC,KAAD,EAAW;AACxFA,MAAAA,KAAK,CAACC,OAAN;;AAEA,UAAIF,SAAJ,EAAe;AACbrB,QAAAA,WAAW,CAACG,OAAZ,GAAsB;AAAA,iBAAMiB,MAAM,IAAIA,MAAM,CAACE,KAAD,CAAtB;AAAA,SAAtB;;AACAxB,QAAAA,UAAU,CAAC,IAAD,CAAV;AACD,OAHD,MAGO;AACLsB,QAAAA,MAAM,IAAIA,MAAM,CAACE,KAAD,CAAhB;AACD;AACF,KATuD;AAAA,GAApC,EASjB,EATiB,CAApB;AAUA,MAAME,YAAY,GAAGzC,aAAa,CAAC;AAAEmC,IAAAA,WAAW,EAAXA,WAAF;AAAeR,IAAAA,SAAS,EAATA;AAAf,GAAD,CAAlC;AAEA,MAAMe,iBAAiB,GAAGf,SAAS,GAC/BnC,0BAD+B,GAE/BC,mBAFJ;AAIA,SACE,oBAAC,aAAD;AACE,IAAA,OAAO,EAAEqB,OADX;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,SAAS,EAAER,SAHb;AAIE,IAAA,KAAK,EAAEG,KAJT;AAKE,IAAA,OAAO,EAAE,CAACkB,SAAD,GAAaX,OAAb,GAAuB,IALlC;AAME,IAAA,OAAO,EAAE,CAACW,SANZ;AAOE,IAAA,KAAK,EAAE,CAACA;AAPV,KASE,oBAAC,kBAAD,CAAoB,QAApB;AAA6B,IAAA,KAAK,EAAEc;AAApC,KACE,oBAAC,iBAAD;AACE,IAAA,OAAO,EAAE3B,OADX;AAEE,IAAA,OAAO,EAAEgB;AAFX,KAGMnB,SAHN;AAIE,IAAA,OAAO,EAAEK;AAJX,MAMG,CAACtB,YAAY,CAACa,MAAD,CAAZ,IAAwBb,YAAY,CAACc,IAAD,CAArC,KACC;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACGd,YAAY,CAACa,MAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAC,GAAf;AAAmB,IAAA,MAAM,EAAEK,QAAQ,KAAKrB,GAAb,GAAmB,UAAnB,GAAgC,QAA3D;AAAqE,IAAA,SAAS,EAAC;AAA/E,KACGgB,MADH,CAFJ,EAMGb,YAAY,CAACc,IAAD,CAAZ,IAAsB,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAC,GAAf;AAAmB,IAAA,MAAM,EAAC,SAA1B;AAAoC,IAAA,SAAS,EAAC;AAA9C,KAAmEA,IAAnE,CANzB,CAPJ,EAgBGH,QAhBH,EAiBGO,QAAQ,KAAKrB,GAAb,IAAoB,CAACoC,SAArB,IAAkCjB,YAjBrC,CADF,CATF,CADF;AAiCD,CA1FM;AA4FPN,WAAW,CAACuC,YAAZ,GAA2B;AACzBC,EAAAA,cAAc,EAAE;AADS,CAA3B","sourcesContent":["import * as React from 'react';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ViewWidth, ViewHeight } from '../../hoc/withAdaptivity';\nimport { IOS } from '../../lib/platform';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { hasReactNode } from '../../lib/utils';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport Caption from '../Typography/Caption/Caption';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SharedDropdownProps, PopupDirection, ToggleRef } from './types';\nimport { noop } from '@vkontakte/vkjs';\nimport './ActionSheet.css';\n\nexport interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {\n header?: React.ReactNode;\n text?: React.ReactNode;\n /**\n * Закрыть попап по клику снаружи. В v5 будет обязательным.\n */\n onClose?: VoidFunction;\n /**\n * Элемент, рядом с которым вылезает попап на десктопе.\n * Лучше передавать RefObject c current.\n * В v5 будет обязательным.\n */\n toggleRef?: ToggleRef;\n /**\n * Направление на десктопе\n */\n popupDirection?: PopupDirection;\n /**\n * Только iOS. В v5 будет обязательным.\n */\n iosCloseItem?: React.ReactNode;\n}\n\nconst warn = warnOnce('ActionSheet');\n\nexport const ActionSheet: React.FC<ActionSheetProps> = ({\n children,\n className,\n header,\n text,\n style,\n iosCloseItem,\n ...restProps\n}: ActionSheetProps) => {\n const platform = usePlatform();\n const [closing, setClosing] = React.useState(false);\n const onClose = () => setClosing(true);\n\n const closeAction = React.useRef<VoidFunction>(noop);\n const afterClose = () => {\n restProps.onClose();\n closeAction.current();\n };\n\n if (process.env.NODE_ENV === 'development' && !restProps.onClose) {\n warn('can\\'t close on outer click without onClose');\n }\n\n const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n const timeout = platform === IOS ? 300 : 200;\n\n const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n React.useEffect(() => {\n if (closing) {\n if (isDesktop) {\n afterClose();\n } else {\n fallbackTransitionFinish.set();\n }\n } else {\n fallbackTransitionFinish.clear();\n }\n }, [closing]);\n\n const onItemClick = React.useCallback<ItemClickHandler>((action, autoclose) => (event) => {\n event.persist();\n\n if (autoclose) {\n closeAction.current = () => action && action(event);\n setClosing(true);\n } else {\n action && action(event);\n }\n }, []);\n const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n const DropdownComponent = isDesktop\n ? ActionSheetDropdownDesktop\n : ActionSheetDropdown;\n\n return (\n <PopoutWrapper\n closing={closing}\n alignY=\"bottom\"\n className={className}\n style={style}\n onClick={!isDesktop ? onClose : null}\n hasMask={!isDesktop}\n fixed={!isDesktop}\n >\n <ActionSheetContext.Provider value={contextValue}>\n <DropdownComponent\n closing={closing}\n timeout={timeout}\n {...restProps as Omit<SharedDropdownProps, 'closing'>}\n onClose={onClose}\n >\n {(hasReactNode(header) || hasReactNode(text)) &&\n <header vkuiClass=\"ActionSheet__header\">\n {hasReactNode(header) &&\n <Caption level=\"1\" weight={platform === IOS ? 'semibold' : 'medium'} vkuiClass=\"ActionSheet__title\">\n {header}\n </Caption>\n }\n {hasReactNode(text) && <Caption level=\"1\" weight=\"regular\" vkuiClass=\"ActionSheet__text\">{text}</Caption>}\n </header>\n }\n {children}\n {platform === IOS && !isDesktop && iosCloseItem}\n </DropdownComponent>\n </ActionSheetContext.Provider>\n </PopoutWrapper>\n );\n};\n\nActionSheet.defaultProps = {\n popupDirection: 'bottom',\n};\n"],"file":"ActionSheet.js"}
1
+ {"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":["React","PopoutWrapper","ViewWidth","ViewHeight","IOS","ActionSheetDropdownDesktop","ActionSheetDropdown","hasReactNode","ActionSheetContext","Caption","usePlatform","useTimeout","useAdaptivity","useObjectMemo","warnOnce","warn","ActionSheet","children","className","header","text","style","iosCloseItem","restProps","platform","useState","closing","setClosing","onClose","afterClose","process","env","NODE_ENV","viewWidth","viewHeight","hasMouse","isDesktop","SMALL_TABLET","MEDIUM","timeout","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","autoclose","event","contextValue","DropdownComponent","defaultProps","popupDirection"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ViewWidth, ViewHeight } from '../../hoc/withAdaptivity';\nimport { IOS } from '../../lib/platform';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { hasReactNode } from '../../lib/utils';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport Caption from '../Typography/Caption/Caption';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SharedDropdownProps, PopupDirection, ToggleRef } from './types';\nimport './ActionSheet.css';\n\nexport interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {\n header?: React.ReactNode;\n text?: React.ReactNode;\n /**\n * Закрыть попап по клику снаружи. В v5 будет обязательным.\n */\n onClose?: VoidFunction;\n /**\n * Элемент, рядом с которым вылезает попап на десктопе.\n * Лучше передавать RefObject c current.\n * В v5 будет обязательным.\n */\n toggleRef?: ToggleRef;\n /**\n * Направление на десктопе\n */\n popupDirection?: PopupDirection;\n /**\n * Только iOS. В v5 будет обязательным.\n */\n iosCloseItem?: React.ReactNode;\n}\n\nconst warn = warnOnce('ActionSheet');\n\nexport const ActionSheet: React.FC<ActionSheetProps> = ({\n children,\n className,\n header,\n text,\n style,\n iosCloseItem,\n ...restProps\n}: ActionSheetProps) => {\n const platform = usePlatform();\n const [closing, setClosing] = React.useState(false);\n const onClose = () => setClosing(true);\n\n const afterClose = () => {\n restProps.onClose();\n };\n\n if (process.env.NODE_ENV === 'development' && !restProps.onClose) {\n warn('can\\'t close on outer click without onClose');\n }\n\n const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n const timeout = platform === IOS ? 300 : 200;\n\n const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n React.useEffect(() => {\n if (closing) {\n if (isDesktop) {\n afterClose();\n } else {\n fallbackTransitionFinish.set();\n }\n } else {\n fallbackTransitionFinish.clear();\n }\n }, [closing]);\n\n const onItemClick = React.useCallback<ItemClickHandler>((action, autoclose) => (event) => {\n action && action(event);\n if (autoclose) {\n setClosing(true);\n }\n }, []);\n const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n const DropdownComponent = isDesktop\n ? ActionSheetDropdownDesktop\n : ActionSheetDropdown;\n\n return (\n <PopoutWrapper\n closing={closing}\n alignY=\"bottom\"\n className={className}\n style={style}\n onClick={!isDesktop ? onClose : null}\n hasMask={!isDesktop}\n fixed={!isDesktop}\n >\n <ActionSheetContext.Provider value={contextValue}>\n <DropdownComponent\n closing={closing}\n timeout={timeout}\n {...restProps as Omit<SharedDropdownProps, 'closing'>}\n onClose={onClose}\n >\n {(hasReactNode(header) || hasReactNode(text)) &&\n <header vkuiClass=\"ActionSheet__header\">\n {hasReactNode(header) &&\n <Caption level=\"1\" weight={platform === IOS ? 'semibold' : 'medium'} vkuiClass=\"ActionSheet__title\">\n {header}\n </Caption>\n }\n {hasReactNode(text) && <Caption level=\"1\" weight=\"regular\" vkuiClass=\"ActionSheet__text\">{text}</Caption>}\n </header>\n }\n {children}\n {platform === IOS && !isDesktop && iosCloseItem}\n </DropdownComponent>\n </ActionSheetContext.Provider>\n </PopoutWrapper>\n );\n};\n\nActionSheet.defaultProps = {\n popupDirection: 'bottom',\n};\n"],"file":"ActionSheet.js"}
@@ -105,10 +105,12 @@ var Avatar = function Avatar(_ref) {
105
105
  }, children));
106
106
  };
107
107
 
108
+ export var AVATAR_DEFAULT_SIZE = 48;
109
+ export var AVATAR_DEFAULT_SHADOW = true;
108
110
  Avatar.defaultProps = {
109
- size: 48,
111
+ size: AVATAR_DEFAULT_SIZE,
110
112
  mode: 'default',
111
- shadow: true
113
+ shadow: AVATAR_DEFAULT_SHADOW
112
114
  };
113
115
  export default Avatar;
114
116
  //# sourceMappingURL=Avatar.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":["React","getClassName","classNames","usePlatform","Avatar","alt","crossOrigin","decoding","height","loading","referrerPolicy","sizes","src","srcSet","useMap","width","getRef","size","shadow","mode","className","children","getRootRef","style","ariaLabel","restProps","platform","useState","failedImage","setFailedImage","onImageError","onImageLoad","borderRadius","hasSrc","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport './Avatar.css';\n\nexport interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {\n /**\n * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24\n */\n size?: number;\n mode?: 'default' | 'image' | 'app';\n shadow?: boolean;\n}\n\nconst Avatar: React.FC<AvatarProps> = ({\n alt,\n crossOrigin,\n decoding,\n height,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n width,\n getRef,\n size,\n shadow,\n mode,\n className,\n children,\n getRootRef,\n style,\n 'aria-label': ariaLabel,\n ...restProps\n}: AvatarProps) => {\n const platform = usePlatform();\n const [failedImage, setFailedImage] = React.useState(false);\n\n const onImageError = () => {\n setFailedImage(true);\n };\n\n const onImageLoad = () => {\n setFailedImage(false);\n };\n\n let borderRadius: string | number = '50%';\n\n switch (mode) {\n case 'image':\n size < 64 && (borderRadius = 4);\n size >= 64 && size < 96 && (borderRadius = 6);\n size >= 96 && (borderRadius = 8);\n break;\n case 'app':\n size <= 40 && (borderRadius = 8);\n size > 40 && size < 56 && (borderRadius = 10);\n size >= 56 && size < 64 && (borderRadius = 12);\n size >= 64 && size < 84 && (borderRadius = 16);\n size >= 84 && (borderRadius = 18);\n break;\n default:\n break;\n }\n\n const hasSrc = src || srcSet;\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(getClassName('Avatar', platform), `Avatar--type-${mode}`, `Avatar--sz-${size}`, {\n 'Avatar--shadow': shadow,\n 'Avatar--failed': failedImage,\n })}\n className={className}\n ref={getRootRef}\n role={hasSrc ? 'img' : 'presentation'}\n aria-label={alt || ariaLabel}\n style={{ ...style, width: size, height: size, borderRadius }}\n >\n {hasSrc &&\n <img\n crossOrigin={crossOrigin}\n decoding={decoding}\n height={height}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n ref={getRef}\n onError={onImageError}\n onLoad={onImageLoad}\n vkuiClass=\"Avatar__img\"\n alt=\"\"\n />\n }\n {children && <div vkuiClass=\"Avatar__children\">{children}</div>}\n </div>\n );\n};\n\nAvatar.defaultProps = {\n size: 48,\n mode: 'default',\n shadow: true,\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
1
+ {"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":["React","getClassName","classNames","usePlatform","Avatar","alt","crossOrigin","decoding","height","loading","referrerPolicy","sizes","src","srcSet","useMap","width","getRef","size","shadow","mode","className","children","getRootRef","style","ariaLabel","restProps","platform","useState","failedImage","setFailedImage","onImageError","onImageLoad","borderRadius","hasSrc","AVATAR_DEFAULT_SIZE","AVATAR_DEFAULT_SHADOW","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport './Avatar.css';\n\nexport interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {\n /**\n * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24\n */\n size?: number;\n mode?: 'default' | 'image' | 'app';\n shadow?: boolean;\n}\n\nconst Avatar: React.FC<AvatarProps> = ({\n alt,\n crossOrigin,\n decoding,\n height,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n width,\n getRef,\n size,\n shadow,\n mode,\n className,\n children,\n getRootRef,\n style,\n 'aria-label': ariaLabel,\n ...restProps\n}: AvatarProps) => {\n const platform = usePlatform();\n const [failedImage, setFailedImage] = React.useState(false);\n\n const onImageError = () => {\n setFailedImage(true);\n };\n\n const onImageLoad = () => {\n setFailedImage(false);\n };\n\n let borderRadius: string | number = '50%';\n\n switch (mode) {\n case 'image':\n size < 64 && (borderRadius = 4);\n size >= 64 && size < 96 && (borderRadius = 6);\n size >= 96 && (borderRadius = 8);\n break;\n case 'app':\n size <= 40 && (borderRadius = 8);\n size > 40 && size < 56 && (borderRadius = 10);\n size >= 56 && size < 64 && (borderRadius = 12);\n size >= 64 && size < 84 && (borderRadius = 16);\n size >= 84 && (borderRadius = 18);\n break;\n default:\n break;\n }\n\n const hasSrc = src || srcSet;\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(getClassName('Avatar', platform), `Avatar--type-${mode}`, `Avatar--sz-${size}`, {\n 'Avatar--shadow': shadow,\n 'Avatar--failed': failedImage,\n })}\n className={className}\n ref={getRootRef}\n role={hasSrc ? 'img' : 'presentation'}\n aria-label={alt || ariaLabel}\n style={{ ...style, width: size, height: size, borderRadius }}\n >\n {hasSrc &&\n <img\n crossOrigin={crossOrigin}\n decoding={decoding}\n height={height}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n ref={getRef}\n onError={onImageError}\n onLoad={onImageLoad}\n vkuiClass=\"Avatar__img\"\n alt=\"\"\n />\n }\n {children && <div vkuiClass=\"Avatar__children\">{children}</div>}\n </div>\n );\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\nexport const AVATAR_DEFAULT_SHADOW = true;\n\nAvatar.defaultProps = {\n size: AVATAR_DEFAULT_SIZE,\n mode: 'default',\n shadow: AVATAR_DEFAULT_SHADOW,\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
@@ -50,7 +50,7 @@ var CardScroll = function CardScroll(_ref) {
50
50
 
51
51
  function getScrollToRight(offset) {
52
52
  var containerWidth = refContainer.current.offsetWidth;
53
- var slide = Array.from(refContainer.current.children).find(function (el) {
53
+ var slide = Array.prototype.find.call(refContainer.current.children, function (el) {
54
54
  return el.offsetLeft + el.offsetWidth - offset > containerWidth;
55
55
  });
56
56
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":["React","classNames","getClassName","usePlatform","HorizontalScroll","withAdaptivity","useDOM","CardScroll","children","size","sizeX","restProps","platform","refContainer","useRef","gapRef","window","getScrollToLeft","offset","containerWidth","current","offsetWidth","slideIndex","Array","from","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","find","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,OAAOC,gBAAP;AACA,SAASC,cAAT;AACA,SAASC,MAAT;AACA;;AAMA,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,OAA8D;AAAA,MAA3DC,QAA2D,QAA3DA,QAA2D;AAAA,MAAjDC,IAAiD,QAAjDA,IAAiD;AAAA,MAA3CC,KAA2C,QAA3CA,KAA2C;AAAA,MAAjCC,SAAiC;;AAC1G,MAAMC,QAAQ,GAAGT,WAAW,EAA5B;AAEA,MAAMU,YAAY,GAAGb,KAAK,CAACc,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,MAAM,GAAGf,KAAK,CAACc,MAAN,CAA6B,IAA7B,CAAf;;AAEA,gBAAmBR,MAAM,EAAzB;AAAA,MAAQU,MAAR,WAAQA,MAAR;;AAEA,WAASC,eAAT,CAAyBC,MAAzB,EAAiD;AAC/C,QAAMC,cAAc,GAAGN,YAAY,CAACO,OAAb,CAAqBC,WAA5C;AACA,QAAMC,UAAU,GAAGC,KAAK,CACrBC,IADgB,CACXX,YAAY,CAACO,OAAb,CAAqBZ,QADV,EAEhBiB,SAFgB,CAEN,UAACC,EAAD;AAAA,aAAqBA,EAAE,CAACC,UAAH,GAAgBD,EAAE,CAACL,WAAnB,GAAiCO,QAAQ,CAACZ,MAAM,CAACa,gBAAP,CAAwBH,EAAxB,EAA4BI,WAA7B,CAAzC,GAAqFZ,MAArF,IAA+F,CAApH;AAAA,KAFM,CAAnB;;AAIA,QAAII,UAAU,KAAK,CAAC,CAApB,EAAuB;AACrB,aAAOJ,MAAP;AACD;;AAED,QAAII,UAAU,KAAK,CAAnB,EAAsB;AACpB,aAAO,CAAP;AACD;;AAED,QAAMS,KAAK,GAAGlB,YAAY,CAACO,OAAb,CAAqBZ,QAArB,CAA8Bc,UAA9B,CAAd;AAEA,QAAMU,QAAQ,GAAGD,KAAK,CAACJ,UAAN,IAAoBR,cAAc,GAAGY,KAAK,CAACV,WAA3C,IAA0DN,MAAM,CAACK,OAAP,CAAeC,WAA1F;;AAEA,QAAIW,QAAQ,IAAI,IAAIjB,MAAM,CAACK,OAAP,CAAeC,WAAnC,EAAgD;AAC9C,aAAO,CAAP;AACD;;AAED,WAAOW,QAAP;AACD;;AAED,WAASC,gBAAT,CAA0Bf,MAA1B,EAAkD;AAChD,QAAMC,cAAc,GAAGN,YAAY,CAACO,OAAb,CAAqBC,WAA5C;AACA,QAAMU,KAAK,GAAGR,KAAK,CAACC,IAAN,CAAWX,YAAY,CAACO,OAAb,CAAqBZ,QAAhC,EAA0C0B,IAA1C,CAA+C,UAACR,EAAD;AAAA,aAAqBA,EAAE,CAACC,UAAH,GAAgBD,EAAE,CAACL,WAAnB,GAAiCH,MAAjC,GAA0CC,cAA/D;AAAA,KAA/C,CAAd;;AAEA,QAAI,CAACY,KAAL,EAAY;AACV,aAAOb,MAAP;AACD;;AAED,WAAOa,KAAK,CAACJ,UAAN,GAAmBZ,MAAM,CAACK,OAAP,CAAeC,WAAzC;AACD;;AAED,SACE,wCACMV,SADN;AAEE,IAAA,SAAS,EAAEV,UAAU,CACnBC,YAAY,CAAC,YAAD,EAAeU,QAAf,CADO,wBAEJH,IAFI,+BAGEC,KAHF;AAFvB,MAQE,oBAAC,gBAAD;AAAkB,IAAA,eAAe,EAAEO,eAAnC;AAAoD,IAAA,gBAAgB,EAAEgB,gBAAtE;AAAwF,IAAA,UAAU,EAAE;AAApG,KACE;AAAK,IAAA,SAAS,EAAC,gBAAf;AAAgC,IAAA,GAAG,EAAEpB;AAArC,KACE;AAAM,IAAA,SAAS,EAAC,iBAAhB;AAAkC,IAAA,GAAG,EAAEE;AAAvC,IADF,EAEGP,QAFH,EAGE;AAAM,IAAA,SAAS,EAAC;AAAhB,IAHF,CADF,CARF,CADF;AAkBD,CA9DD;;AAgEAD,UAAU,CAAC4B,YAAX,GAA0B;AACxB1B,EAAAA,IAAI,EAAE;AADkB,CAA1B;AAIA,eAAeJ,cAAc,CAACE,UAAD,EAAa;AAAEG,EAAAA,KAAK,EAAE;AAAT,CAAb,CAA7B","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport HorizontalScroll from '../HorizontalScroll/HorizontalScroll';\nimport { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport './CardScroll.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps {\n size?: 's' | 'm' | 'l';\n}\n\nconst CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restProps }: CardScrollProps) => {\n const platform = usePlatform();\n\n const refContainer = React.useRef<HTMLDivElement>(null);\n const gapRef = React.useRef<HTMLDivElement>(null);\n\n const { window } = useDOM();\n\n function getScrollToLeft(offset: number): number {\n const containerWidth = refContainer.current.offsetWidth;\n const slideIndex = Array\n .from(refContainer.current.children)\n .findIndex((el: HTMLElement) => el.offsetLeft + el.offsetWidth + parseInt(window.getComputedStyle(el).marginRight) - offset >= 0);\n\n if (slideIndex === -1) {\n return offset;\n }\n\n if (slideIndex === 0) {\n return 0;\n }\n\n const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n const scrollTo = slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n return 0;\n }\n\n return scrollTo;\n }\n\n function getScrollToRight(offset: number): number {\n const containerWidth = refContainer.current.offsetWidth;\n const slide = Array.from(refContainer.current.children).find((el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth) as HTMLElement;\n\n if (!slide) {\n return offset;\n }\n\n return slide.offsetLeft - gapRef.current.offsetWidth;\n }\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n getClassName('CardScroll', platform),\n `CardScroll--${size}`,\n `CardScroll--sizeX-${sizeX}`,\n )}\n >\n <HorizontalScroll getScrollToLeft={getScrollToLeft} getScrollToRight={getScrollToRight} showArrows={true}>\n <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n {children}\n <span vkuiClass=\"CardScroll__gap\" />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n\nCardScroll.defaultProps = {\n size: 's',\n};\n\nexport default withAdaptivity(CardScroll, { sizeX: true });\n"],"file":"CardScroll.js"}
1
+ {"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":["React","classNames","getClassName","usePlatform","HorizontalScroll","withAdaptivity","useDOM","CardScroll","children","size","sizeX","restProps","platform","refContainer","useRef","gapRef","window","getScrollToLeft","offset","containerWidth","current","offsetWidth","slideIndex","Array","from","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","prototype","find","call","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport HorizontalScroll from '../HorizontalScroll/HorizontalScroll';\nimport { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport './CardScroll.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps {\n size?: 's' | 'm' | 'l';\n}\n\nconst CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restProps }: CardScrollProps) => {\n const platform = usePlatform();\n\n const refContainer = React.useRef<HTMLDivElement>(null);\n const gapRef = React.useRef<HTMLDivElement>(null);\n\n const { window } = useDOM();\n\n function getScrollToLeft(offset: number): number {\n const containerWidth = refContainer.current.offsetWidth;\n const slideIndex = Array\n .from(refContainer.current.children)\n .findIndex((el: HTMLElement) => el.offsetLeft + el.offsetWidth + parseInt(window.getComputedStyle(el).marginRight) - offset >= 0);\n\n if (slideIndex === -1) {\n return offset;\n }\n\n if (slideIndex === 0) {\n return 0;\n }\n\n const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n const scrollTo = slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n return 0;\n }\n\n return scrollTo;\n }\n\n function getScrollToRight(offset: number): number {\n const containerWidth = refContainer.current.offsetWidth;\n const slide = Array.prototype.find.call(\n refContainer.current.children,\n (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n ) as HTMLElement;\n\n if (!slide) {\n return offset;\n }\n\n return slide.offsetLeft - gapRef.current.offsetWidth;\n }\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n getClassName('CardScroll', platform),\n `CardScroll--${size}`,\n `CardScroll--sizeX-${sizeX}`,\n )}\n >\n <HorizontalScroll getScrollToLeft={getScrollToLeft} getScrollToRight={getScrollToRight} showArrows={true}>\n <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n {children}\n <span vkuiClass=\"CardScroll__gap\" />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n\nCardScroll.defaultProps = {\n size: 's',\n};\n\nexport default withAdaptivity(CardScroll, { sizeX: true });\n"],"file":"CardScroll.js"}
@@ -1 +1 @@
1
- .vkuiCell{position:relative;margin:0;padding:0}.vkuiFormItem .vkuiCell{width:100%;box-sizing:content-box;margin:0 calc(-1*16px);margin:0 calc(-1*var(--formitem_padding))}.vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging){transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.vkuiList--dragging .vkuiCell--dragging,.vkuiCell--dragging{background-color:#fff;background-color:var(--background_content);box-shadow:0 0 5px rgba(0,0,0,.25);z-index:3}.vkuiCell__dragger{position:relative}.vkuiCell .vkuiCell__dragger .vkuiIcon{color:#99a2ad;color:var(--icon_secondary)}.vkuiCell__checkbox{display:none}.vkuiCell--selectable .vkuiCell__marker{position:relative;flex-shrink:0;width:24px;height:24px;margin-right:16px;padding:0;color:#b8c1cc;color:var(--icon_tertiary)}.vkuiCell--selectable .vkuiCell__marker-in--checked{position:absolute;top:0;left:0;visibility:hidden;color:#2688eb;color:var(--accent)}.vkuiCell--selectable.vkuiCell--disabled{opacity:.6}.vkuiCell--selectable .vkuiCell__checkbox:checked~.vkuiCell__marker .vkuiCell__marker-in--checked{visibility:initial}.vkuiCell--ios .vkuiCell__in{transition:-webkit-transform .6s cubic-bezier(.36,.66,.04,1);transition:transform .6s cubic-bezier(.36,.66,.04,1);transition:transform .6s cubic-bezier(.36,.66,.04,1),-webkit-transform .6s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .6s var(--ios-easing);transition:transform .6s var(--ios-easing);transition:transform .6s var(--ios-easing),-webkit-transform .6s var(--ios-easing)}.vkuiCell--ios.vkuiCell--selectable .vkuiCell__marker{margin-right:12px}.vkuiCell--android .vkuiCell__dragger,.vkuiCell--vkcom .vkuiCell__dragger{padding-right:16px}
1
+ .vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging){transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;pointer-events:none}.vkuiCell--dragging{background-color:#fff;background-color:var(--background_content);box-shadow:0 0 5px rgba(0,0,0,.25);z-index:3}.vkuiCell--selectable.vkuiCell--disabled{opacity:.6}.vkuiCell__checkbox,.vkuiCell__dragger{position:relative;flex-shrink:0;margin-right:16px}.vkuiCell__dragger{z-index:2}.vkuiCell__content{max-width:100%;min-width:0}.vkuiCell--removable .vkuiCell__content{flex-grow:1;padding-right:0;padding-left:0}.vkuiCell--ios .vkuiCell__dragger{margin-right:0;margin-left:12px}.vkuiCell--ios .vkuiCell__checkbox{margin-right:12px}.vkuiFormItem>.vkuiCell{margin:0 calc(-1*16px);margin:0 calc(-1*var(--formitem_padding))}
@@ -1,151 +1,69 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["onRemove", "removePlaceholder", "onDragFinish", "className", "style", "before", "after", "disabled", "removable", "draggable", "selectable", "Component", "onChange", "name", "checked", "defaultChecked", "getRootRef"];
3
+ var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "removable", "draggable", "selectable", "Component", "onChange", "name", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
4
+ _excluded2 = ["dragging", "rootElRef"];
5
5
  import { createScopedElement } from "../../lib/jsxRuntime";
6
6
  import * as React from 'react';
7
7
  import { classNames } from "../../lib/classNames";
8
+ import { warnOnce } from "../../lib/warnOnce";
8
9
  import { getClassName } from "../../helpers/getClassName";
9
- import { Touch } from "../Touch/Touch";
10
10
  import { ANDROID, IOS, VKCOM } from "../../lib/platform";
11
- import { Icon24Reorder, Icon24ReorderIos, Icon24CheckCircleOn, Icon24CheckCircleOff, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
12
11
  import SimpleCell from "../SimpleCell/SimpleCell";
13
12
  import { Removable } from "../Removable/Removable";
14
13
  import { usePlatform } from "../../hooks/usePlatform";
15
- import { ListContext } from "../../components/List/ListContext";
14
+ import { useDraggable } from "./useDraggable";
15
+ import { ListContext } from "../List/ListContext";
16
+ import { CellDragger } from "./CellDragger/CellDragger";
17
+ import { CellCheckbox } from "./CellCheckbox/CellCheckbox";
16
18
  import "./Cell.css";
17
- export var Cell = function Cell(props) {
18
- var _onRemove = props.onRemove,
19
- removePlaceholder = props.removePlaceholder,
20
- onDragFinish = props.onDragFinish,
21
- className = props.className,
22
- style = props.style,
23
- before = props.before,
24
- after = props.after,
25
- disabled = props.disabled,
26
- removable = props.removable,
27
- draggable = props.draggable,
28
- selectable = props.selectable,
29
- Component = props.Component,
30
- onChange = props.onChange,
31
- name = props.name,
32
- checked = props.checked,
33
- defaultChecked = props.defaultChecked,
34
- getRootRef = props.getRootRef,
35
- restProps = _objectWithoutProperties(props, _excluded);
36
-
37
- var rootElRef = React.useRef(null);
38
- var platform = usePlatform();
39
-
40
- var _React$useState = React.useState(false),
41
- _React$useState2 = _slicedToArray(_React$useState, 2),
42
- dragging = _React$useState2[0],
43
- setDragging = _React$useState2[1];
44
-
45
- var _React$useState3 = React.useState(undefined),
46
- _React$useState4 = _slicedToArray(_React$useState3, 2),
47
- siblings = _React$useState4[0],
48
- setSiblings = _React$useState4[1];
49
-
50
- var _React$useState5 = React.useState(undefined),
51
- _React$useState6 = _slicedToArray(_React$useState5, 2),
52
- dragStartIndex = _React$useState6[0],
53
- setDragStartIndex = _React$useState6[1];
54
-
55
- var _React$useState7 = React.useState(undefined),
56
- _React$useState8 = _slicedToArray(_React$useState7, 2),
57
- dragEndIndex = _React$useState8[0],
58
- setDragEndIndex = _React$useState8[1];
59
-
60
- var _React$useState9 = React.useState(0),
61
- _React$useState10 = _slicedToArray(_React$useState9, 2),
62
- dragShift = _React$useState10[0],
63
- setDragShift = _React$useState10[1];
64
-
65
- var _React$useState11 = React.useState(undefined),
66
- _React$useState12 = _slicedToArray(_React$useState11, 2),
67
- dragDirection = _React$useState12[0],
68
- setDragDirection = _React$useState12[1];
69
-
70
- var onDragStart = function onDragStart() {
71
- var rootEl = rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current;
72
- setDragging(true);
73
-
74
- var _siblings = Array.from(rootEl.parentElement.childNodes);
75
-
76
- var rootElIdx = _siblings.indexOf(rootEl);
77
-
78
- setDragStartIndex(rootElIdx);
79
- setDragEndIndex(rootElIdx);
80
- setSiblings(_siblings);
81
- setDragShift(0);
82
- };
83
-
84
- var onDragMove = function onDragMove(e) {
85
- e.originalEvent.preventDefault();
86
- var rootEl = rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current;
87
- rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
88
- setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
89
- setDragShift(e.shiftY);
90
- setDragEndIndex(dragStartIndex);
91
- siblings.forEach(function (sibling, siblingIndex) {
92
- var rootGesture = rootEl.getBoundingClientRect();
93
- var siblingGesture = sibling.getBoundingClientRect();
94
-
95
- if (dragStartIndex < siblingIndex) {
96
- if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2) {
97
- if (dragDirection === 'down') {
98
- sibling.style.transform = 'translateY(-100%)';
99
- }
100
-
101
- setDragEndIndex(function (dragEndIndex) {
102
- return dragEndIndex + 1;
103
- });
104
- }
105
-
106
- if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2 && dragDirection === 'up') {
107
- sibling.style.transform = 'translateY(0)';
108
- }
109
- } else if (dragStartIndex > siblingIndex) {
110
- if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2) {
111
- if (dragDirection === 'up') {
112
- sibling.style.transform = 'translateY(100%)';
113
- }
114
-
115
- setDragEndIndex(function (dragEndIndex) {
116
- return dragEndIndex - 1;
117
- });
118
- }
19
+ var warn = warnOnce('Cell');
20
+ export var Cell = function Cell(_ref) {
21
+ var propsMode = _ref.mode,
22
+ _onRemove = _ref.onRemove,
23
+ _ref$removePlaceholde = _ref.removePlaceholder,
24
+ removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
25
+ onDragFinish = _ref.onDragFinish,
26
+ before = _ref.before,
27
+ after = _ref.after,
28
+ disabled = _ref.disabled,
29
+ deprecatedRemovable = _ref.removable,
30
+ draggable = _ref.draggable,
31
+ deprecatedSelectable = _ref.selectable,
32
+ Component = _ref.Component,
33
+ onChange = _ref.onChange,
34
+ name = _ref.name,
35
+ checked = _ref.checked,
36
+ defaultChecked = _ref.defaultChecked,
37
+ getRootRef = _ref.getRootRef,
38
+ _ref$draggerLabel = _ref.draggerLabel,
39
+ draggerLabel = _ref$draggerLabel === void 0 ? 'Перенести ячейку' : _ref$draggerLabel,
40
+ className = _ref.className,
41
+ style = _ref.style,
42
+ restProps = _objectWithoutProperties(_ref, _excluded);
43
+
44
+ // TODO: удалить перед 5.0.0
45
+ var mode = propsMode;
46
+
47
+ if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {
48
+ mode = deprecatedSelectable ? 'selectable' : 'removable';
49
+
50
+ if (process.env.NODE_ENV === 'development') {
51
+ deprecatedSelectable && warn('Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".');
52
+ deprecatedRemovable && warn('Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".');
53
+ }
54
+ } // /end TODO
119
55
 
120
- if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2 && dragDirection === 'down') {
121
- sibling.style.transform = 'translateY(0)';
122
- }
123
- }
124
- });
125
- };
126
56
 
127
- var onDragEnd = function onDragEnd() {
128
- var from = dragStartIndex,
129
- to = dragEndIndex;
130
- siblings.forEach(function (sibling) {
131
- sibling.style.transform = null;
132
- });
133
- setSiblings(undefined);
134
- setDragEndIndex(undefined);
135
- setDragStartIndex(undefined);
136
- setDragDirection(undefined);
137
- setDragShift(undefined);
138
- setDragging(false);
139
- props.onDragFinish && props.onDragFinish({
140
- from: from,
141
- to: to
142
- });
143
- };
57
+ var selectable = mode === 'selectable';
58
+ var removable = mode === 'removable';
59
+ var platform = usePlatform();
144
60
 
145
- var onDragClick = function onDragClick(e) {
146
- e.nativeEvent.stopPropagation();
147
- e.preventDefault();
148
- };
61
+ var _useDraggable = useDraggable({
62
+ onDragFinish: onDragFinish
63
+ }),
64
+ dragging = _useDraggable.dragging,
65
+ rootElRef = _useDraggable.rootElRef,
66
+ draggableProps = _objectWithoutProperties(_useDraggable, _excluded2);
149
67
 
150
68
  var _React$useContext = React.useContext(ListContext),
151
69
  toggleDrag = _React$useContext.toggleDrag;
@@ -160,59 +78,67 @@ export var Cell = function Cell(props) {
160
78
 
161
79
  return undefined;
162
80
  }, [dragging]);
163
- var IconOff = platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
164
- var IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
165
- var simpleCell = createScopedElement(SimpleCell, _extends({}, restProps, {
166
- disabled: draggable || removable || disabled,
167
- Component: selectable ? 'label' : Component,
168
- htmlFor: selectable ? name : undefined,
169
- before: createScopedElement(React.Fragment, null, (platform === ANDROID || platform === VKCOM) && draggable && createScopedElement(Touch, {
81
+ var dragger;
82
+
83
+ if (draggable) {
84
+ dragger = createScopedElement(CellDragger, _extends({
170
85
  vkuiClass: "Cell__dragger",
171
- onStart: onDragStart,
172
- onMoveY: onDragMove,
173
- onEnd: onDragEnd,
174
- onClick: onDragClick
175
- }, createScopedElement(Icon24Reorder, null)), selectable && createScopedElement(React.Fragment, null, createScopedElement("input", {
176
- type: "checkbox",
177
- vkuiClass: "Cell__checkbox",
86
+ "aria-label": draggerLabel
87
+ }, draggableProps));
88
+ }
89
+
90
+ var checkbox;
91
+
92
+ if (selectable) {
93
+ var checkboxProps = {
178
94
  name: name,
179
95
  onChange: onChange,
180
96
  defaultChecked: defaultChecked,
181
97
  checked: checked,
182
98
  disabled: disabled
183
- }), createScopedElement("span", {
184
- vkuiClass: "Cell__marker"
185
- }, createScopedElement(IconOff, {
186
- vkuiClass: "Cell__marker-in"
187
- }), createScopedElement(IconOn, {
188
- vkuiClass: "Cell__marker-in Cell__marker-in--checked"
189
- }))), before),
190
- after: createScopedElement(React.Fragment, null, platform === IOS && draggable && createScopedElement(Touch, {
191
- vkuiClass: "Cell__dragger",
192
- onStart: onDragStart,
193
- onMoveY: onDragMove,
194
- onEnd: onDragEnd,
195
- onClick: onDragClick
196
- }, createScopedElement(Icon24ReorderIos, null)), after)
99
+ };
100
+ checkbox = createScopedElement(CellCheckbox, _extends({
101
+ vkuiClass: "Cell__checkbox"
102
+ }, checkboxProps));
103
+ }
104
+
105
+ var simpleCellDisabled = draggable && !selectable || removable || disabled;
106
+ var hasActive = !simpleCellDisabled && !dragging;
107
+ var cellClasses = classNames(getClassName('Cell', platform), {
108
+ 'Cell--dragging': dragging,
109
+ 'Cell--removable': removable,
110
+ 'Cell--selectable': selectable,
111
+ 'Cell--disabled': disabled
112
+ });
113
+ var simpleCell = createScopedElement(SimpleCell, _extends({
114
+ hasActive: hasActive,
115
+ hasHover: hasActive
116
+ }, restProps, {
117
+ vkuiClass: "Cell__content",
118
+ disabled: simpleCellDisabled,
119
+ Component: selectable ? 'label' : Component,
120
+ before: createScopedElement(React.Fragment, null, draggable && (platform === ANDROID || platform === VKCOM) && dragger, selectable && checkbox, before),
121
+ after: createScopedElement(React.Fragment, null, draggable && platform === IOS && dragger, after)
197
122
  }));
123
+
124
+ if (removable) {
125
+ return createScopedElement(Removable, {
126
+ vkuiClass: cellClasses,
127
+ className: className,
128
+ style: style,
129
+ getRootRef: rootElRef,
130
+ removePlaceholder: removePlaceholder,
131
+ onRemove: function onRemove(e) {
132
+ return _onRemove(e, rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current);
133
+ }
134
+ }, simpleCell);
135
+ }
136
+
198
137
  return createScopedElement("div", {
199
- vkuiClass: classNames(getClassName('Cell', platform), {
200
- 'Cell--dragging': dragging,
201
- 'Cell--removable': removable,
202
- 'Cell--selectable': selectable,
203
- 'Cell--disabled': disabled
204
- }),
138
+ vkuiClass: cellClasses,
205
139
  className: className,
206
140
  style: style,
207
141
  ref: rootElRef
208
- }, removable ? createScopedElement(Removable, {
209
- removePlaceholder: removePlaceholder,
210
- onRemove: function onRemove(e) {
211
- return _onRemove(e, rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current);
212
- }
213
- }, simpleCell) : simpleCell);
214
- };
215
- Cell.defaultProps = {
216
- removePlaceholder: 'Удалить'
142
+ }, simpleCell);
217
143
  };
218
144
  //# sourceMappingURL=Cell.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"names":["React","classNames","getClassName","Touch","ANDROID","IOS","VKCOM","Icon24Reorder","Icon24ReorderIos","Icon24CheckCircleOn","Icon24CheckCircleOff","Icon24CheckBoxOff","Icon24CheckBoxOn","SimpleCell","Removable","usePlatform","ListContext","Cell","props","onRemove","removePlaceholder","onDragFinish","className","style","before","after","disabled","removable","draggable","selectable","Component","onChange","name","checked","defaultChecked","getRootRef","restProps","rootElRef","useRef","platform","useState","dragging","setDragging","undefined","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","Array","from","parentElement","childNodes","rootElIdx","indexOf","onDragMove","e","originalEvent","preventDefault","transform","shiftY","forEach","sibling","siblingIndex","rootGesture","getBoundingClientRect","siblingGesture","bottom","top","height","onDragEnd","to","onDragClick","nativeEvent","stopPropagation","useContext","toggleDrag","useEffect","IconOff","IconOn","simpleCell","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Reorder, Icon24ReorderIos, Icon24CheckCircleOn, Icon24CheckCircleOff, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';\nimport SimpleCell, { SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { HasPlatform } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ListContext } from '../../components/List/ListContext';\nimport './Cell.css';\n\nexport interface CellProps extends SimpleCellProps, HasPlatform, RemovableProps {\n /**\n * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n */\n draggable?: boolean;\n removable?: boolean;\n /**\n * Имя для input в режиме selectable\n */\n name?: string;\n selectable?: boolean;\n /**\n * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n */\n checked?: boolean;\n /**\n * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n */\n defaultChecked?: boolean;\n /**\n * Коллбэк срабатывает при завершении перетаскивания.\n * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n */\n onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n}\n\nexport const Cell: React.FC<CellProps> = (props: CellProps) => {\n const {\n onRemove,\n removePlaceholder,\n onDragFinish,\n className,\n style,\n before,\n after,\n disabled,\n removable,\n draggable,\n selectable,\n Component,\n onChange,\n name,\n checked,\n defaultChecked,\n getRootRef,\n ...restProps\n } = props;\n const rootElRef = React.useRef(null);\n const platform = usePlatform();\n\n const [dragging, setDragging] = React.useState<boolean>(false);\n\n const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);\n const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);\n const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);\n const [dragShift, setDragShift] = React.useState<number>(0);\n const [dragDirection, setDragDirection] = React.useState<'down' | 'up'>(undefined);\n\n const onDragStart = () => {\n const rootEl = rootElRef?.current;\n\n setDragging(true);\n\n const _siblings: HTMLElement[] = Array.from(rootEl.parentElement.childNodes);\n const rootElIdx = _siblings.indexOf(rootEl);\n\n setDragStartIndex(rootElIdx);\n setDragEndIndex(rootElIdx);\n setSiblings(_siblings);\n setDragShift(0);\n };\n\n const onDragMove = (e: TouchEvent) => {\n e.originalEvent.preventDefault();\n\n const rootEl = rootElRef?.current;\n\n rootEl.style.transform = `translateY(${e.shiftY}px)`;\n setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n setDragShift(e.shiftY);\n setDragEndIndex(dragStartIndex);\n\n siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n const rootGesture = rootEl.getBoundingClientRect();\n\n const siblingGesture = sibling.getBoundingClientRect();\n\n if (dragStartIndex < siblingIndex) {\n if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2) {\n if (dragDirection === 'down') {\n sibling.style.transform = 'translateY(-100%)';\n }\n\n setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n }\n if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2 && dragDirection === 'up') {\n sibling.style.transform = 'translateY(0)';\n }\n } else if (dragStartIndex > siblingIndex) {\n if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2) {\n if (dragDirection === 'up') {\n sibling.style.transform = 'translateY(100%)';\n }\n\n setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n }\n if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2 && dragDirection === 'down') {\n sibling.style.transform = 'translateY(0)';\n }\n }\n });\n };\n\n const onDragEnd = () => {\n const [from, to] = [dragStartIndex, dragEndIndex];\n\n siblings.forEach((sibling: HTMLElement) => {\n sibling.style.transform = null;\n });\n\n setSiblings(undefined);\n setDragEndIndex(undefined);\n setDragStartIndex(undefined);\n setDragDirection(undefined);\n setDragShift(undefined);\n\n setDragging(false);\n\n props.onDragFinish && props.onDragFinish({ from, to });\n };\n\n const onDragClick = (e: React.MouseEvent) => {\n e.nativeEvent.stopPropagation();\n e.preventDefault();\n };\n\n const { toggleDrag } = React.useContext(ListContext);\n React.useEffect(() => {\n if (dragging) {\n toggleDrag(true);\n return () => toggleDrag(false);\n }\n return undefined;\n }, [dragging]);\n\n const IconOff = platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;\n const IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;\n\n const simpleCell = (\n <SimpleCell\n {...restProps}\n disabled={draggable || removable || disabled}\n Component={selectable ? 'label' : Component}\n htmlFor={selectable ? name : undefined}\n before={\n <React.Fragment>\n {(platform === ANDROID || platform === VKCOM) && draggable && (\n <Touch\n vkuiClass=\"Cell__dragger\"\n onStart={onDragStart}\n onMoveY={onDragMove}\n onEnd={onDragEnd}\n onClick={onDragClick}\n ><Icon24Reorder /></Touch>\n )}\n {selectable && (\n <React.Fragment>\n <input\n type=\"checkbox\"\n vkuiClass=\"Cell__checkbox\"\n name={name}\n onChange={onChange}\n defaultChecked={defaultChecked}\n checked={checked}\n disabled={disabled}\n />\n <span vkuiClass=\"Cell__marker\">\n <IconOff vkuiClass=\"Cell__marker-in\" />\n <IconOn vkuiClass=\"Cell__marker-in Cell__marker-in--checked\" />\n </span>\n </React.Fragment>\n )}\n {before}\n </React.Fragment>\n }\n after={\n <React.Fragment>\n {platform === IOS && draggable && (\n <Touch\n vkuiClass=\"Cell__dragger\"\n onStart={onDragStart}\n onMoveY={onDragMove}\n onEnd={onDragEnd}\n onClick={onDragClick}\n ><Icon24ReorderIos /></Touch>\n )}\n {after}\n </React.Fragment>\n }\n />\n );\n\n return (\n <div\n vkuiClass={classNames(getClassName('Cell', platform), {\n 'Cell--dragging': dragging,\n 'Cell--removable': removable,\n 'Cell--selectable': selectable,\n 'Cell--disabled': disabled,\n })}\n className={className}\n style={style}\n ref={rootElRef}\n >\n {removable\n ? <Removable removePlaceholder={removePlaceholder} onRemove={(e) => onRemove(e, rootElRef?.current)}>{simpleCell}</Removable>\n : simpleCell\n }\n </div>\n );\n};\n\nCell.defaultProps = {\n removePlaceholder: 'Удалить',\n};\n"],"file":"Cell.js"}
1
+ {"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"names":["React","classNames","warnOnce","getClassName","ANDROID","IOS","VKCOM","SimpleCell","Removable","usePlatform","useDraggable","ListContext","CellDragger","CellCheckbox","warn","Cell","propsMode","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","deprecatedRemovable","removable","draggable","deprecatedSelectable","selectable","Component","onChange","name","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","process","env","NODE_ENV","platform","dragging","rootElRef","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","simpleCell","e","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { getClassName } from '../../helpers/getClassName';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport SimpleCell, { SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { HasPlatform } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDraggable } from './useDraggable';\nimport { ListContext } from '../List/ListContext';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport './Cell.css';\n\nexport interface CellProps extends SimpleCellProps, HasPlatform, RemovableProps {\n mode?: 'removable' | 'selectable';\n /**\n * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n */\n draggable?: boolean;\n /**\n * @deprecated Будет удалено в 5.0.0. Используйте mode=\"removable\"\n */\n removable?: boolean;\n /**\n * Имя для input в режиме selectable\n */\n name?: string;\n /**\n * @deprecated Будет удалено в 5.0.0. Используйте mode=\"selectable\"\n */\n selectable?: boolean;\n /**\n * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n */\n checked?: boolean;\n /**\n * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n */\n defaultChecked?: boolean;\n /**\n * Коллбэк срабатывает при завершении перетаскивания.\n * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n */\n onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n /**\n * aria-label для кнопки перетаскивания ячейки\n */\n draggerLabel?: string;\n}\n\nconst warn = warnOnce('Cell');\nexport const Cell: React.FC<CellProps> = ({\n mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0\n onRemove,\n removePlaceholder = 'Удалить',\n onDragFinish,\n before,\n after,\n disabled,\n removable: deprecatedRemovable, // TODO: удалить перед 5.0.0\n draggable,\n selectable: deprecatedSelectable, // TODO: удалить перед 5.0.0\n Component,\n onChange,\n name,\n checked,\n defaultChecked,\n getRootRef,\n draggerLabel = 'Перенести ячейку',\n className,\n style,\n ...restProps\n}: CellProps) => {\n // TODO: удалить перед 5.0.0\n let mode: CellProps['mode'] = propsMode;\n\n if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {\n mode = deprecatedSelectable\n ? 'selectable'\n : 'removable';\n\n if (process.env.NODE_ENV === 'development') {\n deprecatedSelectable && warn('Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode=\"selectable\".');\n deprecatedRemovable && warn('Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode=\"removable\".');\n }\n }\n // /end TODO\n\n const selectable = mode === 'selectable';\n const removable = mode === 'removable';\n\n const platform = usePlatform();\n\n const { dragging, rootElRef, ...draggableProps } = useDraggable({ onDragFinish });\n\n const { toggleDrag } = React.useContext(ListContext);\n React.useEffect(() => {\n if (dragging) {\n toggleDrag(true);\n return () => toggleDrag(false);\n }\n return undefined;\n }, [dragging]);\n\n let dragger;\n if (draggable) {\n dragger = <CellDragger vkuiClass=\"Cell__dragger\" aria-label={draggerLabel} {...draggableProps} />;\n }\n\n let checkbox;\n if (selectable) {\n const checkboxProps: CellCheckboxProps = { name, onChange, defaultChecked, checked, disabled };\n checkbox = <CellCheckbox vkuiClass=\"Cell__checkbox\" {...checkboxProps} />;\n }\n\n const simpleCellDisabled = draggable && !selectable || removable || disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(getClassName('Cell', platform), {\n 'Cell--dragging': dragging,\n 'Cell--removable': removable,\n 'Cell--selectable': selectable,\n 'Cell--disabled': disabled,\n });\n\n const simpleCell = (\n <SimpleCell\n hasActive={hasActive}\n hasHover={hasActive}\n {...restProps}\n vkuiClass=\"Cell__content\"\n disabled={simpleCellDisabled}\n Component={selectable ? 'label' : Component}\n before={\n <React.Fragment>\n {draggable && (platform === ANDROID || platform === VKCOM) && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n }\n after={\n <React.Fragment>\n {draggable && platform === IOS && dragger}\n {after}\n </React.Fragment>\n }\n />\n );\n\n if (removable) {\n return (\n <Removable\n vkuiClass={cellClasses}\n className={className}\n style={style}\n getRootRef={rootElRef}\n removePlaceholder={removePlaceholder}\n onRemove={(e) => onRemove(e, rootElRef?.current)}\n >\n {simpleCell}\n </Removable>\n );\n }\n\n return (\n <div\n vkuiClass={cellClasses}\n className={className}\n style={style}\n ref={rootElRef}\n >\n {simpleCell}\n </div>\n );\n};\n"],"file":"Cell.js"}
@@ -0,0 +1 @@
1
+ .vkuiCellCheckbox__icon{color:#b8c1cc;color:var(--icon_tertiary)}.vkuiCellCheckbox__input,.vkuiCellCheckbox__icon{display:none}.vkuiCellCheckbox__icon--on{color:#2688eb;color:var(--accent)}.vkuiCellCheckbox__input:not(:checked)~.vkuiCellCheckbox__icon--off,.vkuiCellCheckbox__input:checked~.vkuiCellCheckbox__icon--on{display:block}
@@ -0,0 +1,32 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["className", "style"];
4
+ import { createScopedElement } from "../../../lib/jsxRuntime";
5
+ import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
6
+ import { getClassName } from "../../../helpers/getClassName";
7
+ import { usePlatform } from "../../../hooks/usePlatform";
8
+ import { classNames } from "../../../lib/classNames";
9
+ import { ANDROID } from "../../../lib/platform";
10
+ import "./CellCheckbox.css";
11
+ export var CellCheckbox = function CellCheckbox(_ref) {
12
+ var className = _ref.className,
13
+ style = _ref.style,
14
+ restProps = _objectWithoutProperties(_ref, _excluded);
15
+
16
+ var platform = usePlatform();
17
+ var IconOff = platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
18
+ var IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
19
+ return createScopedElement("div", {
20
+ vkuiClass: classNames(getClassName('CellCheckbox', platform)),
21
+ className: className,
22
+ style: style
23
+ }, createScopedElement("input", _extends({
24
+ vkuiClass: "CellCheckbox__input",
25
+ type: "checkbox"
26
+ }, restProps)), createScopedElement(IconOff, {
27
+ vkuiClass: "CellCheckbox__icon CellCheckbox__icon--off"
28
+ }), createScopedElement(IconOn, {
29
+ vkuiClass: "CellCheckbox__icon CellCheckbox__icon--on"
30
+ }));
31
+ };
32
+ //# sourceMappingURL=CellCheckbox.js.map