@salutejs/plasma-new-hope 0.326.0-canary.2013.15538813402.0 → 0.326.0-canary.2013.15558438626.0

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 (99) hide show
  1. package/cjs/components/Carousel/CarouselNew/Carousel.css +5 -7
  2. package/cjs/components/Carousel/CarouselNew/Carousel.js +7 -12
  3. package/cjs/components/Carousel/CarouselNew/Carousel.js.map +1 -1
  4. package/cjs/components/Carousel/CarouselNew/Carousel.styles.js +4 -13
  5. package/cjs/components/Carousel/CarouselNew/Carousel.styles.js.map +1 -1
  6. package/cjs/components/Carousel/CarouselNew/{Carousel.styles_1fs4wwn.css → Carousel.styles_a2t6qm.css} +2 -2
  7. package/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -61
  8. package/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js.map +1 -1
  9. package/cjs/components/Carousel/CarouselOld/CarouselItem.js +1 -1
  10. package/cjs/components/Carousel/CarouselOld/CarouselItem.js.map +1 -1
  11. package/{es/components/Carousel/CarouselOld/CarouselItem_uvoxfy.css → cjs/components/Carousel/CarouselOld/CarouselItem_1meatnt.css} +1 -1
  12. package/cjs/index.css +6 -8
  13. package/cjs/index.js +1 -1
  14. package/emotion/cjs/components/Carousel/CarouselNew/Carousel.js +7 -12
  15. package/emotion/cjs/components/Carousel/CarouselNew/Carousel.styles.js +17 -12
  16. package/emotion/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -60
  17. package/emotion/cjs/components/Carousel/CarouselNew/ui/index.js +0 -11
  18. package/emotion/cjs/components/Carousel/CarouselOld/CarouselItem.js +1 -1
  19. package/emotion/cjs/components/Carousel/index.js +4 -4
  20. package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +3 -3
  21. package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +22 -16
  22. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +14 -2
  23. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.js +1 -1
  24. package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +92 -32
  25. package/emotion/es/components/Carousel/CarouselNew/Carousel.js +7 -12
  26. package/emotion/es/components/Carousel/CarouselNew/Carousel.styles.js +17 -12
  27. package/emotion/es/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -60
  28. package/emotion/es/components/Carousel/CarouselNew/ui/index.js +0 -1
  29. package/emotion/es/components/Carousel/CarouselOld/CarouselItem.js +1 -1
  30. package/emotion/es/components/Carousel/index.js +1 -1
  31. package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +4 -4
  32. package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +22 -16
  33. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.config.js +14 -2
  34. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.js +2 -2
  35. package/emotion/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +92 -32
  36. package/es/components/Carousel/CarouselNew/Carousel.css +5 -7
  37. package/es/components/Carousel/CarouselNew/Carousel.js +7 -12
  38. package/es/components/Carousel/CarouselNew/Carousel.js.map +1 -1
  39. package/es/components/Carousel/CarouselNew/Carousel.styles.js +4 -13
  40. package/es/components/Carousel/CarouselNew/Carousel.styles.js.map +1 -1
  41. package/es/components/Carousel/CarouselNew/{Carousel.styles_1fs4wwn.css → Carousel.styles_a2t6qm.css} +2 -2
  42. package/es/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -61
  43. package/es/components/Carousel/CarouselNew/hooks/useCarousel.js.map +1 -1
  44. package/es/components/Carousel/CarouselOld/CarouselItem.js +1 -1
  45. package/es/components/Carousel/CarouselOld/CarouselItem.js.map +1 -1
  46. package/{cjs/components/Carousel/CarouselOld/CarouselItem_uvoxfy.css → es/components/Carousel/CarouselOld/CarouselItem_1meatnt.css} +1 -1
  47. package/es/index.css +6 -8
  48. package/es/index.js +1 -1
  49. package/package.json +5 -5
  50. package/styled-components/cjs/components/Carousel/CarouselNew/Carousel.js +7 -12
  51. package/styled-components/cjs/components/Carousel/CarouselNew/Carousel.styles.js +2 -5
  52. package/styled-components/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -60
  53. package/styled-components/cjs/components/Carousel/CarouselNew/ui/index.js +0 -11
  54. package/styled-components/cjs/components/Carousel/CarouselOld/CarouselItem.js +1 -1
  55. package/styled-components/cjs/components/Carousel/index.js +4 -4
  56. package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +2 -2
  57. package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +22 -16
  58. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +14 -2
  59. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.js +1 -1
  60. package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +92 -32
  61. package/styled-components/es/components/Carousel/CarouselNew/Carousel.js +7 -12
  62. package/styled-components/es/components/Carousel/CarouselNew/Carousel.styles.js +2 -5
  63. package/styled-components/es/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -60
  64. package/styled-components/es/components/Carousel/CarouselNew/ui/index.js +0 -1
  65. package/styled-components/es/components/Carousel/CarouselOld/CarouselItem.js +1 -1
  66. package/styled-components/es/components/Carousel/index.js +1 -1
  67. package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +2 -2
  68. package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +22 -16
  69. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.config.js +14 -2
  70. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.js +2 -2
  71. package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +92 -32
  72. package/types/components/Carousel/CarouselNew/Carousel.d.ts.map +1 -1
  73. package/types/components/Carousel/CarouselNew/Carousel.styles.d.ts +1 -4
  74. package/types/components/Carousel/CarouselNew/Carousel.styles.d.ts.map +1 -1
  75. package/types/components/Carousel/CarouselNew/Carousel.types.d.ts +18 -67
  76. package/types/components/Carousel/CarouselNew/Carousel.types.d.ts.map +1 -1
  77. package/types/components/Carousel/CarouselNew/hooks/useCarousel.d.ts +4 -6
  78. package/types/components/Carousel/CarouselNew/hooks/useCarousel.d.ts.map +1 -1
  79. package/types/components/Carousel/CarouselNew/ui/index.d.ts +0 -1
  80. package/types/components/Carousel/CarouselNew/ui/index.d.ts.map +1 -1
  81. package/types/components/Carousel/CarouselOld/CarouselItem.d.ts.map +1 -1
  82. package/types/components/Carousel/index.d.ts +1 -1
  83. package/types/components/Carousel/index.d.ts.map +1 -1
  84. package/cjs/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -62
  85. package/cjs/components/Carousel/CarouselNew/hooks/useDragScroll.js.map +0 -1
  86. package/emotion/cjs/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -65
  87. package/emotion/cjs/components/Carousel/CarouselNew/ui/Item/Item.js +0 -38
  88. package/emotion/es/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -59
  89. package/emotion/es/components/Carousel/CarouselNew/ui/Item/Item.js +0 -31
  90. package/es/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -58
  91. package/es/components/Carousel/CarouselNew/hooks/useDragScroll.js.map +0 -1
  92. package/styled-components/cjs/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -65
  93. package/styled-components/cjs/components/Carousel/CarouselNew/ui/Item/Item.js +0 -37
  94. package/styled-components/es/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -59
  95. package/styled-components/es/components/Carousel/CarouselNew/ui/Item/Item.js +0 -30
  96. package/types/components/Carousel/CarouselNew/hooks/useDragScroll.d.ts +0 -2
  97. package/types/components/Carousel/CarouselNew/hooks/useDragScroll.d.ts.map +0 -1
  98. package/types/components/Carousel/CarouselNew/ui/Item/Item.d.ts +0 -4
  99. package/types/components/Carousel/CarouselNew/ui/Item/Item.d.ts.map +0 -1
