@anker-in/headless-ui 0.0.32-alpha.3 → 0.0.32-alpha.5

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.
Files changed (15) hide show
  1. package/dist/cjs/biz-components/Category/index.js +1 -1
  2. package/dist/cjs/biz-components/Category/index.js.map +3 -3
  3. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  4. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
  5. package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +1 -0
  6. package/dist/cjs/biz-components/ShelfDisplay/index.js +5 -5
  7. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  8. package/dist/esm/biz-components/Category/index.js +1 -1
  9. package/dist/esm/biz-components/Category/index.js.map +3 -3
  10. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  11. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
  12. package/dist/esm/biz-components/ShelfDisplay/index.d.ts +1 -0
  13. package/dist/esm/biz-components/ShelfDisplay/index.js +3 -3
  14. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  15. package/package.json +1 -1
package/dist/cjs/biz-components/Category/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var w=Object.create;var p=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},v=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of C(t))!I.call(e,a)&&a!==r&&p(e,a,{get:()=>t[a],enumerable:!(n=N(t,a))||n.enumerable});return e};var c=(e,t,r)=>(r=e!=null?w(_(e)):{},v(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),S=e=>v(p({},"__esModule",{value:!0}),e);var R={};j(R,{default:()=>P});module.exports=S(R);var o=require("react/jsx-runtime"),l=c(require("react")),i=require("../../helpers/utils.js"),s=c(require("../../components/picture.js")),y=require("../../shared/Styles.js"),b=c(require("../Title/index.js")),x=c(require("./SwiperCategory.js")),k=require("../../hooks/useExposure.js"),u=require("../../shared/trackUrlRef.js");const m="image",d="category_banner",z=(e,t)=>{const r=[];for(let n=0;n<e.length;n+=t)r.push(e.slice(n,n+t));return r},$=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,i.cn)("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,o.jsx)("a",{href:(0,u.trackUrlRef)(e?.link,`${m}_${d}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(s.default,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,o.jsx)("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),D=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("a",{href:(0,u.trackUrlRef)(e?.link,`${m}_${d}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(s.default,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),(0,o.jsx)("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),H=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,i.cn)("tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto","hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,o.jsx)("a",{href:(0,u.trackUrlRef)(e?.link,`${m}_${d}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(s.default,{className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})})}),(0,o.jsx)("p",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold ",children:e?.name})]}),B=({data:e,configuration:t,index:r})=>(0,o.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(s.default,{source:e?.image?.url||e?.image,className:(0,i.cn)("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),(0,o.jsx)("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),T=({data:e,configuration:t})=>(0,o.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,n)=>e?.length>5?(0,o.jsx)(D,{data:r,configuration:t},n):(0,o.jsx)(B,{index:n,data:r,configuration:t},n))}),M=l.default.forwardRef((e,t)=>{const{data:r,className:n="",key:a,event:f}=e,h=r?.isShowSelect?r?.products:r?.productData,g=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>g.current),(0,k.useExposure)(g,{componentType:m,componentName:d,componentTitle:r?.title}),(0,o.jsxs)("div",{ref:g,className:(0,i.cn)("w-full overflow-hidden",n,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&(0,o.jsx)(b.default,{data:{title:r?.title},className:"text-4xl"}),(0,o.jsx)("div",{className:"tablet:block hidden",children:(0,o.jsx)(x.default,{id:`Category${a}`,Slide:$,data:{list:h,configuration:{shape:r?.shape,event:f}}})}),(0,o.jsx)("div",{className:"tablet:hidden block",children:(0,o.jsx)(x.default,{id:`Category1${a}`,Slide:T,data:{list:z(h,6),configuration:{shape:r?.shape,event:f}}})}),(0,o.jsx)("div",{className:"h-7"})]})});var P=(0,y.withStyles)(M);
1
+ "use strict";"use client";var w=Object.create;var s=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},y=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of C(t))!_.call(e,a)&&a!==o&&s(e,a,{get:()=>t[a],enumerable:!(n=N(t,a))||n.enumerable});return e};var c=(e,t,o)=>(o=e!=null?w(I(e)):{},y(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),j=e=>y(s({},"__esModule",{value:!0}),e);var E={};S(E,{default:()=>R});module.exports=j(E);var r=require("react/jsx-runtime"),l=c(require("react")),i=require("../../helpers/utils.js"),m=c(require("../../components/picture.js")),v=require("../../shared/Styles.js"),b=c(require("../Title/index.js")),g=c(require("./SwiperCategory.js")),k=require("../../hooks/useExposure.js"),f=require("../../shared/trackUrlRef.js");const d="image",u="category_banner",D=(e,t)=>{const o=[];for(let n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o},$=({data:e,configuration:t})=>(0,r.jsxs)("div",{className:(0,i.cn)("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,r.jsx)("a",{href:(0,f.trackUrlRef)(e?.link,`${d}_${u}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,r.jsx)(m.default,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,r.jsx)("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),T=({data:e,configuration:t})=>(0,r.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("a",{href:(0,f.trackUrlRef)(e?.link,`${d}_${u}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,r.jsx)(m.default,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),(0,r.jsx)("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),z=({data:e,configuration:t,index:o})=>(0,r.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",o===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,r.jsx)(m.default,{source:e?.image?.url||e?.image,className:(0,i.cn)("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",o===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),(0,r.jsx)("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),B=({data:e,configuration:t})=>(0,r.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((o,n)=>e?.length>5?(0,r.jsx)(T,{data:o,configuration:t},n):(0,r.jsx)(z,{index:n,data:o,configuration:t},n))}),M=l.default.forwardRef((e,t)=>{const{data:o,className:n="",key:a,event:x}=e,h=o?.isShowSelect?o?.products:o?.productData,p=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>p.current),(0,k.useExposure)(p,{componentType:d,componentName:u,componentTitle:o?.title}),(0,r.jsxs)("div",{ref:p,className:(0,i.cn)("w-full overflow-hidden",n,{"aiui-dark":o?.theme==="dark"}),children:[o?.title&&(0,r.jsx)(b.default,{data:{title:o?.title},className:"text-4xl"}),(0,r.jsx)("div",{className:"tablet:block hidden",children:(0,r.jsx)(g.default,{id:`Category${a}`,Slide:$,data:{list:h,configuration:{shape:o?.shape,event:x}}})}),(0,r.jsx)("div",{className:"tablet:hidden block",children:(0,r.jsx)(g.default,{id:`Category1${a}`,Slide:B,data:{list:D(h,6),configuration:{shape:o?.shape,event:x}}})}),(0,r.jsx)("div",{className:"h-7"})]})});var R=(0,v.withStyles)(M);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Category/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Category/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto',\n 'hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold \">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\n// const SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n// return (\n// <>\n// <div className=\"tablet:block hidden\">\n// <div className=\"mx-auto flex w-full gap-4\">\n// {data?.map((item, index) => {\n// return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// <div className=\"tablet:hidden block\">\n// <div className=\"grid grid-cols-2 gap-3\">\n// {data?.map((item, index) => {\n// return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// </>\n// )\n// }\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
5
- "mappings": "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",
6
- "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "Picture", "SingleItem", "SinglePcCategoryItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "React", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Title", "SwiperBox"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDI,IAAAI,EAAA,6BApDJC,EAAmD,oBACnDC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,kCACtBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,kBAgChBC,EAAa,CAACC,EAAYC,IAAiB,CAC/C,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAI,OAAQG,GAAKF,EACnCC,EAAO,KAAKF,EAAI,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEpC,OAAOC,CACT,EAEME,EAAiB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAE1C,QAAC,OACC,aAAW,MACT,2EACA,mDACA,oIACAA,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,oBAAC,OAAI,UAAU,oDACb,mBAAC,KACC,QAAM,eAAYD,GAAM,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EACjE,QAAS,IAAMQ,GAAe,OAAO,cAAcD,EAAMC,GAAe,KAAK,EAE7E,mBAAC,EAAAC,QAAA,CACC,OAAQF,GAAM,OAAO,KAAOA,GAAM,MAClC,UAAU,gLACZ,EACF,EACF,KACA,OAAC,KAAE,UAAU,4GACV,SAAAA,GAAM,KACT,GACF,EAKEG,EAAa,CAAC,CAAE,KAAAH,EAAM,cAAAC,CAAc,OAEtC,QAAC,OAEC,aAAW,MACT,2EACA,4DACAA,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,oBAAC,KACC,QAAM,eAAYD,GAAM,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EACjE,QAAS,IAAMQ,GAAe,OAAO,cAAcD,EAAMC,GAAe,KAAK,EAE7E,mBAAC,EAAAC,QAAA,CACC,UAAU,8GACV,OAAQF,GAAM,OAAO,KAAOA,GAAM,MACpC,EACF,KACA,OAAC,KAAE,UAAU,kEAAmE,SAAAA,GAAM,KAAK,IAhBtF,GAAGA,GAAM,IAAI,EAiBpB,EAKEI,EAA2B,CAAC,CAChC,KAAAJ,EACA,cAAAC,EACA,MAAAI,CACF,OAMI,QAAC,OACC,aAAW,MACT,gHACA,yCACAA,IAAU,EAAI,4BAA8B,iBAC5CJ,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,oBAAC,KAAE,KAAMD,GAAM,MAAQ,GAAI,QAAS,IAAMC,GAAe,OAAO,cAAcD,EAAMC,GAAe,KAAK,EACtG,mBAAC,EAAAC,QAAA,CACC,OAAQF,GAAM,OAAO,KAAOA,GAAM,MAClC,aAAW,MACT,kGACAK,IAAU,EAAI,gCAAkC,2BAClD,EACF,EACF,KACA,OAAC,KAAE,UAAU,+DAAgE,SAAAL,GAAM,KAAK,GAC1F,EAKEM,EAAqB,CAAC,CAAE,KAAAN,EAAM,cAAAC,CAAc,OAE9C,OAAC,OAAI,UAAU,yBACZ,SAAAD,GAAM,IAAI,CAACO,EAAMF,IACTL,GAAM,OAAS,KACpB,OAACG,EAAA,CAAuB,KAAMI,EAAM,cAAeN,GAAlCI,CAAiD,KAElE,OAACD,EAAA,CAAqC,MAAOC,EAAO,KAAME,EAAM,cAAeN,GAAhDI,CAA+D,CAEjG,EACH,EAIEG,EAAW,EAAAC,QAAM,WAA0C,CAACC,EAAOC,IAAQ,CAC/E,KAAM,CAAE,KAAAX,EAAM,UAAAY,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAIJ,EAEvCK,EAAcf,GAAM,aAAeA,GAAM,SAAWA,GAAM,YAE1DgB,KAAW,UAAuB,IAAI,EAC5C,gCAAoBL,EAAK,IAAMK,EAAS,OAAyB,KACjE,eAAYA,EAAU,CACpB,cAAAxB,EACA,cAAAC,EACA,eAAgBO,GAAM,KACxB,CAAC,KAGC,QAAC,OAAI,IAAKgB,EAAU,aAAW,MAAG,yBAA0BJ,EAAW,CAAE,YAAaZ,GAAM,QAAU,MAAO,CAAC,EAC3G,UAAAA,GAAM,UAAS,OAAC,EAAAiB,QAAA,CAAM,KAAM,CAAE,MAAOjB,GAAM,KAAM,EAAG,UAAU,WAAW,KAC1E,OAAC,OAAI,UAAU,sBACb,mBAAC,EAAAkB,QAAA,CACC,GAAI,WAAWL,CAAG,GAClB,MAAOd,EACP,KAAM,CAAE,KAAMgB,EAAa,cAAe,CAAE,MAAOf,GAAM,MAAO,MAAOc,CAAM,CAAE,EACjF,EACF,KACA,OAAC,OAAI,UAAU,sBACb,mBAAC,EAAAI,QAAA,CACC,GAAI,YAAYL,CAAG,GACnB,MAAOP,EACP,KAAM,CAAE,KAAMZ,EAAWqB,EAAa,CAAC,EAAG,cAAe,CAAE,MAAOf,GAAM,MAAO,MAAOc,CAAM,CAAE,EAChG,EACF,KACA,OAAC,OAAI,UAAU,MAAM,GACvB,CAEJ,CAAC,EAED,IAAOjC,KAAQ,cAAW2B,CAAQ",
6
+ "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "Picture", "SingleItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "React", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var j=Object.create;var v=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var Q=(s,o)=>{for(var l in o)v(s,l,{get:o[l],enumerable:!0})},V=(s,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of z(o))!U.call(s,i)&&i!==l&&v(s,i,{get:()=>o[i],enumerable:!(p=H(o,i))||p.enumerable});return s};var h=(s,o,l)=>(l=s!=null?j(D(s)):{},V(o||!s||!s.__esModule?v(l,"default",{value:s,enumerable:!0}):l,s)),q=s=>V(v({},"__esModule",{value:!0}),s);var F={};Q(F,{default:()=>O});module.exports=q(F);var t=require("react/jsx-runtime"),n=h(require("react")),G=require("react-responsive"),I=require("../../shared/Styles.js"),M=h(require("../../components/picture.js")),T=h(require("../../components/button.js")),L=require("../../components/heading.js"),_=require("../../components/text.js"),k=require("../../components/gird.js"),$=h(require("../Title/index.js")),S=require("../../helpers/utils.js"),B=h(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),R=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../shared/track.js");const x="image",y="p1_banner",w=({data:s,configuration:o,jIndex:l})=>{const[p,i]=(0,n.useState)(!1),d=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,n.useRef)(null),g=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,R.useExposure)(r,{componentType:x,componentName:y,position:l,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,n.useEffect)(()=>{i(d)},[d]);const{theme:m="light",title:b,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:E}=s,P="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,S.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?g():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:r,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(M.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(M.default,{source:E?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(L.Heading,{size:3,className:"item-title",html:b}),(0,t.jsx)(_.Text,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:f})]}),(0,t.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[u&&u.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(u.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"secondary",children:u.text})}),a&&a.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(a.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"primary",children:a.text})})]})]})]})})},A=n.default.forwardRef((s,o)=>{const{shape:l,sectionTitle:p,groupByTab:i=!1,items:d=[],carousel:r}=s.data,g=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),b=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&(0,t.jsx)($.default,{data:{title:p},className:"section-title"}),i?(0,t.jsxs)(c.Tabs,{shape:l,align:"left",defaultValue:m[0],children:[(0,t.jsx)(c.TabsList,{children:m.map((e,a)=>(0,t.jsx)(c.TabsTrigger,{value:e,onClick:()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:y,component_title:p,component_position:1,navigation:e,button_name:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(c.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:l,isTab:i,activeTab:e,num:f?.[e]?.length||0}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:l,isTab:i}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(k.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:g(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:g("full"),className:"laptop:hidden block",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:l}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var O=(0,I.withStyles)(A);
1
+ "use strict";var H=Object.create;var x=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var q=(s,o)=>{for(var p in o)x(s,p,{get:o[p],enumerable:!0})},G=(s,o,p,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of D(o))!Q.call(s,l)&&l!==p&&x(s,l,{get:()=>o[l],enumerable:!(i=z(o,l))||i.enumerable});return s};var w=(s,o,p)=>(p=s!=null?H(U(s)):{},G(o||!s||!s.__esModule?x(p,"default",{value:s,enumerable:!0}):p,s)),A=s=>G(x({},"__esModule",{value:!0}),s);var J={};q(J,{default:()=>F});module.exports=A(J);var t=require("react/jsx-runtime"),c=w(require("react")),I=require("react-responsive"),L=require("../../shared/Styles.js"),T=w(require("../../components/picture.js")),N=w(require("../../components/button.js")),_=require("../../components/heading.js"),$=require("../../components/text.js"),g=require("../../components/gird.js"),S=w(require("../Title/index.js")),R=require("../../helpers/utils.js"),M=w(require("../SwiperBox/index.js")),n=require("../../components/tabs.js"),C=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js"),E=require("../../shared/track.js");const y="image",B="p1_banner",k=({data:s,configuration:o,jIndex:p,spanType:i})=>{const[l,d]=(0,c.useState)(!1),r=(0,I.useMediaQuery)({query:"(max-width: 768px)"}),h=(0,c.useRef)(null),m=()=>{if(i)switch(i){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,C.useExposure)(h,{componentType:y,componentName:B,position:p,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,c.useEffect)(()=>{d(r)},[r]);const{theme:b="light",title:f,description:e,imageUrl:a,primaryButton:u,secondaryButton:v,imageMobileUrl:j}=s,V="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,R.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",m(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":b==="dark","h-[480px]":l&&!o?.isTab,"h-[400px]":l&&o?.isTab},"text-info-primary"),ref:h,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(T.default,{source:a?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${a?.width}/${a?.height}`}}),(0,t.jsx)(T.default,{source:j?.url||a?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(_.Heading,{size:3,className:"item-title",html:f}),(0,t.jsx)($.Text,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e})]}),(0,t.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[v&&v.text&&(0,t.jsx)("a",{href:(0,P.trackUrlRef)(v.link,`${y}_${B}`),children:(0,t.jsx)(N.default,{className:V,variant:"secondary",children:v.text})}),u&&u.text&&(0,t.jsx)("a",{href:(0,P.trackUrlRef)(u.link,`${y}_${B}`),children:(0,t.jsx)(N.default,{className:V,variant:"primary",children:u.text})})]})]})]})})},O=c.default.forwardRef((s,o)=>{const{shape:p,sectionTitle:i,groupByTab:l=!1,items:d=[],carousel:r}=s.data,h=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),b=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[i&&(0,t.jsx)(S.default,{data:{title:i},className:"section-title"}),l?(0,t.jsxs)(n.Tabs,{shape:p,align:"left",defaultValue:m[0],children:[(0,t.jsx)(n.TabsList,{children:m.map((e,a)=>(0,t.jsx)(n.TabsTrigger,{value:e,onClick:()=>{(0,E.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:y,component_name:B,component_title:i,component_position:1,navigation:e,button_name:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(n.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:p,isTab:l,activeTab:e,num:f?.[e]?.length||0}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:p,isTab:l}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(g.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(g.GridItem,{span:h(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(k,{data:e,configuration:{shape:p},jIndex:a,spanType:e.width})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(g.GridItem,{span:h("full"),className:"laptop:hidden block",children:(0,t.jsx)(k,{data:e,configuration:{shape:p},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:p}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var F=(0,L.withStyles)(O);
2
2
  //# sourceMappingURL=MultiLayoutGraphicBlock.js.map
package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
4
- "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? handleAspect()\n : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={2}\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={tabName!}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\n }}\n Slide={ItemBlock}\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: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\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.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\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.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
- "mappings": "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",
6
- "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
4
+ "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={2}\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={tabName!}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\n }}\n Slide={ItemBlock}\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: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\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.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={item.width} />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={'full'} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\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.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/ShelfDisplay/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export interface ShelfDisplayProps {
27
27
  data: {
28
28
  title?: string;
29
29
  isShowTab?: boolean;
30
+ isShowTag?: boolean;
30
31
  direction?: 'horizontal' | 'vertical';
31
32
  align?: 'left' | 'center' | 'right';
32
33
  productsTab?: any;
package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,6 +1,6 @@
1
- "use strict";"use client";var G=Object.create;var h=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,r)=>{for(var o in r)h(e,o,{get:r[o],enumerable:!0})},P=(e,r,o,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of K(r))!Y.call(e,a)&&a!==o&&h(e,a,{get:()=>r[a],enumerable:!(p=J(r,a))||p.enumerable});return e};var l=(e,r,o)=>(o=e!=null?G(X(e)):{},P(r||!e||!e.__esModule?h(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>P(h({},"__esModule",{value:!0}),e);var ne={};Z(ne,{default:()=>oe});module.exports=ee(ne);var t=require("react/jsx-runtime"),n=l(require("react")),f=require("../../helpers/utils.js"),_=l(require("../../components/picture.js")),M=l(require("./tabSwitch.js")),S=l(require("../../components/button.js")),E=l(require("../Title/index.js")),H=l(require("../SwiperBox/index.js")),q=require("../../shared/Styles.js"),V=require("./shelfDisplay.js"),R=require("../../components/container.js"),T=require("react-responsive"),$=require("../../hooks/useExposure.js"),A=require("../../shared/track.js"),L=require("../AiuiProvider/index.js"),O=l(require("../../components/badge.js")),z=require("../../components/heading.js"),U=require("../../components/text.js");const C="image",I="product_shelf",te=999999999e-2,re=({data:e,configuration:r})=>{const{locale:o="us",copyWriting:p}=(0,L.useAiuiContext)(),a=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),x=(i,s)=>r?.event?.primaryButton?.(i,s+1),d=(i,s)=>r?.event?.secondaryButton?.(i,s+1),c=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},y=!c?.availableForSale&&c?.price?.amount===te,{price:b,basePrice:g}=(0,V.formatVariantPrice)({locale:o,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),m=()=>{const i=e?.sku,s=e?.variants;return s?.find(N=>N?.sku===i)?.image?.url||s?.[0]?.image?.url||""};return(0,t.jsx)("div",{className:(0,f.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":a}),children:(0,t.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsx)("div",{className:(0,f.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(_.default,{source:m(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,s)=>(0,t.jsx)(O.default,{children:i},s))}),(0,t.jsx)(z.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),(0,t.jsx)(U.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:y?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:g||""})]})}),(0,t.jsxs)("div",{className:(0,f.cn)("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(S.default,{variant:"secondary",onClick:()=>d(e,r?.index),className:`
2
- ${r.direction==="vertical"?"w-full":""}
3
- `,children:r?.secondaryButton||""}),(0,t.jsx)(S.default,{variant:"primary",onClick:()=>x(e,r?.index),className:`
4
- ${r.direction==="vertical"?"w-full":""}
5
- `,children:r?.primaryButton||""})]})]})},e?.id||e?.handle)},ie=n.default.forwardRef(({data:e,buildData:r,className:o="",key:p,event:a},x)=>{const[d,c]=(0,n.useState)(""),[y,b]=(0,n.useState)([]),g=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,n.useRef)(null);(0,n.useImperativeHandle)(x,()=>m.current),(0,$.useExposure)(m,{componentType:C,componentName:I,componentTitle:e?.title,navigation:d});const{productsTab:i=[],productsCard:s=[],title:k,align:N="left",isShowTab:B=!0,tabShape:j="square",...F}=e,w=u=>{const Q=u?.map(v=>{const D=r?.products?.find(W=>W?.handle===v?.handle);if(D)return{sku:v.sku,...D}})?.filter(v=>v);b(Q)};return(0,n.useEffect)(()=>{if(B){c(i?.[0]?.tab||""),w(i?.[0]?.data||[]);return}w(s)},[]),(0,t.jsx)(R.Container,{...e?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:m,className:(0,f.cn)("w-full",o,{"aiui-dark":e?.theme==="dark"}),children:[k&&(0,t.jsx)(E.default,{data:{title:k}}),B&&(0,t.jsx)("div",{className:`${g?"w-full overflow-hidden":""}`,children:(0,t.jsx)(M.default,{value:d,tabs:i,tabShape:j,onTabClick:u=>{c(u?.tab),w(u?.data||[]),(0,A.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:C,component_name:I,component_title:e?.title,component_position:1,navigation:u?.tab}})}})}),(0,t.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,t.jsx)(H.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${d}`,data:{list:y,configuration:{...F,event:a}},Slide:re,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var oe=(0,q.withStyles)(ie);
1
+ "use strict";"use client";var J=Object.create;var y=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,o)=>{for(var r in o)y(e,r,{get:o[r],enumerable:!0})},D=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of X(o))!Z.call(e,a)&&a!==r&&y(e,a,{get:()=>o[a],enumerable:!(p=K(o,a))||p.enumerable});return e};var l=(e,o,r)=>(r=e!=null?J(Y(e)):{},D(o||!e||!e.__esModule?y(r,"default",{value:e,enumerable:!0}):r,e)),te=e=>D(y({},"__esModule",{value:!0}),e);var ne={};ee(ne,{default:()=>se});module.exports=te(ne);var t=require("react/jsx-runtime"),n=l(require("react")),h=require("../../helpers/utils.js"),I=l(require("../../components/picture.js")),_=l(require("./tabSwitch.js")),T=l(require("../../components/button.js")),M=l(require("../Title/index.js")),E=l(require("../SwiperBox/index.js")),H=require("../../shared/Styles.js"),q=require("./shelfDisplay.js"),L=require("../../components/container.js"),N=require("react-responsive"),V=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),A=l(require("../../components/badge.js")),O=require("../../components/heading.js"),z=require("../../components/text.js");const P="image",C="product_shelf",oe=999999999e-2,ie=({data:e,configuration:o})=>{const{locale:r="us",copyWriting:p}=(0,$.useAiuiContext)(),a=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),b=(i,s)=>o?.event?.primaryButton?.(i,s+1),m=(i,s)=>o?.event?.secondaryButton?.(i,s+1),c=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},g=!c?.availableForSale&&c?.price?.amount===oe,w=o?.isShowTag,{price:k,basePrice:d}=(0,q.formatVariantPrice)({locale:r,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const i=e?.sku,s=e?.variants;return s?.find(v=>v?.sku===i)?.image?.url||s?.[0]?.image?.url||""};return(0,t.jsx)("div",{className:(0,h.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":a}),children:(0,t.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:u(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:w?e?.tags?.filter(i=>i.startsWith("CLtag"))?.map(i=>i.replace("CLtag:",""))?.slice(0,2)?.map?.((i,s)=>(0,t.jsx)(A.default,{children:i},s)):null}),(0,t.jsx)(O.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),(0,t.jsx)(z.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:g?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:d||""})]})}),(0,t.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",o.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(T.default,{variant:"secondary",onClick:()=>m(e,o?.index),className:`
2
+ ${o.direction==="vertical"?"w-full":""}
3
+ `,children:o?.secondaryButton||""}),(0,t.jsx)(T.default,{variant:"primary",onClick:()=>b(e,o?.index),className:`
4
+ ${o.direction==="vertical"?"w-full":""}
5
+ `,children:o?.primaryButton||""})]})]})},e?.id||e?.handle)},re=n.default.forwardRef(({data:e,buildData:o,className:r="",key:p,event:a},b)=>{const[m,c]=(0,n.useState)(""),[g,w]=(0,n.useState)([]),k=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),d=(0,n.useRef)(null);(0,n.useImperativeHandle)(b,()=>d.current),(0,V.useExposure)(d,{componentType:P,componentName:C,componentTitle:e?.title,navigation:m});const{productsTab:u=[],productsCard:i=[],title:s,align:U="left",isShowTab:v=!0,tabShape:j="square",isShowTag:W=!1,...F}=e,S=f=>{const Q=f?.map(x=>{const B=o?.products?.find(G=>G?.handle===x?.handle);if(B)return{sku:x.sku,...B}})?.filter(x=>x);w(Q)};return(0,n.useEffect)(()=>{if(v){c(u?.[0]?.tab||""),S(u?.[0]?.data||[]);return}S(i)},[]),(0,t.jsx)(L.Container,{...e?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:d,className:(0,h.cn)("w-full",r,{"aiui-dark":e?.theme==="dark"}),children:[s&&(0,t.jsx)(M.default,{data:{title:s}}),v&&(0,t.jsx)("div",{className:`${k?"w-full overflow-hidden":""}`,children:(0,t.jsx)(_.default,{value:m,tabs:u,tabShape:j,onTabClick:f=>{c(f?.tab),S(f?.data||[]),(0,R.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:P,component_name:C,component_title:e?.title,component_position:1,navigation:f?.tab}})}})}),(0,t.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,t.jsx)(E.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${m}`,data:{list:g,configuration:{...F,event:a,isShowTag:W}},Slide:ie,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var se=(0,H.withStyles)(re);
6
6
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -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, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.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 { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\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 containerProps?: ContainerProps\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 { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\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 variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.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 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div\n className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n >\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 <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\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 </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n </div>\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 innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\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 <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={innerRef} 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 <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\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.3,\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 </div>\n </Container>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
- "mappings": "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",
6
- "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.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 { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\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 isShowTag?: 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 containerProps?: ContainerProps\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 { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\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 variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.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 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div\n className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n >\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 {isShowTag\n ? data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)\n : null}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\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 </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n </div>\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 innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\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 <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={innerRef} 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 <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\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.3,\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 </div>\n </Container>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
+ "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
7
7
  }
package/dist/esm/biz-components/Category/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import f,{useImperativeHandle as h,useRef as v}from"react";import{cn as a}from"../../helpers/utils.js";import l from"../../components/picture.js";import{withStyles as y}from"../../shared/Styles.js";import b from"../Title/index.js";import x from"./SwiperCategory.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as m}from"../../shared/trackUrlRef.js";const s="image",p="category_banner",w=(e,t)=>{const r=[];for(let n=0;n<e.length;n+=t)r.push(e.slice(n,n+t));return r},N=({data:e,configuration:t})=>i("div",{className:a("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),o("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),C=({data:e,configuration:t})=>i("div",{className:a("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),o("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),R=({data:e,configuration:t})=>i("div",{className:a("tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto","hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})})}),o("p",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold ",children:e?.name})]}),_=({data:e,configuration:t,index:r})=>i("div",{className:a("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{source:e?.image?.url||e?.image,className:a("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),o("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),I=({data:e,configuration:t})=>o("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,n)=>e?.length>5?o(C,{data:r,configuration:t},n):o(_,{index:n,data:r,configuration:t},n))}),j=f.forwardRef((e,t)=>{const{data:r,className:n="",key:d,event:u}=e,g=r?.isShowSelect?r?.products:r?.productData,c=v(null);return h(t,()=>c.current),k(c,{componentType:s,componentName:p,componentTitle:r?.title}),i("div",{ref:c,className:a("w-full overflow-hidden",n,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&o(b,{data:{title:r?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(x,{id:`Category${d}`,Slide:N,data:{list:g,configuration:{shape:r?.shape,event:u}}})}),o("div",{className:"tablet:hidden block",children:o(x,{id:`Category1${d}`,Slide:I,data:{list:w(g,6),configuration:{shape:r?.shape,event:u}}})}),o("div",{className:"h-7"})]})});var E=y(j);export{E as default};
1
+ "use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import x,{useImperativeHandle as h,useRef as y}from"react";import{cn as a}from"../../helpers/utils.js";import s from"../../components/picture.js";import{withStyles as v}from"../../shared/Styles.js";import b from"../Title/index.js";import g from"./SwiperCategory.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as f}from"../../shared/trackUrlRef.js";const c="image",m="category_banner",w=(e,t)=>{const r=[];for(let n=0;n<e.length;n+=t)r.push(e.slice(n,n+t));return r},N=({data:e,configuration:t})=>i("div",{className:a("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:f(e?.link,`${c}_${m}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),o("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),C=({data:e,configuration:t})=>i("div",{className:a("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:f(e?.link,`${c}_${m}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),o("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),I=({data:e,configuration:t,index:r})=>i("div",{className:a("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{source:e?.image?.url||e?.image,className:a("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),o("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),_=({data:e,configuration:t})=>o("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,n)=>e?.length>5?o(C,{data:r,configuration:t},n):o(I,{index:n,data:r,configuration:t},n))}),S=x.forwardRef((e,t)=>{const{data:r,className:n="",key:p,event:d}=e,u=r?.isShowSelect?r?.products:r?.productData,l=y(null);return h(t,()=>l.current),k(l,{componentType:c,componentName:m,componentTitle:r?.title}),i("div",{ref:l,className:a("w-full overflow-hidden",n,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&o(b,{data:{title:r?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(g,{id:`Category${p}`,Slide:N,data:{list:u,configuration:{shape:r?.shape,event:d}}})}),o("div",{className:"tablet:hidden block",children:o(g,{id:`Category1${p}`,Slide:_,data:{list:w(u,6),configuration:{shape:r?.shape,event:d}}})}),o("div",{className:"h-7"})]})});var E=v(S);export{E as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Category/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Category/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto',\n 'hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold \">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\n// const SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n// return (\n// <>\n// <div className=\"tablet:block hidden\">\n// <div className=\"mx-auto flex w-full gap-4\">\n// {data?.map((item, index) => {\n// return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// <div className=\"tablet:hidden block\">\n// <div className=\"grid grid-cols-2 gap-3\">\n// {data?.map((item, index) => {\n// return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// </>\n// )\n// }\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "useExposure", "trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "SingleItem", "SinglePcCategoryItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Category_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "useExposure", "trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "SingleItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Category_default"]
7
7
  }
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Fragment as T,jsx as a,jsxs as o}from"react/jsx-runtime";import P,{useState as V,useEffect as G,useRef as I}from"react";import{useMediaQuery as L}from"react-responsive";import{withStyles as _}from"../../shared/Styles.js";import x from"../../components/picture.js";import y from"../../components/button.js";import{Heading as $}from"../../components/heading.js";import{Text as S}from"../../components/text.js";import{Grid as R,GridItem as B}from"../../components/gird.js";import C from"../Title/index.js";import{cn as E}from"../../helpers/utils.js";import b from"../SwiperBox/index.js";import{Tabs as j,TabsList as H,TabsTrigger as z,TabsContent as D}from"../../components/tabs.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";import{gaTrack as Q}from"../../shared/track.js";const k="image",g="p1_banner",u=({data:m,configuration:l,jIndex:i})=>{const[r,f]=V(!1),p=L({query:"(max-width: 768px)"}),s=I(null),h=()=>{switch(l?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};U(s,{componentType:k,componentName:g,position:i,componentTitle:m.title,componentDescription:m.description,navigation:l?.activeTab}),G(()=>{f(p)},[p]);const{theme:n="light",title:w,description:c,imageUrl:e,primaryButton:t,secondaryButton:d,imageMobileUrl:N}=m,v="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return a("div",{className:E("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",l?.isTab?h():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":l?.shape==="rounded","aiui-dark":n==="dark","h-[480px]":r&&!l?.isTab,"h-[400px]":r&&l?.isTab},"text-info-primary"),ref:s,children:o("div",{className:"absolute inset-0",children:[a(x,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),a(x,{source:N?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),o("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[o("div",{children:[a($,{size:3,className:"item-title",html:w}),a(S,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:c})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[d&&d.text&&a("a",{href:M(d.link,`${k}_${g}`),children:a(y,{className:v,variant:"secondary",children:d.text})}),t&&t.text&&a("a",{href:M(t.link,`${k}_${g}`),children:a(y,{className:v,variant:"primary",children:t.text})})]})]})]})})},q=P.forwardRef((m,l)=>{const{shape:i,sectionTitle:r,groupByTab:f=!1,items:p=[],carousel:s}=m.data,h=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=p.map(e=>e.tabName).filter(Boolean).filter((e,t,d)=>d.indexOf(e)===t),w=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},c=n.map(e=>({tabName:e,items:p.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,className:"text-info-primary",children:[r&&a(C,{data:{title:r},className:"section-title"}),f?o(j,{shape:i,align:"left",defaultValue:n[0],children:[a(H,{children:n.map((e,t)=>a(z,{value:e,onClick:()=>{Q({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:k,component_name:g,component_title:r,component_position:1,navigation:e,button_name:e}})},children:e},t))}),n.map((e,t)=>a(D,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:o(T,{children:[a(b,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:c?.[e]||[],configuration:{shape:i,isTab:f,activeTab:e,num:c?.[e]?.length||0}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(c?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(c?.[e]?.length||0)}}}),s&&s?.items.length>0?a(b,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:s?.items||[],configuration:{shape:i,isTab:f}},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.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},t))]}):o(T,{children:[o(R,{className:"w-full",children:[p.map((e,t)=>a(B,{span:h(e.width??"full"),className:"laptop:block hidden",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`)),p.map((e,t)=>a(B,{span:h("full"),className:"laptop:hidden block",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`))]}),s&&s?.items.length>0?a(b,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:s?.items||[],configuration:{shape:i}},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.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var ie=_(q);export{ie as default};
1
+ import{Fragment as N,jsx as a,jsxs as o}from"react/jsx-runtime";import V,{useState as G,useEffect as I,useRef as L}from"react";import{useMediaQuery as _}from"react-responsive";import{withStyles as $}from"../../shared/Styles.js";import y from"../../components/picture.js";import B from"../../components/button.js";import{Heading as S}from"../../components/heading.js";import{Text as R}from"../../components/text.js";import{Grid as C,GridItem as M}from"../../components/gird.js";import E from"../Title/index.js";import{cn as j}from"../../helpers/utils.js";import v from"../SwiperBox/index.js";import{Tabs as H,TabsList as z,TabsTrigger as D,TabsContent as U}from"../../components/tabs.js";import{useExposure as Q}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{gaTrack as q}from"../../shared/track.js";const g="image",b="p1_banner",h=({data:f,configuration:l,jIndex:p,spanType:i})=>{const[r,c]=G(!1),s=_({query:"(max-width: 768px)"}),u=L(null),n=()=>{if(i)switch(i){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(l?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};Q(u,{componentType:g,componentName:b,position:p,componentTitle:f.title,componentDescription:f.description,navigation:l?.activeTab}),I(()=>{c(s)},[s]);const{theme:w="light",title:d,description:e,imageUrl:t,primaryButton:m,secondaryButton:k,imageMobileUrl:P}=f,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return a("div",{className:j("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",n(),{"rounded-2xl":l?.shape==="rounded","aiui-dark":w==="dark","h-[480px]":r&&!l?.isTab,"h-[400px]":r&&l?.isTab},"text-info-primary"),ref:u,children:o("div",{className:"absolute inset-0",children:[a(y,{source:t?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),a(y,{source:P?.url||t?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),o("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[o("div",{children:[a(S,{size:3,className:"item-title",html:d}),a(R,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[k&&k.text&&a("a",{href:T(k.link,`${g}_${b}`),children:a(B,{className:x,variant:"secondary",children:k.text})}),m&&m.text&&a("a",{href:T(m.link,`${g}_${b}`),children:a(B,{className:x,variant:"primary",children:m.text})})]})]})]})})},A=V.forwardRef((f,l)=>{const{shape:p,sectionTitle:i,groupByTab:r=!1,items:c=[],carousel:s}=f.data,u=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=c.map(e=>e.tabName).filter(Boolean).filter((e,t,m)=>m.indexOf(e)===t),w=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},d=n.map(e=>({tabName:e,items:c.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,className:"text-info-primary",children:[i&&a(E,{data:{title:i},className:"section-title"}),r?o(H,{shape:p,align:"left",defaultValue:n[0],children:[a(z,{children:n.map((e,t)=>a(D,{value:e,onClick:()=>{q({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:g,component_name:b,component_title:i,component_position:1,navigation:e,button_name:e}})},children:e},t))}),n.map((e,t)=>a(U,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:o(N,{children:[a(v,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:d?.[e]||[],configuration:{shape:p,isTab:r,activeTab:e,num:d?.[e]?.length||0}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(d?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(d?.[e]?.length||0)}}}),s&&s?.items.length>0?a(v,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:s?.items||[],configuration:{shape:p,isTab:r}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},t))]}):o(N,{children:[o(C,{className:"w-full",children:[c.map((e,t)=>a(M,{span:u(e.width??"full"),className:"laptop:block hidden",children:a(h,{data:e,configuration:{shape:p},jIndex:t,spanType:e.width})},`${e?.title||""}${t}`)),c.map((e,t)=>a(M,{span:u("full"),className:"laptop:hidden block",children:a(h,{data:e,configuration:{shape:p},jIndex:t,spanType:"full"})},`${e?.title||""}${t}`))]}),s&&s?.items.length>0?a(v,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:s?.items||[],configuration:{shape:p}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var ie=$(A);export{ie as default};
2
2
  //# sourceMappingURL=MultiLayoutGraphicBlock.js.map
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
4
- "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? handleAspect()\n : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={2}\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={tabName!}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\n }}\n Slide={ItemBlock}\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: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\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.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\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.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Grid", "GridItem", "Title", "cn", "SwiperBox", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
4
+ "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={2}\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={tabName!}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\n }}\n Slide={ItemBlock}\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: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\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.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={item.width} />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={'full'} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\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.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Grid", "GridItem", "Title", "cn", "SwiperBox", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
7
7
  }
package/dist/esm/biz-components/ShelfDisplay/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export interface ShelfDisplayProps {
27
27
  data: {
28
28
  title?: string;
29
29
  isShowTab?: boolean;
30
+ isShowTag?: boolean;
30
31
  direction?: 'horizontal' | 'vertical';
31
32
  align?: 'left' | 'center' | 'right';
32
33
  productsTab?: any;
package/dist/esm/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,6 +1,6 @@
1
- "use client";import{Fragment as Z,jsx as t,jsxs as d}from"react/jsx-runtime";import E,{useState as T,useEffect as H,useRef as q,useImperativeHandle as V}from"react";import{cn as c}from"../../helpers/utils.js";import R from"../../components/picture.js";import $ from"./tabSwitch.js";import N from"../../components/button.js";import A from"../Title/index.js";import L from"../SwiperBox/index.js";import{withStyles as O}from"../../shared/Styles.js";import{formatVariantPrice as z}from"./shelfDisplay.js";import{Container as U}from"../../components/container.js";import{useMediaQuery as B}from"react-responsive";import{useExposure as j}from"../../hooks/useExposure.js";import{gaTrack as F}from"../../shared/track.js";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import W from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";const D="image",P="product_shelf",K=999999999e-2,X=({data:e,configuration:i})=>{const{locale:m="us",copyWriting:u}=Q(),f=B({query:"(max-width: 768px)"}),v=(r,o)=>i?.event?.primaryButton?.(r,o+1),s=(r,o)=>i?.event?.secondaryButton?.(r,o+1),n=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},h=!n?.availableForSale&&n?.price?.amount===K,{price:x,basePrice:y}=z({locale:m,amount:n?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),a=()=>{const r=e?.sku,o=e?.variants;return o?.find(k=>k?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return t("div",{className:c("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",i?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":f}),children:d("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[t("div",{className:c("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(R,{source:a(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>t(W,{children:r},o))}),t(G,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),t(J,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:h?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u?.soldOutText}):d(Z,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:x||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:y||""})]})}),d("div",{className:c("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[t(N,{variant:"secondary",onClick:()=>s(e,i?.index),className:`
1
+ "use client";import{Fragment as ee,jsx as t,jsxs as u}from"react/jsx-runtime";import H,{useState as S,useEffect as q,useRef as L,useImperativeHandle as V}from"react";import{cn as d}from"../../helpers/utils.js";import R from"../../components/picture.js";import $ from"./tabSwitch.js";import T from"../../components/button.js";import A from"../Title/index.js";import O from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as U}from"./shelfDisplay.js";import{Container as j}from"../../components/container.js";import{useMediaQuery as N}from"react-responsive";import{useExposure as W}from"../../hooks/useExposure.js";import{gaTrack as F}from"../../shared/track.js";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import G from"../../components/badge.js";import{Heading as J}from"../../components/heading.js";import{Text as K}from"../../components/text.js";const B="image",D="product_shelf",X=999999999e-2,Y=({data:e,configuration:i})=>{const{locale:f="us",copyWriting:h}=Q(),v=N({query:"(max-width: 768px)"}),x=(o,r)=>i?.event?.primaryButton?.(o,r+1),n=(o,r)=>i?.event?.secondaryButton?.(o,r+1),s=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},y=!s?.availableForSale&&s?.price?.amount===X,b=i?.isShowTag,{price:g,basePrice:a}=U({locale:f,amount:s?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),l=()=>{const o=e?.sku,r=e?.variants;return r?.find(c=>c?.sku===o)?.image?.url||r?.[0]?.image?.url||""};return t("div",{className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",i?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":v}),children:u("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[t("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(R,{source:l(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:b?e?.tags?.filter(o=>o.startsWith("CLtag"))?.map(o=>o.replace("CLtag:",""))?.slice(0,2)?.map?.((o,r)=>t(G,{children:o},r)):null}),t(J,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),t(K,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:y?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):u(ee,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:a||""})]})}),u("div",{className:d("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[t(T,{variant:"secondary",onClick:()=>n(e,i?.index),className:`
2
2
  ${i.direction==="vertical"?"w-full":""}
3
- `,children:i?.secondaryButton||""}),t(N,{variant:"primary",onClick:()=>v(e,i?.index),className:`
3
+ `,children:i?.secondaryButton||""}),t(T,{variant:"primary",onClick:()=>x(e,i?.index),className:`
4
4
  ${i.direction==="vertical"?"w-full":""}
5
- `,children:i?.primaryButton||""})]})]})},e?.id||e?.handle)},Y=E.forwardRef(({data:e,buildData:i,className:m="",key:u,event:f},v)=>{const[s,n]=T(""),[h,x]=T([]),y=B({query:"(max-width: 768px)"}),a=q(null);V(v,()=>a.current),j(a,{componentType:D,componentName:P,componentTitle:e?.title,navigation:s});const{productsTab:r=[],productsCard:o=[],title:b,align:k="left",isShowTab:w=!0,tabShape:C="square",...I}=e,g=l=>{const _=l?.map(p=>{const S=i?.products?.find(M=>M?.handle===p?.handle);if(S)return{sku:p.sku,...S}})?.filter(p=>p);x(_)};return H(()=>{if(w){n(r?.[0]?.tab||""),g(r?.[0]?.data||[]);return}g(o)},[]),t(U,{...e?.containerProps||{},className:"overflow-hidden",children:d("div",{ref:a,className:c("w-full",m,{"aiui-dark":e?.theme==="dark"}),children:[b&&t(A,{data:{title:b}}),w&&t("div",{className:`${y?"w-full overflow-hidden":""}`,children:t($,{value:s,tabs:r,tabShape:C,onTabClick:l=>{n(l?.tab),g(l?.data||[]),F({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:D,component_name:P,component_title:e?.title,component_position:1,navigation:l?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(L,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${u}${s}`,data:{list:h,configuration:{...I,event:f}},Slide:X,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var xe=O(Y);export{xe as default};
5
+ `,children:i?.primaryButton||""})]})]})},e?.id||e?.handle)},Z=H.forwardRef(({data:e,buildData:i,className:f="",key:h,event:v},x)=>{const[n,s]=S(""),[y,b]=S([]),g=N({query:"(max-width: 768px)"}),a=L(null);V(x,()=>a.current),W(a,{componentType:B,componentName:D,componentTitle:e?.title,navigation:n});const{productsTab:l=[],productsCard:o=[],title:r,align:P="left",isShowTab:c=!0,tabShape:C="square",isShowTag:I=!1,..._}=e,w=p=>{const M=p?.map(m=>{const k=i?.products?.find(E=>E?.handle===m?.handle);if(k)return{sku:m.sku,...k}})?.filter(m=>m);b(M)};return q(()=>{if(c){s(l?.[0]?.tab||""),w(l?.[0]?.data||[]);return}w(o)},[]),t(j,{...e?.containerProps||{},className:"overflow-hidden",children:u("div",{ref:a,className:d("w-full",f,{"aiui-dark":e?.theme==="dark"}),children:[r&&t(A,{data:{title:r}}),c&&t("div",{className:`${g?"w-full overflow-hidden":""}`,children:t($,{value:n,tabs:l,tabShape:C,onTabClick:p=>{s(p?.tab),w(p?.data||[]),F({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:B,component_name:D,component_title:e?.title,component_position:1,navigation:p?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(O,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${h}${n}`,data:{list:y,configuration:{..._,event:v,isShowTag:I}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var ye=z(Z);export{ye as default};
6
6
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -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, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.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 { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\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 containerProps?: ContainerProps\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 { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\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 variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.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 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div\n className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n >\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 <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\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 </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n </div>\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 innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\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 <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={innerRef} 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 <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\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.3,\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 </div>\n </Container>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "Container", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.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 { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\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 isShowTag?: 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 containerProps?: ContainerProps\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 { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\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 variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.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 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div\n className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n >\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 {isShowTag\n ? data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)\n : null}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\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 </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n </div>\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 innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\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 <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={innerRef} 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 <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\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.3,\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 </div>\n </Container>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "Container", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.32-alpha.3",
3
+ "version": "0.0.32-alpha.5",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",