@faststore/components 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.
- package/dist/atoms/Icon/Icon.d.ts +13 -1
- package/dist/atoms/Icon/Icon.js +1 -1
- package/dist/atoms/Icon/Icon.js.map +1 -1
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useSlideVisibility.d.ts +9 -0
- package/dist/hooks/useSlideVisibility.js +29 -0
- package/dist/hooks/useSlideVisibility.js.map +1 -0
- package/dist/hooks/useSlider.d.ts +64 -0
- package/dist/hooks/useSlider.js +103 -0
- package/dist/hooks/useSlider.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/molecules/Carousel/Carousel.d.ts +54 -0
- package/dist/molecules/Carousel/Carousel.js +184 -0
- package/dist/molecules/Carousel/Carousel.js.map +1 -0
- package/dist/molecules/Carousel/CarouselBullets.d.ts +35 -0
- package/dist/molecules/Carousel/CarouselBullets.js +12 -0
- package/dist/molecules/Carousel/CarouselBullets.js.map +1 -0
- package/dist/molecules/Carousel/CarouselItem.d.ts +11 -0
- package/dist/molecules/Carousel/CarouselItem.js +18 -0
- package/dist/molecules/Carousel/CarouselItem.js.map +1 -0
- package/dist/molecules/Carousel/index.d.ts +6 -0
- package/dist/molecules/Carousel/index.js +4 -0
- package/dist/molecules/Carousel/index.js.map +1 -0
- package/package.json +2 -2
- package/src/atoms/Icon/Icon.tsx +14 -2
- package/src/hooks/index.ts +10 -0
- package/src/hooks/useSlideVisibility.ts +59 -0
- package/src/hooks/useSlider.ts +209 -0
- package/src/index.ts +12 -0
- package/src/molecules/Carousel/Carousel.tsx +396 -0
- package/src/molecules/Carousel/CarouselBullets.tsx +90 -0
- package/src/molecules/Carousel/CarouselItem.tsx +52 -0
- package/src/molecules/Carousel/index.ts +8 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SVGProps } from 'react';
|
|
2
|
-
import React from
|
|
2
|
+
import React from 'react';
|
|
3
3
|
type IconWeight = 'thin' | 'light' | 'regular' | 'bold';
|
|
4
4
|
export interface IconProps extends SVGProps<SVGSVGElement> {
|
|
5
5
|
/**
|
|
@@ -18,6 +18,18 @@ export interface IconProps extends SVGProps<SVGSVGElement> {
|
|
|
18
18
|
* @default 'regular'
|
|
19
19
|
*/
|
|
20
20
|
weight?: IconWeight;
|
|
21
|
+
/**
|
|
22
|
+
* SVG width.
|
|
23
|
+
*
|
|
24
|
+
* @default '24'
|
|
25
|
+
*/
|
|
26
|
+
width?: number;
|
|
27
|
+
/**
|
|
28
|
+
* SVG height.
|
|
29
|
+
*
|
|
30
|
+
* @default '24'
|
|
31
|
+
*/
|
|
32
|
+
height?: number;
|
|
21
33
|
}
|
|
22
34
|
declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, "string" | "filter" | "children" | "type" | "style" | "clipPath" | "mask" | "path" | "in" | "testId" | "aria-label" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "crossOrigin" | "height" | "max" | "min" | "width" | "weight" | "media" | "method" | "target" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "imageRendering" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "key"> & React.RefAttributes<SVGSVGElement>>;
|
|
23
35
|
export default Icon;
|
package/dist/atoms/Icon/Icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/atoms/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIzC,MAAM,gBAAgB,GAA+B;IACnD,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,CAAC;CACR,CAAA;
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/atoms/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIzC,MAAM,gBAAgB,GAA+B;IACnD,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,CAAC;CACR,CAAA;AAiCD,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CAC7D,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAa,EAC1E,GAAG;IAEH,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAA;IACpC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,uCAEK,MAAM,EACnB,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,MAAM,EAAE,MAAM,IAAI,EAAE,EACpB,WAAW,EAAE,gBAAgB,CAAC,MAAM,CAAC,KACjC,UAAU;QAEd,6BAAK,IAAI,EAAE,cAAc,IAAI,EAAE,GAAI,CAC/B,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -3,3 +3,6 @@ export { useFadeEffect } from './useFadeEffect';
|
|
|
3
3
|
export { useTrapFocus } from './useTrapFocus';
|
|
4
4
|
export { useSearch } from './useSearch';
|
|
5
5
|
export { useScrollDirection } from './useScrollDirection';
|
|
6
|
+
export { useSlider } from './useSlider';
|
|
7
|
+
export type { UseSliderArgs, SliderState, SliderDispatch, SlideDirection, } from './useSlider';
|
|
8
|
+
export { useSlideVisibility } from './useSlideVisibility';
|
package/dist/hooks/index.js
CHANGED
|
@@ -3,4 +3,6 @@ export { useFadeEffect } from './useFadeEffect';
|
|
|
3
3
|
export { useTrapFocus } from './useTrapFocus';
|
|
4
4
|
export { useSearch } from './useSearch';
|
|
5
5
|
export { useScrollDirection } from './useScrollDirection';
|
|
6
|
+
export { useSlider } from './useSlider';
|
|
7
|
+
export { useSlideVisibility } from './useSlideVisibility';
|
|
6
8
|
//# sourceMappingURL=index.js.map
|
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAuB,KAAK,EAAE,MAAM,cAAc,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAuB,KAAK,EAAE,MAAM,cAAc,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAOvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export interface UseSlideVisibilityArgs {
|
|
2
|
+
currentSlide: number;
|
|
3
|
+
itemsPerPage: number;
|
|
4
|
+
totalItems: number;
|
|
5
|
+
}
|
|
6
|
+
export declare const useSlideVisibility: ({ currentSlide, itemsPerPage, totalItems, }: UseSlideVisibilityArgs) => {
|
|
7
|
+
shouldRenderItem: (index: number) => boolean;
|
|
8
|
+
isItemVisible: (index: number) => boolean;
|
|
9
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
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 const 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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSlideVisibility.js","sourceRoot":"","sources":["../../src/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,MAAM,kBAAkB,GAAG,CAAC,EACjC,YAAY,EACZ,YAAY,EACZ,UAAU,GACa,EAAE,EAAE;IAC3B;;;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,CAAA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
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 declare const useSlider: ({ totalItems, itemsPerPage, infiniteMode, shouldSlideOnSwipe, ...swipeableConfigOverrides }: UseSliderArgs) => {
|
|
59
|
+
handlers: import("react-swipeable").SwipeableHandlers;
|
|
60
|
+
slide: (page: SlideDirection | number, dispatch: Dispatch<Action>) => void;
|
|
61
|
+
sliderState: SliderState;
|
|
62
|
+
sliderDispatch: Dispatch<Action>;
|
|
63
|
+
};
|
|
64
|
+
export {};
|
|
@@ -0,0 +1,103 @@
|
|
|
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 const 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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../src/hooks/useSlider.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -37,6 +37,8 @@ export type { AlertProps } from './molecules/Alert';
|
|
|
37
37
|
export { BreadcrumbPure, Breadcrumb } from './molecules/Breadcrumb';
|
|
38
38
|
export type { BreadcrumbPureProps, BreadcrumbProps, } from './molecules/Breadcrumb';
|
|
39
39
|
export { default as BuyButton } from './molecules/BuyButton';
|
|
40
|
+
export { default as Carousel, CarouselItem, CarouselBullets, } from './molecules/Carousel';
|
|
41
|
+
export type { CarouselProps, CarouselItemProps, CarouselBulletsProps, } from './molecules/Carousel';
|
|
40
42
|
export { default as CartItem, CartItemImage, CartItemSummary, } from './molecules/CartItem';
|
|
41
43
|
export type { CartItemProps, CartItemImageProps, CartItemSummaryProps, } from './molecules/CartItem';
|
|
42
44
|
export { default as CheckboxField } from './molecules/CheckboxField';
|
package/dist/index.js
CHANGED
|
@@ -22,6 +22,7 @@ export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, }
|
|
|
22
22
|
export { default as Alert } from './molecules/Alert';
|
|
23
23
|
export { BreadcrumbPure, Breadcrumb } from './molecules/Breadcrumb';
|
|
24
24
|
export { default as BuyButton } from './molecules/BuyButton';
|
|
25
|
+
export { default as Carousel, CarouselItem, CarouselBullets, } from './molecules/Carousel';
|
|
25
26
|
export { default as CartItem, CartItemImage, CartItemSummary, } from './molecules/CartItem';
|
|
26
27
|
export { default as CheckboxField } from './molecules/CheckboxField';
|
|
27
28
|
export { default as IconButton } from './molecules/IconButton';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,SAAS,CAAA;AAEvB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAKnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import type { ReactNode, PropsWithChildren } from 'react';
|
|
2
|
+
import type { SwipeableProps } from 'react-swipeable';
|
|
3
|
+
export interface CarouselProps extends SwipeableProps {
|
|
4
|
+
/**
|
|
5
|
+
* ID of the current instance of the component.
|
|
6
|
+
*/
|
|
7
|
+
id?: string;
|
|
8
|
+
/**
|
|
9
|
+
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
10
|
+
*/
|
|
11
|
+
testId?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Returns the value of element's class content attribute.
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Whether or not the Carousel is infinite slide/scroll. Only for the `slide` variant.
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
infiniteMode?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Specifies which navigation elements should be visible.
|
|
23
|
+
* @default complete
|
|
24
|
+
*/
|
|
25
|
+
controls?: 'complete' | 'navigationArrows' | 'paginationBullets';
|
|
26
|
+
/**
|
|
27
|
+
* Specifies the slide transition. Only for the `slide` variant
|
|
28
|
+
*/
|
|
29
|
+
transition?: {
|
|
30
|
+
duration: number;
|
|
31
|
+
property: string;
|
|
32
|
+
delay?: number;
|
|
33
|
+
timing?: string;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* Specifies the number of items per page.
|
|
37
|
+
* @default 1
|
|
38
|
+
*/
|
|
39
|
+
itemsPerPage?: number;
|
|
40
|
+
/**
|
|
41
|
+
* Specifies the Carousel track variant.
|
|
42
|
+
* @default slide
|
|
43
|
+
*/
|
|
44
|
+
variant?: 'slide' | 'scroll';
|
|
45
|
+
/**
|
|
46
|
+
* Specifies the navigation icons.
|
|
47
|
+
*/
|
|
48
|
+
navigationIcons?: {
|
|
49
|
+
left?: ReactNode;
|
|
50
|
+
right?: ReactNode;
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
declare function Carousel({ infiniteMode, controls, testId, transition, children, className, id, variant, itemsPerPage, navigationIcons, ...swipeableConfigOverrides }: PropsWithChildren<CarouselProps>): JSX.Element;
|
|
54
|
+
export default Carousel;
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
import React, { useMemo, useRef } from 'react';
|
|
2
|
+
import CarouselItem from './CarouselItem';
|
|
3
|
+
import { useSlider } from '../../hooks';
|
|
4
|
+
import CarouselBullets from './CarouselBullets';
|
|
5
|
+
import { IconButton, Icon } from '../..';
|
|
6
|
+
const createTransformValues = (infinite, totalItems) => {
|
|
7
|
+
const transformMap = {};
|
|
8
|
+
const slideWidth = 100 / totalItems;
|
|
9
|
+
for (let idx = 0; idx < totalItems; ++idx) {
|
|
10
|
+
const currIdx = infinite ? idx - 1 : idx;
|
|
11
|
+
const transformValue = -(slideWidth * idx);
|
|
12
|
+
transformMap[currIdx] = transformValue;
|
|
13
|
+
}
|
|
14
|
+
return transformMap;
|
|
15
|
+
};
|
|
16
|
+
function Carousel({ infiniteMode = true, controls = 'complete', testId = 'fs-carousel', transition = {
|
|
17
|
+
duration: 400,
|
|
18
|
+
property: 'transform',
|
|
19
|
+
}, children, className, id = 'fs-carousel', variant = 'slide', itemsPerPage = 1, navigationIcons = undefined, ...swipeableConfigOverrides }) {
|
|
20
|
+
const carouselTrackRef = useRef(null);
|
|
21
|
+
const isSlideCarousel = variant === 'slide';
|
|
22
|
+
const isScrollCarousel = variant === 'scroll';
|
|
23
|
+
const childrenArray = React.Children.toArray(children);
|
|
24
|
+
const childrenCount = childrenArray.length;
|
|
25
|
+
const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount;
|
|
26
|
+
const slidingTransition = `${transition.property} ${transition.duration}ms ${transition.timing ?? ''} ${transition.delay ?? ''}`;
|
|
27
|
+
const { handlers, slide, sliderState, sliderDispatch } = useSlider({
|
|
28
|
+
itemsPerPage,
|
|
29
|
+
infiniteMode,
|
|
30
|
+
totalItems: childrenCount,
|
|
31
|
+
shouldSlideOnSwipe: isSlideCarousel,
|
|
32
|
+
...swipeableConfigOverrides,
|
|
33
|
+
});
|
|
34
|
+
const pagesCount = Math.ceil(childrenCount / sliderState.itemsPerPage);
|
|
35
|
+
const showNavigationArrows = pagesCount !== 1 &&
|
|
36
|
+
(controls === 'complete' || controls === 'navigationArrows');
|
|
37
|
+
const showPaginationBullets = pagesCount !== 1 &&
|
|
38
|
+
(controls === 'complete' || controls === 'paginationBullets');
|
|
39
|
+
const transformValues = useMemo(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
|
|
40
|
+
const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
|
|
41
|
+
const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
|
|
42
|
+
const slides = preRenderedSlides.concat(children ?? [], postRenderedSlides);
|
|
43
|
+
const slideCarouselTrackStyle = useMemo(() => ({
|
|
44
|
+
display: 'flex',
|
|
45
|
+
width: `${numberOfSlides * 100}%`,
|
|
46
|
+
transition: sliderState.sliding ? slidingTransition : undefined,
|
|
47
|
+
transform: `translate3d(${transformValues[sliderState.currentPage]}%, 0, 0)`,
|
|
48
|
+
}), [
|
|
49
|
+
numberOfSlides,
|
|
50
|
+
transformValues,
|
|
51
|
+
slidingTransition,
|
|
52
|
+
sliderState.sliding,
|
|
53
|
+
sliderState.currentPage,
|
|
54
|
+
]);
|
|
55
|
+
const scrollCarouselTrackStyle = useMemo(() => ({
|
|
56
|
+
width: '100%',
|
|
57
|
+
display: 'block',
|
|
58
|
+
overflowX: 'scroll',
|
|
59
|
+
whiteSpace: 'nowrap',
|
|
60
|
+
}), []);
|
|
61
|
+
const carouselTrackStyle = (isSlideCarousel && slideCarouselTrackStyle) ||
|
|
62
|
+
(isScrollCarousel && scrollCarouselTrackStyle);
|
|
63
|
+
const slidePrevious = () => {
|
|
64
|
+
if (sliderState.sliding ||
|
|
65
|
+
(!infiniteMode && sliderState.currentPage === 0)) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
slide('previous', sliderDispatch);
|
|
69
|
+
};
|
|
70
|
+
const slideNext = () => {
|
|
71
|
+
if (sliderState.sliding ||
|
|
72
|
+
(!infiniteMode && sliderState.currentPage === childrenCount - 1)) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
slide('next', sliderDispatch);
|
|
76
|
+
};
|
|
77
|
+
const onScrollTrack = (event) => {
|
|
78
|
+
if (isSlideCarousel || itemsPerPage > 1) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
const itemWidth = Number(event.currentTarget.firstElementChild?.scrollWidth);
|
|
82
|
+
const scrollOffset = event.currentTarget?.scrollLeft;
|
|
83
|
+
const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor;
|
|
84
|
+
const page = formatter(scrollOffset / itemWidth);
|
|
85
|
+
slide(page, sliderDispatch);
|
|
86
|
+
};
|
|
87
|
+
const onTransitionTrackEnd = () => {
|
|
88
|
+
sliderDispatch({
|
|
89
|
+
type: 'STOP_SLIDE',
|
|
90
|
+
});
|
|
91
|
+
if (infiniteMode && sliderState.currentItem >= childrenCount) {
|
|
92
|
+
sliderDispatch({
|
|
93
|
+
type: 'GO_TO_PAGE',
|
|
94
|
+
payload: {
|
|
95
|
+
pageIndex: 0,
|
|
96
|
+
shouldSlide: false,
|
|
97
|
+
},
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
if (infiniteMode && sliderState.currentItem < 0) {
|
|
101
|
+
sliderDispatch({
|
|
102
|
+
type: 'GO_TO_PAGE',
|
|
103
|
+
payload: {
|
|
104
|
+
pageIndex: sliderState.totalPages - 1,
|
|
105
|
+
shouldSlide: false,
|
|
106
|
+
},
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
const onScrollPagination = async (index, slideDirection) => {
|
|
111
|
+
if (slideDirection === 'previous' && sliderState.currentPage === 0) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
if (slideDirection === 'next' &&
|
|
115
|
+
sliderState.currentPage === sliderState.totalPages - 1) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
let scrollOffset;
|
|
119
|
+
const carouselItemsWidth = Number(carouselTrackRef.current?.firstElementChild?.clientWidth);
|
|
120
|
+
if (itemsPerPage > 1) {
|
|
121
|
+
scrollOffset = index * carouselItemsWidth * itemsPerPage;
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
scrollOffset = index * carouselItemsWidth - carouselItemsWidth * 0.125;
|
|
125
|
+
}
|
|
126
|
+
carouselTrackRef.current?.scrollTo({
|
|
127
|
+
left: scrollOffset,
|
|
128
|
+
behavior: 'smooth',
|
|
129
|
+
});
|
|
130
|
+
slide(index, sliderDispatch);
|
|
131
|
+
};
|
|
132
|
+
// accessible behavior for tablist
|
|
133
|
+
const handleBulletsKeyDown = (event) => {
|
|
134
|
+
switch (event.key) {
|
|
135
|
+
case 'ArrowLeft': {
|
|
136
|
+
isSlideCarousel && slidePrevious();
|
|
137
|
+
isScrollCarousel &&
|
|
138
|
+
onScrollPagination(sliderState.currentPage - 1, 'previous');
|
|
139
|
+
break;
|
|
140
|
+
}
|
|
141
|
+
case 'ArrowRight': {
|
|
142
|
+
isSlideCarousel && slideNext();
|
|
143
|
+
isScrollCarousel &&
|
|
144
|
+
onScrollPagination(sliderState.currentPage + 1, 'next');
|
|
145
|
+
break;
|
|
146
|
+
}
|
|
147
|
+
case 'Home': {
|
|
148
|
+
slide(0, sliderDispatch);
|
|
149
|
+
break;
|
|
150
|
+
}
|
|
151
|
+
case 'End': {
|
|
152
|
+
slide(childrenCount - 1, sliderDispatch);
|
|
153
|
+
break;
|
|
154
|
+
}
|
|
155
|
+
default:
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
return (React.createElement("section", { id: id, "data-fs-carousel": true, className: className, "data-testid": testId, "aria-label": "carousel", "aria-roledescription": "carousel" },
|
|
159
|
+
React.createElement("div", { "data-fs-carousel-track-container": true, style: {
|
|
160
|
+
width: '100%',
|
|
161
|
+
overflow: 'hidden',
|
|
162
|
+
display: isScrollCarousel ? 'block' : undefined,
|
|
163
|
+
}, ...handlers },
|
|
164
|
+
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))))),
|
|
165
|
+
showNavigationArrows && (React.createElement("div", { "data-fs-carousel-controls": true },
|
|
166
|
+
React.createElement(IconButton, { "data-fs-carousel-control": "left", "aria-controls": id, "aria-label": "previous", icon: navigationIcons?.left ?? (React.createElement(Icon, { name: "ArrowLeft", width: 20, height: 20, weight: "bold" })), onClick: () => {
|
|
167
|
+
isSlideCarousel && slidePrevious();
|
|
168
|
+
isScrollCarousel &&
|
|
169
|
+
onScrollPagination(sliderState.currentPage - 1, 'previous');
|
|
170
|
+
} }),
|
|
171
|
+
React.createElement(IconButton, { "data-fs-carousel-control": "right", "aria-controls": id, "aria-label": "next", icon: navigationIcons?.right ?? (React.createElement(Icon, { name: "ArrowRight", width: 20, height: 20, weight: "bold" })), onClick: () => {
|
|
172
|
+
isSlideCarousel && slideNext();
|
|
173
|
+
isScrollCarousel &&
|
|
174
|
+
onScrollPagination(sliderState.currentPage + 1, 'next');
|
|
175
|
+
} }))),
|
|
176
|
+
showPaginationBullets && (React.createElement(CarouselBullets, { tabIndex: 0, activeBullet: sliderState.currentPage, totalQuantity: pagesCount, onKeyDown: handleBulletsKeyDown, onClick: async (_, idx) => {
|
|
177
|
+
isSlideCarousel &&
|
|
178
|
+
!sliderState.sliding &&
|
|
179
|
+
slide(idx, sliderDispatch);
|
|
180
|
+
isScrollCarousel && onScrollPagination(idx);
|
|
181
|
+
}, onFocus: (event) => event.currentTarget.focus(), ariaControlsGenerator: (idx) => `carousel-item-${idx}` }))));
|
|
182
|
+
}
|
|
183
|
+
export default Carousel;
|
|
184
|
+
//# sourceMappingURL=Carousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { HTMLAttributes, MouseEvent } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface CarouselBulletsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role'> {
|
|
4
|
+
/**
|
|
5
|
+
* Number of bullets that should be rendered.
|
|
6
|
+
*/
|
|
7
|
+
totalQuantity: number;
|
|
8
|
+
/**
|
|
9
|
+
* The currently active bullet (zero-indexed).
|
|
10
|
+
*/
|
|
11
|
+
activeBullet: number;
|
|
12
|
+
/**
|
|
13
|
+
* Event handler for clicks on each bullet. The handler will be called with
|
|
14
|
+
* the index of the bullet that received the click.
|
|
15
|
+
*/
|
|
16
|
+
onClick: (e: MouseEvent, bulletIdx: number) => void;
|
|
17
|
+
/**
|
|
18
|
+
* ID to find this component in testing tools (e.g.: cypress,
|
|
19
|
+
* testing-library, and jest).
|
|
20
|
+
*/
|
|
21
|
+
testId?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Function that should be used to generate the aria-label attribute added
|
|
24
|
+
* to each bullet that is inactive. It receives the bullet index as an
|
|
25
|
+
* argument so that it can be interpolated in the generated string.
|
|
26
|
+
*/
|
|
27
|
+
ariaLabelGenerator?: (index: number, isActive: boolean) => string;
|
|
28
|
+
/**
|
|
29
|
+
* Function that should be used to generate the aria-controls attribute added
|
|
30
|
+
* to each bullet. It receives the bullet index as argument and should return a string.
|
|
31
|
+
*/
|
|
32
|
+
ariaControlsGenerator?: (index: number) => string;
|
|
33
|
+
}
|
|
34
|
+
declare const CarouselBullets: React.ForwardRefExoticComponent<CarouselBulletsProps & React.RefAttributes<HTMLDivElement>>;
|
|
35
|
+
export default CarouselBullets;
|