@ledgerhq/react-ui 0.17.0-nightly.1 → 0.17.0-nightly.2
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/lib/cjs/components/layout/Carousel/Carousel.stories.js +11 -4
- package/lib/cjs/components/layout/Carousel/Carousel.stories.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/index.js +98 -9
- package/lib/cjs/components/layout/Carousel/index.js.map +3 -3
- package/lib/cjs/components/layout/Carousel/types.js.map +2 -2
- package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/index.js +2 -1
- package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/index.js.map +2 -2
- package/lib/components/layout/Carousel/index.d.ts +1 -1
- package/lib/components/layout/Carousel/index.d.ts.map +1 -1
- package/lib/components/layout/Carousel/index.js +82 -10
- package/lib/components/layout/Carousel/index.js.map +1 -1
- package/lib/components/layout/Carousel/types.d.ts +3 -1
- package/lib/components/layout/Carousel/types.d.ts.map +1 -1
- package/lib/components/layout/Carousel/types.js.map +1 -1
- package/lib/components/layout/ContentCard/PortfolioContentCard/index.js +2 -1
- package/lib/components/layout/ContentCard/PortfolioContentCard/index.js.map +1 -1
- package/package.json +4 -1
|
@@ -43,7 +43,7 @@ var Carousel_stories_default = {
|
|
|
43
43
|
argTypes: {
|
|
44
44
|
children: {
|
|
45
45
|
description: "The elements to be displayed.",
|
|
46
|
-
control: { type: "range", min:
|
|
46
|
+
control: { type: "range", min: 0, max: 10, step: 1 }
|
|
47
47
|
},
|
|
48
48
|
variant: {
|
|
49
49
|
description: "Variant for the carousel.",
|
|
@@ -51,13 +51,20 @@ var Carousel_stories_default = {
|
|
|
51
51
|
defaultValue: "default",
|
|
52
52
|
control: "inline-radio"
|
|
53
53
|
},
|
|
54
|
-
|
|
55
|
-
description: "
|
|
54
|
+
autoPlay: {
|
|
55
|
+
description: "The time in milliseconds between automatic slide change (0 for no auto-play)."
|
|
56
|
+
},
|
|
57
|
+
onNext: {
|
|
58
|
+
description: "Function called when the user moves to the next slide."
|
|
59
|
+
},
|
|
60
|
+
onPrev: {
|
|
61
|
+
description: "Function called when the user moves to the previous slide."
|
|
56
62
|
}
|
|
57
63
|
},
|
|
58
64
|
args: {
|
|
59
65
|
variant: "default",
|
|
60
|
-
children: 5
|
|
66
|
+
children: 5,
|
|
67
|
+
autoPlay: 0
|
|
61
68
|
},
|
|
62
69
|
parameters: {
|
|
63
70
|
docs: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Carousel/Carousel.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import { action } from \"@storybook/addon-actions\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { FC, ReactElement, useContext } from \"react\";\n\nimport PortfolioContentCard from \"../ContentCard/PortfolioContentCard\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\ntype Args = Omit<Props, \"children\"> & { children: number };\ntype Parameters = { Slide: FC<{ index: number }> };\n\nconst SlideContext = React.createContext<ReactElement[]>([]);\nexport default {\n title: \"Layout/Carousel\",\n argTypes: {\n children: {\n description: \"The elements to be displayed.\",\n control: { type: \"range\", min:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AAEvB,mBAAoD;AAEpD,kCAAiC;AACjC,eAAqB;AAMrB,MAAM,eAAe,aAAAA,QAAM,cAA8B,CAAC,CAAC;AAC3D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,EAAE;AAAA,IACrD;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,cAAc;AAAA,MACnC,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,CAAC,OAAW,EAAE,MAAM,WAAW,MAC7B,6BAAAA,QAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,GAAG,CAAC,GAAG,UAC/C,6BAAAA,QAAA,cAAC,WAAW,OAAX,EAAiB,KAAK,OAAO,OAAc,CAC7C;AAAA;AAAA,MAED,6BAAAA,QAAA,cAAC,WAAM;AAAA,IACT;AAAA,EAEJ;AAAA,EACA,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAC5B,6BAAAA,QAAA,cAAC,SAAAC,SAAA,EAAU,GAAG,aAAQ,yBAAW,YAAY,CAAE;AAEnD;AAEO,MAAM,UAA0B;AAAA,EACrC,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAD,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,iBAAiB,OAAO,KAAK,OAAO,IAAI,GAAG;AAAA,UAC3C,SAAS;AAAA,UACT,cAAc;AAAA,QAChB;AAAA;AAAA,MACD;AAAA,MACQ;AAAA,IACT;AAAA,EAEJ;AACF;AAEO,MAAM,wBAAwC;AAAA,EACnD,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAA,QAAA;AAAA,MAAC,4BAAAE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,QAAQ,QAAQ,KAAK,IAAI,YAAY;AAAA,QACrC,SAAS,MAAM,cAAc,kBAAkB,KAAK,EAAE;AAAA,QACtD,SAAS,MAAM,cAAc,eAAe,KAAK,EAAE;AAAA;AAAA,IACrD;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAgB,6BAAO,eAAe;AAE5C,MAAM,YACJ;",
|
|
4
|
+
"sourcesContent": ["import { action } from \"@storybook/addon-actions\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { FC, ReactElement, useContext } from \"react\";\n\nimport PortfolioContentCard from \"../ContentCard/PortfolioContentCard\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\ntype Args = Omit<Props, \"children\"> & { children: number };\ntype Parameters = { Slide: FC<{ index: number }> };\n\nconst SlideContext = React.createContext<ReactElement[]>([]);\nexport default {\n title: \"Layout/Carousel\",\n argTypes: {\n children: {\n description: \"The elements to be displayed.\",\n control: { type: \"range\", min: 0, max: 10, step: 1 },\n },\n variant: {\n description: \"Variant for the carousel.\",\n options: [\"default\", \"content-card\"],\n defaultValue: \"default\",\n control: \"inline-radio\",\n },\n autoPlay: {\n description: \"The time in milliseconds between automatic slide change (0 for no auto-play).\",\n },\n onNext: {\n description: \"Function called when the user moves to the next slide.\",\n },\n onPrev: {\n description: \"Function called when the user moves to the previous slide.\",\n },\n },\n args: {\n variant: \"default\",\n children: 5,\n autoPlay: 0,\n },\n parameters: {\n docs: {\n description: {\n component: \"A simple Carousel component.\",\n },\n },\n },\n decorators: [\n (Story: FC, { args, parameters }: { args: Args; parameters: Parameters }) => (\n <SlideContext.Provider\n value={Array.from({ length: args.children }, (_, index) => (\n <parameters.Slide key={index} index={index} />\n ))}\n >\n <Story />\n </SlideContext.Provider>\n ),\n ],\n render: ({ children, ...props }: Args) => (\n <Carousel {...props}>{useContext(SlideContext)}</Carousel>\n ),\n} satisfies Meta<Args>;\n\nexport const Default: StoryObj<Args> = {\n parameters: {\n Slide: (({ index }) => (\n <div\n style={{\n backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,\n padding: \"16px 24px\",\n borderRadius: \"5px\",\n }}\n >\n Slide {index}\n </div>\n )) satisfies Parameters[\"Slide\"],\n },\n};\n\nexport const PortfolioContentCards: StoryObj<Args> = {\n parameters: {\n Slide: (({ index }) => (\n <PortfolioContentCard\n title=\"Ledger Recover\"\n description=\"Get peace of mind and start your free trial.\"\n cta={index % 2 ? undefined : \"Start my free trial\"}\n tag={index % 3 ? undefined : \"New\"}\n image={(index + 1) % 4 ? IMAGE_SRC : undefined}\n onClick={() => onSlideAction(`click on slide ${index}`)}\n onClose={() => onSlideAction(`close slide ${index}`)}\n />\n )) satisfies Parameters[\"Slide\"],\n },\n};\n\nconst onSlideAction = action(\"onSlideAction\");\n\nconst IMAGE_SRC =\n \"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AAEvB,mBAAoD;AAEpD,kCAAiC;AACjC,eAAqB;AAMrB,MAAM,eAAe,aAAAA,QAAM,cAA8B,CAAC,CAAC;AAC3D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,EAAE;AAAA,IACrD;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,cAAc;AAAA,MACnC,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,CAAC,OAAW,EAAE,MAAM,WAAW,MAC7B,6BAAAA,QAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,GAAG,CAAC,GAAG,UAC/C,6BAAAA,QAAA,cAAC,WAAW,OAAX,EAAiB,KAAK,OAAO,OAAc,CAC7C;AAAA;AAAA,MAED,6BAAAA,QAAA,cAAC,WAAM;AAAA,IACT;AAAA,EAEJ;AAAA,EACA,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAC5B,6BAAAA,QAAA,cAAC,SAAAC,SAAA,EAAU,GAAG,aAAQ,yBAAW,YAAY,CAAE;AAEnD;AAEO,MAAM,UAA0B;AAAA,EACrC,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAD,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,iBAAiB,OAAO,KAAK,OAAO,IAAI,GAAG;AAAA,UAC3C,SAAS;AAAA,UACT,cAAc;AAAA,QAChB;AAAA;AAAA,MACD;AAAA,MACQ;AAAA,IACT;AAAA,EAEJ;AACF;AAEO,MAAM,wBAAwC;AAAA,EACnD,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAA,QAAA;AAAA,MAAC,4BAAAE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,QAAQ,QAAQ,KAAK,IAAI,YAAY;AAAA,QACrC,SAAS,MAAM,cAAc,kBAAkB,KAAK,EAAE;AAAA,QACtD,SAAS,MAAM,cAAc,eAAe,KAAK,EAAE;AAAA;AAAA,IACrD;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAgB,6BAAO,eAAe;AAE5C,MAAM,YACJ;",
|
|
6
6
|
"names": ["React", "Carousel", "PortfolioContentCard"]
|
|
7
7
|
}
|
|
@@ -31,7 +31,9 @@ __export(Carousel_exports, {
|
|
|
31
31
|
default: () => Carousel_default
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(Carousel_exports);
|
|
34
|
+
var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"));
|
|
34
35
|
var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
|
|
36
|
+
var import_debounce = __toESM(require("lodash/debounce"));
|
|
35
37
|
var import_react = __toESM(require("react"));
|
|
36
38
|
var import_styled_components = __toESM(require("styled-components"));
|
|
37
39
|
var import_Footer = __toESM(require("./Footer"));
|
|
@@ -58,27 +60,82 @@ const CarouselContainer = import_styled_components.default.div`
|
|
|
58
60
|
--hover-transition: 1;
|
|
59
61
|
}
|
|
60
62
|
`;
|
|
61
|
-
const Carousel = ({ children, variant = "default",
|
|
63
|
+
const Carousel = ({ children, variant = "default", autoPlay = 0, onNext, onPrev }) => {
|
|
62
64
|
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
|
|
63
|
-
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(
|
|
65
|
+
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(
|
|
66
|
+
{ loop: true },
|
|
67
|
+
autoPlay ? [(0, import_embla_carousel_autoplay.default)({ delay: autoPlay, ...AutoplayFlags })] : []
|
|
68
|
+
);
|
|
64
69
|
const updateIndex = (0, import_react.useCallback)(() => {
|
|
65
70
|
if (!emblaApi)
|
|
66
71
|
return;
|
|
67
72
|
const newIndex = emblaApi.selectedScrollSnap();
|
|
68
73
|
setCurrentIndex(newIndex);
|
|
69
74
|
emblaApi.scrollTo(newIndex);
|
|
70
|
-
|
|
71
|
-
}, [emblaApi, onChange]);
|
|
75
|
+
}, [emblaApi]);
|
|
72
76
|
(0, import_react.useEffect)(() => {
|
|
73
77
|
if (!emblaApi)
|
|
74
78
|
return;
|
|
75
79
|
updateIndex();
|
|
76
|
-
emblaApi
|
|
80
|
+
const dragX = watchDragX(emblaApi);
|
|
81
|
+
const handleAnySelect = (0, import_debounce.default)((mightBeASwipe) => {
|
|
82
|
+
updateIndex();
|
|
83
|
+
if (!mightBeASwipe || variant !== "default")
|
|
84
|
+
return;
|
|
85
|
+
if (dragX.value > 0)
|
|
86
|
+
return onPrev == null ? void 0 : onPrev();
|
|
87
|
+
if (dragX.value < 0)
|
|
88
|
+
return onNext == null ? void 0 : onNext();
|
|
89
|
+
}, 0);
|
|
90
|
+
emblaApi.on("select", handleSelect);
|
|
91
|
+
emblaApi.on("autoplay:select", handleAutoPlaySelect);
|
|
92
|
+
emblaApi.on("button:prev", handlePrevButton);
|
|
93
|
+
emblaApi.on("button:next", handleNextButton);
|
|
77
94
|
emblaApi.on("reInit", updateIndex);
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
95
|
+
return () => {
|
|
96
|
+
dragX.clean();
|
|
97
|
+
emblaApi.off("select", handleSelect);
|
|
98
|
+
emblaApi.off("autoplay:select", handleAutoPlaySelect);
|
|
99
|
+
emblaApi.off("button:prev", handlePrevButton);
|
|
100
|
+
emblaApi.off("button:next", handleNextButton);
|
|
101
|
+
emblaApi.off("reInit", updateIndex);
|
|
102
|
+
};
|
|
103
|
+
function handleSelect() {
|
|
104
|
+
handleAnySelect(true);
|
|
105
|
+
}
|
|
106
|
+
function handleAutoPlaySelect() {
|
|
107
|
+
handleAnySelect(false);
|
|
108
|
+
}
|
|
109
|
+
function handlePrevButton() {
|
|
110
|
+
emblaApi == null ? void 0 : emblaApi.scrollPrev();
|
|
111
|
+
onPrev == null ? void 0 : onPrev();
|
|
112
|
+
handleAnySelect(false);
|
|
113
|
+
}
|
|
114
|
+
function handleNextButton() {
|
|
115
|
+
emblaApi == null ? void 0 : emblaApi.scrollNext();
|
|
116
|
+
onNext == null ? void 0 : onNext();
|
|
117
|
+
handleAnySelect(false);
|
|
118
|
+
}
|
|
119
|
+
}, [emblaApi, updateIndex, variant]);
|
|
120
|
+
if (!children.length)
|
|
121
|
+
return null;
|
|
122
|
+
const handleGotoPrevSlide = () => emblaApi == null ? void 0 : emblaApi.emit("button:prev");
|
|
123
|
+
const handleGotoNextSlide = () => emblaApi == null ? void 0 : emblaApi.emit("button:next");
|
|
124
|
+
return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(CarouselContainer, { variant }, variant === "default" && children.length > 1 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
125
|
+
import_ChevronArrow.ChevronArrow,
|
|
126
|
+
{
|
|
127
|
+
"data-testid": "carousel-arrow-prev",
|
|
128
|
+
direction: "left",
|
|
129
|
+
onClick: handleGotoPrevSlide
|
|
130
|
+
}
|
|
131
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
132
|
+
import_ChevronArrow.ChevronArrow,
|
|
133
|
+
{
|
|
134
|
+
"data-testid": "carousel-arrow-next",
|
|
135
|
+
direction: "right",
|
|
136
|
+
onClick: handleGotoNextSlide
|
|
137
|
+
}
|
|
138
|
+
)), /* @__PURE__ */ import_react.default.createElement(Embla, { ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement(EmblaContainer, null, children.map((child) => /* @__PURE__ */ import_react.default.createElement(EmblaSlide, { key: child.key }, child))))), /* @__PURE__ */ import_react.default.createElement(
|
|
82
139
|
import_Footer.default,
|
|
83
140
|
{
|
|
84
141
|
children,
|
|
@@ -89,4 +146,36 @@ const Carousel = ({ children, variant = "default", onChange }) => {
|
|
|
89
146
|
));
|
|
90
147
|
};
|
|
91
148
|
var Carousel_default = Carousel;
|
|
149
|
+
const AutoplayFlags = {
|
|
150
|
+
play: true,
|
|
151
|
+
stopOnMouseEnter: true,
|
|
152
|
+
stopOnInteraction: false
|
|
153
|
+
};
|
|
154
|
+
function watchDragX(emblaApi) {
|
|
155
|
+
emblaApi.on("pointerDown", watchMouse);
|
|
156
|
+
let start;
|
|
157
|
+
let end;
|
|
158
|
+
return {
|
|
159
|
+
get value() {
|
|
160
|
+
return typeof start === "undefined" || typeof end === "undefined" ? 0 : end - start;
|
|
161
|
+
},
|
|
162
|
+
clean: () => {
|
|
163
|
+
emblaApi.off("pointerDown", watchMouse);
|
|
164
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
function watchMouse() {
|
|
168
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
169
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
170
|
+
}
|
|
171
|
+
function handleMouseMove(event) {
|
|
172
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
173
|
+
start = event.clientX;
|
|
174
|
+
end = void 0;
|
|
175
|
+
}
|
|
176
|
+
function handleMouseUp(event) {
|
|
177
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
178
|
+
end = event.clientX;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
92
181
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Carousel/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import useEmblaCarousel from \"embla-carousel-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport Footer from \"./Footer\";\nimport { Props } from \"./types\";\nimport { ChevronArrow } from \"./ChevronArrow\";\n\nconst Embla = styled.div`\n overflow: hidden;\n`;\n\nconst EmblaContainer = styled.div`\n display: flex;\n`;\n\nconst EmblaSlide = styled.div`\n display: flex;\n flex: 0 0 100%;\n min-width: 0;\n > * {\n flex-basis: 100%;\n }\n`;\n\nconst CarouselContainer = styled.div<Pick<Props, \"variant\">>`\n position: relative;\n\n --hover-transition: 0;\n &:hover {\n --hover-transition: 1;\n }\n`;\n\n/**\n * This component uses the https://github.com/davidjerleke/embla-carousel library.\n */\nconst Carousel = ({ children, variant = \"default\",
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["styled", "useEmblaCarousel", "React", "Footer"]
|
|
4
|
+
"sourcesContent": ["import type { EmblaCarouselType, EmblaEventType } from \"embla-carousel\";\nimport Autoplay from \"embla-carousel-autoplay\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport debounce from \"lodash/debounce\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport Footer from \"./Footer\";\nimport { Props } from \"./types\";\nimport { ChevronArrow } from \"./ChevronArrow\";\n\nconst Embla = styled.div`\n overflow: hidden;\n`;\n\nconst EmblaContainer = styled.div`\n display: flex;\n`;\n\nconst EmblaSlide = styled.div`\n display: flex;\n flex: 0 0 100%;\n min-width: 0;\n > * {\n flex-basis: 100%;\n }\n`;\n\nconst CarouselContainer = styled.div<Pick<Props, \"variant\">>`\n position: relative;\n\n --hover-transition: 0;\n &:hover {\n --hover-transition: 1;\n }\n`;\n\n/**\n * This component uses the https://github.com/davidjerleke/embla-carousel library.\n */\nconst Carousel = ({ children, variant = \"default\", autoPlay = 0, onNext, onPrev }: Props) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [emblaRef, emblaApi] = useEmblaCarousel(\n { loop: true },\n autoPlay ? [Autoplay({ delay: autoPlay, ...AutoplayFlags })] : [],\n );\n\n const updateIndex = useCallback(() => {\n if (!emblaApi) return;\n\n const newIndex = emblaApi.selectedScrollSnap();\n setCurrentIndex(newIndex);\n emblaApi.scrollTo(newIndex);\n }, [emblaApi]);\n\n useEffect(() => {\n if (!emblaApi) return;\n\n // Initial call to update carousel index\n updateIndex();\n\n const dragX = watchDragX(emblaApi);\n\n // When the selected scroll snap changes\n const handleAnySelect = debounce((mightBeASwipe: boolean) => {\n updateIndex();\n if (!mightBeASwipe || variant !== \"default\") return; // onNext/onPrev events are not supported for content-card variant ATM\n if (dragX.value > 0) return onPrev?.();\n if (dragX.value < 0) return onNext?.();\n }, 0); // all events are fired on the same tick so no need to wait past the next tick\n\n emblaApi.on(\"select\", handleSelect);\n emblaApi.on(\"autoplay:select\" as EmblaEventType, handleAutoPlaySelect);\n emblaApi.on(\"button:prev\" as EmblaEventType, handlePrevButton);\n emblaApi.on(\"button:next\" as EmblaEventType, handleNextButton);\n\n // When `reInit` is called or when window is resized\n emblaApi.on(\"reInit\", updateIndex);\n\n return () => {\n dragX.clean();\n emblaApi.off(\"select\", handleSelect);\n emblaApi.off(\"autoplay:select\" as EmblaEventType, handleAutoPlaySelect);\n emblaApi.off(\"button:prev\" as EmblaEventType, handlePrevButton);\n emblaApi.off(\"button:next\" as EmblaEventType, handleNextButton);\n emblaApi.off(\"reInit\", updateIndex);\n };\n\n function handleSelect() {\n handleAnySelect(true); // This could be a swipe action. As this runs first the debounce will override the value otherwise\n }\n function handleAutoPlaySelect() {\n handleAnySelect(false);\n }\n function handlePrevButton() {\n emblaApi?.scrollPrev();\n onPrev?.();\n handleAnySelect(false);\n }\n function handleNextButton() {\n emblaApi?.scrollNext();\n onNext?.();\n handleAnySelect(false);\n }\n }, [emblaApi, updateIndex, variant]);\n\n if (!children.length) return null;\n\n const handleGotoPrevSlide = () => emblaApi?.emit(\"button:prev\" as EmblaEventType);\n const handleGotoNextSlide = () => emblaApi?.emit(\"button:next\" as EmblaEventType);\n\n return (\n <div>\n <CarouselContainer variant={variant}>\n {variant === \"default\" && children.length > 1 && (\n <>\n <ChevronArrow\n data-testid=\"carousel-arrow-prev\"\n direction=\"left\"\n onClick={handleGotoPrevSlide}\n />\n <ChevronArrow\n data-testid=\"carousel-arrow-next\"\n direction=\"right\"\n onClick={handleGotoNextSlide}\n />\n </>\n )}\n\n <Embla ref={emblaRef}>\n <EmblaContainer>\n {children.map(child => (\n <EmblaSlide key={child.key}>{child}</EmblaSlide>\n ))}\n </EmblaContainer>\n </Embla>\n </CarouselContainer>\n\n <Footer\n children={children}\n variant={variant}\n emblaApi={emblaApi}\n currentIndex={currentIndex}\n />\n </div>\n );\n};\n\nexport default Carousel;\n\nconst AutoplayFlags = {\n play: true,\n stopOnMouseEnter: true,\n stopOnInteraction: false,\n};\n\nfunction watchDragX(emblaApi: EmblaCarouselType) {\n emblaApi.on(\"pointerDown\", watchMouse);\n\n let start: number | undefined;\n let end: number | undefined;\n\n return {\n get value() {\n return typeof start === \"undefined\" || typeof end === \"undefined\" ? 0 : end - start;\n },\n clean: () => {\n emblaApi.off(\"pointerDown\", watchMouse);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n },\n };\n\n function watchMouse() {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n }\n function handleMouseMove(event: MouseEvent) {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n start = event.clientX;\n end = undefined;\n }\n function handleMouseUp(event: MouseEvent) {\n document.removeEventListener(\"mouseup\", handleMouseUp);\n end = event.clientX;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styled", "useEmblaCarousel", "Autoplay", "debounce", "React", "Footer"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/components/layout/Carousel/types.
|
|
4
|
-
"sourcesContent": ["import { ReactElement } from \"react\";\nimport { UseEmblaCarouselType } from \"embla-carousel-react\";\n\nexport type Variant = \"content-card\" | \"default\";\n\nexport type Props = {\n children: ReactElement[];\n variant?: Variant;\n
|
|
3
|
+
"sources": ["../../../../../src/components/layout/Carousel/types.ts"],
|
|
4
|
+
"sourcesContent": ["import { ReactElement } from \"react\";\nimport { UseEmblaCarouselType } from \"embla-carousel-react\";\n\nexport type Variant = \"content-card\" | \"default\";\n\nexport type Props = {\n children: ReactElement[];\n autoPlay?: number;\n variant?: Variant;\n onPrev?: () => void;\n onNext?: () => void;\n};\n\n/**\n * Carousel's sub props to be passed to any component used by the carousel..\n */\nexport type SubProps = Required<Pick<Props, \"children\" | \"variant\">> & {\n emblaApi: UseEmblaCarouselType[1];\n currentIndex: number;\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -51,7 +51,7 @@ function PortfolioContentCard({
|
|
|
51
51
|
event.stopPropagation();
|
|
52
52
|
onClose(event);
|
|
53
53
|
};
|
|
54
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { image, tag, onClick }, tag && /* @__PURE__ */ import_react.default.createElement(StyledTag, null, tag), /* @__PURE__ */ import_react.default.createElement(Title, null, title), description && /* @__PURE__ */ import_react.default.createElement(Desc, null, description), cta && /* @__PURE__ */ import_react.default.createElement(import_cta.Button, { variant: "main", outline: false, onClick }, cta), /* @__PURE__ */ import_react.default.createElement(import_styles.StyleProvider, { selectedPalette: "dark" }, /* @__PURE__ */ import_react.default.createElement(CloseButton, { onClick: handleClose })));
|
|
54
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { image, tag, onClick }, tag && /* @__PURE__ */ import_react.default.createElement(StyledTag, null, tag), /* @__PURE__ */ import_react.default.createElement(Title, null, title), description && /* @__PURE__ */ import_react.default.createElement(Desc, null, description), cta && /* @__PURE__ */ import_react.default.createElement(import_cta.Button, { variant: "main", outline: false, onClick }, cta), /* @__PURE__ */ import_react.default.createElement(import_styles.StyleProvider, { selectedPalette: "dark" }, /* @__PURE__ */ import_react.default.createElement(CloseButton, { "data-testid": "portfolio-card-close-button", onClick: handleClose })));
|
|
55
55
|
}
|
|
56
56
|
const StyledTag = (0, import_styled_components.default)(import_Tag.default).attrs({ size: "medium", type: "plain", active: true })`
|
|
57
57
|
font-size: 11px;
|
|
@@ -80,6 +80,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
80
80
|
padding: 16px;
|
|
81
81
|
padding-top: ${(p) => p.tag ? "16px" : "24px"};
|
|
82
82
|
padding-right: 50%;
|
|
83
|
+
flex-basis: 100%;
|
|
83
84
|
|
|
84
85
|
position: relative;
|
|
85
86
|
display: flex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { type ReactEventHandler } from \"react\";\nimport styled from \"styled-components\";\n\nimport { StyleProvider } from \"../../../../styles\";\nimport { Icons } from \"../../../../assets\";\nimport { Text } from \"../../../asorted\";\nimport { Button } from \"../../../cta\";\nimport Tag from \"../../../Tag\";\n\nexport type PortfolioContentCardProps = {\n title: string;\n cta?: string;\n description?: string;\n tag?: string;\n image?: string;\n\n onClick: ReactEventHandler;\n onClose: ReactEventHandler;\n};\n\nexport default function PortfolioContentCard({\n title,\n cta,\n description,\n tag,\n image,\n onClick,\n onClose,\n}: PortfolioContentCardProps) {\n const handleClose: ReactEventHandler = event => {\n event.stopPropagation();\n onClose(event);\n };\n\n return (\n <Wrapper image={image} tag={tag} onClick={onClick}>\n {tag && <StyledTag>{tag}</StyledTag>}\n <Title>{title}</Title>\n {description && <Desc>{description}</Desc>}\n {cta && (\n <Button variant=\"main\" outline={false} onClick={onClick}>\n {cta}\n </Button>\n )}\n <StyleProvider selectedPalette=\"dark\">\n <CloseButton onClick={handleClose} />\n </StyleProvider>\n </Wrapper>\n );\n}\n\nconst StyledTag = styled(Tag).attrs({ size: \"medium\", type: \"plain\", active: true })`\n font-size: 11px;\n background-color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Title = styled(Text).attrs({ variant: \"h4Inter\" })`\n font-family: Inter;\n font-size: 24px;\n font-weight: 600;\n`;\n\nconst Desc = styled(Text).attrs({ variant: \"small\", color: \"neutral.c70\" })`\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 500;\n padding-bottom: 8px;\n`;\n\nconst Wrapper = styled.div<Pick<PortfolioContentCardProps, \"image\" | \"tag\" | \"onClick\">>`\n background-color: ${p => p.theme.colors.background.card};\n background-image: ${p => (p.image ? `url(\"${p.image}\")` : \"none\")};\n background-position: right center;\n background-repeat: no-repeat;\n background-size: 50% auto;\n\n cursor: pointer;\n padding: 16px;\n padding-top: ${p => (p.tag ? \"16px\" : \"24px\")};\n padding-right: 50%;\n\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 4px;\n`;\n\nconst CloseButton = styled(Button).attrs({\n Icon: <Icons.Close size=\"XS\" />,\n iconButton: true,\n outline: true,\n})`\n background-color: ${p => p.theme.colors.neutral.c30};\n position: absolute;\n top: 10px;\n right: 10px;\n width: 24px;\n height: 24px;\n svg {\n width: 12px;\n height: 12px;\n }\n`;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAA8B;AAC9B,oBAAsB;AACtB,qBAAqB;AACrB,iBAAuB;AACvB,iBAAgB;AAaD,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,cAAiC,WAAS;AAC9C,UAAM,gBAAgB;AACtB,YAAQ,KAAK;AAAA,EACf;AAEA,SACE,6BAAAA,QAAA,cAAC,WAAQ,OAAc,KAAU,WAC9B,OAAO,6BAAAA,QAAA,cAAC,iBAAW,GAAI,GACxB,6BAAAA,QAAA,cAAC,aAAO,KAAM,GACb,eAAe,6BAAAA,QAAA,cAAC,YAAM,WAAY,GAClC,OACC,6BAAAA,QAAA,cAAC,qBAAO,SAAQ,QAAO,SAAS,OAAO,WACpC,GACH,GAEF,6BAAAA,QAAA,cAAC,+BAAc,iBAAgB,UAC7B,6BAAAA,QAAA,cAAC,eAAY,SAAS,aAAa,
|
|
4
|
+
"sourcesContent": ["import React, { type ReactEventHandler } from \"react\";\nimport styled from \"styled-components\";\n\nimport { StyleProvider } from \"../../../../styles\";\nimport { Icons } from \"../../../../assets\";\nimport { Text } from \"../../../asorted\";\nimport { Button } from \"../../../cta\";\nimport Tag from \"../../../Tag\";\n\nexport type PortfolioContentCardProps = {\n title: string;\n cta?: string;\n description?: string;\n tag?: string;\n image?: string;\n\n onClick: ReactEventHandler;\n onClose: ReactEventHandler;\n};\n\nexport default function PortfolioContentCard({\n title,\n cta,\n description,\n tag,\n image,\n onClick,\n onClose,\n}: PortfolioContentCardProps) {\n const handleClose: ReactEventHandler = event => {\n event.stopPropagation();\n onClose(event);\n };\n\n return (\n <Wrapper image={image} tag={tag} onClick={onClick}>\n {tag && <StyledTag>{tag}</StyledTag>}\n <Title>{title}</Title>\n {description && <Desc>{description}</Desc>}\n {cta && (\n <Button variant=\"main\" outline={false} onClick={onClick}>\n {cta}\n </Button>\n )}\n <StyleProvider selectedPalette=\"dark\">\n <CloseButton data-testid=\"portfolio-card-close-button\" onClick={handleClose} />\n </StyleProvider>\n </Wrapper>\n );\n}\n\nconst StyledTag = styled(Tag).attrs({ size: \"medium\", type: \"plain\", active: true })`\n font-size: 11px;\n background-color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Title = styled(Text).attrs({ variant: \"h4Inter\" })`\n font-family: Inter;\n font-size: 24px;\n font-weight: 600;\n`;\n\nconst Desc = styled(Text).attrs({ variant: \"small\", color: \"neutral.c70\" })`\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 500;\n padding-bottom: 8px;\n`;\n\nconst Wrapper = styled.div<Pick<PortfolioContentCardProps, \"image\" | \"tag\" | \"onClick\">>`\n background-color: ${p => p.theme.colors.background.card};\n background-image: ${p => (p.image ? `url(\"${p.image}\")` : \"none\")};\n background-position: right center;\n background-repeat: no-repeat;\n background-size: 50% auto;\n\n cursor: pointer;\n padding: 16px;\n padding-top: ${p => (p.tag ? \"16px\" : \"24px\")};\n padding-right: 50%;\n flex-basis: 100%;\n\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 4px;\n`;\n\nconst CloseButton = styled(Button).attrs({\n Icon: <Icons.Close size=\"XS\" />,\n iconButton: true,\n outline: true,\n})`\n background-color: ${p => p.theme.colors.neutral.c30};\n position: absolute;\n top: 10px;\n right: 10px;\n width: 24px;\n height: 24px;\n svg {\n width: 12px;\n height: 12px;\n }\n`;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAA8B;AAC9B,oBAAsB;AACtB,qBAAqB;AACrB,iBAAuB;AACvB,iBAAgB;AAaD,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,cAAiC,WAAS;AAC9C,UAAM,gBAAgB;AACtB,YAAQ,KAAK;AAAA,EACf;AAEA,SACE,6BAAAA,QAAA,cAAC,WAAQ,OAAc,KAAU,WAC9B,OAAO,6BAAAA,QAAA,cAAC,iBAAW,GAAI,GACxB,6BAAAA,QAAA,cAAC,aAAO,KAAM,GACb,eAAe,6BAAAA,QAAA,cAAC,YAAM,WAAY,GAClC,OACC,6BAAAA,QAAA,cAAC,qBAAO,SAAQ,QAAO,SAAS,OAAO,WACpC,GACH,GAEF,6BAAAA,QAAA,cAAC,+BAAc,iBAAgB,UAC7B,6BAAAA,QAAA,cAAC,eAAY,eAAY,+BAA8B,SAAS,aAAa,CAC/E,CACF;AAEJ;AAEA,MAAM,gBAAY,yBAAAC,SAAO,WAAAC,OAAG,EAAE,MAAM,EAAE,MAAM,UAAU,MAAM,SAAS,QAAQ,KAAK,CAAC;AAAA;AAAA,sBAE7D,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGrD,MAAM,YAAQ,yBAAAD,SAAO,mBAAI,EAAE,MAAM,EAAE,SAAS,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,WAAO,yBAAAA,SAAO,mBAAI,EAAE,MAAM,EAAE,SAAS,SAAS,OAAO,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1E,MAAM,UAAU,yBAAAA,QAAO;AAAA,sBACD,OAAK,EAAE,MAAM,OAAO,WAAW,IAAI;AAAA,sBACnC,OAAM,EAAE,QAAQ,QAAQ,EAAE,KAAK,OAAO,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOlD,OAAM,EAAE,MAAM,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY/C,MAAM,kBAAc,yBAAAA,SAAO,iBAAM,EAAE,MAAM;AAAA,EACvC,MAAM,6BAAAD,QAAA,cAAC,oBAAM,OAAN,EAAY,MAAK,MAAK;AAAA,EAC7B,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": ["React", "styled", "Tag"]
|
|
7
7
|
}
|
|
@@ -3,6 +3,6 @@ import { Props } from "./types";
|
|
|
3
3
|
/**
|
|
4
4
|
* This component uses the https://github.com/davidjerleke/embla-carousel library.
|
|
5
5
|
*/
|
|
6
|
-
declare const Carousel: ({ children, variant,
|
|
6
|
+
declare const Carousel: ({ children, variant, autoPlay, onNext, onPrev }: Props) => React.JSX.Element | null;
|
|
7
7
|
export default Carousel;
|
|
8
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AA6BhC;;GAEG;AACH,QAAA,MAAM,QAAQ,oDAAqE,KAAK,6BA0GvF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import Autoplay from "embla-carousel-autoplay";
|
|
1
2
|
import useEmblaCarousel from "embla-carousel-react";
|
|
3
|
+
import debounce from "lodash/debounce";
|
|
2
4
|
import React, { useCallback, useEffect, useState } from "react";
|
|
3
5
|
import styled from "styled-components";
|
|
4
6
|
import Footer from "./Footer";
|
|
@@ -28,37 +30,107 @@ const CarouselContainer = styled.div `
|
|
|
28
30
|
/**
|
|
29
31
|
* This component uses the https://github.com/davidjerleke/embla-carousel library.
|
|
30
32
|
*/
|
|
31
|
-
const Carousel = ({ children, variant = "default",
|
|
33
|
+
const Carousel = ({ children, variant = "default", autoPlay = 0, onNext, onPrev }) => {
|
|
32
34
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
33
|
-
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
|
|
35
|
+
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, autoPlay ? [Autoplay(Object.assign({ delay: autoPlay }, AutoplayFlags))] : []);
|
|
34
36
|
const updateIndex = useCallback(() => {
|
|
35
37
|
if (!emblaApi)
|
|
36
38
|
return;
|
|
37
39
|
const newIndex = emblaApi.selectedScrollSnap();
|
|
38
40
|
setCurrentIndex(newIndex);
|
|
39
41
|
emblaApi.scrollTo(newIndex);
|
|
40
|
-
|
|
41
|
-
}, [emblaApi, onChange]);
|
|
42
|
+
}, [emblaApi]);
|
|
42
43
|
useEffect(() => {
|
|
43
44
|
if (!emblaApi)
|
|
44
45
|
return;
|
|
45
46
|
// Initial call to update carousel index
|
|
46
47
|
updateIndex();
|
|
48
|
+
const dragX = watchDragX(emblaApi);
|
|
47
49
|
// When the selected scroll snap changes
|
|
48
|
-
|
|
50
|
+
const handleAnySelect = debounce((mightBeASwipe) => {
|
|
51
|
+
updateIndex();
|
|
52
|
+
if (!mightBeASwipe || variant !== "default")
|
|
53
|
+
return; // onNext/onPrev events are not supported for content-card variant ATM
|
|
54
|
+
if (dragX.value > 0)
|
|
55
|
+
return onPrev === null || onPrev === void 0 ? void 0 : onPrev();
|
|
56
|
+
if (dragX.value < 0)
|
|
57
|
+
return onNext === null || onNext === void 0 ? void 0 : onNext();
|
|
58
|
+
}, 0); // all events are fired on the same tick so no need to wait past the next tick
|
|
59
|
+
emblaApi.on("select", handleSelect);
|
|
60
|
+
emblaApi.on("autoplay:select", handleAutoPlaySelect);
|
|
61
|
+
emblaApi.on("button:prev", handlePrevButton);
|
|
62
|
+
emblaApi.on("button:next", handleNextButton);
|
|
49
63
|
// When `reInit` is called or when window is resized
|
|
50
64
|
emblaApi.on("reInit", updateIndex);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
65
|
+
return () => {
|
|
66
|
+
dragX.clean();
|
|
67
|
+
emblaApi.off("select", handleSelect);
|
|
68
|
+
emblaApi.off("autoplay:select", handleAutoPlaySelect);
|
|
69
|
+
emblaApi.off("button:prev", handlePrevButton);
|
|
70
|
+
emblaApi.off("button:next", handleNextButton);
|
|
71
|
+
emblaApi.off("reInit", updateIndex);
|
|
72
|
+
};
|
|
73
|
+
function handleSelect() {
|
|
74
|
+
handleAnySelect(true); // This could be a swipe action. As this runs first the debounce will override the value otherwise
|
|
75
|
+
}
|
|
76
|
+
function handleAutoPlaySelect() {
|
|
77
|
+
handleAnySelect(false);
|
|
78
|
+
}
|
|
79
|
+
function handlePrevButton() {
|
|
80
|
+
emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollPrev();
|
|
81
|
+
onPrev === null || onPrev === void 0 ? void 0 : onPrev();
|
|
82
|
+
handleAnySelect(false);
|
|
83
|
+
}
|
|
84
|
+
function handleNextButton() {
|
|
85
|
+
emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollNext();
|
|
86
|
+
onNext === null || onNext === void 0 ? void 0 : onNext();
|
|
87
|
+
handleAnySelect(false);
|
|
88
|
+
}
|
|
89
|
+
}, [emblaApi, updateIndex, variant]);
|
|
90
|
+
if (!children.length)
|
|
91
|
+
return null;
|
|
92
|
+
const handleGotoPrevSlide = () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.emit("button:prev");
|
|
93
|
+
const handleGotoNextSlide = () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.emit("button:next");
|
|
54
94
|
return (React.createElement("div", null,
|
|
55
95
|
React.createElement(CarouselContainer, { variant: variant },
|
|
56
96
|
variant === "default" && children.length > 1 && (React.createElement(React.Fragment, null,
|
|
57
|
-
React.createElement(ChevronArrow, { direction: "left", onClick: handleGotoPrevSlide }),
|
|
58
|
-
React.createElement(ChevronArrow, { direction: "right", onClick: handleGotoNextSlide }))),
|
|
97
|
+
React.createElement(ChevronArrow, { "data-testid": "carousel-arrow-prev", direction: "left", onClick: handleGotoPrevSlide }),
|
|
98
|
+
React.createElement(ChevronArrow, { "data-testid": "carousel-arrow-next", direction: "right", onClick: handleGotoNextSlide }))),
|
|
59
99
|
React.createElement(Embla, { ref: emblaRef },
|
|
60
100
|
React.createElement(EmblaContainer, null, children.map(child => (React.createElement(EmblaSlide, { key: child.key }, child)))))),
|
|
61
101
|
React.createElement(Footer, { children: children, variant: variant, emblaApi: emblaApi, currentIndex: currentIndex })));
|
|
62
102
|
};
|
|
63
103
|
export default Carousel;
|
|
104
|
+
const AutoplayFlags = {
|
|
105
|
+
play: true,
|
|
106
|
+
stopOnMouseEnter: true,
|
|
107
|
+
stopOnInteraction: false,
|
|
108
|
+
};
|
|
109
|
+
function watchDragX(emblaApi) {
|
|
110
|
+
emblaApi.on("pointerDown", watchMouse);
|
|
111
|
+
let start;
|
|
112
|
+
let end;
|
|
113
|
+
return {
|
|
114
|
+
get value() {
|
|
115
|
+
return typeof start === "undefined" || typeof end === "undefined" ? 0 : end - start;
|
|
116
|
+
},
|
|
117
|
+
clean: () => {
|
|
118
|
+
emblaApi.off("pointerDown", watchMouse);
|
|
119
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
120
|
+
},
|
|
121
|
+
};
|
|
122
|
+
function watchMouse() {
|
|
123
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
124
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
125
|
+
}
|
|
126
|
+
function handleMouseMove(event) {
|
|
127
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
128
|
+
start = event.clientX;
|
|
129
|
+
end = undefined;
|
|
130
|
+
}
|
|
131
|
+
function handleMouseUp(event) {
|
|
132
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
133
|
+
end = event.clientX;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
64
136
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,8 +3,10 @@ import { UseEmblaCarouselType } from "embla-carousel-react";
|
|
|
3
3
|
export type Variant = "content-card" | "default";
|
|
4
4
|
export type Props = {
|
|
5
5
|
children: ReactElement[];
|
|
6
|
+
autoPlay?: number;
|
|
6
7
|
variant?: Variant;
|
|
7
|
-
|
|
8
|
+
onPrev?: () => void;
|
|
9
|
+
onNext?: () => void;
|
|
8
10
|
};
|
|
9
11
|
/**
|
|
10
12
|
* Carousel's sub props to be passed to any component used by the carousel..
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,MAAM,OAAO,GAAG,cAAc,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC,GAAG;IACrE,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.ts"],"names":[],"mappings":""}
|
|
@@ -16,7 +16,7 @@ export default function PortfolioContentCard({ title, cta, description, tag, ima
|
|
|
16
16
|
description && React.createElement(Desc, null, description),
|
|
17
17
|
cta && (React.createElement(Button, { variant: "main", outline: false, onClick: onClick }, cta)),
|
|
18
18
|
React.createElement(StyleProvider, { selectedPalette: "dark" },
|
|
19
|
-
React.createElement(CloseButton, { onClick: handleClose }))));
|
|
19
|
+
React.createElement(CloseButton, { "data-testid": "portfolio-card-close-button", onClick: handleClose }))));
|
|
20
20
|
}
|
|
21
21
|
const StyledTag = styled(Tag).attrs({ size: "medium", type: "plain", active: true }) `
|
|
22
22
|
font-size: 11px;
|
|
@@ -45,6 +45,7 @@ const Wrapper = styled.div `
|
|
|
45
45
|
padding: 16px;
|
|
46
46
|
padding-top: ${p => (p.tag ? "16px" : "24px")};
|
|
47
47
|
padding-right: 50%;
|
|
48
|
+
flex-basis: 100%;
|
|
48
49
|
|
|
49
50
|
position: relative;
|
|
50
51
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AACtD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,GAAG,MAAM,cAAc,CAAC;AAa/B,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,GAAG,EACH,WAAW,EACX,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,GACmB;IAC1B,MAAM,WAAW,GAAsB,KAAK,CAAC,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO;QAC9C,GAAG,IAAI,oBAAC,SAAS,QAAE,GAAG,CAAa;QACpC,oBAAC,KAAK,QAAE,KAAK,CAAS;QACrB,WAAW,IAAI,oBAAC,IAAI,QAAE,WAAW,CAAQ;QACzC,GAAG,IAAI,CACN,oBAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IACpD,GAAG,CACG,CACV;QACD,oBAAC,aAAa,IAAC,eAAe,EAAC,MAAM;YACnC,oBAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AACtD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,GAAG,MAAM,cAAc,CAAC;AAa/B,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,GAAG,EACH,WAAW,EACX,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,GACmB;IAC1B,MAAM,WAAW,GAAsB,KAAK,CAAC,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO;QAC9C,GAAG,IAAI,oBAAC,SAAS,QAAE,GAAG,CAAa;QACpC,oBAAC,KAAK,QAAE,KAAK,CAAS;QACrB,WAAW,IAAI,oBAAC,IAAI,QAAE,WAAW,CAAQ;QACzC,GAAG,IAAI,CACN,oBAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IACpD,GAAG,CACG,CACV;QACD,oBAAC,aAAa,IAAC,eAAe,EAAC,MAAM;YACnC,oBAAC,WAAW,mBAAa,6BAA6B,EAAC,OAAO,EAAE,WAAW,GAAI,CACjE,CACR,CACX,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA;;sBAE9D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACpD,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;;;;CAIvD,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAA;;;;;;CAM1E,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA8D;sBAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI;sBACnC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;iBAOlD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;CAU9C,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;IACvC,IAAI,EAAE,oBAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAC,IAAI,GAAG;IAC/B,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd,CAAC,CAAA;sBACoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;;;;;;CAUpD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.17.0-nightly.
|
|
3
|
+
"version": "0.17.0-nightly.2",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -59,8 +59,10 @@
|
|
|
59
59
|
"@floating-ui/react-dom": "^0.4.0",
|
|
60
60
|
"@tippyjs/react": "^4.2.6",
|
|
61
61
|
"color": "^4.0.0",
|
|
62
|
+
"embla-carousel-autoplay": "8.4.0",
|
|
62
63
|
"embla-carousel-react": "8.0.0-rc17",
|
|
63
64
|
"framer-motion": "^11.3.28",
|
|
65
|
+
"lodash": "4",
|
|
64
66
|
"react-is": "^17.0.2",
|
|
65
67
|
"react-select": "^5.2.1",
|
|
66
68
|
"react-spring": "8.0.27",
|
|
@@ -92,6 +94,7 @@
|
|
|
92
94
|
"@svgr/plugin-svgo": "*",
|
|
93
95
|
"@types/color": "^3.0.2",
|
|
94
96
|
"@types/hoist-non-react-statics": "^3.3.1",
|
|
97
|
+
"@types/lodash": "4",
|
|
95
98
|
"@types/react": "~18.2.21",
|
|
96
99
|
"@types/react-dom": "^18.2.13",
|
|
97
100
|
"@types/react-is": "^17.0.3",
|