@ledgerhq/react-ui 0.17.0-nightly.2 → 0.17.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/lib/cjs/components/layout/Carousel/Carousel.stories.js +4 -11
- package/lib/cjs/components/layout/Carousel/Carousel.stories.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/index.js +9 -98
- 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 +1 -2
- 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 +10 -82
- package/lib/components/layout/Carousel/index.js.map +1 -1
- package/lib/components/layout/Carousel/types.d.ts +1 -3
- 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 +1 -2
- package/lib/components/layout/ContentCard/PortfolioContentCard/index.js.map +1 -1
- package/package.json +2 -5
|
@@ -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: 1, max: 10, step: 1 }
|
|
47
47
|
},
|
|
48
48
|
variant: {
|
|
49
49
|
description: "Variant for the carousel.",
|
|
@@ -51,20 +51,13 @@ var Carousel_stories_default = {
|
|
|
51
51
|
defaultValue: "default",
|
|
52
52
|
control: "inline-radio"
|
|
53
53
|
},
|
|
54
|
-
|
|
55
|
-
description: "
|
|
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."
|
|
54
|
+
onChange: {
|
|
55
|
+
description: "Function called when a new slide is shown."
|
|
62
56
|
}
|
|
63
57
|
},
|
|
64
58
|
args: {
|
|
65
59
|
variant: "default",
|
|
66
|
-
children: 5
|
|
67
|
-
autoPlay: 0
|
|
60
|
+
children: 5
|
|
68
61
|
},
|
|
69
62
|
parameters: {
|
|
70
63
|
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,
|
|
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: 1, 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 onChange: {\n description: \"Function called when a new slide is shown.\",\n },\n },\n args: {\n variant: \"default\",\n children: 5,\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,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;",
|
|
6
6
|
"names": ["React", "Carousel", "PortfolioContentCard"]
|
|
7
7
|
}
|
|
@@ -31,9 +31,7 @@ __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"));
|
|
35
34
|
var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
|
|
36
|
-
var import_debounce = __toESM(require("lodash/debounce"));
|
|
37
35
|
var import_react = __toESM(require("react"));
|
|
38
36
|
var import_styled_components = __toESM(require("styled-components"));
|
|
39
37
|
var import_Footer = __toESM(require("./Footer"));
|
|
@@ -60,82 +58,27 @@ const CarouselContainer = import_styled_components.default.div`
|
|
|
60
58
|
--hover-transition: 1;
|
|
61
59
|
}
|
|
62
60
|
`;
|
|
63
|
-
const Carousel = ({ children, variant = "default",
|
|
61
|
+
const Carousel = ({ children, variant = "default", onChange }) => {
|
|
64
62
|
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
|
|
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
|
-
);
|
|
63
|
+
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({ loop: true });
|
|
69
64
|
const updateIndex = (0, import_react.useCallback)(() => {
|
|
70
65
|
if (!emblaApi)
|
|
71
66
|
return;
|
|
72
67
|
const newIndex = emblaApi.selectedScrollSnap();
|
|
73
68
|
setCurrentIndex(newIndex);
|
|
74
69
|
emblaApi.scrollTo(newIndex);
|
|
75
|
-
|
|
70
|
+
onChange == null ? void 0 : onChange(newIndex);
|
|
71
|
+
}, [emblaApi, onChange]);
|
|
76
72
|
(0, import_react.useEffect)(() => {
|
|
77
73
|
if (!emblaApi)
|
|
78
74
|
return;
|
|
79
75
|
updateIndex();
|
|
80
|
-
|
|
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);
|
|
76
|
+
emblaApi.on("select", updateIndex);
|
|
94
77
|
emblaApi.on("reInit", updateIndex);
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
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(
|
|
78
|
+
}, [emblaApi, updateIndex]);
|
|
79
|
+
const handleGotoPrevSlide = () => emblaApi == null ? void 0 : emblaApi.scrollPrev();
|
|
80
|
+
const handleGotoNextSlide = () => emblaApi == null ? void 0 : emblaApi.scrollNext();
|
|
81
|
+
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(import_ChevronArrow.ChevronArrow, { direction: "left", onClick: handleGotoPrevSlide }), /* @__PURE__ */ import_react.default.createElement(import_ChevronArrow.ChevronArrow, { direction: "right", onClick: handleGotoNextSlide })), /* @__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(
|
|
139
82
|
import_Footer.default,
|
|
140
83
|
{
|
|
141
84
|
children,
|
|
@@ -146,36 +89,4 @@ const Carousel = ({ children, variant = "default", autoPlay = 0, onNext, onPrev
|
|
|
146
89
|
));
|
|
147
90
|
};
|
|
148
91
|
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
|
-
}
|
|
181
92
|
//# 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["styled", "useEmblaCarousel", "
|
|
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\", onChange }: Props) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });\n\n const updateIndex = useCallback(() => {\n if (!emblaApi) return;\n\n const newIndex = emblaApi.selectedScrollSnap();\n setCurrentIndex(newIndex);\n emblaApi.scrollTo(newIndex);\n\n onChange?.(newIndex);\n }, [emblaApi, onChange]);\n\n useEffect(() => {\n if (!emblaApi) return;\n\n // Initial call to update carousel index\n updateIndex();\n\n // When the selected scroll snap changes\n emblaApi.on(\"select\", updateIndex);\n\n // When `reInit` is called or when window is resized\n emblaApi.on(\"reInit\", updateIndex);\n }, [emblaApi, updateIndex]);\n\n const handleGotoPrevSlide = () => emblaApi?.scrollPrev();\n const handleGotoNextSlide = () => emblaApi?.scrollNext();\n\n return (\n <div>\n <CarouselContainer variant={variant}>\n {variant === \"default\" && children.length > 1 && (\n <>\n <ChevronArrow direction=\"left\" onClick={handleGotoPrevSlide} />\n <ChevronArrow direction=\"right\" onClick={handleGotoNextSlide} />\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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA6B;AAC7B,mBAAwD;AACxD,+BAAmB;AACnB,oBAAmB;AAEnB,0BAA6B;AAE7B,MAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAIrB,MAAM,iBAAiB,yBAAAA,QAAO;AAAA;AAAA;AAI9B,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,MAAM,oBAAoB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYjC,MAAM,WAAW,CAAC,EAAE,UAAU,UAAU,WAAW,SAAS,MAAa;AACvE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,CAAC;AAClD,QAAM,CAAC,UAAU,QAAQ,QAAI,4BAAAC,SAAiB,EAAE,MAAM,KAAK,CAAC;AAE5D,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,CAAC;AAAU;AAEf,UAAM,WAAW,SAAS,mBAAmB;AAC7C,oBAAgB,QAAQ;AACxB,aAAS,SAAS,QAAQ;AAE1B,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,8BAAU,MAAM;AACd,QAAI,CAAC;AAAU;AAGf,gBAAY;AAGZ,aAAS,GAAG,UAAU,WAAW;AAGjC,aAAS,GAAG,UAAU,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,QAAM,sBAAsB,MAAM,qCAAU;AAC5C,QAAM,sBAAsB,MAAM,qCAAU;AAE5C,SACE,6BAAAC,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,qBAAkB,WAChB,YAAY,aAAa,SAAS,SAAS,KAC1C,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,oCAAa,WAAU,QAAO,SAAS,qBAAqB,GAC7D,6BAAAA,QAAA,cAAC,oCAAa,WAAU,SAAQ,SAAS,qBAAqB,CAChE,GAGF,6BAAAA,QAAA,cAAC,SAAM,KAAK,YACV,6BAAAA,QAAA,cAAC,sBACE,SAAS,IAAI,WACZ,6BAAAA,QAAA,cAAC,cAAW,KAAK,MAAM,OAAM,KAAM,CACpC,CACH,CACF,CACF,GAEA,6BAAAA,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF;AAEJ;AAEA,IAAO,mBAAQ;",
|
|
6
|
+
"names": ["styled", "useEmblaCarousel", "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
|
|
3
|
+
"sources": ["../../../../../src/components/layout/Carousel/types.tsx"],
|
|
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 onChange?: (index: number) => 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, {
|
|
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 })));
|
|
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,7 +80,6 @@ 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%;
|
|
84
83
|
|
|
85
84
|
position: relative;
|
|
86
85
|
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
|
|
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,
|
|
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,CACrC,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;AAW/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, onChange }: Props) => React.JSX.Element;
|
|
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":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AA6BhC;;GAEG;AACH,QAAA,MAAM,QAAQ,oCAAiD,KAAK,sBAyDnE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import Autoplay from "embla-carousel-autoplay";
|
|
2
1
|
import useEmblaCarousel from "embla-carousel-react";
|
|
3
|
-
import debounce from "lodash/debounce";
|
|
4
2
|
import React, { useCallback, useEffect, useState } from "react";
|
|
5
3
|
import styled from "styled-components";
|
|
6
4
|
import Footer from "./Footer";
|
|
@@ -30,107 +28,37 @@ const CarouselContainer = styled.div `
|
|
|
30
28
|
/**
|
|
31
29
|
* This component uses the https://github.com/davidjerleke/embla-carousel library.
|
|
32
30
|
*/
|
|
33
|
-
const Carousel = ({ children, variant = "default",
|
|
31
|
+
const Carousel = ({ children, variant = "default", onChange }) => {
|
|
34
32
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
35
|
-
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }
|
|
33
|
+
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
|
|
36
34
|
const updateIndex = useCallback(() => {
|
|
37
35
|
if (!emblaApi)
|
|
38
36
|
return;
|
|
39
37
|
const newIndex = emblaApi.selectedScrollSnap();
|
|
40
38
|
setCurrentIndex(newIndex);
|
|
41
39
|
emblaApi.scrollTo(newIndex);
|
|
42
|
-
|
|
40
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
|
|
41
|
+
}, [emblaApi, onChange]);
|
|
43
42
|
useEffect(() => {
|
|
44
43
|
if (!emblaApi)
|
|
45
44
|
return;
|
|
46
45
|
// Initial call to update carousel index
|
|
47
46
|
updateIndex();
|
|
48
|
-
const dragX = watchDragX(emblaApi);
|
|
49
47
|
// When the selected scroll snap changes
|
|
50
|
-
|
|
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);
|
|
48
|
+
emblaApi.on("select", updateIndex);
|
|
63
49
|
// When `reInit` is called or when window is resized
|
|
64
50
|
emblaApi.on("reInit", updateIndex);
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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");
|
|
51
|
+
}, [emblaApi, updateIndex]);
|
|
52
|
+
const handleGotoPrevSlide = () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollPrev();
|
|
53
|
+
const handleGotoNextSlide = () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollNext();
|
|
94
54
|
return (React.createElement("div", null,
|
|
95
55
|
React.createElement(CarouselContainer, { variant: variant },
|
|
96
56
|
variant === "default" && children.length > 1 && (React.createElement(React.Fragment, null,
|
|
97
|
-
React.createElement(ChevronArrow, {
|
|
98
|
-
React.createElement(ChevronArrow, {
|
|
57
|
+
React.createElement(ChevronArrow, { direction: "left", onClick: handleGotoPrevSlide }),
|
|
58
|
+
React.createElement(ChevronArrow, { direction: "right", onClick: handleGotoNextSlide }))),
|
|
99
59
|
React.createElement(Embla, { ref: emblaRef },
|
|
100
60
|
React.createElement(EmblaContainer, null, children.map(child => (React.createElement(EmblaSlide, { key: child.key }, child)))))),
|
|
101
61
|
React.createElement(Footer, { children: children, variant: variant, emblaApi: emblaApi, currentIndex: currentIndex })));
|
|
102
62
|
};
|
|
103
63
|
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
|
-
}
|
|
136
64
|
//# 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,10 +3,8 @@ 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;
|
|
7
6
|
variant?: Variant;
|
|
8
|
-
|
|
9
|
-
onNext?: () => void;
|
|
7
|
+
onChange?: (index: number) => void;
|
|
10
8
|
};
|
|
11
9
|
/**
|
|
12
10
|
* 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.tsx"],"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,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,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.tsx"],"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, {
|
|
19
|
+
React.createElement(CloseButton, { onClick: handleClose }))));
|
|
20
20
|
}
|
|
21
21
|
const StyledTag = styled(Tag).attrs({ size: "medium", type: "plain", active: true }) `
|
|
22
22
|
font-size: 11px;
|
|
@@ -45,7 +45,6 @@ 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%;
|
|
49
48
|
|
|
50
49
|
position: relative;
|
|
51
50
|
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,IAAC,OAAO,EAAE,WAAW,GAAI,CACvB,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;;;;;;;;;CAS9C,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
|
|
3
|
+
"version": "0.17.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -59,10 +59,8 @@
|
|
|
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",
|
|
63
62
|
"embla-carousel-react": "8.0.0-rc17",
|
|
64
63
|
"framer-motion": "^11.3.28",
|
|
65
|
-
"lodash": "4",
|
|
66
64
|
"react-is": "^17.0.2",
|
|
67
65
|
"react-select": "^5.2.1",
|
|
68
66
|
"react-spring": "8.0.27",
|
|
@@ -71,7 +69,7 @@
|
|
|
71
69
|
"styled-system": "^5.1.5",
|
|
72
70
|
"@ledgerhq/crypto-icons-ui": "^1.6.0",
|
|
73
71
|
"@ledgerhq/icons-ui": "^0.8.1",
|
|
74
|
-
"@ledgerhq/ui-shared": "^0.3.0
|
|
72
|
+
"@ledgerhq/ui-shared": "^0.3.0"
|
|
75
73
|
},
|
|
76
74
|
"peerDependencies": {
|
|
77
75
|
"react": ">=17.0.2",
|
|
@@ -94,7 +92,6 @@
|
|
|
94
92
|
"@svgr/plugin-svgo": "*",
|
|
95
93
|
"@types/color": "^3.0.2",
|
|
96
94
|
"@types/hoist-non-react-statics": "^3.3.1",
|
|
97
|
-
"@types/lodash": "4",
|
|
98
95
|
"@types/react": "~18.2.21",
|
|
99
96
|
"@types/react-dom": "^18.2.13",
|
|
100
97
|
"@types/react-is": "^17.0.3",
|