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