@faststore/ui 2.0.122-alpha.0 → 2.0.128-alpha.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 (44) hide show
  1. package/dist/index.d.ts +0 -6
  2. package/dist/index.js +0 -4
  3. package/dist/index.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/components/molecules/Carousel/styles.scss +83 -57
  6. package/src/components/molecules/NavbarLinks/styles.scss +1 -1
  7. package/src/components/organisms/ProductShelf/styles.scss +2 -3
  8. package/src/index.ts +0 -16
  9. package/dist/components/molecules/Bullets/Bullets.d.ts +0 -35
  10. package/dist/components/molecules/Bullets/Bullets.js +0 -12
  11. package/dist/components/molecules/Bullets/Bullets.js.map +0 -1
  12. package/dist/components/molecules/Bullets/index.d.ts +0 -2
  13. package/dist/components/molecules/Bullets/index.js +0 -2
  14. package/dist/components/molecules/Bullets/index.js.map +0 -1
  15. package/dist/components/molecules/Carousel/Arrows.d.ts +0 -12
  16. package/dist/components/molecules/Carousel/Arrows.js +0 -6
  17. package/dist/components/molecules/Carousel/Arrows.js.map +0 -1
  18. package/dist/components/molecules/Carousel/Carousel.d.ts +0 -54
  19. package/dist/components/molecules/Carousel/Carousel.js +0 -183
  20. package/dist/components/molecules/Carousel/Carousel.js.map +0 -1
  21. package/dist/components/molecules/Carousel/CarouselItem.d.ts +0 -11
  22. package/dist/components/molecules/Carousel/CarouselItem.js +0 -18
  23. package/dist/components/molecules/Carousel/CarouselItem.js.map +0 -1
  24. package/dist/components/molecules/Carousel/hooks/useSlideVisibility.d.ts +0 -9
  25. package/dist/components/molecules/Carousel/hooks/useSlideVisibility.js +0 -29
  26. package/dist/components/molecules/Carousel/hooks/useSlideVisibility.js.map +0 -1
  27. package/dist/components/molecules/Carousel/index.d.ts +0 -2
  28. package/dist/components/molecules/Carousel/index.js +0 -3
  29. package/dist/components/molecules/Carousel/index.js.map +0 -1
  30. package/dist/hooks/useSlider/index.d.ts +0 -2
  31. package/dist/hooks/useSlider/index.js +0 -3
  32. package/dist/hooks/useSlider/index.js.map +0 -1
  33. package/dist/hooks/useSlider/useSlider.d.ts +0 -64
  34. package/dist/hooks/useSlider/useSlider.js +0 -103
  35. package/dist/hooks/useSlider/useSlider.js.map +0 -1
  36. package/src/components/molecules/Bullets/Bullets.tsx +0 -88
  37. package/src/components/molecules/Bullets/index.ts +0 -2
  38. package/src/components/molecules/Carousel/Arrows.tsx +0 -58
  39. package/src/components/molecules/Carousel/Carousel.tsx +0 -387
  40. package/src/components/molecules/Carousel/CarouselItem.tsx +0 -54
  41. package/src/components/molecules/Carousel/hooks/useSlideVisibility.ts +0 -59
  42. package/src/components/molecules/Carousel/index.ts +0 -2
  43. package/src/hooks/useSlider/index.ts +0 -2
  44. package/src/hooks/useSlider/useSlider.ts +0 -209