@@ -3,8 +3,8 @@ import throttle from 'lodash.throttle';
3
3
  /**
4
4
  * Подсчет смещения из-за паддингов.
5
5
  */
6
- export var getCalculatedOffset = function getCalculatedOffset(scrollEl, trackEl, axis) {
7
- var paddingProp = axis === 'x' ? 'paddingLeft' : 'paddingTop';
6
+ export var getCalculatedOffset = function getCalculatedOffset(scrollEl, trackEl) {
7
+ var paddingProp = 'paddingLeft';
8
8
  return parseInt(getComputedStyle(scrollEl)[paddingProp], 10) + parseInt(getComputedStyle(trackEl)[paddingProp], 10);
9
9
  };
10
10
  var positionModByScrollAlign = function positionModByScrollAlign(_ref) {
@@ -13,11 +13,9 @@ var positionModByScrollAlign = function positionModByScrollAlign(_ref) {
13
13
  carouselSize = _ref.carouselSize,
14
14
  itemSize = _ref.itemSize,
15
15
  offset = _ref.offset,
16
- scrollStart = _ref.scrollStart,
17
- axis = _ref.axis;
16
+ scrollStart = _ref.scrollStart;
18
17
  if (scrollAlign === 'start') {
19
- var inaccuracy = 1;
20
- var paddingOffset = axis === 'y' ? offset - itemSize / 2 + inaccuracy : 0;
18
+ var paddingOffset = 0;
21
19
  return position + paddingOffset;
22
20
  }
23
21
  if (scrollAlign === 'center') {
@@ -41,47 +39,30 @@ var positionModByScrollAlign = function positionModByScrollAlign(_ref) {
41
39
  * Подсчет скролла до переданного индекса.
42
40
  */
43
41
  export var getCalculatedPos = function getCalculatedPos(_ref2) {
42
+ var _items$item$offsetWid2, _items$item2;
44
43
  var scrollEl = _ref2.scrollEl,
45
44
  items = _ref2.items,
46
- axis = _ref2.axis,
47
45
  index = _ref2.index,
48
46
  offset = _ref2.offset,
49
47
  scrollAlign = _ref2.scrollAlign;
50
48
  var position = scrollAlign === 'center' ? offset : 0;
51
- var carouselSize;
52
- var itemSize;
53
- var scrollStart;
54
49
  if (items.item(index) === null) {
55
50
  return position;
56
51
  }
57
52
  for (var i = 0; i < index; i++) {
58
- if (axis === 'x') {
59
- var _items$item$offsetWid, _items$item;
60
- position += (_items$item$offsetWid = (_items$item = items.item(i)) === null || _items$item === void 0 ? void 0 : _items$item.offsetWidth) !== null && _items$item$offsetWid !== void 0 ? _items$item$offsetWid : 0;
61
- } else {
62
- var _items$item$offsetHei, _items$item2;
63
- position += (_items$item$offsetHei = (_items$item2 = items.item(i)) === null || _items$item2 === void 0 ? void 0 : _items$item2.offsetHeight) !== null && _items$item$offsetHei !== void 0 ? _items$item$offsetHei : 0;
64
- }
65
- }
66
- if (axis === 'x') {
67
- var _items$item$offsetWid2, _items$item3;
68
- carouselSize = scrollEl.offsetWidth;
69
- itemSize = (_items$item$offsetWid2 = (_items$item3 = items.item(index)) === null || _items$item3 === void 0 ? void 0 : _items$item3.offsetWidth) !== null && _items$item$offsetWid2 !== void 0 ? _items$item$offsetWid2 : 0;
70
- scrollStart = scrollEl.scrollLeft;
71
- } else {
72
- var _items$item$offsetHei2, _items$item4;
73
- carouselSize = scrollEl.offsetHeight;
74
- itemSize = (_items$item$offsetHei2 = (_items$item4 = items.item(index)) === null || _items$item4 === void 0 ? void 0 : _items$item4.offsetHeight) !== null && _items$item$offsetHei2 !== void 0 ? _items$item$offsetHei2 : 0;
75
- scrollStart = scrollEl.scrollTop;
53
+ var _items$item$offsetWid, _items$item;
54
+ position += (_items$item$offsetWid = (_items$item = items.item(i)) === null || _items$item === void 0 ? void 0 : _items$item.offsetWidth) !== null && _items$item$offsetWid !== void 0 ? _items$item$offsetWid : 0;
76
55
  }
56
+ var carouselSize = scrollEl.offsetWidth;
57
+ var itemSize = (_items$item$offsetWid2 = (_items$item2 = items.item(index)) === null || _items$item2 === void 0 ? void 0 : _items$item2.offsetWidth) !== null && _items$item$offsetWid2 !== void 0 ? _items$item$offsetWid2 : 0;
58
+ var scrollStart = scrollEl.scrollLeft;
77
59
  return positionModByScrollAlign({
78
60
  scrollAlign: scrollAlign,
79
61
  position: position,
80
62
  carouselSize: carouselSize,
81
63
  itemSize: itemSize,
82
64
  offset: offset,
83
- scrollStart: scrollStart,
84
- axis: axis
65
+ scrollStart: scrollStart
85
66
  });
86
67
  };
87
68
  var DEFAULT_DURATION = 300;
@@ -135,11 +116,10 @@ export var animatedScrollToX = function animatedScrollToX(elem, pos) {
135
116
  export var scrollToPos = function scrollToPos(_ref3) {
136
117
  var scrollEl = _ref3.scrollEl,
137
118
  pos = _ref3.pos,
138
- axis = _ref3.axis,
139
119
  animated = _ref3.animated,
140
120
  duration = _ref3.duration,
141
121
  timingFunction = _ref3.timingFunction;
142
- if (axis === 'x' && Math.abs(pos - scrollEl.scrollLeft) > 1) {
122
+ if (Math.abs(pos - scrollEl.scrollLeft) > 1) {
143
123
  if (animated) {
144
124
  animatedScrollToX(scrollEl, pos, duration, timingFunction);
145
125
  } else {
@@ -327,7 +307,7 @@ export var useCarousel = function useCarousel(_ref4) {
327
307
  }
328
308
  }
329
309
  }, throttleMs);
330
- }, [axis, debouncedOnIndexChange, detectActive, detectThreshold, scrollAlign, throttleMs]);
310
+ }, [debouncedOnIndexChange, detectActive, detectThreshold, scrollAlign, throttleMs]);
331
311
 
332
312
  /**
333
313
  * Прокрутка до нужной позиции индекса.
@@ -341,21 +321,19 @@ export var useCarousel = function useCarousel(_ref4) {
341
321
  pos: getCalculatedPos({
342
322
  scrollEl: scrollEl,
343
323
  items: items,
344
- axis: axis,
345
324
  index: i,
346
325
  offset: offset.current,
347
326
  scrollAlign: scrollAlign
348
- }),
349
- axis: axis
327
+ })
350
328
  });
351
329
  prevIndex.current = i;
352
330
  }
353
- }, [axis, scrollAlign]);
331
+ }, [scrollAlign]);
354
332
  useEffect(function () {
355
333
  if (scrollRef.current && trackRef.current) {
356
- offset.current = getCalculatedOffset(scrollRef.current, trackRef.current, axis);
334
+ offset.current = getCalculatedOffset(scrollRef.current, trackRef.current);
357
335
  }
358
- }, [axis]);
336
+ }, []);
359
337
 
360
338
  /**
361
339
  * Операции на маунте/анмаунте компонента.
@@ -373,27 +351,6 @@ export var useCarousel = function useCarousel(_ref4) {
373
351
  };
374
352
  }, [throttledDetectActiveItem]);
375
353
 
376
- /**
377
- * Нужно вызвать только при первом рендере
378
- */
379
- // useEffect(() => {
380
- // requestAnimationFrame(() => {
381
- // /**
382
- // * Прокрутка до начального индекса.
383
- // */
384
- // toIndex(index);
385
- //
386
- // /**
387
- // * Если на момент запуска карусель уже находится на нужной позиции,
388
- // * событие скролла не произойдет, не сработает и определение центра,
389
- // * необходимо вызвать его вручную.
390
- // */
391
- // throttledDetectActiveItem();
392
- // });
393
- //
394
- // // eslint-disable-next-line react-hooks/exhaustive-deps
395
- // }, []);
396
-
397
354
  /**
398
355
  * Прокрутка до нужной позиции индекса, если индекс изменился.
399
356
  */
@@ -1,2 +1 @@
1
- export * from "./Item/Item";
2
1
  export * from "./Dots/Dots";
@@ -6,7 +6,7 @@ import React from 'react';
6
6
  import styled from 'styled-components';
7
7
  var StyledItem = /*#__PURE__*/styled.div.withConfig({
8
8
  componentId: "plasma-new-hope__sc-1b1k2uh-0"
9
- })(["scroll-snap-align:", ";scroll-snap-stop:", ";"], function (_ref) {
9
+ })(["scroll-snap-align:", ";scroll-snap-stop:", ";padding:0 var(--temporary-carousel-padding);"], function (_ref) {
10
10
  var scrollSnapAlign = _ref.scrollSnapAlign;
11
11
  return scrollSnapAlign || 'none';
12
12
  }, function (_ref2) {
@@ -4,4 +4,4 @@ export { CarouselItem } from "./CarouselOld/CarouselItem";
4
4
 
5
5
  // New Carousel
6
6
  export { carouselNewConfig, carouselNewRoot } from "./CarouselNew/Carousel";
7
- export { tokens as carouselTokens } from "./CarouselNew/Carousel.tokens";
7
+ export { tokens as carouselNewTokens } from "./CarouselNew/Carousel.tokens";
@@ -1,9 +1,9 @@
1
1
  import { css } from 'styled-components';
2
- import { carouselTokens as tokens } from "../../../../components/Carousel";
2
+ import { carouselNewTokens as tokens } from "../../../../components/Carousel";
3
3
  export var config = {
4
4
  defaults: {
5
5
  view: 'default',
6
- size: 'm'
6
+ size: 's'
7
7
  },
8
8
  variations: {
9
9
  view: {
@@ -12,6 +12,7 @@ import { Carousel, CarouselItem } from './Carousel';
12
12
  type StoryCarouselProps = ComponentProps<typeof Carousel> & {
13
13
  slides: number;
14
14
  visibleDots: number;
15
+ paginationDisabled: boolean;
15
16
  paginationCentered: boolean;
16
17
  };
17
18
 
@@ -35,40 +36,47 @@ const meta: Meta<StoryCarouselProps> = {
35
36
  },
36
37
  },
37
38
  align: {
38
- options: ['start', 'center', 'end'],
39
+ options: ['start', 'center', 'end', 'activeDirection'],
39
40
  control: {
40
41
  type: 'inline-radio',
41
42
  },
42
43
  },
43
- isDragScrollDisabled: {
44
- control: 'boolean',
45
- },
46
44
  slides: {
47
45
  control: 'number',
48
46
  },
49
47
  visibleDots: {
50
48
  control: 'number',
51
49
  },
52
- paginationCentered: {
50
+ controlArrowsDisabled: {
53
51
  control: 'boolean',
54
52
  },
55
- gap: {
56
- control: 'text',
53
+ paginationDisabled: {
54
+ control: 'boolean',
55
+ },
56
+ paginationCentered: {
57
+ control: 'boolean',
57
58
  },
58
59
  },
59
60
  args: {
60
61
  view: 'default',
61
62
  size: 's',
62
63
  align: 'center',
63
- isDragScrollDisabled: false,
64
- visibleDots: 6,
65
64
  slides: 10,
65
+ controlArrowsDisabled: false,
66
+ paginationDisabled: false,
66
67
  paginationCentered: false,
67
- gap: '20px',
68
68
  },
69
69
  parameters: {
70
70
  controls: {
71
- include: ['align', 'isDragScrollDisabled', 'visibleDots', 'slides', 'paginationCentered', 'gap'],
71
+ include: [
72
+ 'align',
73
+ 'visibleDots',
74
+ 'slides',
75
+ 'controlArrowsDisabled',
76
+ 'paginationDisabled',
77
+ 'paginationCentered',
78
+ 'gap',
79
+ ],
72
80
  },
73
81
  },
74
82
  };
@@ -81,7 +89,7 @@ const StyledCard = styled.div`
81
89
  justify-content: center;
82
90
  position: relative;
83
91
  border-radius: 8px;
84
- width: 500px;
92
+ width: 400px;
85
93
  height: 370px;
86
94
  background-color: #add8e6;
87
95
  font-size: 30px;
@@ -91,9 +99,8 @@ const StoryDefault = ({
91
99
  align,
92
100
  visibleDots,
93
101
  slides,
102
+ paginationDisabled,
94
103
  paginationCentered,
95
- isDragScrollDisabled,
96
- gap,
97
104
  ...rest
98
105
  }: StoryCarouselProps) => {
99
106
  const items = Array(slides)
@@ -109,9 +116,8 @@ const StoryDefault = ({
109
116
  <Carousel
110
117
  detectActive
111
118
  scrollAlign={align}
112
- isDragScrollDisabled={isDragScrollDisabled}
113
- gap={gap}
114
119
  paginationOptions={{
120
+ disabled: paginationDisabled,
115
121
  visibleDots,
116
122
  centered: paginationCentered,
117
123
  }}
@@ -1,4 +1,16 @@
1
+ import { css } from 'styled-components';
2
+ import { carouselNewTokens as tokens } from "../../../../components/Carousel";
1
3
  export var config = {
2
- defaults: {},
3
- variations: {}
4
+ defaults: {
5
+ view: 'default',
6
+ size: 's'
7
+ },
8
+ variations: {
9
+ view: {
10
+ "default": /*#__PURE__*/css(["", ":var(--surface-transparent-tertiary);", ":var(--surface-solid-default);"], tokens.paginationDotBackground, tokens.paginationDotActiveBackground)
11
+ },
12
+ size: {
13
+ s: /*#__PURE__*/css([""])
14
+ }
15
+ }
4
16
  };
@@ -1,6 +1,6 @@
1
- import { carouselConfig, CarouselItem } from "../../../../components/Carousel";
1
+ import { carouselNewConfig, CarouselItem } from "../../../../components/Carousel";
2
2
  import { component, mergeConfig } from "../../../../engines";
3
3
  import { config } from "./Carousel.config";
4
- export var mergedConfig = /*#__PURE__*/mergeConfig(carouselConfig, config);
4
+ export var mergedConfig = /*#__PURE__*/mergeConfig(carouselNewConfig, config);
5
5
  export var Carousel = /*#__PURE__*/component(mergedConfig);
6
6
  export { CarouselItem };
@@ -2,76 +2,136 @@ import * as React from 'react';
2
2
  import type { ComponentProps } from 'react';
3
3
  import type { Meta, StoryObj } from '@storybook/react';
4
4
  import styled from 'styled-components';
5
+ import { getConfigVariations } from '@salutejs/plasma-sb-utils';
5
6
 
6
7
  import { WithTheme } from '../../../_helpers';
7
8
 
9
+ import { config } from './Carousel.config';
8
10
  import { Carousel, CarouselItem } from './Carousel';
9
11
 
10
- type StoryCarouselProps = ComponentProps<typeof Carousel>;
12
+ type StoryCarouselProps = ComponentProps<typeof Carousel> & {
13
+ slides: number;
14
+ visibleDots: number;
15
+ paginationDisabled: boolean;
16
+ paginationCentered: boolean;
17
+ };
18
+
19
+ const { views, sizes } = getConfigVariations(config);
11
20
 
12
21
  const meta: Meta<StoryCarouselProps> = {
13
22
  title: 'web/Navigation/Carousel',
14
23
  component: Carousel,
15
24
  decorators: [WithTheme],
16
25
  argTypes: {
26
+ view: {
27
+ options: views,
28
+ control: {
29
+ type: 'select',
30
+ },
31
+ },
32
+ size: {
33
+ options: sizes,
34
+ control: {
35
+ type: 'inline-radio',
36
+ },
37
+ },
17
38
  align: {
18
- options: ['center', 'start', 'end'],
39
+ options: ['start', 'center', 'end', 'activeDirection'],
19
40
  control: {
20
41
  type: 'inline-radio',
21
42
  },
22
43
  },
23
- isDragScrollDisabled: {
44
+ slides: {
45
+ control: 'number',
46
+ },
47
+ visibleDots: {
48
+ control: 'number',
49
+ },
50
+ controlArrowsDisabled: {
51
+ control: 'boolean',
52
+ },
53
+ paginationDisabled: {
54
+ control: 'boolean',
55
+ },
56
+ paginationCentered: {
24
57
  control: 'boolean',
25
58
  },
26
59
  },
27
60
  args: {
61
+ view: 'default',
62
+ size: 's',
28
63
  align: 'center',
29
- isDragScrollDisabled: false,
64
+ visibleDots: 6,
65
+ slides: 10,
66
+ controlArrowsDisabled: false,
67
+ paginationDisabled: false,
68
+ paginationCentered: false,
30
69
  },
31
70
  parameters: {
32
71
  controls: {
33
- include: ['align', 'isDragScrollDisabled'],
72
+ include: [
73
+ 'align',
74
+ 'visibleDots',
75
+ 'slides',
76
+ 'controlArrowsDisabled',
77
+ 'paginationDisabled',
78
+ 'paginationCentered',
79
+ 'gap',
80
+ ],
34
81
  },
35
82
  },
36
83
  };
37
84
 
38
85
  export default meta;
39
86
 
40
- const items = Array(25)
41
- .fill({
42
- title: 'Заголовок',
43
- })
44
- .map(({ title }, i) => ({
45
- id: i,
46
- title: `${title} ${i}`,
47
- }));
48
-
49
87
  const StyledCard = styled.div`
88
+ display: flex;
89
+ align-items: center;
90
+ justify-content: center;
50
91
  position: relative;
51
92
  border-radius: 8px;
52
- width: 350px;
53
- height: 50px;
54
- padding: 8px;
93
+ width: 400px;
94
+ height: 370px;
55
95
  background-color: #add8e6;
96
+ font-size: 30px;
56
97
  `;
57
98
 
58
- const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
59
- const [index, setIndex] = React.useState(0);
99
+ const StoryDefault = ({
100
+ align,
101
+ visibleDots,
102
+ slides,
103
+ paginationDisabled,
104
+ paginationCentered,
105
+ ...rest
106
+ }: StoryCarouselProps) => {
107
+ const items = Array(slides)
108
+ .fill(1)
109
+ .map((_, i) => ({
110
+ id: i,
111
+ title: i,
112
+ }));
60
113
 
61
114
  return (
62
- <Carousel
63
- index={index}
64
- detectActive
65
- onIndexChange={setIndex}
66
- scrollAlign={align}
67
- isDragScrollDisabled={isDragScrollDisabled}
68
- >
69
- {items.map((item, i) => (
70
- <CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
71
- <StyledCard>{item.title}</StyledCard>
72
- </CarouselItem>
73
- ))}
74
- </Carousel>
115
+ <>
116
+ <div style={{ width: '600px' }}>
117
+ <Carousel
118
+ detectActive
119
+ scrollAlign={align}
120
+ paginationOptions={{
121
+ disabled: paginationDisabled,
122
+ visibleDots,
123
+ centered: paginationCentered,
124
+ }}
125
+ {...rest}
126
+ >
127
+ {items.map((item, i) => (
128
+ <CarouselItem key={i} scrollSnapAlign={align}>
129
+ <StyledCard>{item.title}</StyledCard>
130
+ </CarouselItem>
131
+ ))}
132
+ </Carousel>
133
+ </div>
134
+ </>
75
135
  );
76
136
  };
77
137
 
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAyC,MAAM,OAAO,CAAC;AAO9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAKpD;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,SAAS,CAAC,cAAc,EAAE,gBAAgB,CAAC,4FA8E5E,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAhFQ,SAAS,CAAC,cAAc,EAAE,gBAAgB,CAAC;;;;;;;;;;;;;;CAiGhF,CAAC"}
1
+ {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAyC,MAAM,OAAO,CAAC;AAO9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,SAAS,CAAC,cAAc,EAAE,gBAAgB,CAAC,4FAqE5E,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAvEQ,SAAS,CAAC,cAAc,EAAE,gBAAgB,CAAC;;;;;;;;;;;;;;CAwFhF,CAAC"}
@@ -1,4 +1,3 @@
1
- import { CSSProperties } from 'react';
2
1
  export declare const IconButtonComponent: import("react").FunctionComponent<import("../../../engines/types").PropsType<import("../../../engines/types").Variants> & ((Omit<import("react").ButtonHTMLAttributes<HTMLElement>, "value"> & Omit<import("react").AnchorHTMLAttributes<HTMLElement>, "type"> & import("../../..").AsProps & {
3
2
  text?: string;
4
3
  contentLeft?: import("react").ReactNode;
@@ -44,9 +43,7 @@ export declare const IconButtonComponent: import("react").FunctionComponent<impo
44
43
  } & import("react").RefAttributes<HTMLButtonElement>))>;
45
44
  export declare const base: import("@linaria/core").LinariaClassName;
46
45
  export declare const CarouselWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
47
- export declare const CarouselTrack: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
48
- gap?: CSSProperties["gap"];
49
- }>;
46
+ export declare const CarouselTrack: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
50
47
  export declare const IconButton: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../../engines/types").PropsType<import("../../../engines/types").Variants> & ((Omit<import("react").ButtonHTMLAttributes<HTMLElement>, "value"> & Omit<import("react").AnchorHTMLAttributes<HTMLElement>, "type"> & import("../../..").AsProps & {
51
48
  text?: string;
52
49
  contentLeft?: import("react").ReactNode;
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAA0B,CAAC;AAE3D,eAAO,MAAM,IAAI,0CAEhB,CAAC;AAEF,eAAO,MAAM,eAAe,qKAoB3B,CAAC;AAEF,eAAO,MAAM,aAAa;UAAsB,aAAa,CAAC,KAAK,CAAC;EAInE,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAsBtB,CAAC;AAEF,eAAO,MAAM,eAAe,qKAE3B,CAAC"}
1
+ {"version":3,"file":"Carousel.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAA0B,CAAC;AAE3D,eAAO,MAAM,IAAI,0CAEhB,CAAC;AAEF,eAAO,MAAM,eAAe,qKAuB3B,CAAC;AAEF,eAAO,MAAM,aAAa,qKAGzB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAsBtB,CAAC;AAEF,eAAO,MAAM,eAAe,qKAE3B,CAAC"}
@@ -1,38 +1,36 @@
1
- import type { HTMLAttributes, CSSProperties } from 'react';
2
- import { AsProps } from '../../../../src/types';
3
- import type { HTMLAttributesWithoutOnChange } from '../../../engines/types';
4
- export type SnapType = 'mandatory' | 'proximity' | 'none';
5
- export type SnapAlign = 'start' | 'center' | 'end';
6
- export type SnapStop = 'normal' | 'always';
7
- export type ScrollAxis = 'x' | 'y';
1
+ import type { HTMLAttributes } from 'react';
8
2
  export type ScrollAlign = 'start' | 'center' | 'end' | 'activeDirection';
9
3
  export interface CarouselNewProps extends HTMLAttributes<HTMLDivElement> {
10
4
  /**
11
5
  * Центрирование активного элемента при скролле.
6
+ * @default center
12
7
  */
13
8
  scrollAlign?: ScrollAlign;
14
9
  /**
15
- * Сменить WAI-ARIA Role списка.
10
+ * Опции управления пагинацией.
16
11
  */
17
- listRole?: string;
18
- /**
19
- * Сменить WAI-ARIA Label списка.
20
- */
21
- listAriaLabel?: string;
22
- /**
23
- * Внутренний отступ между слайдами.
24
- */
25
- gap?: CSSProperties['gap'];
26
12
  paginationOptions?: {
13
+ /**
14
+ * Включение/выключение пагинации.
15
+ * @default false
16
+ */
27
17
  disabled?: boolean;
18
+ /**
19
+ * Количество видимых точек пагинации.
20
+ * @default 10
21
+ */
28
22
  visibleDots?: number;
23
+ /**
24
+ * Центрирование активной точки.
25
+ * @default false
26
+ */
29
27
  centered?: boolean;
30
28
  };
31
29
  /**
32
- * Выключает драг скролл (только для десктопа).
30
+ * Включение/выключение стрелок управления слайдами.
33
31
  * @default false
34
32
  */
35
- isDragScrollDisabled?: boolean;
33
+ controlArrowsDisabled?: boolean;
36
34
  /**
37
35
  * Размер контрола.
38
36
  */
@@ -43,53 +41,7 @@ export interface CarouselNewProps extends HTMLAttributes<HTMLDivElement> {
43
41
  */
44
42
  view?: string;
45
43
  }
46
- export type CarouselItemProps = {
47
- scrollSnapAlign?: SnapAlign;
48
- scrollSnapStop?: SnapStop;
49
- } & AsProps & HTMLAttributes<HTMLDivElement>;
50
- interface CustomPaginationDots {
51
- /**
52
- * Размер контрола.
53
- */
54
- size?: string;
55
- /**
56
- * Вид контрола.
57
- * @default default
58
- */
59
- view?: string;
60
- /**
61
- * Отображение активного элемента
62
- * @default 'dot'
63
- */
64
- activeElementView?: 'dot' | 'line';
65
- /**
66
- * Ориентация элементов
67
- */
68
- orientation?: 'horizontal' | 'vertical';
69
- /**
70
- * Центрирует элемент по горизонтали на всю ширину контейнера
71
- * @default false
72
- */
73
- centered?: boolean;
74
- /**
75
- * Выбранная страница
76
- */
77
- value?: number;
78
- /**
79
- * Количество страниц
80
- */
81
- count?: number;
82
- /**
83
- * Максимальное количество видимых точек, для условий count > visibleCount
84
- */
85
- visibleCount?: number;
86
- /**
87
- * Обработчик клика по точке
88
- */
89
- onChange?: (index: number) => void;
90
- }
91
- export interface PaginationDotsProps extends HTMLAttributesWithoutOnChange<HTMLDivElement>, CustomPaginationDots {
92
- }
44
+ export type CarouselItemProps = HTMLAttributes<HTMLDivElement>;
93
45
  export interface DotsProps {
94
46
  /**
95
47
  * Выбранная страница
@@ -118,5 +70,4 @@ export interface DotsProps {
118
70
  */
119
71
  centered?: boolean;
120
72
  }
121
- export {};
122
73
  //# sourceMappingURL=Carousel.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AAE5E,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAC1D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AACnD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AACnC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,iBAAiB,CAAC;AAEzE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3B,iBAAiB,CAAC,EAAE;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;IACF;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;CAC7B,GAAG,OAAO,GACP,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,UAAU,oBAAoB;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAoB,SAAQ,6BAA6B,CAAC,cAAc,CAAC,EAAE,oBAAoB;CAAG;AAEnH,MAAM,WAAW,SAAS;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB"}
1
+ {"version":3,"file":"Carousel.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,iBAAiB,CAAC;AAEzE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE;QAChB;;;WAGG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;WAGG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB;;;WAGG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;IACF;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,MAAM,WAAW,SAAS;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB"}