@prom-ui/core 0.0.22 → 0.0.30

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 (231) hide show
  1. package/Body/cjs/index.development.js +14 -0
  2. package/Body/cjs/index.production.js +1 -0
  3. package/Body/cjs/style.development.css +1 -0
  4. package/Body/cjs/style.production.css +1 -0
  5. package/Body/index.js +5 -12
  6. package/Body/package.json +1 -1
  7. package/Box/cjs/index.development.js +20 -0
  8. package/Box/cjs/index.production.js +1 -0
  9. package/Box/cjs/style.development.css +1 -0
  10. package/Box/cjs/style.production.css +1 -0
  11. package/Box/index.js +5 -18
  12. package/Box/package.json +1 -1
  13. package/Button/cjs/index.development.js +95 -0
  14. package/Button/cjs/index.production.js +1 -0
  15. package/Button/cjs/style.development.css +1 -0
  16. package/Button/cjs/style.production.css +1 -0
  17. package/Button/index.d.ts +5 -4
  18. package/Button/index.js +4 -81
  19. package/Button/package.json +1 -1
  20. package/ButtonPageUp/cjs/index.development.js +170 -0
  21. package/ButtonPageUp/cjs/index.production.js +1 -0
  22. package/ButtonPageUp/index.d.ts +12 -5
  23. package/ButtonPageUp/index.js +4 -169
  24. package/ButtonPageUp/package.json +1 -2
  25. package/Checkbox/cjs/index.development.js +111 -0
  26. package/Checkbox/cjs/index.production.js +1 -0
  27. package/Checkbox/cjs/style.development.css +1 -0
  28. package/Checkbox/cjs/style.production.css +1 -0
  29. package/Checkbox/index.d.ts +4 -4
  30. package/Checkbox/index.js +4 -96
  31. package/Checkbox/package.json +1 -1
  32. package/Flex/cjs/index.development.js +25 -0
  33. package/Flex/cjs/index.production.js +1 -0
  34. package/Flex/cjs/style.development.css +1 -0
  35. package/Flex/cjs/style.production.css +1 -0
  36. package/Flex/index.js +5 -23
  37. package/Flex/package.json +1 -1
  38. package/Grid/cjs/index.development.js +25 -0
  39. package/Grid/cjs/index.production.js +1 -0
  40. package/Grid/cjs/style.development.css +1 -0
  41. package/Grid/cjs/style.production.css +1 -0
  42. package/Grid/index.js +5 -23
  43. package/Grid/package.json +1 -1
  44. package/Icon/cjs/index.development.js +41 -0
  45. package/Icon/cjs/index.production.js +1 -0
  46. package/Icon/cjs/style.development.css +1 -0
  47. package/Icon/cjs/style.production.css +1 -0
  48. package/Icon/index.d.ts +7 -12
  49. package/Icon/index.js +4 -76
  50. package/Icon/package.json +1 -1
  51. package/Image/cjs/index.development.js +20 -0
  52. package/Image/cjs/index.production.js +1 -0
  53. package/Image/cjs/style.development.css +1 -0
  54. package/Image/cjs/style.production.css +1 -0
  55. package/Image/index.js +5 -18
  56. package/Image/package.json +1 -1
  57. package/ImageEmoji/cjs/index.development.js +90 -0
  58. package/ImageEmoji/cjs/index.production.js +1 -0
  59. package/ImageEmoji/index.d.ts +6 -4
  60. package/ImageEmoji/index.js +4 -86
  61. package/ImageEmoji/package.json +1 -1
  62. package/Input/cjs/index.development.js +39 -0
  63. package/Input/cjs/index.production.js +1 -0
  64. package/Input/cjs/style.development.css +1 -0
  65. package/Input/cjs/style.production.css +1 -0
  66. package/Input/index.d.ts +23 -23
  67. package/Input/index.js +4 -81
  68. package/Input/package.json +1 -1
  69. package/KeyPress/cjs/index.development.js +56 -0
  70. package/KeyPress/cjs/index.production.js +1 -0
  71. package/KeyPress/index.d.ts +8 -7
  72. package/KeyPress/index.js +5 -53
  73. package/KeyPress/package.json +2 -5
  74. package/Line/cjs/index.development.js +20 -0
  75. package/Line/cjs/index.production.js +1 -0
  76. package/Line/cjs/style.development.css +1 -0
  77. package/Line/cjs/style.production.css +1 -0
  78. package/Line/index.js +5 -18
  79. package/Line/package.json +1 -1
  80. package/Link/cjs/index.development.js +22 -0
  81. package/Link/cjs/index.production.js +1 -0
  82. package/Link/cjs/style.development.css +1 -0
  83. package/Link/cjs/style.production.css +1 -0
  84. package/Link/index.js +5 -20
  85. package/Link/package.json +1 -1
  86. package/List/cjs/index.development.js +25 -0
  87. package/List/cjs/index.production.js +1 -0
  88. package/List/cjs/style.development.css +1 -0
  89. package/List/cjs/style.production.css +1 -0
  90. package/List/index.js +5 -23
  91. package/List/package.json +1 -1
  92. package/Media/breakpoints.d.ts +17 -0
  93. package/Media/cjs/index.development.js +60 -0
  94. package/Media/cjs/index.production.js +1 -0
  95. package/Media/index.d.ts +11 -0
  96. package/Media/index.js +7 -0
  97. package/{Tooltip → Media}/package.json +3 -3
  98. package/Media/useMedia.d.ts +7 -0
  99. package/{Tooltip/Trigger/index.js → OutsideClick/cjs/index.development.js} +32 -24
  100. package/OutsideClick/cjs/index.production.js +1 -0
  101. package/OutsideClick/index.d.ts +6 -3
  102. package/OutsideClick/index.js +4 -74
  103. package/OutsideClick/package.json +2 -5
  104. package/Picture/cjs/index.development.js +25 -0
  105. package/Picture/cjs/index.production.js +1 -0
  106. package/Picture/cjs/style.development.css +1 -0
  107. package/Picture/cjs/style.production.css +1 -0
  108. package/Picture/index.js +5 -23
  109. package/Picture/package.json +1 -1
  110. package/PortableOverlay/cjs/index.development.js +111 -0
  111. package/PortableOverlay/cjs/index.production.js +1 -0
  112. package/PortableOverlay/cjs/style.development.css +1 -0
  113. package/PortableOverlay/cjs/style.production.css +1 -0
  114. package/PortableOverlay/index.d.ts +6 -4
  115. package/PortableOverlay/index.js +5 -112
  116. package/PortableOverlay/package.json +1 -2
  117. package/Portal/cjs/index.development.js +57 -0
  118. package/Portal/cjs/index.production.js +1 -0
  119. package/Portal/index.d.ts +6 -4
  120. package/Portal/index.js +5 -52
  121. package/Portal/package.json +2 -5
  122. package/Rating/cjs/index.development.js +105 -0
  123. package/Rating/cjs/index.production.js +1 -0
  124. package/Rating/cjs/style.development.css +1 -0
  125. package/Rating/cjs/style.production.css +1 -0
  126. package/Rating/index.d.ts +6 -5
  127. package/Rating/index.js +4 -98
  128. package/Rating/package.json +1 -1
  129. package/SafeQuery/cjs/index.development.js +181 -0
  130. package/SafeQuery/cjs/index.production.js +1 -0
  131. package/SafeQuery/cjs/style.development.css +1 -0
  132. package/SafeQuery/cjs/style.production.css +1 -0
  133. package/SafeQuery/components/Error.d.ts +7 -0
  134. package/SafeQuery/index.d.ts +10 -0
  135. package/SafeQuery/index.js +7 -0
  136. package/SafeQuery/package.json +12 -0
  137. package/Scroll/cjs/index.development.js +40 -0
  138. package/Scroll/cjs/index.production.js +1 -0
  139. package/Scroll/cjs/style.development.css +1 -0
  140. package/Scroll/cjs/style.production.css +1 -0
  141. package/Scroll/index.d.ts +18 -16
  142. package/Scroll/index.js +4 -76
  143. package/Scroll/package.json +1 -1
  144. package/ScrollControls/cjs/index.development.js +243 -0
  145. package/ScrollControls/cjs/index.production.js +1 -0
  146. package/ScrollControls/cjs/style.development.css +1 -0
  147. package/ScrollControls/cjs/style.production.css +1 -0
  148. package/ScrollControls/index.d.ts +16 -6
  149. package/ScrollControls/index.js +4 -244
  150. package/ScrollControls/package.json +1 -2
  151. package/SideOverlay/cjs/index.development.js +210 -0
  152. package/SideOverlay/cjs/index.production.js +1 -0
  153. package/SideOverlay/cjs/style.development.css +1 -0
  154. package/SideOverlay/cjs/style.production.css +1 -0
  155. package/SideOverlay/index.d.ts +28 -13
  156. package/SideOverlay/index.js +4 -251
  157. package/SideOverlay/package.json +1 -1
  158. package/SimpleSlider/cjs/index.development.js +433 -0
  159. package/SimpleSlider/cjs/index.production.js +1 -0
  160. package/SimpleSlider/cjs/style.development.css +1 -0
  161. package/SimpleSlider/cjs/style.production.css +1 -0
  162. package/SimpleSlider/index.d.ts +17 -3
  163. package/SimpleSlider/index.js +4 -477
  164. package/SimpleSlider/package.json +1 -1
  165. package/Skeleton/cjs/index.development.js +103 -0
  166. package/Skeleton/cjs/index.production.js +1 -0
  167. package/Skeleton/cjs/style.development.css +1 -0
  168. package/Skeleton/cjs/style.production.css +1 -0
  169. package/Skeleton/index.d.ts +9 -5
  170. package/Skeleton/index.js +4 -110
  171. package/Skeleton/package.json +1 -1
  172. package/Spinner/cjs/index.development.js +85 -0
  173. package/Spinner/cjs/index.production.js +1 -0
  174. package/Spinner/cjs/style.development.css +1 -0
  175. package/Spinner/cjs/style.production.css +1 -0
  176. package/Spinner/index.d.ts +7 -6
  177. package/Spinner/index.js +5 -76
  178. package/Spinner/package.json +1 -1
  179. package/Text/cjs/index.development.js +20 -0
  180. package/Text/cjs/index.production.js +1 -0
  181. package/Text/cjs/style.development.css +1 -0
  182. package/Text/cjs/style.production.css +1 -0
  183. package/Text/index.js +5 -18
  184. package/Text/package.json +1 -1
  185. package/TextEmoji/cjs/index.development.js +94 -0
  186. package/TextEmoji/cjs/index.production.js +1 -0
  187. package/TextEmoji/index.d.ts +4 -4
  188. package/TextEmoji/index.js +4 -84
  189. package/TextEmoji/package.json +1 -1
  190. package/Tumbler/cjs/index.development.js +110 -0
  191. package/Tumbler/cjs/index.production.js +1 -0
  192. package/Tumbler/cjs/style.development.css +1 -0
  193. package/Tumbler/cjs/style.production.css +1 -0
  194. package/Tumbler/index.d.ts +4 -4
  195. package/Tumbler/index.js +4 -95
  196. package/Tumbler/package.json +1 -1
  197. package/package.json +15 -9
  198. package/Body/style.css +0 -741
  199. package/Box/style.css +0 -9676
  200. package/Button/style.css +0 -3393
  201. package/Checkbox/style.css +0 -133
  202. package/Flex/style.css +0 -786
  203. package/Grid/style.css +0 -7350
  204. package/Icon/style.css +0 -46
  205. package/Image/style.css +0 -664
  206. package/Input/style.css +0 -345
  207. package/Line/style.css +0 -138
  208. package/Link/style.css +0 -259
  209. package/List/style.css +0 -312
  210. package/Picture/style.css +0 -1426
  211. package/PortableOverlay/style.css +0 -44
  212. package/Rating/style.css +0 -26
  213. package/Scroll/style.css +0 -169
  214. package/ScrollControls/style.css +0 -67
  215. package/SideOverlay/style.css +0 -208
  216. package/SimpleSlider/style.css +0 -134
  217. package/Skeleton/style.css +0 -145
  218. package/Spinner/style.css +0 -80
  219. package/Text/style.css +0 -840
  220. package/Tooltip/Popper/index.d.ts +0 -12
  221. package/Tooltip/Popper/index.js +0 -88
  222. package/Tooltip/Popper/package.json +0 -9
  223. package/Tooltip/Popper/style.css +0 -133
  224. package/Tooltip/Trigger/index.d.ts +0 -5
  225. package/Tooltip/Trigger/package.json +0 -9
  226. package/Tooltip/Trigger/style.css +0 -36
  227. package/Tooltip/index.d.ts +0 -24
  228. package/Tooltip/index.js +0 -284
  229. package/Tooltip/style.css +0 -170
  230. package/Tooltip/utils.d.ts +0 -1
  231. package/Tumbler/style.css +0 -118
