@ledgerhq/react-ui 0.16.5-nightly.1 → 0.17.0-nightly.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 +10 -7
- package/lib/cjs/components/layout/Carousel/Carousel.stories.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/ChevronArrow.js +90 -0
- package/lib/cjs/components/layout/Carousel/ChevronArrow.js.map +7 -0
- package/lib/cjs/components/layout/Carousel/Footer/Pagination/index.js +1 -1
- package/lib/cjs/components/layout/Carousel/Footer/Pagination/index.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/Footer/Pagination/utils.js +10 -11
- package/lib/cjs/components/layout/Carousel/Footer/Pagination/utils.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/Footer/index.js +2 -0
- package/lib/cjs/components/layout/Carousel/Footer/index.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/Footer/variantContentCard.js +0 -2
- package/lib/cjs/components/layout/Carousel/Footer/variantContentCard.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/index.js +12 -1
- package/lib/cjs/components/layout/Carousel/index.js.map +2 -2
- package/lib/components/layout/Carousel/ChevronArrow.d.ts +10 -0
- package/lib/components/layout/Carousel/ChevronArrow.d.ts.map +1 -0
- package/lib/components/layout/Carousel/ChevronArrow.js +58 -0
- package/lib/components/layout/Carousel/ChevronArrow.js.map +1 -0
- package/lib/components/layout/Carousel/Footer/Pagination/index.js +1 -1
- package/lib/components/layout/Carousel/Footer/Pagination/index.js.map +1 -1
- package/lib/components/layout/Carousel/Footer/Pagination/utils.d.ts +1 -1
- package/lib/components/layout/Carousel/Footer/Pagination/utils.d.ts.map +1 -1
- package/lib/components/layout/Carousel/Footer/Pagination/utils.js +10 -11
- package/lib/components/layout/Carousel/Footer/Pagination/utils.js.map +1 -1
- package/lib/components/layout/Carousel/Footer/index.d.ts +1 -1
- package/lib/components/layout/Carousel/Footer/index.d.ts.map +1 -1
- package/lib/components/layout/Carousel/Footer/index.js +2 -0
- package/lib/components/layout/Carousel/Footer/index.js.map +1 -1
- package/lib/components/layout/Carousel/Footer/variantContentCard.d.ts +1 -1
- package/lib/components/layout/Carousel/Footer/variantContentCard.d.ts.map +1 -1
- package/lib/components/layout/Carousel/Footer/variantContentCard.js +0 -2
- package/lib/components/layout/Carousel/Footer/variantContentCard.js.map +1 -1
- package/lib/components/layout/Carousel/index.d.ts.map +1 -1
- package/lib/components/layout/Carousel/index.js +17 -2
- package/lib/components/layout/Carousel/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -35,13 +35,13 @@ module.exports = __toCommonJS(Carousel_stories_exports);
|
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
36
|
var import__ = __toESM(require("./"));
|
|
37
37
|
const CarouselStory = (args) => {
|
|
38
|
-
const slides =
|
|
38
|
+
const slides = Array.from({ length: args.children }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
|
|
39
39
|
"div",
|
|
40
40
|
{
|
|
41
41
|
key: index,
|
|
42
42
|
style: {
|
|
43
43
|
backgroundColor: "hsl(" + Math.random() * 360 + ", 100%, 75%)",
|
|
44
|
-
padding: "
|
|
44
|
+
padding: "16px 24px",
|
|
45
45
|
borderRadius: "5px"
|
|
46
46
|
}
|
|
47
47
|
},
|
|
@@ -54,17 +54,19 @@ var Carousel_stories_default = {
|
|
|
54
54
|
title: "Layout/Carousel",
|
|
55
55
|
argTypes: {
|
|
56
56
|
children: {
|
|
57
|
-
description: "The elements to be displayed."
|
|
57
|
+
description: "The elements to be displayed.",
|
|
58
|
+
control: { type: "range", min: 1, max: 10, step: 1 }
|
|
58
59
|
},
|
|
59
60
|
variant: {
|
|
60
61
|
description: "Variant for the carousel.",
|
|
61
62
|
options: ["default", "content-card"],
|
|
62
63
|
defaultValue: "default",
|
|
63
|
-
control:
|
|
64
|
+
control: "inline-radio"
|
|
64
65
|
}
|
|
65
66
|
},
|
|
66
67
|
args: {
|
|
67
|
-
variant: "default"
|
|
68
|
+
variant: "default",
|
|
69
|
+
children: 5
|
|
68
70
|
},
|
|
69
71
|
parameters: {
|
|
70
72
|
docs: {
|
|
@@ -72,7 +74,8 @@ var Carousel_stories_default = {
|
|
|
72
74
|
component: "A simple Carousel component."
|
|
73
75
|
}
|
|
74
76
|
}
|
|
75
|
-
}
|
|
77
|
+
},
|
|
78
|
+
render: CarouselStory
|
|
76
79
|
};
|
|
77
|
-
const Default =
|
|
80
|
+
const Default = {};
|
|
78
81
|
//# sourceMappingURL=Carousel.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Carousel/Carousel.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\nconst CarouselStory = (args: Props) => {\n const slides =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\nconst CarouselStory = (args: Omit<Props, \"children\"> & { children: number }) => {\n const slides = Array.from({ length: args.children }, (_, index) => (\n <div\n key={index}\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 ));\n\n return <Carousel variant={args.variant} children={slides} />;\n};\n\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 },\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 render: CarouselStory,\n} satisfies Meta;\n\nexport const Default: StoryObj = {};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAClB,eAAqB;AAGrB,MAAM,gBAAgB,CAAC,SAAyD;AAC9E,QAAM,SAAS,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,GAAG,CAAC,GAAG,UACvD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,iBAAiB,SAAS,KAAK,OAAO,IAAI,MAAM;AAAA,QAChD,SAAS;AAAA,QACT,cAAc;AAAA,MAChB;AAAA;AAAA,IACD;AAAA,IACQ;AAAA,EACT,CACD;AAED,SAAO,6BAAAA,QAAA,cAAC,SAAAC,SAAA,EAAS,SAAS,KAAK,SAAS,UAAU,QAAQ;AAC5D;AAEA,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,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,QAAQ;AACV;AAEO,MAAM,UAAoB,CAAC;",
|
|
6
6
|
"names": ["React", "Carousel"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var ChevronArrow_exports = {};
|
|
30
|
+
__export(ChevronArrow_exports, {
|
|
31
|
+
ChevronArrow: () => ChevronArrow
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(ChevronArrow_exports);
|
|
34
|
+
var import_react = __toESM(require("react"));
|
|
35
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
36
|
+
var import_assets = require("../../../assets");
|
|
37
|
+
function ChevronArrow(props) {
|
|
38
|
+
return /* @__PURE__ */ import_react.default.createElement(ChevronArrowContainer, { ...props }, /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.ChevronLeft, null));
|
|
39
|
+
}
|
|
40
|
+
const ChevronArrowContainer = import_styled_components.default.button`
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
align-items: center;
|
|
44
|
+
width: 32px;
|
|
45
|
+
height: 32px;
|
|
46
|
+
|
|
47
|
+
position: absolute;
|
|
48
|
+
top: 50%;
|
|
49
|
+
left: ${({ direction }) => direction === "left" ? "0" : "auto"};
|
|
50
|
+
right: ${({ direction }) => direction === "left" ? "auto" : "0"};
|
|
51
|
+
z-index: 1;
|
|
52
|
+
|
|
53
|
+
--dir: ${({ direction }) => direction === "left" ? "1" : "-1"};
|
|
54
|
+
scale: var(--dir) 1;
|
|
55
|
+
translate: calc(-50% * var(--dir)) -50%;
|
|
56
|
+
|
|
57
|
+
background-color: ${({ theme }) => theme.colors.background.default}; // Fake the transparent clip
|
|
58
|
+
border-radius: 100%;
|
|
59
|
+
border: none;
|
|
60
|
+
outline: none;
|
|
61
|
+
|
|
62
|
+
::before {
|
|
63
|
+
content: "";
|
|
64
|
+
display: block;
|
|
65
|
+
position: absolute;
|
|
66
|
+
z-index: -1;
|
|
67
|
+
inset: 3px;
|
|
68
|
+
background-color: ${({ theme }) => theme.colors.opacityDefault.c05};
|
|
69
|
+
border-color: ${({ theme }) => theme.colors.opacityDefault.c05};
|
|
70
|
+
border-radius: 100%;
|
|
71
|
+
border-style: solid;
|
|
72
|
+
border-width: 1px;
|
|
73
|
+
}
|
|
74
|
+
svg {
|
|
75
|
+
color: ${({ theme }) => theme.colors.primary.c100};
|
|
76
|
+
}
|
|
77
|
+
::before,
|
|
78
|
+
svg {
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
transition: opacity 0.2s ease-in-out;
|
|
83
|
+
opacity: var(--hover-transition);
|
|
84
|
+
::before,
|
|
85
|
+
svg {
|
|
86
|
+
transition: translate 0.2s ease-in-out;
|
|
87
|
+
translate: calc(-50% + 50% * var(--hover-transition)) 0;
|
|
88
|
+
}
|
|
89
|
+
`;
|
|
90
|
+
//# sourceMappingURL=ChevronArrow.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../src/components/layout/Carousel/ChevronArrow.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\n\ntype Props = ContainerProps & {\n onClick: () => void;\n};\n\nexport function ChevronArrow(props: Props) {\n return (\n <ChevronArrowContainer {...props}>\n <Icons.ChevronLeft />\n </ChevronArrowContainer>\n );\n}\n\ntype ContainerProps = {\n direction: \"left\" | \"right\";\n};\n\nconst ChevronArrowContainer = styled.button<ContainerProps>`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 32px;\n height: 32px;\n\n position: absolute;\n top: 50%;\n left: ${({ direction }) => (direction === \"left\" ? \"0\" : \"auto\")};\n right: ${({ direction }) => (direction === \"left\" ? \"auto\" : \"0\")};\n z-index: 1;\n\n --dir: ${({ direction }) => (direction === \"left\" ? \"1\" : \"-1\")};\n scale: var(--dir) 1;\n translate: calc(-50% * var(--dir)) -50%;\n\n background-color: ${({ theme }) => theme.colors.background.default}; // Fake the transparent clip\n border-radius: 100%;\n border: none;\n outline: none;\n\n ::before {\n content: \"\";\n display: block;\n position: absolute;\n z-index: -1;\n inset: 3px;\n background-color: ${({ theme }) => theme.colors.opacityDefault.c05};\n border-color: ${({ theme }) => theme.colors.opacityDefault.c05};\n border-radius: 100%;\n border-style: solid;\n border-width: 1px;\n }\n svg {\n color: ${({ theme }) => theme.colors.primary.c100};\n }\n ::before,\n svg {\n cursor: pointer;\n }\n\n transition: opacity 0.2s ease-in-out;\n opacity: var(--hover-transition);\n ::before,\n svg {\n transition: translate 0.2s ease-in-out;\n translate: calc(-50% + 50% * var(--hover-transition)) 0;\n }\n`;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,oBAAsB;AAMf,SAAS,aAAa,OAAc;AACzC,SACE,6BAAAA,QAAA,cAAC,yBAAuB,GAAG,SACzB,6BAAAA,QAAA,cAAC,oBAAM,aAAN,IAAkB,CACrB;AAEJ;AAMA,MAAM,wBAAwB,yBAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAS3B,CAAC,EAAE,UAAU,MAAO,cAAc,SAAS,MAAM,MAAO;AAAA,WACvD,CAAC,EAAE,UAAU,MAAO,cAAc,SAAS,SAAS,GAAI;AAAA;AAAA;AAAA,WAGxD,CAAC,EAAE,UAAU,MAAO,cAAc,SAAS,MAAM,IAAK;AAAA;AAAA;AAAA;AAAA,sBAI3C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAW5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,eAAe,GAAG;AAAA,oBAClD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": ["React", "styled"]
|
|
7
|
+
}
|
|
@@ -40,7 +40,7 @@ const FooterCarouselBullets = import_styled_components.default.div`
|
|
|
40
40
|
align-items: center;
|
|
41
41
|
`;
|
|
42
42
|
const Pagination = ({ children, currentIndex }) => {
|
|
43
|
-
return /* @__PURE__ */ import_react.default.createElement(FooterCarouselBullets, null, children.map((child, index) => /* @__PURE__ */ import_react.default.createElement(import_bullets.default, { key: child.key, type: (0, import_utils.getItemStatus)(index, currentIndex) })));
|
|
43
|
+
return /* @__PURE__ */ import_react.default.createElement(FooterCarouselBullets, null, children.map((child, index) => /* @__PURE__ */ import_react.default.createElement(import_bullets.default, { key: child.key, type: (0, import_utils.getItemStatus)(index, currentIndex, children.length) })));
|
|
44
44
|
};
|
|
45
45
|
var Pagination_default = Pagination;
|
|
46
46
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/components/layout/Carousel/Footer/Pagination/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { SubProps } from \"../../types\";\nimport Bullet from \"./bullets\";\nimport { getItemStatus } from \"./utils\";\n\nconst FooterCarouselBullets = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Pagination = ({ children, currentIndex }: SubProps) => {\n return (\n <FooterCarouselBullets>\n {children.map((child, index) => (\n <Bullet key={child.key} type={getItemStatus(index, currentIndex)} />\n ))}\n </FooterCarouselBullets>\n );\n};\n\nexport default Pagination;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AAEnB,qBAAmB;AACnB,mBAA8B;AAE9B,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,CAAC,EAAE,UAAU,aAAa,MAAgB;AAC3D,SACE,6BAAAC,QAAA,cAAC,6BACE,SAAS,IAAI,CAAC,OAAO,UACpB,6BAAAA,QAAA,cAAC,eAAAC,SAAA,EAAO,KAAK,MAAM,KAAK,UAAM,4BAAc,OAAO,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { SubProps } from \"../../types\";\nimport Bullet from \"./bullets\";\nimport { getItemStatus } from \"./utils\";\n\nconst FooterCarouselBullets = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Pagination = ({ children, currentIndex }: SubProps) => {\n return (\n <FooterCarouselBullets>\n {children.map((child, index) => (\n <Bullet key={child.key} type={getItemStatus(index, currentIndex, children.length)} />\n ))}\n </FooterCarouselBullets>\n );\n};\n\nexport default Pagination;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AAEnB,qBAAmB;AACnB,mBAA8B;AAE9B,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,CAAC,EAAE,UAAU,aAAa,MAAgB;AAC3D,SACE,6BAAAC,QAAA,cAAC,6BACE,SAAS,IAAI,CAAC,OAAO,UACpB,6BAAAA,QAAA,cAAC,eAAAC,SAAA,EAAO,KAAK,MAAM,KAAK,UAAM,4BAAc,OAAO,cAAc,SAAS,MAAM,GAAG,CACpF,CACH;AAEJ;AAEA,IAAO,qBAAQ;",
|
|
6
6
|
"names": ["styled", "React", "Bullet"]
|
|
7
7
|
}
|
|
@@ -22,17 +22,16 @@ __export(utils_exports, {
|
|
|
22
22
|
});
|
|
23
23
|
module.exports = __toCommonJS(utils_exports);
|
|
24
24
|
var import_types = require("./types");
|
|
25
|
-
const getItemStatus = (itemIndex, activeIndex) => {
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return import_types.ItemStatus.active;
|
|
30
|
-
case 1:
|
|
31
|
-
return import_types.ItemStatus.nearby;
|
|
32
|
-
case 2:
|
|
33
|
-
return import_types.ItemStatus.far;
|
|
34
|
-
default:
|
|
35
|
-
return import_types.ItemStatus.none;
|
|
25
|
+
const getItemStatus = (itemIndex, activeIndex, itemCount) => {
|
|
26
|
+
const isActive = itemIndex === activeIndex;
|
|
27
|
+
if (isActive) {
|
|
28
|
+
return import_types.ItemStatus.active;
|
|
36
29
|
}
|
|
30
|
+
const isAdjacent = Math.abs(itemIndex - activeIndex) === 1;
|
|
31
|
+
if (isAdjacent) {
|
|
32
|
+
return import_types.ItemStatus.nearby;
|
|
33
|
+
}
|
|
34
|
+
const isEdge = itemIndex === 0 || itemIndex === itemCount - 1;
|
|
35
|
+
return isEdge ? import_types.ItemStatus.far : import_types.ItemStatus.nearby;
|
|
37
36
|
};
|
|
38
37
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/components/layout/Carousel/Footer/Pagination/utils.ts"],
|
|
4
|
-
"sourcesContent": ["import { ItemStatus } from \"./types\";\n\n/**\n * Returns the status of an indexed item from the carousel index.\n */\nexport const getItemStatus = (itemIndex: number, activeIndex: number) => {\n const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAKpB,MAAM,gBAAgB,CAAC,WAAmB,
|
|
4
|
+
"sourcesContent": ["import { ItemStatus } from \"./types\";\n\n/**\n * Returns the status of an indexed item from the carousel index.\n */\nexport const getItemStatus = (itemIndex: number, activeIndex: number, itemCount: number) => {\n const isActive = itemIndex === activeIndex;\n if (isActive) {\n return ItemStatus.active;\n }\n\n const isAdjacent = Math.abs(itemIndex - activeIndex) === 1;\n if (isAdjacent) {\n return ItemStatus.nearby;\n }\n\n const isEdge = itemIndex === 0 || itemIndex === itemCount - 1;\n return isEdge ? ItemStatus.far : ItemStatus.nearby;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAKpB,MAAM,gBAAgB,CAAC,WAAmB,aAAqB,cAAsB;AAC1F,QAAM,WAAW,cAAc;AAC/B,MAAI,UAAU;AACZ,WAAO,wBAAW;AAAA,EACpB;AAEA,QAAM,aAAa,KAAK,IAAI,YAAY,WAAW,MAAM;AACzD,MAAI,YAAY;AACd,WAAO,wBAAW;AAAA,EACpB;AAEA,QAAM,SAAS,cAAc,KAAK,cAAc,YAAY;AAC5D,SAAO,SAAS,wBAAW,MAAM,wBAAW;AAC9C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,6 +39,8 @@ const Footers = {
|
|
|
39
39
|
default: import_variantDefault.default
|
|
40
40
|
};
|
|
41
41
|
const Footer = (props) => {
|
|
42
|
+
if (props.children.length === 1)
|
|
43
|
+
return null;
|
|
42
44
|
const Component = Footers[props.variant];
|
|
43
45
|
return /* @__PURE__ */ import_react.default.createElement(Component, { ...props });
|
|
44
46
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/Carousel/Footer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { FC } from \"react\";\nimport { SubProps, Variant } from \"../types\";\nimport FooterContentCard from \"./variantContentCard\";\nimport FooterDefault from \"./variantDefault\";\n\nconst Footers: { [key in Variant]: FC<SubProps> } = {\n \"content-card\": FooterContentCard,\n default: FooterDefault,\n};\n\nconst Footer = (props: SubProps) => {\n const Component = Footers[props.variant];\n return <Component {...props} />;\n};\n\nexport default Footer;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,gCAA8B;AAC9B,4BAA0B;AAE1B,MAAM,UAA8C;AAAA,EAClD,gBAAgB,0BAAAA;AAAA,EAChB,SAAS,sBAAAC;AACX;AAEA,MAAM,SAAS,CAAC,UAAoB;AAClC,QAAM,YAAY,QAAQ,MAAM,OAAO;AACvC,SAAO,6BAAAC,QAAA,cAAC,aAAW,GAAG,OAAO;AAC/B;AAEA,IAAO,iBAAQ;",
|
|
4
|
+
"sourcesContent": ["import React, { FC } from \"react\";\nimport { SubProps, Variant } from \"../types\";\nimport FooterContentCard from \"./variantContentCard\";\nimport FooterDefault from \"./variantDefault\";\n\nconst Footers: { [key in Variant]: FC<SubProps> } = {\n \"content-card\": FooterContentCard,\n default: FooterDefault,\n};\n\nconst Footer = (props: SubProps) => {\n if (props.children.length === 1) return null;\n\n const Component = Footers[props.variant];\n return <Component {...props} />;\n};\n\nexport default Footer;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,gCAA8B;AAC9B,4BAA0B;AAE1B,MAAM,UAA8C;AAAA,EAClD,gBAAgB,0BAAAA;AAAA,EAChB,SAAS,sBAAAC;AACX;AAEA,MAAM,SAAS,CAAC,UAAoB;AAClC,MAAI,MAAM,SAAS,WAAW;AAAG,WAAO;AAExC,QAAM,YAAY,QAAQ,MAAM,OAAO;AACvC,SAAO,6BAAAC,QAAA,cAAC,aAAW,GAAG,OAAO;AAC/B;AAEA,IAAO,iBAAQ;",
|
|
6
6
|
"names": ["FooterContentCard", "FooterDefault", "React"]
|
|
7
7
|
}
|
|
@@ -53,8 +53,6 @@ const FooterArrowContainer = import_styled_components.default.div`
|
|
|
53
53
|
cursor: pointer;
|
|
54
54
|
`;
|
|
55
55
|
const FooterContentCard = ({ children, emblaApi, currentIndex, variant }) => {
|
|
56
|
-
if (children.length === 1)
|
|
57
|
-
return null;
|
|
58
56
|
return /* @__PURE__ */ import_react2.default.createElement(FooterContainer, null, /* @__PURE__ */ import_react2.default.createElement(
|
|
59
57
|
import_Pagination.default,
|
|
60
58
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/Carousel/Footer/variantContentCard.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ArrowLeft, ArrowRight } from \"@ledgerhq/icons-ui/react\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport Pagination from \"./Pagination\";\nimport { SubProps } from \"../types\";\n\nconst FooterContainer = styled.div`\n height: 32px;\n border-top: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n display: flex;\n justify-content: space-between;\n padding: 6px 16px 6px 16px;\n`;\n\nconst FooterArrowsContainer = styled.div`\n display: flex;\n gap: 8px;\n align-items: center;\n`;\n\nconst FooterArrowContainer = styled.div`\n display: flex;\n align-items: center;\n cursor: pointer;\n`;\n\nconst FooterContentCard = ({ children, emblaApi, currentIndex, variant }: SubProps) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,IAAAA,gBAAkB;AAClB,+BAAmB;AACnB,wBAAuB;AAGvB,MAAM,kBAAkB,yBAAAC,QAAO;AAAA;AAAA,0BAEL,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAMhE,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,oBAAoB,CAAC,EAAE,UAAU,UAAU,cAAc,QAAQ,MAAgB;AACrF,
|
|
4
|
+
"sourcesContent": ["import { ArrowLeft, ArrowRight } from \"@ledgerhq/icons-ui/react\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport Pagination from \"./Pagination\";\nimport { SubProps } from \"../types\";\n\nconst FooterContainer = styled.div`\n height: 32px;\n border-top: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n display: flex;\n justify-content: space-between;\n padding: 6px 16px 6px 16px;\n`;\n\nconst FooterArrowsContainer = styled.div`\n display: flex;\n gap: 8px;\n align-items: center;\n`;\n\nconst FooterArrowContainer = styled.div`\n display: flex;\n align-items: center;\n cursor: pointer;\n`;\n\nconst FooterContentCard = ({ children, emblaApi, currentIndex, variant }: SubProps) => {\n return (\n <FooterContainer>\n <Pagination\n variant={variant}\n children={children}\n emblaApi={emblaApi}\n currentIndex={currentIndex}\n />\n\n <FooterArrowsContainer>\n <FooterArrowContainer onClick={() => emblaApi?.scrollPrev()}>\n <ArrowLeft size=\"S\" />\n </FooterArrowContainer>\n <FooterArrowContainer onClick={() => emblaApi?.scrollNext()}>\n <ArrowRight size=\"S\" />\n </FooterArrowContainer>\n </FooterArrowsContainer>\n </FooterContainer>\n );\n};\n\nexport default FooterContentCard;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,IAAAA,gBAAkB;AAClB,+BAAmB;AACnB,wBAAuB;AAGvB,MAAM,kBAAkB,yBAAAC,QAAO;AAAA;AAAA,0BAEL,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAMhE,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,oBAAoB,CAAC,EAAE,UAAU,UAAU,cAAc,QAAQ,MAAgB;AACrF,SACE,8BAAAC,QAAA,cAAC,uBACC,8BAAAA,QAAA;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAEA,8BAAAD,QAAA,cAAC,6BACC,8BAAAA,QAAA,cAAC,wBAAqB,SAAS,MAAM,qCAAU,gBAC7C,8BAAAA,QAAA,cAAC,0BAAU,MAAK,KAAI,CACtB,GACA,8BAAAA,QAAA,cAAC,wBAAqB,SAAS,MAAM,qCAAU,gBAC7C,8BAAAA,QAAA,cAAC,2BAAW,MAAK,KAAI,CACvB,CACF,CACF;AAEJ;AAEA,IAAO,6BAAQ;",
|
|
6
6
|
"names": ["import_react", "styled", "React", "Pagination"]
|
|
7
7
|
}
|
|
@@ -35,6 +35,7 @@ var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
|
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
36
|
var import_styled_components = __toESM(require("styled-components"));
|
|
37
37
|
var import_Footer = __toESM(require("./Footer"));
|
|
38
|
+
var import_ChevronArrow = require("./ChevronArrow");
|
|
38
39
|
const Embla = import_styled_components.default.div`
|
|
39
40
|
overflow: hidden;
|
|
40
41
|
`;
|
|
@@ -45,6 +46,14 @@ const EmblaSlide = import_styled_components.default.div`
|
|
|
45
46
|
flex: 0 0 100%;
|
|
46
47
|
min-width: 0;
|
|
47
48
|
`;
|
|
49
|
+
const CarouselContainer = import_styled_components.default.div`
|
|
50
|
+
position: relative;
|
|
51
|
+
|
|
52
|
+
--hover-transition: 0;
|
|
53
|
+
&:hover {
|
|
54
|
+
--hover-transition: 1;
|
|
55
|
+
}
|
|
56
|
+
`;
|
|
48
57
|
const Carousel = ({ children, variant = "default" }) => {
|
|
49
58
|
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
|
|
50
59
|
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({ loop: true });
|
|
@@ -62,7 +71,9 @@ const Carousel = ({ children, variant = "default" }) => {
|
|
|
62
71
|
emblaApi.on("select", updateIndex);
|
|
63
72
|
emblaApi.on("reInit", updateIndex);
|
|
64
73
|
}, [emblaApi, updateIndex]);
|
|
65
|
-
|
|
74
|
+
const handleGotoPrevSlide = () => emblaApi == null ? void 0 : emblaApi.scrollPrev();
|
|
75
|
+
const handleGotoNextSlide = () => emblaApi == null ? void 0 : emblaApi.scrollNext();
|
|
76
|
+
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(
|
|
66
77
|
import_Footer.default,
|
|
67
78
|
{
|
|
68
79
|
children,
|
|
@@ -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\";\n\nconst Embla = styled.div`\n overflow: hidden;\n`;\n\nconst EmblaContainer = styled.div`\n display: flex;\n`;\n\nconst EmblaSlide = styled.div`\n flex: 0 0 100%;\n min-width: 0;\n`;\n\n/**\n * This component uses the https://github.com/davidjerleke/embla-carousel library.\n */\nconst Carousel = ({ children, variant = \"default\" }: 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 }, [emblaApi]);\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 return (\n <div>\n <Embla ref={emblaRef}>\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA6B;AAC7B,mBAAwD;AACxD,+BAAmB;AACnB,oBAAmB;
|
|
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 flex: 0 0 100%;\n min-width: 0;\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\" }: 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 }, [emblaApi]);\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;AAK1B,MAAM,oBAAoB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYjC,MAAM,WAAW,CAAC,EAAE,UAAU,UAAU,UAAU,MAAa;AAC7D,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;AAAA,EAC5B,GAAG,CAAC,QAAQ,CAAC;AAEb,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
6
|
"names": ["styled", "useEmblaCarousel", "React", "Footer"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type Props = ContainerProps & {
|
|
3
|
+
onClick: () => void;
|
|
4
|
+
};
|
|
5
|
+
export declare function ChevronArrow(props: Props): React.JSX.Element;
|
|
6
|
+
type ContainerProps = {
|
|
7
|
+
direction: "left" | "right";
|
|
8
|
+
};
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=ChevronArrow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChevronArrow.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/ChevronArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,KAAK,GAAG,cAAc,GAAG;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,qBAMxC;AAED,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;CAC7B,CAAC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { Icons } from "../../../assets";
|
|
4
|
+
export function ChevronArrow(props) {
|
|
5
|
+
return (React.createElement(ChevronArrowContainer, Object.assign({}, props),
|
|
6
|
+
React.createElement(Icons.ChevronLeft, null)));
|
|
7
|
+
}
|
|
8
|
+
const ChevronArrowContainer = styled.button `
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
align-items: center;
|
|
12
|
+
width: 32px;
|
|
13
|
+
height: 32px;
|
|
14
|
+
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: 50%;
|
|
17
|
+
left: ${({ direction }) => (direction === "left" ? "0" : "auto")};
|
|
18
|
+
right: ${({ direction }) => (direction === "left" ? "auto" : "0")};
|
|
19
|
+
z-index: 1;
|
|
20
|
+
|
|
21
|
+
--dir: ${({ direction }) => (direction === "left" ? "1" : "-1")};
|
|
22
|
+
scale: var(--dir) 1;
|
|
23
|
+
translate: calc(-50% * var(--dir)) -50%;
|
|
24
|
+
|
|
25
|
+
background-color: ${({ theme }) => theme.colors.background.default}; // Fake the transparent clip
|
|
26
|
+
border-radius: 100%;
|
|
27
|
+
border: none;
|
|
28
|
+
outline: none;
|
|
29
|
+
|
|
30
|
+
::before {
|
|
31
|
+
content: "";
|
|
32
|
+
display: block;
|
|
33
|
+
position: absolute;
|
|
34
|
+
z-index: -1;
|
|
35
|
+
inset: 3px;
|
|
36
|
+
background-color: ${({ theme }) => theme.colors.opacityDefault.c05};
|
|
37
|
+
border-color: ${({ theme }) => theme.colors.opacityDefault.c05};
|
|
38
|
+
border-radius: 100%;
|
|
39
|
+
border-style: solid;
|
|
40
|
+
border-width: 1px;
|
|
41
|
+
}
|
|
42
|
+
svg {
|
|
43
|
+
color: ${({ theme }) => theme.colors.primary.c100};
|
|
44
|
+
}
|
|
45
|
+
::before,
|
|
46
|
+
svg {
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
transition: opacity 0.2s ease-in-out;
|
|
51
|
+
opacity: var(--hover-transition);
|
|
52
|
+
::before,
|
|
53
|
+
svg {
|
|
54
|
+
transition: translate 0.2s ease-in-out;
|
|
55
|
+
translate: calc(-50% + 50% * var(--hover-transition)) 0;
|
|
56
|
+
}
|
|
57
|
+
`;
|
|
58
|
+
//# sourceMappingURL=ChevronArrow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChevronArrow.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/ChevronArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAMxC,MAAM,UAAU,YAAY,CAAC,KAAY;IACvC,OAAO,CACL,oBAAC,qBAAqB,oBAAK,KAAK;QAC9B,oBAAC,KAAK,CAAC,WAAW,OAAG,CACC,CACzB,CAAC;AACJ,CAAC;AAMD,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAgB;;;;;;;;;UASjD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;WACvD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;;;WAGxD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;;;;sBAI3C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO;;;;;;;;;;;wBAW5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;oBAClD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;;;;aAMrD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;;;;;;;;;;;CAcpD,CAAC"}
|
|
@@ -7,7 +7,7 @@ const FooterCarouselBullets = styled.div `
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
`;
|
|
9
9
|
const Pagination = ({ children, currentIndex }) => {
|
|
10
|
-
return (React.createElement(FooterCarouselBullets, null, children.map((child, index) => (React.createElement(Bullet, { key: child.key, type: getItemStatus(index, currentIndex) })))));
|
|
10
|
+
return (React.createElement(FooterCarouselBullets, null, children.map((child, index) => (React.createElement(Bullet, { key: child.key, type: getItemStatus(index, currentIndex, children.length) })))));
|
|
11
11
|
};
|
|
12
12
|
export default Pagination;
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGvC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAY,EAAE,EAAE;IAC1D,OAAO,CACL,oBAAC,qBAAqB,QACnB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,MAAM,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,GAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGvC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAY,EAAE,EAAE;IAC1D,OAAO,CACL,oBAAC,qBAAqB,QACnB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,MAAM,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAI,CACtF,CAAC,CACoB,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -2,5 +2,5 @@ import { ItemStatus } from "./types";
|
|
|
2
2
|
/**
|
|
3
3
|
* Returns the status of an indexed item from the carousel index.
|
|
4
4
|
*/
|
|
5
|
-
export declare const getItemStatus: (itemIndex: number, activeIndex: number) => ItemStatus;
|
|
5
|
+
export declare const getItemStatus: (itemIndex: number, activeIndex: number, itemCount: number) => ItemStatus.active | ItemStatus.nearby | ItemStatus.far;
|
|
6
6
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;GAEG;AACH,eAAO,MAAM,aAAa,cAAe,MAAM,eAAe,MAAM,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;GAEG;AACH,eAAO,MAAM,aAAa,cAAe,MAAM,eAAe,MAAM,aAAa,MAAM,2DAatF,CAAC"}
|
|
@@ -2,17 +2,16 @@ import { ItemStatus } from "./types";
|
|
|
2
2
|
/**
|
|
3
3
|
* Returns the status of an indexed item from the carousel index.
|
|
4
4
|
*/
|
|
5
|
-
export const getItemStatus = (itemIndex, activeIndex) => {
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return ItemStatus.active;
|
|
10
|
-
case 1:
|
|
11
|
-
return ItemStatus.nearby;
|
|
12
|
-
case 2:
|
|
13
|
-
return ItemStatus.far;
|
|
14
|
-
default:
|
|
15
|
-
return ItemStatus.none;
|
|
5
|
+
export const getItemStatus = (itemIndex, activeIndex, itemCount) => {
|
|
6
|
+
const isActive = itemIndex === activeIndex;
|
|
7
|
+
if (isActive) {
|
|
8
|
+
return ItemStatus.active;
|
|
16
9
|
}
|
|
10
|
+
const isAdjacent = Math.abs(itemIndex - activeIndex) === 1;
|
|
11
|
+
if (isAdjacent) {
|
|
12
|
+
return ItemStatus.nearby;
|
|
13
|
+
}
|
|
14
|
+
const isEdge = itemIndex === 0 || itemIndex === itemCount - 1;
|
|
15
|
+
return isEdge ? ItemStatus.far : ItemStatus.nearby;
|
|
17
16
|
};
|
|
18
17
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,WAAmB,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,WAAmB,EAAE,SAAiB,EAAE,EAAE;IACzF,MAAM,QAAQ,GAAG,SAAS,KAAK,WAAW,CAAC;IAC3C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,UAAU,CAAC,MAAM,CAAC;IAC3B,CAAC;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAC3D,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,UAAU,CAAC,MAAM,CAAC;IAC3B,CAAC;IAED,MAAM,MAAM,GAAG,SAAS,KAAK,CAAC,IAAI,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;IAC9D,OAAO,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC;AACrD,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAW,MAAM,UAAU,CAAC;AAS7C,QAAA,MAAM,MAAM,UAAW,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAW,MAAM,UAAU,CAAC;AAS7C,QAAA,MAAM,MAAM,UAAW,QAAQ,6BAK9B,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,MAAM,OAAO,GAAuC;IAClD,cAAc,EAAE,iBAAiB;IACjC,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,KAAe,EAAE,EAAE;IACjC,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzC,OAAO,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAC;AAClC,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,MAAM,OAAO,GAAuC;IAClD,cAAc,EAAE,iBAAiB;IACjC,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,KAAe,EAAE,EAAE;IACjC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE7C,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzC,OAAO,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAC;AAClC,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { SubProps } from "../types";
|
|
3
|
-
declare const FooterContentCard: ({ children, emblaApi, currentIndex, variant }: SubProps) => React.JSX.Element
|
|
3
|
+
declare const FooterContentCard: ({ children, emblaApi, currentIndex, variant }: SubProps) => React.JSX.Element;
|
|
4
4
|
export default FooterContentCard;
|
|
5
5
|
//# sourceMappingURL=variantContentCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variantContentCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/variantContentCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAsBpC,QAAA,MAAM,iBAAiB,kDAAmD,QAAQ,
|
|
1
|
+
{"version":3,"file":"variantContentCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/variantContentCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAsBpC,QAAA,MAAM,iBAAiB,kDAAmD,QAAQ,sBAoBjF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -20,8 +20,6 @@ const FooterArrowContainer = styled.div `
|
|
|
20
20
|
cursor: pointer;
|
|
21
21
|
`;
|
|
22
22
|
const FooterContentCard = ({ children, emblaApi, currentIndex, variant }) => {
|
|
23
|
-
if (children.length === 1)
|
|
24
|
-
return null;
|
|
25
23
|
return (React.createElement(FooterContainer, null,
|
|
26
24
|
React.createElement(Pagination, { variant: variant, children: children, emblaApi: emblaApi, currentIndex: currentIndex }),
|
|
27
25
|
React.createElement(FooterArrowsContainer, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variantContentCard.js","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/variantContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,cAAc,CAAC;AAGtC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;0BAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;;CAI/D,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAY,EAAE,EAAE;IACpF,
|
|
1
|
+
{"version":3,"file":"variantContentCard.js","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/variantContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,cAAc,CAAC;AAGtC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;0BAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;;CAI/D,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAY,EAAE,EAAE;IACpF,OAAO,CACL,oBAAC,eAAe;QACd,oBAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,GAC1B;QAEF,oBAAC,qBAAqB;YACpB,oBAAC,oBAAoB,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE;gBACzD,oBAAC,SAAS,IAAC,IAAI,EAAC,GAAG,GAAG,CACD;YACvB,oBAAC,oBAAoB,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE;gBACzD,oBAAC,UAAU,IAAC,IAAI,EAAC,GAAG,GAAG,CACF,CACD,CACR,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAyBhC;;GAEG;AACH,QAAA,MAAM,QAAQ,0BAAuC,KAAK,sBAuDzD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -2,6 +2,7 @@ import useEmblaCarousel from "embla-carousel-react";
|
|
|
2
2
|
import React, { useCallback, useEffect, useState } from "react";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import Footer from "./Footer";
|
|
5
|
+
import { ChevronArrow } from "./ChevronArrow";
|
|
5
6
|
const Embla = styled.div `
|
|
6
7
|
overflow: hidden;
|
|
7
8
|
`;
|
|
@@ -12,6 +13,14 @@ const EmblaSlide = styled.div `
|
|
|
12
13
|
flex: 0 0 100%;
|
|
13
14
|
min-width: 0;
|
|
14
15
|
`;
|
|
16
|
+
const CarouselContainer = styled.div `
|
|
17
|
+
position: relative;
|
|
18
|
+
|
|
19
|
+
--hover-transition: 0;
|
|
20
|
+
&:hover {
|
|
21
|
+
--hover-transition: 1;
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
15
24
|
/**
|
|
16
25
|
* This component uses the https://github.com/davidjerleke/embla-carousel library.
|
|
17
26
|
*/
|
|
@@ -35,9 +44,15 @@ const Carousel = ({ children, variant = "default" }) => {
|
|
|
35
44
|
// When `reInit` is called or when window is resized
|
|
36
45
|
emblaApi.on("reInit", updateIndex);
|
|
37
46
|
}, [emblaApi, updateIndex]);
|
|
47
|
+
const handleGotoPrevSlide = () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollPrev();
|
|
48
|
+
const handleGotoNextSlide = () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollNext();
|
|
38
49
|
return (React.createElement("div", null,
|
|
39
|
-
React.createElement(
|
|
40
|
-
|
|
50
|
+
React.createElement(CarouselContainer, { variant: variant },
|
|
51
|
+
variant === "default" && children.length > 1 && (React.createElement(React.Fragment, null,
|
|
52
|
+
React.createElement(ChevronArrow, { direction: "left", onClick: handleGotoPrevSlide }),
|
|
53
|
+
React.createElement(ChevronArrow, { direction: "right", onClick: handleGotoNextSlide }))),
|
|
54
|
+
React.createElement(Embla, { ref: emblaRef },
|
|
55
|
+
React.createElement(EmblaContainer, null, children.map(child => (React.createElement(EmblaSlide, { key: child.key }, child)))))),
|
|
41
56
|
React.createElement(Footer, { children: children, variant: variant, emblaApi: emblaApi, currentIndex: currentIndex })));
|
|
42
57
|
};
|
|
43
58
|
export default Carousel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEvB,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEhC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG5B,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;;;;CAO3D,CAAC;AAEF;;GAEG;AACH,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAS,EAAE,EAAE;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,kBAAkB,EAAE,CAAC;QAC/C,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC1B,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,wCAAwC;QACxC,WAAW,EAAE,CAAC;QAEd,wCAAwC;QACxC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAEnC,oDAAoD;QACpD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5B,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE,CAAC;IACzD,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE,CAAC;IAEzD,OAAO,CACL;QACE,oBAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO;YAChC,OAAO,KAAK,SAAS,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/C;gBACE,oBAAC,YAAY,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,mBAAmB,GAAI;gBAC/D,oBAAC,YAAY,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,mBAAmB,GAAI,CAC/D,CACJ;YAED,oBAAC,KAAK,IAAC,GAAG,EAAE,QAAQ;gBAClB,oBAAC,cAAc,QACZ,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACrB,oBAAC,UAAU,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAc,CACjD,CAAC,CACa,CACX,CACU;QAEpB,oBAAC,MAAM,IACL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,GAC1B,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0-nightly.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"react-transition-group": "^4.4.2",
|
|
68
68
|
"react-window": "^1.8.6",
|
|
69
69
|
"styled-system": "^5.1.5",
|
|
70
|
-
"@ledgerhq/crypto-icons-ui": "^1.6.0
|
|
70
|
+
"@ledgerhq/crypto-icons-ui": "^1.6.0",
|
|
71
71
|
"@ledgerhq/icons-ui": "^0.8.1",
|
|
72
|
-
"@ledgerhq/ui-shared": "^0.
|
|
72
|
+
"@ledgerhq/ui-shared": "^0.3.0-nightly.0"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"react": ">=17.0.2",
|