@bikdotai/bik-component-library 0.0.509-beta.carousel-4 → 0.0.509-beta.carousel-6
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),n=require("../../assets/icons/chevronRight.svg.js"),l=require("react"),s=require("react-slick"),r=require("styled-components"),o=require("./CarouselPreview.style.js"),i=require("./CarouselPreviewCard.js"),a=require("../../constants/Theme.js"),d=require("../template-context-mapper/context/templateModalContext.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(l),x=c(s),p=c(r);const h=u.default.forwardRef(((t,n)=>{let{channel:l,template:s,showSampleValues:r,isPreview:a,removeBottomBorder:c}=t;var u,p,h;const g=null===(u=null==s?void 0:s.components)||void 0===u?void 0:u[1].cards,{sliderRef:j,selectedCarouselIndex:C,cardCount:w,setIsCarouselHovered:b}=d.useTemplateModalContext();return e.jsxs(o.Container,Object.assign({removeBottomBorder:c},{children:[e.jsx(i.default,{channel:l,currentTemplate:s,carouselCardIndex:-1,isPreview:a,width:"77%"}),!!(null==g?void 0:g.length)&&e.jsx(f,Object.assign({cardCount:null!=w?w:0,selectedCarouselIndex:null!=C?C:-1,onMouseEnter:()=>null==b?void 0:b(!0),onMouseLeave:()=>null==b?void 0:b(!1)},{children:e.jsx(x.default,Object.assign({ref:j,swipeToSlide:!0,swipe:!0,infinite:!1,focusOnSelect:!0,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:e.jsx(v,{}),prevArrow:e.jsx(m,{})},{children:null===(h=null===(p=null==s?void 0:s.components)||void 0===p?void 0:p[1].cards)||void 0===h?void 0:h.map(((t,n)=>{var r,o;const d={components:t.components,mapping:null===(o=null===(r=null==s?void 0:s.mapping)||void 0===r?void 0:r.cards)||void 0===o?void 0:o[n]};return e.jsx(i.default,{channel:l,currentTemplate:d,carouselCardIndex:n,isPreview:a,width:"100%"},n)}))}))}))]}))})),v=t=>{const{className:l,style:s,onClick:r}=t,{selectedCarouselIndex:o,setSelectedCarouselIndex:i,cardCount:c}=d.useTemplateModalContext();return e.jsx("div",Object.assign({className:l,style:Object.assign(Object.assign({},s),{display:r&&(null!=o?o:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",o,c),null==r||r(e),(null!=o?o:-1)>=(null!=c?c:-1)-1||null==i||i((null!=o?o:-1)+1)}},{children:e.jsx(n.default,{height:10,width:10,color:a.COLORS.content.primary})}))},m=n=>{const{className:l,style:s,onClick:r}=n,{selectedCarouselIndex:o,setSelectedCarouselIndex:i}=d.useTemplateModalContext();return e.jsx("div",Object.assign({className:l,style:Object.assign(Object.assign({},s),{display:r&&(null!=o?o:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==r||r(e),(null!=o?o:-1)<1||null==i||i((null!=o?o:-1)-1)}},{children:e.jsx(t.default,{height:10,width:10,color:a.COLORS.content.primary})}))},f=p.default.div`
|
|
2
2
|
width: 100%;
|
|
3
3
|
/* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
|
|
4
4
|
/* margin: auto; */
|
|
@@ -24,6 +24,10 @@
|
|
|
24
24
|
background-color: white;
|
|
25
25
|
box-shadow: 0px 1.5px 6px 0px #0000001f;
|
|
26
26
|
/* height: 100%; */
|
|
27
|
+
|
|
28
|
+
:hover {
|
|
29
|
+
background: white;
|
|
30
|
+
}
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
.slick-prev {
|
|
@@ -39,6 +43,10 @@
|
|
|
39
43
|
background-color: white;
|
|
40
44
|
box-shadow: 0px 1.5px 6px 0px #0000001f;
|
|
41
45
|
|
|
46
|
+
:hover {
|
|
47
|
+
background: white;
|
|
48
|
+
}
|
|
49
|
+
|
|
42
50
|
/* height: 100%; */
|
|
43
51
|
}
|
|
44
52
|
|
|
@@ -48,6 +56,7 @@
|
|
|
48
56
|
|
|
49
57
|
.slick-slide > div {
|
|
50
58
|
height: 100%;
|
|
59
|
+
padding-bottom: 16px;
|
|
51
60
|
}
|
|
52
61
|
|
|
53
62
|
.slick-track {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as n}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as e,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronLeft.svg.js";import t from"../../assets/icons/chevronRight.svg.js";import l from"react";import r from"react-slick";import i from"styled-components";import{Container as s}from"./CarouselPreview.style.js";import c from"./CarouselPreviewCard.js";import{COLORS as d}from"../../constants/Theme.js";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";const u=l.forwardRef(((o,t)=>{let{channel:l,template:i,showSampleValues:d,isPreview:u,removeBottomBorder:x}=o;var v,g,f;const w=null===(v=null==i?void 0:i.components)||void 0===v?void 0:v[1].cards,{sliderRef:C,selectedCarouselIndex:b,cardCount:k,setIsCarouselHovered:j}=a();return e(s,Object.assign({removeBottomBorder:x},{children:[n(c,{channel:l,currentTemplate:i,carouselCardIndex:-1,isPreview:u,width:"77%"}),!!(null==w?void 0:w.length)&&n(h,Object.assign({cardCount:null!=k?k:0,selectedCarouselIndex:null!=b?b:-1,onMouseEnter:()=>null==j?void 0:j(!0),onMouseLeave:()=>null==j?void 0:j(!1)},{children:n(r,Object.assign({ref:C,swipeToSlide:!0,swipe:!0,infinite:!1,focusOnSelect:!0,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:n(p,{}),prevArrow:n(m,{})},{children:null===(f=null===(g=null==i?void 0:i.components)||void 0===g?void 0:g[1].cards)||void 0===f?void 0:f.map(((e,o)=>{var t,r;const s={components:e.components,mapping:null===(r=null===(t=null==i?void 0:i.mapping)||void 0===t?void 0:t.cards)||void 0===r?void 0:r[o]};return n(c,{channel:l,currentTemplate:s,carouselCardIndex:o,isPreview:u,width:"100%"},o)}))}))}))]}))})),p=e=>{const{className:o,style:l,onClick:r}=e,{selectedCarouselIndex:i,setSelectedCarouselIndex:s,cardCount:c}=a();return n("div",Object.assign({className:o,style:Object.assign(Object.assign({},l),{display:r&&(null!=i?i:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",i,c),null==r||r(e),(null!=i?i:-1)>=(null!=c?c:-1)-1||null==s||s((null!=i?i:-1)+1)}},{children:n(t,{height:10,width:10,color:d.content.primary})}))},m=e=>{const{className:t,style:l,onClick:r}=e,{selectedCarouselIndex:i,setSelectedCarouselIndex:s}=a();return n("div",Object.assign({className:t,style:Object.assign(Object.assign({},l),{display:r&&(null!=i?i:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==r||r(e),(null!=i?i:-1)<1||null==s||s((null!=i?i:-1)-1)}},{children:n(o,{height:10,width:10,color:d.content.primary})}))},h=i.div`
|
|
2
2
|
width: 100%;
|
|
3
3
|
/* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
|
|
4
4
|
/* margin: auto; */
|
|
@@ -24,6 +24,10 @@ import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../assets/ico
|
|
|
24
24
|
background-color: white;
|
|
25
25
|
box-shadow: 0px 1.5px 6px 0px #0000001f;
|
|
26
26
|
/* height: 100%; */
|
|
27
|
+
|
|
28
|
+
:hover {
|
|
29
|
+
background: white;
|
|
30
|
+
}
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
.slick-prev {
|
|
@@ -39,6 +43,10 @@ import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../assets/ico
|
|
|
39
43
|
background-color: white;
|
|
40
44
|
box-shadow: 0px 1.5px 6px 0px #0000001f;
|
|
41
45
|
|
|
46
|
+
:hover {
|
|
47
|
+
background: white;
|
|
48
|
+
}
|
|
49
|
+
|
|
42
50
|
/* height: 100%; */
|
|
43
51
|
}
|
|
44
52
|
|
|
@@ -48,6 +56,7 @@ import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../assets/ico
|
|
|
48
56
|
|
|
49
57
|
.slick-slide > div {
|
|
50
58
|
height: 100%;
|
|
59
|
+
padding-bottom: 16px;
|
|
51
60
|
}
|
|
52
61
|
|
|
53
62
|
.slick-track {
|