@@ -0,0 +1,433 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var ttag = require('ttag');
7
+ var Swipe = require('react-easy-swipe');
8
+ var classNames = require('classnames');
9
+ require('intersection-observer');
10
+ var Button = require('@prom-ui/core/Button');
11
+
12
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
+
14
+ function _interopNamespace(e) {
15
+ if (e && e.__esModule) return e;
16
+ var n = Object.create(null);
17
+ if (e) {
18
+ Object.keys(e).forEach(function (k) {
19
+ if (k !== 'default') {
20
+ var d = Object.getOwnPropertyDescriptor(e, k);
21
+ Object.defineProperty(n, k, d.get ? d : {
22
+ enumerable: true,
23
+ get: function () { return e[k]; }
24
+ });
25
+ }
26
+ });
27
+ }
28
+ n["default"] = e;
29
+ return Object.freeze(n);
30
+ }
31
+
32
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
+ var Swipe__default = /*#__PURE__*/_interopDefaultLegacy(Swipe);
34
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
35
+
36
+ /******************************************************************************
37
+ Copyright (c) Microsoft Corporation.
38
+
39
+ Permission to use, copy, modify, and/or distribute this software for any
40
+ purpose with or without fee is hereby granted.
41
+
42
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
43
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
44
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
45
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
46
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
47
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
48
+ PERFORMANCE OF THIS SOFTWARE.
49
+ ***************************************************************************** */
50
+
51
+ var __assign = function() {
52
+ __assign = Object.assign || function __assign(t) {
53
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
54
+ s = arguments[i];
55
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
56
+ }
57
+ return t;
58
+ };
59
+ return __assign.apply(this, arguments);
60
+ };
61
+
62
+ function __rest(s, e) {
63
+ var t = {};
64
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
65
+ t[p] = s[p];
66
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
67
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
68
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
69
+ t[p[i]] = s[p[i]];
70
+ }
71
+ return t;
72
+ }
73
+
74
+ function __makeTemplateObject(cooked, raw) {
75
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
76
+ return cooked;
77
+ }
78
+
79
+ var useAutoPlay = function (callback, delay) {
80
+ var timeout = React.useRef(null);
81
+
82
+ var stop = function () {
83
+ clearTimeout(timeout.current);
84
+ };
85
+
86
+ var start = function () {
87
+ stop();
88
+ timeout.current = setTimeout(callback, delay);
89
+ };
90
+
91
+ return [start, stop];
92
+ };
93
+
94
+ var isValidRatio = function (ratio) {
95
+ return !!ratio && /\d\/\d/.test(ratio);
96
+ };
97
+ var getInfiniteIndex = function (index, count) {
98
+ return Math.abs((index % count + count) % count);
99
+ };
100
+ var getRatioHolderStyle = function (ratio) {
101
+ return {
102
+ paddingTop: "calc(".concat(ratio.split('/').reverse().join('/'), " * 100%)")
103
+ };
104
+ };
105
+ var getRootStyle = function (_a) {
106
+ var width = _a.width,
107
+ height = _a.height,
108
+ ratio = _a.ratio,
109
+ style = _a.style;
110
+ var hasRatio = isValidRatio(ratio);
111
+ return __assign({
112
+ width: width,
113
+ height: hasRatio ? 'auto' : height,
114
+ maxWidth: hasRatio ? '100%' : 'none',
115
+ aspectRatio: hasRatio ? ratio : undefined
116
+ }, style);
117
+ };
118
+ var getTrackStyle = function (_a) {
119
+ var index = _a.index,
120
+ childrenCount = _a.childrenCount,
121
+ duration = _a.duration,
122
+ offset = _a.offset;
123
+ var hasOffset = typeof offset === 'number';
124
+ var currentOffset = hasOffset ? offset : 0;
125
+ return {
126
+ transform: "translateX(calc(".concat(index * (100 / childrenCount) * -1, "% + ").concat(currentOffset, "px))"),
127
+ transition: hasOffset ? undefined : "transform ".concat(duration, "ms ease"),
128
+ width: "".concat(childrenCount * 100, "%") // willChange: 'transform',
129
+
130
+ };
131
+ };
132
+
133
+ var css = {"root":"SimpleSlider__root___WuTIM","track":"SimpleSlider__track___G8BYu","trackItem":"SimpleSlider__trackItem___94Eq7","buttonCommon":"SimpleSlider__buttonCommon___I5yQD","buttonPrev":"SimpleSlider__buttonPrev___UqTOk SimpleSlider__buttonCommon___I5yQD","buttonNext":"SimpleSlider__buttonNext___BbLNv SimpleSlider__buttonCommon___I5yQD","buttonIcon":"SimpleSlider__buttonIcon___89h6n","showOnHoverButtons":"SimpleSlider__showOnHoverButtons___yssoj","dots":"SimpleSlider__dots___E7g4J","dotsItem":"SimpleSlider__dotsItem___cbWCu","dotsButton":"SimpleSlider__dotsButton___7N4yb","showOnHoverDots":"SimpleSlider__showOnHoverDots___ig5DV"};
134
+
135
+ var SimpleSlider = React__namespace.forwardRef(function (_a, ref) {
136
+ var _b;
137
+
138
+ var _c = _a.autoPlay,
139
+ autoPlay = _c === void 0 ? 0 : _c,
140
+ children = _a.children,
141
+ className = _a.className,
142
+ _d = _a.duration,
143
+ duration = _d === void 0 ? 500 : _d,
144
+ height = _a.height,
145
+ _e = _a.infinite,
146
+ infinite = _e === void 0 ? false : _e,
147
+ ratio = _a.ratio,
148
+ style = _a.style,
149
+ width = _a.width,
150
+ onChangeIndex = _a.onChangeIndex,
151
+ onClickDot = _a.onClickDot,
152
+ onClickItem = _a.onClickItem,
153
+ onClickButtonNext = _a.onClickButtonNext,
154
+ onClickButtonPrev = _a.onClickButtonPrev,
155
+ onSwipeNext = _a.onSwipeNext,
156
+ onSwipePrev = _a.onSwipePrev,
157
+ _f = _a.showOnHoverButtons,
158
+ showOnHoverButtons = _f === void 0 ? false : _f,
159
+ _g = _a.showOnHoverDots,
160
+ showOnHoverDots = _g === void 0 ? false : _g,
161
+ props = __rest(_a, ["autoPlay", "children", "className", "duration", "height", "infinite", "ratio", "style", "width", "onChangeIndex", "onClickDot", "onClickItem", "onClickButtonNext", "onClickButtonPrev", "onSwipeNext", "onSwipePrev", "showOnHoverButtons", "showOnHoverDots"]);
162
+
163
+ var refTrack = React__namespace.useRef(null);
164
+ var transitionRunning = React__namespace.useRef(false);
165
+
166
+ var _h = React__namespace.useState(false),
167
+ disableAutoPlay = _h[0],
168
+ setDisableAutoPlay = _h[1];
169
+
170
+ var _j = React__namespace.useState({
171
+ index: 0,
172
+ offset: undefined
173
+ }),
174
+ position = _j[0],
175
+ setPosition = _j[1];
176
+
177
+ var childrenCount = React__namespace.Children.count(children);
178
+ var childrenArray = React__namespace.Children.toArray(children);
179
+ var isDisablePrev = !infinite && position.index === 0;
180
+ var isDisableNext = !infinite && position.index === childrenCount - 1;
181
+ var isShowNavi = childrenCount > 1;
182
+ var isShowDots = childrenCount > 1;
183
+ var isAutoPlay = !disableAutoPlay && autoPlay > 0;
184
+ var prevIndex = position.index - 1;
185
+ var nextIndex = position.index + 1;
186
+ var infiniteIndex = getInfiniteIndex(position.index, childrenCount);
187
+ var infinitePrevIndex = getInfiniteIndex(prevIndex, childrenCount);
188
+ var infiniteNextIndex = getInfiniteIndex(nextIndex, childrenCount);
189
+
190
+ var handleClickButtonNext = function () {
191
+ if (transitionRunning.current || isDisableNext) return;
192
+
193
+ if (typeof onClickButtonNext === 'function') {
194
+ onClickButtonNext(infiniteNextIndex);
195
+ }
196
+
197
+ setPosition({
198
+ index: nextIndex,
199
+ offset: undefined
200
+ });
201
+ };
202
+
203
+ var handleClickButtonPrev = function () {
204
+ if (transitionRunning.current || isDisablePrev) return;
205
+
206
+ if (typeof onClickButtonPrev === 'function') {
207
+ onClickButtonPrev(infinitePrevIndex);
208
+ }
209
+
210
+ setPosition({
211
+ index: prevIndex,
212
+ offset: undefined
213
+ });
214
+ };
215
+
216
+ var handleClickDot = function (i) {
217
+ if (transitionRunning.current) return;
218
+
219
+ if (typeof onClickDot === 'function') {
220
+ onClickDot(i);
221
+ }
222
+
223
+ setPosition({
224
+ index: i,
225
+ offset: undefined
226
+ });
227
+ };
228
+
229
+ var handleSwipeNext = function () {
230
+ if (transitionRunning.current || isDisableNext) return;
231
+
232
+ if (typeof onSwipeNext === 'function') {
233
+ onSwipeNext(infiniteNextIndex);
234
+ }
235
+
236
+ setPosition({
237
+ index: nextIndex,
238
+ offset: undefined
239
+ });
240
+ };
241
+
242
+ var handleSwipePrev = function () {
243
+ if (transitionRunning.current || isDisablePrev) return;
244
+
245
+ if (typeof onSwipePrev === 'function') {
246
+ onSwipePrev(infinitePrevIndex);
247
+ }
248
+
249
+ setPosition({
250
+ index: prevIndex,
251
+ offset: undefined
252
+ });
253
+ };
254
+
255
+ var handleSwipeMove = function (_a, event) {
256
+ var x = _a.x;
257
+ if (transitionRunning.current || event.touches && event.touches.length > 1) return;
258
+ var offset = x;
259
+
260
+ if (isDisablePrev && x > 0 || isDisableNext && x < 0) {
261
+ offset = 0;
262
+ }
263
+
264
+ setPosition({
265
+ index: position.index,
266
+ offset: offset
267
+ });
268
+ };
269
+
270
+ var _k = useAutoPlay(function () {
271
+ if (transitionRunning.current || isDisableNext) return;
272
+ setPosition({
273
+ index: nextIndex,
274
+ offset: undefined
275
+ });
276
+ }, autoPlay),
277
+ startAutoPlay = _k[0],
278
+ stopAutoPlay = _k[1];
279
+
280
+ var handleTransitionStart = function () {
281
+ transitionRunning.current = true;
282
+ stopAutoPlay();
283
+ };
284
+
285
+ var handleTransitionEnd = function () {
286
+ transitionRunning.current = false;
287
+
288
+ if (isAutoPlay) {
289
+ startAutoPlay();
290
+ }
291
+
292
+ if (!(position.index in childrenArray)) {
293
+ setPosition({
294
+ index: infiniteIndex,
295
+ offset: 0
296
+ });
297
+ }
298
+
299
+ if (typeof onChangeIndex === 'function') {
300
+ onChangeIndex(infiniteIndex);
301
+ }
302
+ };
303
+
304
+ React__namespace.useEffect(function () {
305
+ var _a, _b;
306
+
307
+ var autoPlayObserver = new IntersectionObserver(function (entries) {
308
+ if (entries[0].isIntersecting) {
309
+ startAutoPlay();
310
+ } else {
311
+ stopAutoPlay();
312
+ }
313
+ });
314
+ (_a = refTrack.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', handleTransitionStart);
315
+ (_b = refTrack.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', handleTransitionEnd);
316
+
317
+ if (isAutoPlay && refTrack.current) {
318
+ autoPlayObserver.observe(refTrack.current);
319
+ }
320
+
321
+ return function () {
322
+ var _a, _b;
323
+
324
+ (_a = refTrack.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionstart', handleTransitionStart);
325
+ (_b = refTrack.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('transitionend', handleTransitionEnd);
326
+ stopAutoPlay();
327
+ autoPlayObserver.disconnect();
328
+ };
329
+ }, [position.index, isAutoPlay]);
330
+ return React__namespace.createElement(Swipe__default["default"], __assign({
331
+ ref: ref,
332
+ onSwipeLeft: handleSwipeNext,
333
+ onSwipeRight: handleSwipePrev,
334
+ onSwipeMove: handleSwipeMove,
335
+ className: classNames__default["default"](css.root, className, (_b = {}, _b[css.showOnHoverButtons] = showOnHoverButtons, _b[css.showOnHoverDots] = showOnHoverDots, _b)),
336
+ style: getRootStyle({
337
+ width: width,
338
+ height: height,
339
+ ratio: ratio,
340
+ style: style
341
+ }),
342
+ onSwipeStart: function () {
343
+ return setDisableAutoPlay(true);
344
+ },
345
+ onSwipeEnd: function () {
346
+ return setDisableAutoPlay(false);
347
+ },
348
+ onMouseEnter: function () {
349
+ return setDisableAutoPlay(true);
350
+ },
351
+ onMouseLeave: function () {
352
+ return setDisableAutoPlay(false);
353
+ }
354
+ }, props), isValidRatio(ratio) && React__namespace.createElement("div", {
355
+ style: getRatioHolderStyle(ratio)
356
+ }), React__namespace.createElement("ul", {
357
+ ref: refTrack,
358
+ className: css.track,
359
+ style: getTrackStyle({
360
+ index: infinite ? position.index + 1 : position.index,
361
+ childrenCount: infinite ? childrenCount + 2 : childrenCount,
362
+ duration: duration,
363
+ offset: position.offset
364
+ })
365
+ }, infinite && React__namespace.createElement("li", {
366
+ className: css.trackItem
367
+ }, childrenArray[childrenArray.length - 1]), childrenArray.map(function (child, index) {
368
+ return React__namespace.createElement("li", {
369
+ key: child.key,
370
+ className: css.trackItem,
371
+ onClick: function () {
372
+ if (typeof onClickItem === 'function') {
373
+ onClickItem(index);
374
+ }
375
+ },
376
+ "data-qaid": "image_slider_".concat(index)
377
+ }, child);
378
+ }), infinite && React__namespace.createElement("li", {
379
+ className: css.trackItem
380
+ }, childrenArray[0])), isShowNavi && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(Button.Button, {
381
+ type: 'button',
382
+ className: css.buttonPrev,
383
+ onClick: handleClickButtonPrev,
384
+ disabled: isDisablePrev,
385
+ "aria-label": ttag.t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0431\u0430\u043D\u043D\u0435\u0440"], ["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0431\u0430\u043D\u043D\u0435\u0440"]))),
386
+ "data-qaid": 'prev_image'
387
+ }, React__namespace.createElement("svg", {
388
+ className: css.buttonIcon,
389
+ width: 18,
390
+ height: 18,
391
+ viewBox: '0 0 64 64',
392
+ xmlns: 'http://www.w3.org/2000/svg'
393
+ }, React__namespace.createElement("path", {
394
+ d: 'M41.625 60.375L16 32 41.625 3.625 48.5 10 28.375 32 48.5 54z'
395
+ }))), React__namespace.createElement(Button.Button, {
396
+ type: 'button',
397
+ className: css.buttonNext,
398
+ onClick: handleClickButtonNext,
399
+ disabled: isDisableNext,
400
+ "aria-label": ttag.t(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0431\u0430\u043D\u043D\u0435\u0440"], ["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0431\u0430\u043D\u043D\u0435\u0440"]))),
401
+ "data-qaid": 'next_image'
402
+ }, React__namespace.createElement("svg", {
403
+ className: css.buttonIcon,
404
+ width: 18,
405
+ height: 18,
406
+ viewBox: '0 0 64 64',
407
+ xmlns: 'http://www.w3.org/2000/svg'
408
+ }, React__namespace.createElement("path", {
409
+ d: 'M22.875 60.375L16 54l20.125-22L16 10l6.875-6.375L48.5 32z'
410
+ })))), isShowDots && React__namespace.createElement("ul", {
411
+ className: css.dots
412
+ }, childrenArray.map(function (child, index) {
413
+ var viewIndex = index + 1;
414
+ return React__namespace.createElement("li", {
415
+ className: css.dotsItem,
416
+ key: child.key
417
+ }, React__namespace.createElement(Button.Button, {
418
+ className: css.dotsButton,
419
+ type: 'button',
420
+ onClick: function () {
421
+ return handleClickDot(index);
422
+ },
423
+ disabled: index === infiniteIndex,
424
+ "aria-label": ttag.t(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0431\u0430\u043D\u043D\u0435\u0440 \u043D\u043E\u043C\u0435\u0440 ", ""], ["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0431\u0430\u043D\u043D\u0435\u0440 \u043D\u043E\u043C\u0435\u0440 ", ""])), viewIndex),
425
+ "data-qaid": "view_image_".concat(viewIndex)
426
+ }, viewIndex));
427
+ })));
428
+ });
429
+ var templateObject_1, templateObject_2, templateObject_3;
430
+
431
+ exports.SimpleSlider = SimpleSlider;
432
+
433
+ require('./style.development.css');
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("ttag"),n=require("react-easy-swipe"),r=require("classnames");require("intersection-observer");var i=require("@prom-ui/core/Button");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=a(e),u=o(n),s=o(r),l=function(){return l=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},l.apply(this,arguments)};function f(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var d,v,p,m=function(e){return!!e&&/\d\/\d/.test(e)},h=function(e,t){return Math.abs((e%t+t)%t)},y=function(e){return{paddingTop:"calc(".concat(e.split("/").reverse().join("/")," * 100%)")}},w=function(e){var t=e.width,n=e.height,r=e.ratio,i=e.style,o=m(r);return l({width:t,height:o?"auto":n,maxWidth:o?"100%":"none",aspectRatio:o?r:void 0},i)},x=function(e){var t=e.index,n=e.childrenCount,r=e.duration,i=e.offset,o="number"==typeof i,a=o?i:0;return{transform:"translateX(calc(".concat(t*(100/n)*-1,"% + ").concat(a,"px))"),transition:o?void 0:"transform ".concat(r,"ms ease"),width:"".concat(100*n,"%")}},b="WuTIM",g="G8BYu",E="_94Eq7",O="UqTOk I5yQD",N="BbLNv I5yQD",C="_89h6n",k="yssoj",j="E7g4J",S="cbWCu",P="_7N4yb",B="ig5DV",q=c.forwardRef((function(n,r){var o,a,q,_,L,I=n.autoPlay,M=void 0===I?0:I,D=n.children,R=n.className,T=n.duration,H=void 0===T?500:T,z=n.height,W=n.infinite,Q=void 0!==W&&W,A=n.ratio,F=n.style,G=n.width,J=n.onChangeIndex,U=n.onClickDot,V=n.onClickItem,X=n.onClickButtonNext,Y=n.onClickButtonPrev,K=n.onSwipeNext,Z=n.onSwipePrev,$=n.showOnHoverButtons,ee=void 0!==$&&$,te=n.showOnHoverDots,ne=void 0!==te&&te,re=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}(n,["autoPlay","children","className","duration","height","infinite","ratio","style","width","onChangeIndex","onClickDot","onClickItem","onClickButtonNext","onClickButtonPrev","onSwipeNext","onSwipePrev","showOnHoverButtons","showOnHoverDots"]),ie=c.useRef(null),oe=c.useRef(!1),ae=c.useState(!1),ce=ae[0],ue=ae[1],se=c.useState({index:0,offset:void 0}),le=se[0],fe=se[1],de=c.Children.count(D),ve=c.Children.toArray(D),pe=!Q&&0===le.index,me=!Q&&le.index===de-1,he=de>1,ye=de>1,we=!ce&&M>0,xe=le.index-1,be=le.index+1,ge=h(le.index,de),Ee=h(xe,de),Oe=h(be,de),Ne=(a=function(){oe.current||me||fe({index:be,offset:void 0})},q=M,_=e.useRef(null),[function(){L(),_.current=setTimeout(a,q)},L=function(){clearTimeout(_.current)}]),Ce=Ne[0],ke=Ne[1],je=function(){oe.current=!0,ke()},Se=function(){oe.current=!1,we&&Ce(),le.index in ve||fe({index:ge,offset:0}),"function"==typeof J&&J(ge)};return c.useEffect((function(){var e,t,n=new IntersectionObserver((function(e){e[0].isIntersecting?Ce():ke()}));return null===(e=ie.current)||void 0===e||e.addEventListener("transitionstart",je),null===(t=ie.current)||void 0===t||t.addEventListener("transitionend",Se),we&&ie.current&&n.observe(ie.current),function(){var e,t;null===(e=ie.current)||void 0===e||e.removeEventListener("transitionstart",je),null===(t=ie.current)||void 0===t||t.removeEventListener("transitionend",Se),ke(),n.disconnect()}}),[le.index,we]),c.createElement(u.default,l({ref:r,onSwipeLeft:function(){oe.current||me||("function"==typeof K&&K(Oe),fe({index:be,offset:void 0}))},onSwipeRight:function(){oe.current||pe||("function"==typeof Z&&Z(Ee),fe({index:xe,offset:void 0}))},onSwipeMove:function(e,t){var n=e.x;if(!(oe.current||t.touches&&t.touches.length>1)){var r=n;(pe&&n>0||me&&n<0)&&(r=0),fe({index:le.index,offset:r})}},className:s.default(b,R,(o={},o[k]=ee,o[B]=ne,o)),style:w({width:G,height:z,ratio:A,style:F}),onSwipeStart:function(){return ue(!0)},onSwipeEnd:function(){return ue(!1)},onMouseEnter:function(){return ue(!0)},onMouseLeave:function(){return ue(!1)}},re),m(A)&&c.createElement("div",{style:y(A)}),c.createElement("ul",{ref:ie,className:g,style:x({index:Q?le.index+1:le.index,childrenCount:Q?de+2:de,duration:H,offset:le.offset})},Q&&c.createElement("li",{className:E},ve[ve.length-1]),ve.map((function(e,t){return c.createElement("li",{key:e.key,className:E,onClick:function(){"function"==typeof V&&V(t)},"data-qaid":"image_slider_".concat(t)},e)})),Q&&c.createElement("li",{className:E},ve[0])),he&&c.createElement(c.Fragment,null,c.createElement(i.Button,{type:"button",className:O,onClick:function(){oe.current||pe||("function"==typeof Y&&Y(Ee),fe({index:xe,offset:void 0}))},disabled:pe,"aria-label":t.t(d||(d=f(["Показать предыдущий баннер"],["Показать предыдущий баннер"]))),"data-qaid":"prev_image"},c.createElement("svg",{className:C,width:18,height:18,viewBox:"0 0 64 64",xmlns:"http://www.w3.org/2000/svg"},c.createElement("path",{d:"M41.625 60.375L16 32 41.625 3.625 48.5 10 28.375 32 48.5 54z"}))),c.createElement(i.Button,{type:"button",className:N,onClick:function(){oe.current||me||("function"==typeof X&&X(Oe),fe({index:be,offset:void 0}))},disabled:me,"aria-label":t.t(v||(v=f(["Показать следующий баннер"],["Показать следующий баннер"]))),"data-qaid":"next_image"},c.createElement("svg",{className:C,width:18,height:18,viewBox:"0 0 64 64",xmlns:"http://www.w3.org/2000/svg"},c.createElement("path",{d:"M22.875 60.375L16 54l20.125-22L16 10l6.875-6.375L48.5 32z"})))),ye&&c.createElement("ul",{className:j},ve.map((function(e,n){var r=n+1;return c.createElement("li",{className:S,key:e.key},c.createElement(i.Button,{className:P,type:"button",onClick:function(){return e=n,void(oe.current||("function"==typeof U&&U(e),fe({index:e,offset:void 0})));var e},disabled:n===ge,"aria-label":t.t(p||(p=f(["Показать баннер номер ",""],["Показать баннер номер ",""])),r),"data-qaid":"view_image_".concat(r)},r))}))))}));exports.SimpleSlider=q,require("./style.production.css");
@@ -0,0 +1 @@
1
+ .SimpleSlider__root___WuTIM{position:relative;overflow:hidden;height:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.SimpleSlider__track___G8BYu{position:absolute;left:0;top:0;height:100%;list-style:none;padding:0;margin:0;width:100%;display:flex;flex-wrap:nowrap}.SimpleSlider__trackItem___94Eq7{position:relative;display:block;flex:1;min-width:0}.SimpleSlider__buttonCommon___I5yQD{position:absolute;top:50%;transform:translateY(-50%);font-weight:400;border:0;border-radius:4px;background:var(--white);box-shadow:0 0 10px rgba(0,0,0,.08);padding:0;width:30px;height:66px;max-height:70%}.SimpleSlider__buttonCommon___I5yQD:disabled{opacity:.3;pointer-events:auto}.SimpleSlider__buttonCommon___I5yQD:active{background:var(--black-200)}.SimpleSlider__buttonPrev___UqTOk{left:0;margin-left:8px}.SimpleSlider__buttonNext___BbLNv{right:0;margin-right:8px}.SimpleSlider__buttonIcon___89h6n{fill:currentColor}.SimpleSlider__showOnHoverButtons___yssoj .SimpleSlider__buttonNext___BbLNv{right:-40px}.SimpleSlider__showOnHoverButtons___yssoj .SimpleSlider__buttonPrev___UqTOk{left:-40px}.SimpleSlider__dots___E7g4J{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;list-style:none;padding:4px 8px;margin:0 0 8px;background:var(--white);border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.08);transition:bottom 150ms ease-in-out}.SimpleSlider__dotsItem___cbWCu{display:block}.SimpleSlider__dotsItem___cbWCu+.SimpleSlider__dotsItem___cbWCu{margin-left:6px}.SimpleSlider__dotsButton___7N4yb{display:block;padding:0;width:6px;height:6px;border-radius:50%;font-size:0;background:var(--black-400)}.SimpleSlider__dotsButton___7N4yb:hover{background:var(--black-500)}.SimpleSlider__dotsButton___7N4yb:disabled{background:var(--yellow-500)}.SimpleSlider__showOnHoverDots___ig5DV .SimpleSlider__dots___E7g4J{bottom:-24px}@media (hover:hover){.SimpleSlider__showOnHoverButtons___yssoj:hover .SimpleSlider__buttonNext___BbLNv{right:0}.SimpleSlider__showOnHoverButtons___yssoj:hover .SimpleSlider__buttonPrev___UqTOk{left:0}.SimpleSlider__showOnHoverDots___ig5DV:hover .SimpleSlider__dots___E7g4J{bottom:0}}
@@ -0,0 +1 @@
1
+ .WuTIM{position:relative;overflow:hidden;height:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.G8BYu{position:absolute;left:0;top:0;height:100%;list-style:none;padding:0;margin:0;width:100%;display:flex;flex-wrap:nowrap}._94Eq7{position:relative;display:block;flex:1;min-width:0}.I5yQD{position:absolute;top:50%;transform:translateY(-50%);font-weight:400;border:0;border-radius:4px;background:var(--white);box-shadow:0 0 10px rgba(0,0,0,.08);padding:0;width:30px;height:66px;max-height:70%}.I5yQD:disabled{opacity:.3;pointer-events:auto}.I5yQD:active{background:var(--black-200)}.UqTOk{left:0;margin-left:8px}.BbLNv{right:0;margin-right:8px}._89h6n{fill:currentColor}.yssoj .BbLNv{right:-40px}.yssoj .UqTOk{left:-40px}.E7g4J{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;list-style:none;padding:4px 8px;margin:0 0 8px;background:var(--white);border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.08);transition:bottom 150ms ease-in-out}.cbWCu{display:block}.cbWCu+.cbWCu{margin-left:6px}._7N4yb{display:block;padding:0;width:6px;height:6px;border-radius:50%;font-size:0;background:var(--black-400)}._7N4yb:hover{background:var(--black-500)}._7N4yb:disabled{background:var(--yellow-500)}.ig5DV .E7g4J{bottom:-24px}@media (hover:hover){.yssoj:hover .BbLNv{right:0}.yssoj:hover .UqTOk{left:0}.ig5DV:hover .E7g4J{bottom:0}}
@@ -1,23 +1,37 @@
1
- import React from 'react';
1
+ import * as React from 'react';
2
2
  import 'intersection-observer';
3
- export declare type tSimpleSliderProps = {
3
+ export declare type SimpleSliderProps = {
4
+ /** React children */
4
5
  children: React.ReactNode;
5
6
  height: number | string;
6
7
  width: number | string;
8
+ /** Автоматические листание в `ms`, по умолчанию `0` - выключено */
7
9
  autoPlay?: number;
8
10
  className?: string;
11
+ /** Скорость анимации листания в `ms` */
9
12
  duration?: number;
13
+ /** Бесконечное листание */
10
14
  infinite?: boolean;
15
+ /** Соотношение сторон `16/9`, `4/3`, `1/1` или нестандартное `900/400` */
11
16
  ratio: string;
12
17
  style?: React.CSSProperties;
18
+ /** Показывать при наведении кнопки по бокам Вперед и Назад */
13
19
  showOnHoverButtons?: boolean;
20
+ /** Показывать при наведении точки снизу */
14
21
  showOnHoverDots?: boolean;
22
+ /** Обратный вызов изменения `index` в конце анимации `(index) =>` */
15
23
  onChangeIndex?: (index: number) => void;
24
+ /** Обратный вызов изменения `(index) =>` */
16
25
  onClickDot?: (index: number) => void;
26
+ /** Обратный вызов изменения `(index) =>` */
17
27
  onClickItem?: (index: number) => void;
28
+ /** Обратный вызов изменения `(index) =>` */
18
29
  onClickButtonNext?: (index: number) => void;
30
+ /** Обратный вызов изменения `(index) =>` */
19
31
  onClickButtonPrev?: (index: number) => void;
32
+ /** Обратный вызов изменения `(index) =>` */
20
33
  onSwipeNext?: (index: number) => void;
34
+ /** Обратный вызов изменения `(index) =>` */
21
35
  onSwipePrev?: (index: number) => void;
22
36
  };
23
- export declare const SimpleSlider: React.FC<tSimpleSliderProps>;
37
+ export declare const SimpleSlider: React.ForwardRefExoticComponent<SimpleSliderProps & React.RefAttributes<any>>;