@anker-in/headless-ui 1.1.9-temp.120204 → 1.1.9-temp.120206
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +1 -1
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +1 -1
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var M=(e,i)=>{for(var r in i)a(e,r,{get:i[r],enumerable:!0})},d=(e,i,r,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of S(i))!P.call(e,o)&&o!==r&&a(e,o,{get:()=>i[o],enumerable:!(l=u(i,o))||l.enumerable});return e};var y=(e,i,r)=>(r=e!=null?m(g(e)):{},d(i||!e||!e.__esModule?a(r,"default",{value:e,enumerable:!0}):r,e)),B=e=>d(a({},"__esModule",{value:!0}),e);var b={};M(b,{default:()=>h});module.exports=B(b);var t=require("react/jsx-runtime"),c=y(require("react")),n=require("swiper/react"),s=require("swiper/modules"),k=require("swiper/css"),G=require("swiper/css/pagination");const f=c.default.forwardRef(({data:e,Slide:i,id:r,pagination:l},o)=>(0,t.jsx)(n.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[s.FreeMode,s.Mousewheel,s.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:
|
|
1
|
+
"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var M=(e,i)=>{for(var r in i)a(e,r,{get:i[r],enumerable:!0})},d=(e,i,r,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of S(i))!P.call(e,o)&&o!==r&&a(e,o,{get:()=>i[o],enumerable:!(l=u(i,o))||l.enumerable});return e};var y=(e,i,r)=>(r=e!=null?m(g(e)):{},d(i||!e||!e.__esModule?a(r,"default",{value:e,enumerable:!0}):r,e)),B=e=>d(a({},"__esModule",{value:!0}),e);var b={};M(b,{default:()=>h});module.exports=B(b);var t=require("react/jsx-runtime"),c=y(require("react")),n=require("swiper/react"),s=require("swiper/modules"),k=require("swiper/css"),G=require("swiper/css/pagination");const f=c.default.forwardRef(({data:e,Slide:i,id:r,pagination:l},o)=>(0,t.jsx)(n.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[s.FreeMode,s.Mousewheel,s.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:2,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:2,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((w,p)=>(0,t.jsx)(n.SwiperSlide,{className:"!h-[unset]",children:(0,t.jsx)(i,{data:w,configuration:{...e?.configuration,index:p}})},r+"SwiperSlide"+p))}));f.displayName="SwiperBox";var h=f;
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView:
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
5
|
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6DU,IAAAI,EAAA,6BA5DVC,EAAkB,oBAClBA,EAAoC,wBACpCC,EAAiD,0BACjDC,EAAO,sBACPC,EAAO,iCAcP,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,EAAGC,OAEjG,OAAC,UACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGJ,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACK,EAAMC,OACtB,OAAC,eAA8C,UAAU,aACvD,mBAACL,EAAA,CAAM,KAAMI,EAAM,cAAe,CAAE,GAAGL,GAAM,cAAe,MAAOM,CAAO,EAAG,GAD7DJ,EAAK,cAAgBI,CAEvC,CACD,EACH,CAEH,EAEDR,EAAU,YAAc,YAExB,IAAOP,EAAQO",
|
|
6
6
|
"names": ["SwiperCategory_exports", "__export", "SwiperCategory_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_css", "import_pagination", "SwiperBox", "React", "data", "Slide", "id", "pagination", "ref", "item", "jIndex"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var I=Object.create;var
|
|
1
|
+
"use strict";"use client";var I=Object.create;var d=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var _=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},b=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of D(t))!T.call(e,n)&&n!==o&&d(e,n,{get:()=>t[n],enumerable:!(r=$(t,n))||r.enumerable});return e};var u=(e,t,o)=>(o=e!=null?I(S(e)):{},b(t||!e||!e.__esModule?d(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>b(d({},"__esModule",{value:!0}),e);var B={};_(B,{default:()=>R});module.exports=H(B);var a=require("react/jsx-runtime"),l=u(require("react")),i=require("../../helpers/utils.js"),g=u(require("../../components/picture.js")),k=require("../../shared/Styles.js"),C=u(require("../Title/index.js")),x=u(require("./SwiperCategory.js")),f=require("../../hooks/useExposure.js"),h=require("../../shared/trackUrlRef.js"),w=require("../../components/heading.js");const p="image",c="category_banner",j=(e,t)=>{const o=[];for(let r=0;r<e.length;r+=t)o.push(e.slice(r,r+t));return o},L=({data:e,configuration:t})=>{const o=(0,l.useRef)(null);return(0,f.useExposure)(o,{componentType:p,componentName:c,componentTitle:e?.name,position:t?.index+1}),(0,a.jsxs)("div",{ref:o,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,a.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,a.jsx)("a",{"aria-label":e?.name,href:(0,h.trackUrlRef)(e?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,a.jsx)(g.default,{alt:e?.image?.alt||"",source:e?.image?.url||"",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,a.jsx)(w.Heading,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]})},M=({data:e,configuration:t,index:o})=>{const r=(0,l.useRef)(null);(0,f.useExposure)(r,{componentType:p,componentName:c,componentTitle:e?.name,position:t?.index+1});const s=(t?.totalCategories??0)<6,m=o===0;return(0,a.jsxs)("div",{ref:r,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 duration-300",s?(0,i.cn)("p-4",m?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,a.jsx)("a",{href:(0,h.trackUrlRef)(e?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:(0,a.jsx)(g.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,i.cn)("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",s?(0,i.cn)(m?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,a.jsx)("p",{className:(0,i.cn)("text-info-primary text-center text-sm font-bold",s?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},E=({data:e,configuration:t})=>(0,a.jsx)("div",{className:"flex h-full flex-col gap-3",children:e?.map((o,r)=>(0,a.jsx)(M,{index:r,data:o,configuration:t},r))}),z=l.default.forwardRef((e,t)=>{const{data:o,className:r="",key:n,event:s}=e,m=(o?.isShowSelect?o?.products:o?.productData)||[],y=m.length,N=j(m,3),v=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>v.current),(0,a.jsxs)("div",{ref:v,className:(0,i.cn)("w-full overflow-hidden",r,{"aiui-dark":o?.theme==="dark"}),children:[o?.title&&(0,a.jsx)(C.default,{data:{title:o?.title},className:"text-4xl"}),(0,a.jsx)("div",{className:"tablet:block hidden",children:(0,a.jsx)(x.default,{id:`Category${n}`,Slide:L,data:{list:m,configuration:{shape:o?.shape,event:s,title:o?.title,totalCategories:y}}})}),(0,a.jsx)("div",{className:"tablet:hidden block",children:(0,a.jsx)(x.default,{id:`Category1${n}`,Slide:E,data:{list:N,configuration:{shape:o?.shape,event:s,title:o?.title,totalCategories:y}}})}),(0,a.jsx)("div",{className:"h-7"})]})});var R=(0,k.withLayout)(z);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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 { withLayout } 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'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\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
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
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", "import_heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } 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'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\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 const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\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 aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\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 <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n const totalCategories = configuration?.totalCategories ?? 0\n // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCategories < 6\n const isFirstItem = index === 0\n\n return (\n <div\n ref={ref}\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 duration-300',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n isFirstItemLarger\n ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n : 'max-h-[126px] px-3 py-4',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n >\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'm-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n isFirstItemLarger\n ? cn(isFirstItem ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n : 'size-[72px]'\n )}\n />\n </a>\n <p\n className={cn(\n 'text-info-primary text-center text-sm font-bold',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n )}\n >\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"flex h-full flex-col gap-3\">\n {data?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n 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 const totalCategories = currentData.length\n const mobileSlides = chunkArray(currentData, 3)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\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={{\n list: currentData,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{\n list: mobileSlides,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withLayout(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", "import_heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "ref", "Picture", "SingleMobileItem", "index", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "React", "props", "className", "key", "event", "currentData", "totalCategories", "mobileSlides", "innerRef", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const o=n.forwardRef(({data:e,Slide:s,id:a,pagination:w},m)=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const o=n.forwardRef(({data:e,Slide:s,id:a,pagination:w},m)=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:2,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:2,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,r)=>i(p,{className:"!h-[unset]",children:i(s,{data:t,configuration:{...e?.configuration,index:r}})},a+"SwiperSlide"+r))}));o.displayName="SwiperBox";var y=o;export{y as default};
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView:
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
5
|
"mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,EAAGC,IAEjGZ,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACK,EAAMC,IACtBd,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMI,EAAM,cAAe,CAAE,GAAGL,GAAM,cAAe,MAAOM,CAAO,EAAG,GAD7DJ,EAAK,cAAgBI,CAEvC,CACD,EACH,CAEH,EAEDP,EAAU,YAAc,YAExB,IAAOQ,EAAQR",
|
|
6
6
|
"names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "ref", "item", "jIndex", "SwiperCategory_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as a,jsxs as
|
|
1
|
+
"use client";import{jsx as a,jsxs as d}from"react/jsx-runtime";import b,{useImperativeHandle as k,useRef as c}from"react";import{cn as n}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as C}from"../../shared/Styles.js";import w from"../Title/index.js";import f from"./SwiperCategory.js";import{useExposure as h}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{Heading as N}from"../../components/heading.js";const s="image",m="category_banner",I=(e,o)=>{const t=[];for(let r=0;r<e.length;r+=o)t.push(e.slice(r,r+o));return t},$=({data:e,configuration:o})=>{const t=c(null);return h(t,{componentType:s,componentName:m,componentTitle:e?.name,position:o?.index+1}),d("div",{ref:t,className:n("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",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("div",{className:"transition-all duration-300 group-hover:scale-110",children:a("a",{"aria-label":e?.name,href:y(e?.link,`${s}_${m}`),"data-headless-type-name":`${s}#${m}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>o?.event?.primaryButton(e,o?.index),children:a(x,{alt:e?.image?.alt||"",source:e?.image?.url||"",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"})})}),a(N,{as:"h3",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:o,index:t})=>{const r=c(null);h(r,{componentType:s,componentName:m,componentTitle:e?.name,position:o?.index+1});const i=(o?.totalCategories??0)<6,l=t===0;return d("div",{ref:r,className:n("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 duration-300",i?n("p-4",l?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("a",{href:y(e?.link,`${s}_${m}`),"data-headless-type-name":`${s}#${m}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${o?.index+1}`,onClick:()=>o?.event?.primaryButton(e,o?.index+1),children:a(x,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:n("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",i?n(l?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),a("p",{className:n("text-info-primary text-center text-sm font-bold",i?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},S=({data:e,configuration:o})=>a("div",{className:"flex h-full flex-col gap-3",children:e?.map((t,r)=>a(D,{index:r,data:t,configuration:o},r))}),T=b.forwardRef((e,o)=>{const{data:t,className:r="",key:p,event:i}=e,l=(t?.isShowSelect?t?.products:t?.productData)||[],u=l.length,v=I(l,3),g=c(null);return k(o,()=>g.current),d("div",{ref:g,className:n("w-full overflow-hidden",r,{"aiui-dark":t?.theme==="dark"}),children:[t?.title&&a(w,{data:{title:t?.title},className:"text-4xl"}),a("div",{className:"tablet:block hidden",children:a(f,{id:`Category${p}`,Slide:$,data:{list:l,configuration:{shape:t?.shape,event:i,title:t?.title,totalCategories:u}}})}),a("div",{className:"tablet:hidden block",children:a(f,{id:`Category1${p}`,Slide:S,data:{list:v,configuration:{shape:t?.shape,event:i,title:t?.title,totalCategories:u}}})}),a("div",{className:"h-7"})]})});var P=C(T);export{P as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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 { withLayout } 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'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\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
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "Heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } 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'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\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 const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\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 aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\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 <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n const totalCategories = configuration?.totalCategories ?? 0\n // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCategories < 6\n const isFirstItem = index === 0\n\n return (\n <div\n ref={ref}\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 duration-300',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n isFirstItemLarger\n ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n : 'max-h-[126px] px-3 py-4',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n >\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'm-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n isFirstItemLarger\n ? cn(isFirstItem ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n : 'size-[72px]'\n )}\n />\n </a>\n <p\n className={cn(\n 'text-info-primary text-center text-sm font-bold',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n )}\n >\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"flex h-full flex-col gap-3\">\n {data?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n 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 const totalCategories = currentData.length\n const mobileSlides = chunkArray(currentData, 3)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\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={{\n list: currentData,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{\n list: mobileSlides,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withLayout(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "Heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "ref", "SingleMobileItem", "index", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "props", "className", "key", "event", "currentData", "totalCategories", "mobileSlides", "innerRef", "Category_default"]
|
|
7
7
|
}
|