@@ -1,183 +0,0 @@
1
- import React, { useMemo, useRef } from 'react';
2
- import { RightArrowIcon, LeftArrowIcon } from './Arrows';
3
- import CarouselItem from './CarouselItem';
4
- import useSlider from '../../../hooks/useSlider/useSlider';
5
- import Bullets from '../Bullets';
6
- import { IconButton } from '../../../';
7
- const createTransformValues = (infinite, totalItems) => {
8
- const transformMap = {};
9
- const slideWidth = 100 / totalItems;
10
- for (let idx = 0; idx < totalItems; ++idx) {
11
- const currIdx = infinite ? idx - 1 : idx;
12
- const transformValue = -(slideWidth * idx);
13
- transformMap[currIdx] = transformValue;
14
- }
15
- return transformMap;
16
- };
17
- function Carousel({ infiniteMode = true, controls = 'complete', testId = 'store-carousel', transition = {
18
- duration: 400,
19
- property: 'transform',
20
- }, children, className, id = 'store-carousel', variant = 'slide', itemsPerPage = 1, navigationIcons = undefined, ...swipeableConfigOverrides }) {
21
- const carouselTrackRef = useRef(null);
22
- const isSlideCarousel = variant === 'slide';
23
- const isScrollCarousel = variant === 'scroll';
24
- const childrenArray = React.Children.toArray(children);
25
- const childrenCount = childrenArray.length;
26
- const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount;
27
- const slidingTransition = `${transition.property} ${transition.duration}ms ${transition.timing ?? ''} ${transition.delay ?? ''}`;
28
- const showNavigationArrows = controls === 'complete' || controls === 'navigationArrows';
29
- const showPaginationBullets = controls === 'complete' || controls === 'paginationBullets';
30
- const transformValues = useMemo(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
31
- const { handlers, slide, sliderState, sliderDispatch } = useSlider({
32
- itemsPerPage,
33
- infiniteMode,
34
- totalItems: childrenCount,
35
- shouldSlideOnSwipe: isSlideCarousel,
36
- ...swipeableConfigOverrides,
37
- });
38
- const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
39
- const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
40
- const slides = preRenderedSlides.concat(children ?? [], postRenderedSlides);
41
- const slideCarouselTrackStyle = useMemo(() => ({
42
- display: 'flex',
43
- width: `${numberOfSlides * 100}%`,
44
- transition: sliderState.sliding ? slidingTransition : undefined,
45
- transform: `translate3d(${transformValues[sliderState.currentPage]}%, 0, 0)`,
46
- }), [
47
- numberOfSlides,
48
- transformValues,
49
- slidingTransition,
50
- sliderState.sliding,
51
- sliderState.currentPage,
52
- ]);
53
- const scrollCarouselTrackStyle = useMemo(() => ({
54
- width: '100%',
55
- display: 'block',
56
- overflowX: 'scroll',
57
- whiteSpace: 'nowrap',
58
- }), []);
59
- const carouselTrackStyle = (isSlideCarousel && slideCarouselTrackStyle) ||
60
- (isScrollCarousel && scrollCarouselTrackStyle);
61
- const slidePrevious = () => {
62
- if (sliderState.sliding ||
63
- (!infiniteMode && sliderState.currentPage === 0)) {
64
- return;
65
- }
66
- slide('previous', sliderDispatch);
67
- };
68
- const slideNext = () => {
69
- if (sliderState.sliding ||
70
- (!infiniteMode && sliderState.currentPage === childrenCount - 1)) {
71
- return;
72
- }
73
- slide('next', sliderDispatch);
74
- };
75
- const onScrollTrack = (event) => {
76
- if (isSlideCarousel || itemsPerPage > 1) {
77
- return;
78
- }
79
- const itemWidth = Number(event.currentTarget.firstElementChild?.scrollWidth);
80
- const scrollOffset = event.currentTarget?.scrollLeft;
81
- const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor;
82
- const page = formatter(scrollOffset / itemWidth);
83
- slide(page, sliderDispatch);
84
- };
85
- const onTransitionTrackEnd = () => {
86
- sliderDispatch({
87
- type: 'STOP_SLIDE',
88
- });
89
- if (infiniteMode && sliderState.currentItem >= childrenCount) {
90
- sliderDispatch({
91
- type: 'GO_TO_PAGE',
92
- payload: {
93
- pageIndex: 0,
94
- shouldSlide: false,
95
- },
96
- });
97
- }
98
- if (infiniteMode && sliderState.currentItem < 0) {
99
- sliderDispatch({
100
- type: 'GO_TO_PAGE',
101
- payload: {
102
- pageIndex: sliderState.totalPages - 1,
103
- shouldSlide: false,
104
- },
105
- });
106
- }
107
- };
108
- const onScrollPagination = async (index, slideDirection) => {
109
- if (slideDirection === 'previous' && sliderState.currentPage === 0) {
110
- return;
111
- }
112
- if (slideDirection === 'next' &&
113
- sliderState.currentPage === sliderState.totalPages - 1) {
114
- return;
115
- }
116
- let scrollOffset;
117
- const carouselItemsWidth = Number(carouselTrackRef.current?.firstElementChild?.clientWidth);
118
- if (itemsPerPage > 1) {
119
- scrollOffset = index * carouselItemsWidth * itemsPerPage;
120
- }
121
- else {
122
- scrollOffset = index * carouselItemsWidth - carouselItemsWidth * 0.125;
123
- }
124
- carouselTrackRef.current?.scrollTo({
125
- left: scrollOffset,
126
- behavior: 'smooth',
127
- });
128
- slide(index, sliderDispatch);
129
- };
130
- // accessible behavior for tablist
131
- const handleBulletsKeyDown = (event) => {
132
- switch (event.key) {
133
- case 'ArrowLeft': {
134
- isSlideCarousel && slidePrevious();
135
- isScrollCarousel &&
136
- onScrollPagination(sliderState.currentPage - 1, 'previous');
137
- break;
138
- }
139
- case 'ArrowRight': {
140
- isSlideCarousel && slideNext();
141
- isScrollCarousel &&
142
- onScrollPagination(sliderState.currentPage + 1, 'next');
143
- break;
144
- }
145
- case 'Home': {
146
- slide(0, sliderDispatch);
147
- break;
148
- }
149
- case 'End': {
150
- slide(childrenCount - 1, sliderDispatch);
151
- break;
152
- }
153
- default:
154
- }
155
- };
156
- return (React.createElement("section", { id: id, "data-fs-carousel": true, className: className, "data-testid": testId, "aria-label": "carousel", "aria-roledescription": "carousel" },
157
- React.createElement("div", { "data-fs-carousel-track-container": true, style: {
158
- width: '100%',
159
- overflow: 'hidden',
160
- display: isScrollCarousel ? 'block' : undefined,
161
- }, ...handlers },
162
- React.createElement("ul", { "aria-live": "polite", ref: carouselTrackRef, style: carouselTrackStyle, "data-fs-carousel-track": true, onScroll: onScrollTrack, onTransitionEnd: onTransitionTrackEnd }, slides.map((currentSlide, idx) => (React.createElement(CarouselItem, { index: idx, key: String(idx), state: sliderState, totalItems: childrenCount, infiniteMode: infiniteMode, isScrollCarousel: isScrollCarousel }, currentSlide))))),
163
- showNavigationArrows && (React.createElement("div", { "data-fs-carousel-controls": true },
164
- React.createElement(IconButton, { "data-fs-carousel-control": "left", "aria-controls": id, "aria-label": "previous", icon: navigationIcons?.left ?? React.createElement(LeftArrowIcon, null), onClick: () => {
165
- isSlideCarousel && slidePrevious();
166
- isScrollCarousel &&
167
- onScrollPagination(sliderState.currentPage - 1, 'previous');
168
- } }),
169
- React.createElement(IconButton, { "data-fs-carousel-control": "right", "aria-controls": id, "aria-label": "next", icon: navigationIcons?.right ?? React.createElement(RightArrowIcon, null), onClick: () => {
170
- isSlideCarousel && slideNext();
171
- isScrollCarousel &&
172
- onScrollPagination(sliderState.currentPage + 1, 'next');
173
- } }))),
174
- showPaginationBullets && (React.createElement("div", { "data-fs-carousel-bullets": true },
175
- React.createElement(Bullets, { tabIndex: 0, activeBullet: sliderState.currentPage, totalQuantity: Math.ceil(childrenCount / sliderState.itemsPerPage), onKeyDown: handleBulletsKeyDown, onClick: async (_, idx) => {
176
- isSlideCarousel &&
177
- !sliderState.sliding &&
178
- slide(idx, sliderDispatch);
179
- isScrollCarousel && onScrollPagination(idx);
180
- }, onFocus: (event) => event.currentTarget.focus(), ariaControlsGenerator: (idx) => `carousel-item-${idx}` })))));
181
- }
182
- export default Carousel;
183
- //# sourceMappingURL=Carousel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../../src/components/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
@@ -1,11 +0,0 @@
1
- import type { PropsWithChildren, HTMLAttributes } from 'react';
2
- import type { SliderState } from '../../../hooks/useSlider/useSlider';
3
- interface CarouselItemProps extends HTMLAttributes<HTMLLIElement> {
4
- index: number;
5
- totalItems: number;
6
- state: SliderState;
7
- infiniteMode: boolean;
8
- isScrollCarousel: boolean;
9
- }
10
- declare function CarouselItem({ index, state, children, totalItems, infiniteMode, isScrollCarousel, }: PropsWithChildren<CarouselItemProps>): JSX.Element;
11
- export default CarouselItem;
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import useSlideVisibility from './hooks/useSlideVisibility';
3
- function CarouselItem({ index, state, children, totalItems, infiniteMode, isScrollCarousel, }) {
4
- const { isItemVisible, shouldRenderItem } = useSlideVisibility({
5
- totalItems,
6
- currentSlide: state.currentItem,
7
- itemsPerPage: state.itemsPerPage,
8
- });
9
- const style = (!isScrollCarousel && { width: '100%' }) ||
10
- (isScrollCarousel && {
11
- maxWidth: '80%',
12
- display: 'inline-block',
13
- });
14
- const shouldDisplayItem = isScrollCarousel || shouldRenderItem(index - Number(infiniteMode));
15
- return (React.createElement("li", { style: style, "data-fs-carousel-item": true, "aria-roledescription": "slide", id: `carousel-item-${index}`, "data-fs-carousel-item-visible": isItemVisible(index - Number(infiniteMode)) || undefined }, shouldDisplayItem ? children : null));
16
- }
17
- export default CarouselItem;
18
- //# sourceMappingURL=CarouselItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CarouselItem.js","sourceRoot":"","sources":["../../../../src/components/molecules/Carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,kBAAkB,MAAM,4BAA4B,CAAA;AAU3D,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,gBAAgB,GACqB;IACrC,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,CAAC;QAC7D,UAAU;QACV,YAAY,EAAE,KAAK,CAAC,WAAW;QAC/B,YAAY,EAAE,KAAK,CAAC,YAAY;KACjC,CAAC,CAAA;IAEF,MAAM,KAAK,GACR,CAAC,CAAC,gBAAgB,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAmB;QAC1D,CAAC,gBAAgB,IAAI;YACpB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,cAAc;SACxB,CAAmB,CAAA;IAEtB,MAAM,iBAAiB,GACrB,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAA;IAEpE,OAAO,CACL,4BACE,KAAK,EAAE,KAAK,yDAES,OAAO,EAC5B,EAAE,EAAE,iBAAiB,KAAK,EAAE,mCAE1B,aAAa,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,SAAS,IAGzD,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACjC,CACN,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}
@@ -1,9 +0,0 @@
1
- export interface UseSlideVisibilityArgs {
2
- currentSlide: number;
3
- itemsPerPage: number;
4
- totalItems: number;
5
- }
6
- export default function useSlideVisibility({ currentSlide, itemsPerPage, totalItems, }: UseSlideVisibilityArgs): {
7
- shouldRenderItem: (index: number) => boolean;
8
- isItemVisible: (index: number) => boolean;
9
- };
@@ -1,29 +0,0 @@
1
- import { useRef, useEffect } from 'react';
2
- function isSlideVisible({ itemsPerPage, currentSlide, slideIdx, totalItems, }) {
3
- const isClonedSlide = currentSlide < 0 || currentSlide >= totalItems;
4
- const isVisible = slideIdx >= currentSlide && slideIdx < currentSlide + itemsPerPage;
5
- return isClonedSlide || isVisible;
6
- }
7
- export default function useSlideVisibility({ currentSlide, itemsPerPage, totalItems, }) {
8
- /** Keeps track of slides that have been visualized before.
9
- * We want to keep rendering them because the issue is mostly rendering
10
- * slides that might never be viewed; On the other hand, hiding slides
11
- * that were visible causes visual glitches */
12
- const visitedSlides = useRef(new Set());
13
- useEffect(() => {
14
- for (let i = 0; i < itemsPerPage; i++) {
15
- visitedSlides.current.add(currentSlide + i);
16
- }
17
- }, [currentSlide, itemsPerPage]);
18
- const isItemVisible = (index) => isSlideVisible({
19
- slideIdx: index,
20
- currentSlide,
21
- itemsPerPage,
22
- totalItems,
23
- });
24
- const shouldRenderItem = (index) => {
25
- return visitedSlides.current.has(index) || isItemVisible(index);
26
- };
27
- return { shouldRenderItem, isItemVisible };
28
- }
29
- //# sourceMappingURL=useSlideVisibility.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSlideVisibility.js","sourceRoot":"","sources":["../../../../../src/components/molecules/Carousel/hooks/useSlideVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAezC,SAAS,cAAc,CAAC,EACtB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,UAAU,GACS;IACnB,MAAM,aAAa,GAAG,YAAY,GAAG,CAAC,IAAI,YAAY,IAAI,UAAU,CAAA;IACpE,MAAM,SAAS,GACb,QAAQ,IAAI,YAAY,IAAI,QAAQ,GAAG,YAAY,GAAG,YAAY,CAAA;IAEpE,OAAO,aAAa,IAAI,SAAS,CAAA;AACnC,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,YAAY,EACZ,YAAY,EACZ,UAAU,GACa;IACvB;;;kDAG8C;IAC9C,MAAM,aAAa,GAAG,MAAM,CAAc,IAAI,GAAG,EAAE,CAAC,CAAA;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,EAAE,EAAE;YACrC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA;SAC5C;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAA;IAEhC,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE,CACtC,cAAc,CAAC;QACb,QAAQ,EAAE,KAAK;QACf,YAAY;QACZ,YAAY;QACZ,UAAU;KACX,CAAC,CAAA;IAEJ,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE;QACzC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;IACjE,CAAC,CAAA;IAED,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA;AAC5C,CAAC"}
@@ -1,2 +0,0 @@
1
- export { default } from './Carousel';
2
- export * from './Carousel';
@@ -1,3 +0,0 @@
1
- export { default } from './Carousel';
2
- export * from './Carousel';
3
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/Carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,cAAc,YAAY,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default } from './useSlider';
2
- export * from './useSlider';
@@ -1,3 +0,0 @@
1
- export { default } from './useSlider';
2
- export * from './useSlider';
3
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/useSlider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,cAAc,aAAa,CAAA"}
@@ -1,64 +0,0 @@
1
- import type { Dispatch } from 'react';
2
- import type { SwipeableProps } from 'react-swipeable';
3
- export type SlideDirection = 'next' | 'previous';
4
- interface NextPageAction {
5
- type: 'NEXT_PAGE';
6
- }
7
- interface PreviousPageAction {
8
- type: 'PREVIOUS_PAGE';
9
- }
10
- interface GoToPageAction {
11
- type: 'GO_TO_PAGE';
12
- payload: {
13
- pageIndex: number;
14
- shouldSlide: boolean;
15
- };
16
- }
17
- interface StopSlideAction {
18
- type: 'STOP_SLIDE';
19
- }
20
- export type Action = NextPageAction | PreviousPageAction | StopSlideAction | GoToPageAction;
21
- export type SliderDispatch = Dispatch<Action>;
22
- export interface SliderState {
23
- /**
24
- * The `currentItem` in a Slider with multiple items in a single page is
25
- * always **the one with the lowest index** in the current page.
26
- */
27
- currentItem: number;
28
- /** Currently active page */
29
- currentPage: number;
30
- /**
31
- * Whether or not the Slider is currently sliding. This is useful to
32
- * manipulate the `transition` property in a component.
33
- */
34
- sliding: boolean;
35
- /** The direction in which the Slider is sliding. */
36
- slideDirection: SlideDirection;
37
- /** The total number of unique items in the slider. */
38
- totalItems: number;
39
- /** The number of items in a single page. */
40
- itemsPerPage: number;
41
- /** The total number of pages in the slider. */
42
- totalPages: number;
43
- /** Whether or not the slider is infinite. */
44
- infinite: boolean;
45
- }
46
- export declare const nextPage: (current: number, total: number) => number;
47
- export declare const previousPage: (current: number, total: number) => number;
48
- export interface UseSliderArgs extends SwipeableProps {
49
- /** The total number of unique items in the slider. */
50
- totalItems: number;
51
- /** The number of items in a single slider page. */
52
- itemsPerPage?: number;
53
- /** Whether or not the slider is infinite. */
54
- infiniteMode?: boolean;
55
- /** Whether or not slide after swiping left/right. */
56
- shouldSlideOnSwipe?: boolean;
57
- }
58
- export default function useSlider({ totalItems, itemsPerPage, infiniteMode, shouldSlideOnSwipe, ...swipeableConfigOverrides }: UseSliderArgs): {
59
- handlers: import("react-swipeable").SwipeableHandlers;
60
- slide: (page: number | SlideDirection, dispatch: Dispatch<Action>) => void;
61
- sliderState: SliderState;
62
- sliderDispatch: Dispatch<Action>;
63
- };
64
- export {};
@@ -1,103 +0,0 @@
1
- import { useReducer } from 'react';
2
- import { useSwipeable } from 'react-swipeable';
3
- export const nextPage = (current, total) => (current + 1) % total;
4
- export const previousPage = (current, total) => (total - ((total - current + 1) % total)) % total;
5
- function reducer(state, action) {
6
- switch (action.type) {
7
- case 'NEXT_PAGE': {
8
- // If `state.infinite` is true, we need to take into account an extra
9
- // page in the calculation. This extra page is a clone of the first page.
10
- const adjustedTotalPages = state.infinite
11
- ? state.totalPages + 1
12
- : state.totalPages;
13
- const nextPageIndex = nextPage(state.currentPage, adjustedTotalPages);
14
- const nextItemIndex = (nextPageIndex % adjustedTotalPages) * state.itemsPerPage;
15
- return {
16
- ...state,
17
- sliding: true,
18
- slideDirection: 'next',
19
- currentItem: nextItemIndex,
20
- currentPage: nextPageIndex,
21
- };
22
- }
23
- case 'PREVIOUS_PAGE': {
24
- // If `state.infinite` is true, we need to take into account an extra
25
- // page in the calculation. This extra page is a clone of the first page.
26
- const adjustedTotalPages = state.infinite
27
- ? state.totalPages + 1
28
- : state.totalPages;
29
- // If `state.infinite` is true and we're currently on page 0, we need to
30
- // let the slider go to page -1. This -1 page is a clone of the last page.
31
- const shouldGoToClone = state.infinite && state.currentPage === 0;
32
- const previousPageIndex = shouldGoToClone
33
- ? -1
34
- : previousPage(state.currentPage, state.totalPages);
35
- return {
36
- ...state,
37
- sliding: true,
38
- slideDirection: 'previous',
39
- currentItem: (previousPageIndex % adjustedTotalPages) * state.itemsPerPage,
40
- currentPage: previousPageIndex,
41
- };
42
- }
43
- case 'GO_TO_PAGE': {
44
- if (action.payload.pageIndex === state.currentPage) {
45
- return state;
46
- }
47
- return {
48
- ...state,
49
- sliding: action.payload.shouldSlide,
50
- slideDirection: action.payload.pageIndex > state.currentPage ? 'next' : 'previous',
51
- currentItem: (action.payload.pageIndex % state.totalPages) * state.itemsPerPage,
52
- currentPage: action.payload.pageIndex,
53
- };
54
- }
55
- case 'STOP_SLIDE':
56
- return { ...state, sliding: false };
57
- default:
58
- return state;
59
- }
60
- }
61
- const defaultSliderState = (totalItems, itemsPerPage, infinite) => ({
62
- currentItem: 0,
63
- currentPage: 0,
64
- sliding: false,
65
- slideDirection: 'next',
66
- totalItems,
67
- itemsPerPage,
68
- totalPages: Math.ceil(totalItems / itemsPerPage),
69
- infinite,
70
- });
71
- const slide = (page, dispatch) => {
72
- if (page === 'next') {
73
- dispatch({ type: 'NEXT_PAGE' });
74
- }
75
- if (page === 'previous') {
76
- dispatch({ type: 'PREVIOUS_PAGE' });
77
- }
78
- if (typeof page === 'number') {
79
- dispatch({
80
- type: 'GO_TO_PAGE',
81
- payload: {
82
- pageIndex: page,
83
- shouldSlide: true,
84
- },
85
- });
86
- }
87
- };
88
- export default function useSlider({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, ...swipeableConfigOverrides }) {
89
- const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () => defaultSliderState(totalItems, itemsPerPage, infiniteMode));
90
- const handlers = useSwipeable({
91
- onSwipedRight: () => shouldSlideOnSwipe && slide('previous', sliderDispatch),
92
- onSwipedLeft: () => shouldSlideOnSwipe && slide('next', sliderDispatch),
93
- trackMouse: true,
94
- ...swipeableConfigOverrides,
95
- });
96
- return {
97
- handlers,
98
- slide,
99
- sliderState,
100
- sliderDispatch,
101
- };
102
- }
103
- //# sourceMappingURL=useSlider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../../src/hooks/useSlider/useSlider.ts"],"names":[],"mappings":"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"}
@@ -1,88 +0,0 @@
1
- import type { HTMLAttributes, MouseEvent } from 'react'
2
- import React, { forwardRef, useMemo } from 'react'
3
-
4
- import { Button } from '@faststore/components'
5
-
6
- export interface BulletsProps
7
- extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role'> {
8
- /**
9
- * Number of bullets that should be rendered.
10
- */
11
- totalQuantity: number
12
- /**
13
- * The currently active bullet (zero-indexed).
14
- */
15
- activeBullet: number
16
- /**
17
- * Event handler for clicks on each bullet. The handler will be called with
18
- * the index of the bullet that received the click.
19
- */
20
- onClick: (e: MouseEvent, bulletIdx: number) => void
21
- /**
22
- * ID to find this component in testing tools (e.g.: cypress,
23
- * testing-library, and jest).
24
- */
25
- testId?: string
26
- /**
27
- * Function that should be used to generate the aria-label attribute added
28
- * to each bullet that is inactive. It receives the bullet index as an
29
- * argument so that it can be interpolated in the generated string.
30
- */
31
- ariaLabelGenerator?: (index: number, isActive: boolean) => string
32
- /**
33
- * Function that should be used to generate the aria-controls attribute added
34
- * to each bullet. It receives the bullet index as argument and should return a string.
35
- */
36
- ariaControlsGenerator?: (index: number) => string
37
- }
38
-
39
- const defaultAriaLabel = (idx: number, isActive: boolean) =>
40
- isActive ? 'Current page' : `Go to page ${idx + 1}`
41
-
42
- const Bullets = forwardRef<HTMLDivElement, BulletsProps>(function Bullets(
43
- {
44
- totalQuantity,
45
- activeBullet,
46
- onClick,
47
- testId = 'store-bullets',
48
- ariaLabelGenerator = defaultAriaLabel,
49
- ariaControlsGenerator,
50
- ...otherProps
51
- },
52
- ref
53
- ) {
54
- const bulletIndexes = useMemo(
55
- () => Array(totalQuantity).fill(0),
56
- [totalQuantity]
57
- )
58
-
59
- return (
60
- <div
61
- ref={ref}
62
- data-fs-bullets
63
- data-testid={testId}
64
- role="tablist"
65
- {...otherProps}
66
- >
67
- {bulletIndexes.map((_, idx) => {
68
- const isActive = activeBullet === idx
69
-
70
- return (
71
- <Button
72
- key={idx}
73
- role="tab"
74
- tabIndex={-1}
75
- data-fs-bullet
76
- testId={`${testId}-bullet`}
77
- onClick={(e) => onClick(e, idx)}
78
- aria-label={ariaLabelGenerator(idx, isActive)}
79
- aria-controls={ariaControlsGenerator?.(idx)}
80
- aria-selected={isActive}
81
- />
82
- )
83
- })}
84
- </div>
85
- )
86
- })
87
-
88
- export default Bullets
@@ -1,2 +0,0 @@
1
- export { default } from './Bullets'
2
- export type { BulletsProps } from './Bullets'
@@ -1,58 +0,0 @@
1
- import React from 'react'
2
-
3
- interface IconProps {
4
- size?: {
5
- width: number
6
- height: number
7
- }
8
- viewBox?: string
9
- color?: string
10
- }
11
-
12
- export const LeftArrowIcon = ({
13
- size = { width: 25, height: 25 },
14
- viewBox = '0 0 16 16',
15
- color = 'currentColor',
16
- }: IconProps) => (
17
- <svg
18
- xmlns="http://www.w3.org/2000/svg"
19
- xmlnsXlink="http://www.w3.org/1999/xlink"
20
- viewBox={viewBox}
21
- width={size.width}
22
- height={size.height}
23
- >
24
- <path
25
- d="M11 1L4 8L11 15"
26
- strokeWidth="2"
27
- strokeMiterlimit="10"
28
- strokeLinecap="round"
29
- strokeLinejoin="round"
30
- stroke={color}
31
- fill="none"
32
- />
33
- </svg>
34
- )
35
-
36
- export const RightArrowIcon = ({
37
- size = { width: 25, height: 25 },
38
- viewBox = '0 0 16 16',
39
- color = 'currentColor',
40
- }: IconProps) => (
41
- <svg
42
- xmlns="http://www.w3.org/2000/svg"
43
- xmlnsXlink="http://www.w3.org/1999/xlink"
44
- viewBox={viewBox}
45
- width={size.width}
46
- height={size.height}
47
- >
48
- <path
49
- d="M5 15L12 8L5 1"
50
- strokeWidth="2"
51
- strokeMiterlimit="10"
52
- strokeLinecap="round"
53
- strokeLinejoin="round"
54
- stroke={color}
55
- fill="none"
56
- />
57
- </svg>
58
- )