@anker-in/headless-ui 0.0.27-alpha.114 → 0.0.27-alpha.116
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.d.ts +5 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.d.ts +5 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var u=Object.create;var
|
|
1
|
+
"use strict";"use client";var u=Object.create;var l=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var s in t)l(e,s,{get:t[s],enumerable:!0})},m=(e,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!k.call(e,o)&&o!==s&&l(e,o,{get:()=>t[o],enumerable:!(r=w(t,o))||r.enumerable});return e};var a=(e,t,s)=>(s=e!=null?u(y(e)):{},m(t||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),P=e=>m(l({},"__esModule",{value:!0}),e);var C={};N(C,{default:()=>G});module.exports=P(C);var i=require("react/jsx-runtime"),d=a(require("react")),n=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),h=a(require("../SwiperBox/index.js")),x=require("../../components/index.js"),p=require("../../components/index.js"),g=a(require("../Title/index.js"));const b=({data:e,configuration:t})=>(0,i.jsx)("div",{className:(0,n.cn)("lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,i.jsxs)("a",{href:e?.link,className:"relative cursor-pointer",children:[(0,i.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,i.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,i.jsx)(p.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,i.jsx)(x.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})}),c=d.default.forwardRef(({data:e,className:t,...s},r)=>{const o=e?.items?.length>2;return(0,i.jsxs)("div",{ref:r,children:[e?.title&&(0,i.jsx)(g.default,{data:{title:e?.title}}),(0,i.jsx)(h.default,{className:(0,n.cn)("!overflow-visible",t),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:b,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})});c.displayName="Graphic";var G=(0,f.withStyles)(c);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div\n className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={data?.link} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className={cn('!overflow-visible', className)}\n id={'Graphic'}\n data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkCQ,IAAAI,EAAA,6BAjCRC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAAkB,gCAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MAAG,oFAAqF,CAChG,gDAAkDA,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KAAE,KAAMD,GAAM,KAAM,UAAU,0BAC7B,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQA,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EACxD,SACE,QAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div\n className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={data?.link} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n return (\n <div ref={ref}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className={cn('!overflow-visible', className)}\n id={'Graphic'}\n data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkCQ,IAAAI,EAAA,6BAjCRC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAAkB,gCAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MAAG,oFAAqF,CAChG,gDAAkDA,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KAAE,KAAMD,GAAM,KAAM,UAAU,0BAC7B,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQA,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EACxD,SACE,QAAC,OAAI,IAAKM,EACP,UAAAN,GAAM,UAAS,OAAC,EAAAQ,QAAA,CAAM,KAAM,CAAE,MAAOR,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAS,QAAA,CACC,aAAW,MAAG,oBAAqBL,CAAS,EAC5C,GAAI,UACJ,KAAM,CAAE,KAAMJ,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeQ,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOZ,KAAQ,cAAWY,CAAO",
|
|
6
6
|
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "Item", "data", "configuration", "Graphic", "React", "className", "props", "ref", "isShow", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MediaPlayerBaseProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<{
|
|
4
|
+
mediaPlayerStickyRef: HTMLDivElement;
|
|
5
|
+
brandEquityRef: HTMLDivElement;
|
|
6
|
+
memberEquityRef: HTMLDivElement;
|
|
7
|
+
}>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
8
|
className?: string;
|
|
5
9
|
data?: Record<string, any>;
|
|
6
10
|
}, "ref"> & React.RefAttributes<any>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var C=Object.create;var u=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var B=(r,a)=>{for(var t in a)u(r,t,{get:a[t],enumerable:!0})},v=(r,a,t,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of z(a))!D.call(r,o)&&o!==t&&u(r,o,{get:()=>a[o],enumerable:!(l=P(a,o))||l.enumerable});return r};var n=(r,a,t)=>(t=r!=null?C($(r)):{},v(a||!r||!r.__esModule?u(t,"default",{value:r,enumerable:!0}):t,r)),Y=r=>v(u({},"__esModule",{value:!0}),r);var F={};B(F,{default:()=>j});module.exports=Y(F);var e=require("react/jsx-runtime"),i=n(require("react")),f=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),E=n(require("../Slogan/index.js")),m=require("../../components/gird.js"),g=require("../../components/container.js"),R=n(require("../BrandEquity/index.js")),h=n(require("../MemberEquity/index.js")),k=n(require("../Spacer/index.js")),w=n(require("gsap")),y=require("@payloadcms/richtext-lexical/html"),x=require("react-responsive"),H=n(require("../../components/picture.js"));const b=({defaultConverters:r})=>({...r,text:a=>{const{node:t}=a;return t.$&&t.$.color?`<div class="lexical-${t.$.color}">${t.text}</div>`:t.text}}),p=({children:r,spaceY:a})=>{const t=(0,x.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(g.Container,{spaceY:a,children:(0,e.jsxs)(m.Grid,{children:[!t&&(0,e.jsx)(m.GridItem,{span:1}),(0,e.jsx)(m.GridItem,{span:t?12:10,children:r}),!t&&(0,e.jsx)(m.GridItem,{span:1})]})})},G=i.default.forwardRef(({children:r,id:a,components:t},l)=>{const o=(0,i.useRef)(null),c=(0,i.useRef)(null),d=(0,i.useRef)(null);return(0,i.useImperativeHandle)(l,()=>({mediaPlayerStickyRef:o.current,brandEquityRef:c.current,memberEquityRef:d.current}),[]),(0,i.useEffect)(()=>{const s=window.screen.height;w.default.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${s*1.8}px bottom`,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),(0,e.jsxs)("div",{id:a,ref:o,className:"relative z-10 pb-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map(s=>{switch(s.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(p,{spaceY:"!my-0",children:(0,e.jsx)(R.default,{ref:c,data:s,style:s?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(p,{spaceY:"!my-0",children:(0,e.jsx)(h.default,{ref:d,data:s,className:"w-full",style:s?.style})})});case"ipc-spacer":return(0,e.jsx)(k.default,{data:s,style:s?.style});default:return null}})})]})}),I=(0,i.forwardRef)(({className:r="",id:a,data:{title:t,videoTitle:l,btnText:o,img:c,video:d,theme:s,shape:L,components:T}},N)=>{const S=(0,i.useRef)(null),q=typeof t=="string"?t:t&&(0,y.convertLexicalToHTML)({data:t,converters:b});return typeof l=="string"||l&&(0,y.convertLexicalToHTML)({data:l,converters:b}),(0,e.jsxs)(G,{ref:N,id:a,components:T,children:[(0,e.jsx)("div",{className:(0,f.cn)("sticky-box absolute left-0 top-0 h-screen w-full",r,{"aiui-dark":s==="dark","rounded-box":L==="rounded"}),children:(0,e.jsx)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(p,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(E.default,{className:"sticky-title",data:{title:q||"",theme:s}})})})}),(0,e.jsx)("div",{className:"sticky left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:(0,f.cn)("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[d?.url&&(0,e.jsx)("video",{ref:S,className:"size-full object-cover",src:d?.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),c?.url&&(0,e.jsx)(H.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:c?.url,alt:c?.alt,imgClassName:"w-full h-full object-cover"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})});var j=(0,M.withStyles)(I);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst StickyBox =
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCM,IAAAI,EAAA,6BApCNC,
|
|
6
|
-
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "gsap", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst StickyBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n brandEquityRef: HTMLDivElement\n memberEquityRef: HTMLDivElement\n },\n {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n const brandEquityRef = useRef<HTMLDivElement>(null)\n const memberEquityRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => {\n return {\n mediaPlayerStickyRef: mediaPlayerStickyRef.current as HTMLDivElement,\n brandEquityRef: brandEquityRef.current as HTMLDivElement,\n memberEquityRef: memberEquityRef.current as HTMLDivElement,\n }\n }, [])\n\n useEffect(() => {\n const height = window.screen.height\n\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n return (\n <div id={id} ref={mediaPlayerStickyRef} className=\"relative z-10 pb-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <BrandEquity ref={brandEquityRef} data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <MemberEquity\n ref={memberEquityRef}\n data={componentData}\n className=\"w-full\"\n style={componentData?.style}\n />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n brandEquityRef: HTMLDivElement\n memberEquityRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, btnText, img, video, theme, shape, components } }, ref) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n return (\n <StickyBox ref={ref} id={id} components={components}>\n <div\n className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n <div className=\"sticky left-0 top-0 w-full\">\n <div\n className={cn(\n 'media-cover',\n 'relative h-screen w-full',\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n )}\n >\n {video?.url && (\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop playsInline />\n )}\n {img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </StickyBox>\n )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "React", "id", "components", "ref", "mediaPlayerStickyRef", "brandEquityRef", "memberEquityRef", "height", "gsap", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "Slogan", "Picture"]
|
|
7
7
|
}
|
|
@@ -4,5 +4,5 @@
|
|
|
4
4
|
`,children:t?.primaryButton||""}),(0,r.jsx)(w.default,{variant:"secondary",onClick:()=>d(e,t?.index),className:`
|
|
5
5
|
laptop:text-sm desktop:text-base text-xs
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},G=o.default.forwardRef(({data:e,buildData:t,className:a="",key:d,event:n},y)=>{const[h,s]=(0,o.useState)(""),[i,k]=(0,o.useState)([]),v=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),{productsTab:b=[],productsCard:q=[],title:S,align:E="left",isShowTab:B=!0,tabShape:A="square",...L}=e,g=l=>{const c=l?.map(p=>{const T=t?.products?.find($=>$?.handle===p?.handle);if(T)return{sku:p.sku,...T}})?.filter(p=>p);k(c)};return(0,o.useEffect)(()=>{if(B){s(b?.[0]?.tab||""),g(b?.[0]?.data||[]);return}g(q)},[]),(0,r.jsxs)("div",{ref:y,className:(0,f.cn)("w-full",a,{"aiui-dark":e?.theme==="dark"}),children:[S&&(0,r.jsx)(P.default,{data:{title:S}}),B&&(0,r.jsx)("div",{className:`${v?"w-full overflow-hidden":""}`,children:(0,r.jsx)(m.Tabs,{shape:A,align:E,value:h,onValueChange:l=>{s(l);const c=b?.find(p=>p?.tab===l);g(c?.data||[])},className:"mb-8",children:(0,r.jsx)(m.TabsList,{children:b?.map((l,c)=>(0,r.jsx)(m.TabsTrigger,{value:l?.tab||"",children:l?.tab},c))})})}),(0,r.jsx)(I.default,{className:"!overflow-visible",id:"ShelfDisplay"+d,data:{list:i,configuration:{...L,event:n}},Slide:F,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var J=(0,C.withStyles)(G);
|
|
7
|
+
`,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},G=o.default.forwardRef(({data:e,buildData:t,className:a="",key:d,event:n},y)=>{const[h,s]=(0,o.useState)(""),[i,k]=(0,o.useState)([]),v=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),{productsTab:b=[],productsCard:q=[],title:S,align:E="left",isShowTab:B=!0,tabShape:A="square",...L}=e,g=l=>{const c=l?.map(p=>{const T=t?.products?.find($=>$?.handle===p?.handle);if(T)return{sku:p.sku,...T}})?.filter(p=>p);k(c)};return(0,o.useEffect)(()=>{if(B){s(b?.[0]?.tab||""),g(b?.[0]?.data||[]);return}g(q)},[]),(0,r.jsxs)("div",{ref:y,className:(0,f.cn)("min-h-[400px] w-full",a,{"aiui-dark":e?.theme==="dark"}),children:[S&&(0,r.jsx)(P.default,{data:{title:S}}),B&&(0,r.jsx)("div",{className:`${v?"w-full overflow-hidden":""}`,children:(0,r.jsx)(m.Tabs,{shape:A,align:E,value:h,onValueChange:l=>{s(l);const c=b?.find(p=>p?.tab===l);g(c?.data||[])},className:"mb-8",children:(0,r.jsx)(m.TabsList,{children:b?.map((l,c)=>(0,r.jsx)(m.TabsTrigger,{value:l?.tab||"",children:l?.tab},c))})})}),(0,r.jsx)(I.default,{className:"!overflow-visible",id:"ShelfDisplay"+d,data:{list:i,configuration:{...L,event:n}},Slide:F,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var J=(0,C.withStyles)(G);
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <Tabs\n shape={tabShape}\n align={align}\n value={tabId}\n onValueChange={v => {\n setTabId(v)\n const findData = productsTab?.find((item: any) => item?.tab === v)\n handleCurrentTab(findData?.data || [])\n }}\n className=\"mb-8\"\n >\n <TabsList>\n {productsTab?.map((item: any, index: number) => {\n return (\n <TabsTrigger key={index} value={item?.tab || ''}>\n {item?.tab}\n </TabsTrigger>\n )\n })}\n </TabsList>\n </Tabs>\n </div>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'ShelfDisplay' + key}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={ref} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <Tabs\n shape={tabShape}\n align={align}\n value={tabId}\n onValueChange={v => {\n setTabId(v)\n const findData = productsTab?.find((item: any) => item?.tab === v)\n handleCurrentTab(findData?.data || [])\n }}\n className=\"mb-8\"\n >\n <TabsList>\n {productsTab?.map((item: any, index: number) => {\n return (\n <TabsTrigger key={index} value={item?.tab || ''}>\n {item?.tab}\n </TabsTrigger>\n )\n })}\n </TabsList>\n </Tabs>\n </div>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'ShelfDisplay' + key}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabs", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "index", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "Picture", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "v", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import a from"react";import{cn as r}from"../../helpers/utils.js";import{withStyles as n}from"../../shared/Styles.js";import m from"../SwiperBox/index.js";import{Heading as c}from"../../components/index.js";import{Picture as d,Text as f}from"../../components/index.js";import h from"../Title/index.js";const x=({data:e,configuration:i})=>t("div",{className:r("lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",{"rounded-xl overflow-hidden laptop:rounded-2xl":i?.itemShape==="round"}),children:o("a",{href:e?.link,className:"relative cursor-pointer",children:[t(d,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),o("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(f,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(c,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})}),l=a.forwardRef(({data:e,className:i,...g},p)=>{const s=e?.items?.length>2;return o("div",{ref:p,children:[e?.title&&t(h,{data:{title:e?.title}}),t(m,{className:r("!overflow-visible",i),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:x,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:s?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:s?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:s?4:2}}})]})});l.displayName="Graphic";var b=n(l);export{b as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div\n className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={data?.link} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className={cn('!overflow-visible', className)}\n id={'Graphic'}\n data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
-
"mappings": "aAkCQ,cAAAA,EAKA,QAAAC,MALA,oBAjCR,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAEhCZ,EAAC,OACC,UAAWG,EAAG,oFAAqF,CAChG,gDAAkDS,GAAe,YAAc,OAClF,CAAC,EAED,SAAAX,EAAC,KAAE,KAAMU,GAAM,KAAM,UAAU,0BAC7B,UAAAX,EAACO,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQI,GAAM,QAAQ,IACxB,EACAV,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACQ,EAAA,CACC,MAAO,CACL,MAAOG,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,aACLX,EAACM,EAAA,CACC,KAAMK,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAUX,EAAM,WAAyC,CAAC,CAAE,KAAAS,EAAM,UAAAG,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUN,GAAM,OAAyB,OAAS,EACxD,OACEV,EAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div\n className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={data?.link} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n return (\n <div ref={ref}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className={cn('!overflow-visible', className)}\n id={'Graphic'}\n data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "aAkCQ,cAAAA,EAKA,QAAAC,MALA,oBAjCR,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAEhCZ,EAAC,OACC,UAAWG,EAAG,oFAAqF,CAChG,gDAAkDS,GAAe,YAAc,OAClF,CAAC,EAED,SAAAX,EAAC,KAAE,KAAMU,GAAM,KAAM,UAAU,0BAC7B,UAAAX,EAACO,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQI,GAAM,QAAQ,IACxB,EACAV,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACQ,EAAA,CACC,MAAO,CACL,MAAOG,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,aACLX,EAACM,EAAA,CACC,KAAMK,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAUX,EAAM,WAAyC,CAAC,CAAE,KAAAS,EAAM,UAAAG,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUN,GAAM,OAAyB,OAAS,EACxD,OACEV,EAAC,OAAI,IAAKe,EACP,UAAAL,GAAM,OAASX,EAACS,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,EACrDX,EAACK,EAAA,CACC,UAAWF,EAAG,oBAAqBW,CAAS,EAC5C,GAAI,UACJ,KAAM,CAAE,KAAMH,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeO,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,CAEJ,CAAC,EAEDJ,EAAQ,YAAc,UAEtB,IAAOK,EAAQd,EAAWS,CAAO",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Title", "Item", "data", "configuration", "Graphic", "className", "props", "ref", "isShow", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MediaPlayerBaseProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<{
|
|
4
|
+
mediaPlayerStickyRef: HTMLDivElement;
|
|
5
|
+
brandEquityRef: HTMLDivElement;
|
|
6
|
+
memberEquityRef: HTMLDivElement;
|
|
7
|
+
}>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
8
|
className?: string;
|
|
5
9
|
data?: Record<string, any>;
|
|
6
10
|
}, "ref"> & React.RefAttributes<any>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as v,jsx as e,jsxs as c}from"react/jsx-runtime";import h,{useRef as n,useEffect as k,forwardRef as w,useImperativeHandle as x}from"react";import{cn as p}from"../../helpers/utils.js";import{withStyles as H}from"../../shared/Styles.js";import L from"../Slogan/index.js";import{Grid as T,GridItem as d}from"../../components/gird.js";import{Container as N}from"../../components/container.js";import S from"../BrandEquity/index.js";import q from"../MemberEquity/index.js";import C from"../Spacer/index.js";import P from"gsap";import{convertLexicalToHTML as f}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as z}from"react-responsive";import $ from"../../components/picture.js";const y=({defaultConverters:i})=>({...i,text:a=>{const{node:t}=a;return t.$&&t.$.color?`<div class="lexical-${t.$.color}">${t.text}</div>`:t.text}}),u=({children:i,spaceY:a})=>{const t=z({query:"(max-width: 768px)"});return e(N,{spaceY:a,children:c(T,{children:[!t&&e(d,{span:1}),e(d,{span:t?12:10,children:i}),!t&&e(d,{span:1})]})})},D=h.forwardRef(({children:i,id:a,components:t},s)=>{const m=n(null),l=n(null),o=n(null);return x(s,()=>({mediaPlayerStickyRef:m.current,brandEquityRef:l.current,memberEquityRef:o.current}),[]),k(()=>{const r=window.screen.height;P.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${r*1.8}px bottom`,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),c("div",{id:a,ref:m,className:"relative z-10 pb-10",children:[e(v,{children:i}),e(v,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(u,{spaceY:"!my-0",children:e(S,{ref:l,data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(u,{spaceY:"!my-0",children:e(q,{ref:o,data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(C,{data:r,style:r?.style});default:return null}})})]})}),B=w(({className:i="",id:a,data:{title:t,videoTitle:s,btnText:m,img:l,video:o,theme:r,shape:b,components:M}},E)=>{const g=n(null),R=typeof t=="string"?t:t&&f({data:t,converters:y});return typeof s=="string"||s&&f({data:s,converters:y}),c(D,{ref:E,id:a,components:M,children:[e("div",{className:p("sticky-box absolute left-0 top-0 h-screen w-full",i,{"aiui-dark":r==="dark","rounded-box":b==="rounded"}),children:e("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:e(u,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(L,{className:"sticky-title",data:{title:R||"",theme:r}})})})}),e("div",{className:"sticky left-0 top-0 w-full",children:c("div",{className:p("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[o?.url&&e("video",{ref:g,className:"size-full object-cover",src:o?.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),l?.url&&e($,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:l?.url,alt:l?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})});var Z=H(B);export{Z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst StickyBox =
|
|
5
|
-
"mappings": "aAqCM,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "forwardRef", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "Picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst StickyBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n brandEquityRef: HTMLDivElement\n memberEquityRef: HTMLDivElement\n },\n {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n const brandEquityRef = useRef<HTMLDivElement>(null)\n const memberEquityRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => {\n return {\n mediaPlayerStickyRef: mediaPlayerStickyRef.current as HTMLDivElement,\n brandEquityRef: brandEquityRef.current as HTMLDivElement,\n memberEquityRef: memberEquityRef.current as HTMLDivElement,\n }\n }, [])\n\n useEffect(() => {\n const height = window.screen.height\n\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n return (\n <div id={id} ref={mediaPlayerStickyRef} className=\"relative z-10 pb-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <BrandEquity ref={brandEquityRef} data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <MemberEquity\n ref={memberEquityRef}\n data={componentData}\n className=\"w-full\"\n style={componentData?.style}\n />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n brandEquityRef: HTMLDivElement\n memberEquityRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, btnText, img, video, theme, shape, components } }, ref) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n return (\n <StickyBox ref={ref} id={id} components={components}>\n <div\n className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n <div className=\"sticky left-0 top-0 w-full\">\n <div\n className={cn(\n 'media-cover',\n 'relative h-screen w-full',\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n )}\n >\n {video?.url && (\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop playsInline />\n )}\n {img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </StickyBox>\n )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "aAqCM,OA6DA,YAAAA,EA5DgB,OAAAC,EADhB,QAAAC,MAAA,oBApCN,OAAOC,GAAmB,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,EAAY,uBAAAC,MAA2B,QACpF,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,qBACnB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAiB,0BACxB,OAAOC,MAAkB,2BACzB,OAAOC,MAAY,qBACnB,OAAOC,MAAU,OAEjB,OAAgC,wBAAAC,MAA4B,oCAI5D,OAAS,iBAAAC,MAAqB,mBAE9B,OAAOC,MAAa,8BAEpB,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,uBAAuBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,SAEnDA,EAAK,IACd,CACF,GAEMC,EAAe,CAAC,CAAE,SAAAC,EAAU,OAAAC,CAAO,IAAsD,CAC7F,MAAMC,EAAWT,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC9D,OACElB,EAACY,EAAA,CAAU,OAAQc,EACjB,SAAAzB,EAACS,EAAA,CACE,WAACiB,GAAY3B,EAACW,EAAA,CAAS,KAAM,EAAG,EACjCX,EAACW,EAAA,CAAS,KAAMgB,EAAW,GAAK,GAAK,SAAAF,EAAS,EAC7C,CAACE,GAAY3B,EAACW,EAAA,CAAS,KAAM,EAAG,GACnC,EACF,CAEJ,EAEMiB,EAAY1B,EAAM,WAWtB,CAAC,CAAE,SAAAuB,EAAU,GAAAI,EAAI,WAAAC,CAAW,EAAGC,IAAQ,CACvC,MAAMC,EAAuB7B,EAAuB,IAAI,EAClD8B,EAAiB9B,EAAuB,IAAI,EAC5C+B,EAAkB/B,EAAuB,IAAI,EAEnD,OAAAG,EAAoByB,EAAK,KAChB,CACL,qBAAsBC,EAAqB,QAC3C,eAAgBC,EAAe,QAC/B,gBAAiBC,EAAgB,OACnC,GACC,CAAC,CAAC,EAEL9B,EAAU,IAAM,CACd,MAAM+B,EAAS,OAAO,OAAO,OAE7BnB,EACG,SAAS,CACR,cAAe,CACb,QAAS,IAAIa,CAAE,GACf,MAAO,UACP,IAAK,QAAQM,EAAS,GAAG,YACzB,MAAO,CACT,CACF,CAAC,EACA,GAAG,IAAIN,CAAE,iBAAkB,CAC1B,QAAS,EACT,SAAU,EACZ,CAAC,EACA,GACC,IAAIA,CAAE,kBACN,CACE,IAAK,OACL,UAAW,yBACX,SAAU,CACZ,EACA,GACF,CACJ,EAAG,CAAC,CAAC,EAEH5B,EAAC,OAAI,GAAI4B,EAAI,IAAKG,EAAsB,UAAU,sBAChD,UAAAhC,EAAAD,EAAA,CAAG,SAAA0B,EAAS,EACZzB,EAAAD,EAAA,CACG,SAAA+B,GAAY,IAAKM,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,OACEpC,EAAC,OAAI,UAAU,+BACb,SAAAA,EAACwB,EAAA,CAAa,OAAO,QACnB,SAAAxB,EAACa,EAAA,CAAY,IAAKoB,EAAgB,KAAMG,EAAe,MAAOA,GAAe,MAAO,EACtF,EACF,EAGJ,IAAK,oBACH,OACEpC,EAAC,OAAI,UAAU,sCACb,SAAAA,EAACwB,EAAA,CAAa,OAAO,QACnB,SAAAxB,EAACc,EAAA,CACC,IAAKoB,EACL,KAAME,EACN,UAAU,SACV,MAAOA,GAAe,MACxB,EACF,EACF,EAGJ,IAAK,aACH,OAAOpC,EAACe,EAAA,CAAO,KAAMqB,EAAe,MAAOA,GAAe,MAAO,EAEnE,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,CAEJ,CAAC,EAEKC,EAAoBhC,EAOxB,CAAC,CAAE,UAAAiC,EAAY,GAAI,GAAAT,EAAI,KAAM,CAAE,MAAAU,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,WAAAf,CAAW,CAAE,EAAGC,IAAQ,CAC7G,MAAMe,EAAW3C,EAAyB,IAAI,EAExC4C,EACJ,OAAOR,GAAU,SAAWA,EAAQA,GAAStB,EAAqB,CAAE,KAAMsB,EAAO,WAAYnB,CAAe,CAAC,EAC/G,cAAOoB,GAAe,UAElBA,GAAcvB,EAAqB,CAAE,KAAMuB,EAAY,WAAYpB,CAAe,CAAC,EAGrFnB,EAAC2B,EAAA,CAAU,IAAKG,EAAK,GAAIF,EAAI,WAAYC,EACvC,UAAA9B,EAAC,OACC,UAAWO,EAAG,mDAAoD+B,EAAW,CAC3E,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,SAAA7C,EAAC,OAAI,UAAU,wFACb,SAAAA,EAACwB,EAAA,CAAa,OAAO,uCACnB,SAAAxB,EAACS,EAAA,CAAO,UAAU,eAAe,KAAM,CAAE,MAAOsC,GAAc,GAAI,MAAAH,CAAM,EAAG,EAC7E,EACF,EACF,EACA5C,EAAC,OAAI,UAAU,6BACb,SAAAC,EAAC,OACC,UAAWM,EACT,cACA,2BACA,oNACF,EAEC,UAAAoC,GAAO,KACN3C,EAAC,SAAM,IAAK8C,EAAU,UAAU,yBAAyB,IAAKH,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,YAAW,GAAC,EAE3GD,GAAK,KACJ1C,EAACmB,EAAA,CACC,UAAU,mDACV,OAAQuB,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEF1C,EAAC,OACC,UAAU,8DACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,EACF,GACF,CAEJ,CAAC,EAED,IAAOgD,EAAQxC,EAAW6B,CAAiB",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "Picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "ref", "mediaPlayerStickyRef", "brandEquityRef", "memberEquityRef", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -4,5 +4,5 @@
|
|
|
4
4
|
`,children:r?.primaryButton||""}),t(S,{variant:"secondary",onClick:()=>c(e,r?.index),className:`
|
|
5
5
|
laptop:text-sm desktop:text-base text-xs
|
|
6
6
|
${r.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},j=I.forwardRef(({data:e,buildData:r,className:m="",key:c,event:u},f)=>{const[b,a]=k(""),[s,h]=k([]),x=R({query:"(max-width: 768px)"}),{productsTab:o=[],productsCard:B=[],title:v,align:T="left",isShowTab:g=!0,tabShape:N="square",...D}=e,y=i=>{const l=i?.map(n=>{const w=r?.products?.find(P=>P?.handle===n?.handle);if(w)return{sku:n.sku,...w}})?.filter(n=>n);h(l)};return C(()=>{if(g){a(o?.[0]?.tab||""),y(o?.[0]?.data||[]);return}y(B)},[]),p("div",{ref:f,className:d("w-full",m,{"aiui-dark":e?.theme==="dark"}),children:[v&&t(A,{data:{title:v}}),g&&t("div",{className:`${x?"w-full overflow-hidden":""}`,children:t(V,{shape:N,align:T,value:b,onValueChange:i=>{a(i);const l=o?.find(n=>n?.tab===i);y(l?.data||[])},className:"mb-8",children:t(q,{children:o?.map((i,l)=>t(E,{value:i?.tab||"",children:i?.tab},l))})})}),t(L,{className:"!overflow-visible",id:"ShelfDisplay"+c,data:{list:s,configuration:{...D,event:u}},Slide:U,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var Y=$(j);export{Y as default};
|
|
7
|
+
`,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},j=I.forwardRef(({data:e,buildData:r,className:m="",key:c,event:u},f)=>{const[b,a]=k(""),[s,h]=k([]),x=R({query:"(max-width: 768px)"}),{productsTab:o=[],productsCard:B=[],title:v,align:T="left",isShowTab:g=!0,tabShape:N="square",...D}=e,y=i=>{const l=i?.map(n=>{const w=r?.products?.find(P=>P?.handle===n?.handle);if(w)return{sku:n.sku,...w}})?.filter(n=>n);h(l)};return C(()=>{if(g){a(o?.[0]?.tab||""),y(o?.[0]?.data||[]);return}y(B)},[]),p("div",{ref:f,className:d("min-h-[400px] w-full",m,{"aiui-dark":e?.theme==="dark"}),children:[v&&t(A,{data:{title:v}}),g&&t("div",{className:`${x?"w-full overflow-hidden":""}`,children:t(V,{shape:N,align:T,value:b,onValueChange:i=>{a(i);const l=o?.find(n=>n?.tab===i);y(l?.data||[])},className:"mb-8",children:t(q,{children:o?.map((i,l)=>t(E,{value:i?.tab||"",children:i?.tab},l))})})}),t(L,{className:"!overflow-visible",id:"ShelfDisplay"+c,data:{list:s,configuration:{...D,event:u}},Slide:U,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var Y=$(j);export{Y as default};
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <Tabs\n shape={tabShape}\n align={align}\n value={tabId}\n onValueChange={v => {\n setTabId(v)\n const findData = productsTab?.find((item: any) => item?.tab === v)\n handleCurrentTab(findData?.data || [])\n }}\n className=\"mb-8\"\n >\n <TabsList>\n {productsTab?.map((item: any, index: number) => {\n return (\n <TabsTrigger key={index} value={item?.tab || ''}>\n {item?.tab}\n </TabsTrigger>\n )\n })}\n </TabsList>\n </Tabs>\n </div>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'ShelfDisplay' + key}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "aAgGQ,cAAAA,EA0BF,QAAAC,MA1BE,oBA/FR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,MAAiB,QAC3C,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,MAAmB,2BAC5C,OAAOC,MAAY,6BACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,sBAAAC,MAA0B,oBACnC,OAAS,iBAAAC,MAAqB,mBAwD9B,MAAMC,EAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,MAAMC,EAAkB,CAACC,EAA0BC,IACjDH,GAAe,OAAO,gBAAgBE,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDH,GAAe,OAAO,kBAAkBE,EAAQC,EAAQ,CAAC,EAErD,CAAE,MAAAE,EAAO,UAAAC,CAAU,EAAIV,EAAmB,CAC9C,OAAQ,KACR,OAAQG,GAAM,MAAM,QAAU,EAC9B,WAAYA,GAAM,gBAAgB,QAAUA,GAAM,MAAM,QAAU,EAClE,aAAcA,GAAM,MAAM,cAAgB,KAC5C,CAAC,EAEKQ,EAAY,IAAM,CACtB,MAAMC,EAAMT,GAAM,IACZU,EAAWV,GAAM,SAEvB,OADgBU,GAAU,KAAMC,GAAcA,GAAM,MAAQF,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,OACE1B,EAAC,OAEC,UAAWI,EACT,2JACAa,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,UAAAlB,EAAC,OAAI,UAAWK,EAAG,2FAA2F,EAC5G,SAAAL,EAACM,EAAA,CAAQ,OAAQmB,EAAU,EAAG,UAAU,yDAAyD,EACnG,EACAzB,EAAC,OAAI,UAAU,2DACZ,SAAAiB,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACW,EAAWP,IAExCrB,EAAC,OAEC,UAAU,8HAET,SAAA4B,GAHIP,CAIP,CAEH,EACH,EACArB,EAAC,KACC,MAAOiB,GAAM,OAAS,GACtB,UAAU,0GAET,SAAAA,GAAM,OAAS,GAClB,EACAjB,EAAC,MACC,MAAOiB,GAAM,aAAe,GAC5B,UAAU,yGAET,SAAAA,GAAM,aAAe,GACxB,EACAhB,EAAC,OAAI,UAAU,yBACb,UAAAD,EAAC,OAAI,UAAU,sDAAuD,SAAAuB,GAAS,GAAG,EAClFvB,EAAC,OAAI,UAAU,6DAA8D,SAAAwB,GAAa,GAAG,GAC/F,EAEAvB,EAAC,OAAI,UAAWI,EAAG,0BAA2Ba,EAAc,YAAc,WAAa,WAAa,EAAE,EACpG,UAAAlB,EAACU,EAAA,CACC,QAAQ,UACR,QAAS,IAAMS,EAAgBF,EAAMC,GAAe,KAAK,EACzD,UAAW;AAAA;AAAA,cAEPA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,eAAiB,GACnC,EACAlB,EAACU,EAAA,CACC,QAAQ,YACR,QAAS,IAAMY,EAAkBL,EAAMC,GAAe,KAAK,EAC3D,UAAW;AAAA;AAAA,cAEPA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,iBAAmB,GACrC,GACF,IA3DKD,GAAM,IAAMA,GAAM,MA4DzB,CAEJ,EAEMY,EAAe3B,EAAM,WACzB,CAAC,CAAE,KAAAe,EAAM,UAAAa,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAGC,IAAQ,CACxD,KAAM,CAACC,EAAOC,CAAQ,EAAIjC,EAAiB,EAAE,EACvC,CAACkC,EAAcC,CAAe,EAAInC,EAA6B,CAAC,CAAC,EAEjEoC,EAAWxB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAExD,CACJ,YAAAyB,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,GAAGC,CACL,EAAI7B,EAEE8B,EAAoBC,GAAoC,CAC5D,MAAMC,EAAiBD,GACnB,IAAIpB,GAAQ,CACZ,MAAMsB,EAAWpB,GAAW,UAAU,KAAKV,GAAUA,GAAQ,SAAWQ,GAAM,MAAM,EACpF,GAAIsB,EACF,MAAO,CACL,IAAKtB,EAAK,IACV,GAAGsB,CACL,CAEJ,CAAC,GACC,OAAOtB,GAAQA,CAAI,EACvBU,EAAgBW,CAAc,CAChC,EAEA,OAAA7C,EAAU,IAAM,CACd,GAAIwC,EAAW,CACbR,EAASI,IAAc,CAAC,GAAG,KAAO,EAAE,EACpCO,EAAiBP,IAAc,CAAC,GAAG,MAAQ,CAAC,CAAC,EAC7C,MACF,CACAO,EAAiBN,CAAY,CAC/B,EAAG,CAAC,CAAC,EAGHxC,EAAC,OAAI,IAAKiC,EAAK,UAAW7B,EAAG,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={ref} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <Tabs\n shape={tabShape}\n align={align}\n value={tabId}\n onValueChange={v => {\n setTabId(v)\n const findData = productsTab?.find((item: any) => item?.tab === v)\n handleCurrentTab(findData?.data || [])\n }}\n className=\"mb-8\"\n >\n <TabsList>\n {productsTab?.map((item: any, index: number) => {\n return (\n <TabsTrigger key={index} value={item?.tab || ''}>\n {item?.tab}\n </TabsTrigger>\n )\n })}\n </TabsList>\n </Tabs>\n </div>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'ShelfDisplay' + key}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "index", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
|
|
7
7
|
}
|