@anker-in/headless-ui 1.1.9-temp.120202 → 1.1.9-temp.120204
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var I=Object.create;var u=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var o in t)u(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of $(t))!H.call(e,r)&&r!==o&&u(e,r,{get:()=>t[r],enumerable:!(n=N(t,r))||n.enumerable});return e};var h=(e,t,o)=>(o=e!=null?I(S(e)):{},v(t||!e||!e.__esModule?u(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>v(u({},"__esModule",{value:!0}),e);var R={};M(R,{default:()=>P});module.exports=D(R);var a=require("react/jsx-runtime"),m=h(require("react")),s=require("../../helpers/utils.js"),f=h(require("../../components/picture.js")),C=require("../../shared/Styles.js"),k=h(require("../Title/index.js")),g=h(require("./SwiperCategory.js")),x=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js"),w=require("../../components/heading.js");const c="image",p="category_banner",T=(e,t)=>{const o=[];for(let n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o},_=(e,t=6)=>{const o=Math.ceil(t/2),n=T(e,t),r=[];return n.forEach(i=>{const l=i.slice(0,o),d=i.slice(o);l.length&&r.push({items:l,totalCount:i.length}),d.length&&r.push({items:d,totalCount:i.length})}),r},j=({data:e,configuration:t})=>{const o=(0,m.useRef)(null);return(0,x.useExposure)(o,{componentType:c,componentName:p,componentTitle:e?.name,position:t?.index+1}),(0,a.jsxs)("div",{ref:o,className:(0,s.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,y.trackUrlRef)(e?.link,`${c}_${p}`),"data-headless-type-name":`${c}#${p}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,a.jsx)(f.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})]})},E=({data:e,configuration:t,index:o,totalCount:n})=>{const r=(0,m.useRef)(null);(0,x.useExposure)(r,{componentType:c,componentName:p,componentTitle:e?.name,position:t?.index+1});const i=n<6,l=o===0;return(0,a.jsxs)("div",{ref:r,className:(0,s.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",i?(0,s.cn)("p-4",l?"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,y.trackUrlRef)(e?.link,`${c}_${p}`),"data-headless-type-name":`${c}#${p}`,"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)(f.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,s.cn)("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",i?(0,s.cn)(l?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,a.jsx)("p",{className:(0,s.cn)("text-info-primary text-center text-sm font-bold",i?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},L=({data:e,configuration:t})=>(0,a.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.items?.map((o,n)=>(0,a.jsx)(E,{index:n,data:o,configuration:t,totalCount:e?.totalCount},n))}),z=m.default.forwardRef((e,t)=>{const{data:o,className:n="",key:r,event:i}=e,l=o?.isShowSelect?o?.products:o?.productData,d=_(l||[],6),b=(0,m.useRef)(null);return(0,m.useImperativeHandle)(t,()=>b.current),(0,a.jsxs)("div",{ref:b,className:(0,s.cn)("w-full overflow-hidden",n,{"aiui-dark":o?.theme==="dark"}),children:[o?.title&&(0,a.jsx)(k.default,{data:{title:o?.title},className:"text-4xl"}),(0,a.jsx)("div",{className:"tablet:block hidden",children:(0,a.jsx)(g.default,{id:`Category${r}`,Slide:j,data:{list:l,configuration:{shape:o?.shape,event:i,title:o?.title}}})}),(0,a.jsx)("div",{className:"tablet:hidden block",children:(0,a.jsx)(g.default,{id:`Category1${r}`,Slide:L,data:{list:d,configuration:{shape:o?.shape,event:i,title:o?.title}}})}),(0,a.jsx)("div",{className:"h-7"})]})});var P=(0,C.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 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 totalCount,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n totalCount: 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 // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCount < 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:
|
|
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 buildHalfPageSlides = (data: CategoryItem[], pageSize = 6) => {\n const halfSize = Math.ceil(pageSize / 2)\n const pages = chunkArray(data, pageSize)\n const slides: { items: CategoryItem[]; totalCount: number }[] = []\n\n pages.forEach(page => {\n const firstHalf = page.slice(0, halfSize)\n const secondHalf = page.slice(halfSize)\n if (firstHalf.length) {\n slides.push({ items: firstHalf, totalCount: page.length })\n }\n if (secondHalf.length) {\n slides.push({ items: secondHalf, totalCount: page.length })\n }\n })\n\n return slides\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\ntype CategoryMobileSlide = {\n items: CategoryItem[]\n totalCount: number\n}\n\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n totalCount,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n totalCount: 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 // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCount < 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: CategoryMobileSlide; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.items?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n configuration={configuration}\n totalCount={data?.totalCount}\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 mobileSlides = buildHalfPageSlides(currentData || [], 6)\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={{ list: currentData, configuration: { shape: data?.shape, event: event, title: data?.title } }}\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 },\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", "buildHalfPageSlides", "data", "pageSize", "halfSize", "pages", "slides", "page", "firstHalf", "secondHalf", "CategoryPcItem", "configuration", "ref", "Picture", "SingleMobileItem", "index", "totalCount", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "React", "props", "className", "key", "event", "currentData", "mobileSlides", "innerRef", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as a,jsxs as
|
|
1
|
+
"use client";import{jsx as a,jsxs as u}from"react/jsx-runtime";import b,{useImperativeHandle as v,useRef as d}from"react";import{cn as s}from"../../helpers/utils.js";import f from"../../components/picture.js";import{withLayout as C}from"../../shared/Styles.js";import k from"../Title/index.js";import g from"./SwiperCategory.js";import{useExposure as x}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{Heading as w}from"../../components/heading.js";const m="image",c="category_banner",I=(e,o)=>{const t=[];for(let n=0;n<e.length;n+=o)t.push(e.slice(n,n+o));return t},N=(e,o=6)=>{const t=Math.ceil(o/2),n=I(e,o),i=[];return n.forEach(r=>{const l=r.slice(0,t),p=r.slice(t);l.length&&i.push({items:l,totalCount:r.length}),p.length&&i.push({items:p,totalCount:r.length})}),i},$=({data:e,configuration:o})=>{const t=d(null);return x(t,{componentType:m,componentName:c,componentTitle:e?.name,position:o?.index+1}),u("div",{ref:t,className:s("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,`${m}_${c}`),"data-headless-type-name":`${m}#${c}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>o?.event?.primaryButton(e,o?.index),children:a(f,{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(w,{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})]})},S=({data:e,configuration:o,index:t,totalCount:n})=>{const i=d(null);x(i,{componentType:m,componentName:c,componentTitle:e?.name,position:o?.index+1});const r=n<6,l=t===0;return u("div",{ref:i,className:s("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",r?s("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,`${m}_${c}`),"data-headless-type-name":`${m}#${c}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${o?.index+1}`,onClick:()=>o?.event?.primaryButton(e,o?.index+1),children:a(f,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:s("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r?s(l?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),a("p",{className:s("text-info-primary text-center text-sm font-bold",r?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},H=({data:e,configuration:o})=>a("div",{className:"grid grid-cols-2 gap-3",children:e?.items?.map((t,n)=>a(S,{index:n,data:t,configuration:o,totalCount:e?.totalCount},n))}),M=b.forwardRef((e,o)=>{const{data:t,className:n="",key:i,event:r}=e,l=t?.isShowSelect?t?.products:t?.productData,p=N(l||[],6),h=d(null);return v(o,()=>h.current),u("div",{ref:h,className:s("w-full overflow-hidden",n,{"aiui-dark":t?.theme==="dark"}),children:[t?.title&&a(k,{data:{title:t?.title},className:"text-4xl"}),a("div",{className:"tablet:block hidden",children:a(g,{id:`Category${i}`,Slide:$,data:{list:l,configuration:{shape:t?.shape,event:r,title:t?.title}}})}),a("div",{className:"tablet:hidden block",children:a(g,{id:`Category1${i}`,Slide:H,data:{list:p,configuration:{shape:t?.shape,event:r,title:t?.title}}})}),a("div",{className:"h-7"})]})});var B=C(M);export{B as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/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 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 totalCount,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n totalCount: 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 // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCount < 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:
|
|
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 buildHalfPageSlides = (data: CategoryItem[], pageSize = 6) => {\n const halfSize = Math.ceil(pageSize / 2)\n const pages = chunkArray(data, pageSize)\n const slides: { items: CategoryItem[]; totalCount: number }[] = []\n\n pages.forEach(page => {\n const firstHalf = page.slice(0, halfSize)\n const secondHalf = page.slice(halfSize)\n if (firstHalf.length) {\n slides.push({ items: firstHalf, totalCount: page.length })\n }\n if (secondHalf.length) {\n slides.push({ items: secondHalf, totalCount: page.length })\n }\n })\n\n return slides\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\ntype CategoryMobileSlide = {\n items: CategoryItem[]\n totalCount: number\n}\n\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n totalCount,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n totalCount: 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 // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCount < 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: CategoryMobileSlide; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.items?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n configuration={configuration}\n totalCount={data?.totalCount}\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 mobileSlides = buildHalfPageSlides(currentData || [], 6)\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={{ list: currentData, configuration: { shape: data?.shape, event: event, title: data?.title } }}\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 },\n }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withLayout(Category)\n"],
|
|
5
|
+
"mappings": "aAmFI,OAiBM,OAAAA,EAjBN,QAAAC,MAAA,oBAlFJ,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,sBACtB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,OAAS,WAAAC,MAAe,8BAExB,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,EAAsB,CAACC,EAAsBC,EAAW,IAAM,CAClE,MAAMC,EAAW,KAAK,KAAKD,EAAW,CAAC,EACjCE,EAAQT,EAAWM,EAAMC,CAAQ,EACjCG,EAA0D,CAAC,EAEjE,OAAAD,EAAM,QAAQE,GAAQ,CACpB,MAAMC,EAAYD,EAAK,MAAM,EAAGH,CAAQ,EAClCK,EAAaF,EAAK,MAAMH,CAAQ,EAClCI,EAAU,QACZF,EAAO,KAAK,CAAE,MAAOE,EAAW,WAAYD,EAAK,MAAO,CAAC,EAEvDE,EAAW,QACbH,EAAO,KAAK,CAAE,MAAOG,EAAY,WAAYF,EAAK,MAAO,CAAC,CAE9D,CAAC,EAEMD,CACT,EAEMI,EAAiB,CAAC,CAAE,KAAAR,EAAM,cAAAS,CAAc,IAAmD,CAC/F,MAAMC,EAAM3B,EAAuB,IAAI,EAEvC,OAAAM,EAAYqB,EAAK,CACf,cAAAlB,EACA,cAAAC,EACA,eAAgBO,GAAM,KACtB,SAAUS,GAAe,MAAQ,CACnC,CAAC,EAGC7B,EAAC,OACC,IAAK8B,EACL,UAAW1B,EACT,2EACA,mDACA,oIACAyB,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,UAAA9B,EAAC,OAAI,UAAU,oDACb,SAAAA,EAAC,KACC,aAAYqB,GAAM,KAClB,KAAMV,EAAYU,GAAM,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EACjE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGO,GAAM,IAAI,GAC9C,QAAS,IAAMS,GAAe,OAAO,cAAcT,EAAMS,GAAe,KAAK,EAE7E,SAAA9B,EAACM,EAAA,CACC,IAAKe,GAAM,OAAO,KAAO,GACzB,OAAQA,GAAM,OAAO,KAAO,GAC5B,UAAU,gLACZ,EACF,EACF,EACArB,EAACY,EAAA,CACC,GAAG,KACH,UAAU,4GAET,SAAAS,GAAM,KACT,GACF,CAEJ,EAQMW,EAAmB,CAAC,CACxB,KAAAX,EACA,cAAAS,EACA,MAAAG,EACA,WAAAC,CACF,IAKM,CACJ,MAAMH,EAAM3B,EAAuB,IAAI,EAEvCM,EAAYqB,EAAK,CACf,cAAAlB,EACA,cAAAC,EACA,eAAgBO,GAAM,KACtB,SAAUS,GAAe,MAAQ,CACnC,CAAC,EAGD,MAAMK,EAAoBD,EAAa,EACjCE,EAAcH,IAAU,EAE9B,OACEhC,EAAC,OACC,IAAK8B,EACL,UAAW1B,EACT,gHACA,kDAEA8B,EACI9B,EAAG,MAAO+B,EAAc,4BAA8B,gBAAgB,EACtE,0BACJN,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,UAAA9B,EAAC,KACC,KAAMW,EAAYU,GAAM,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EACjE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGO,GAAM,IAAI,GAC9C,4BAA2B,MAAMS,GAAe,MAAQ,CAAC,GACzD,QAAS,IAAMA,GAAe,OAAO,cAAcT,EAAMS,GAAe,MAAQ,CAAC,EAEjF,SAAA9B,EAACM,EAAA,CACC,OAAQe,GAAM,OAAO,KAAO,GAC5B,IAAKA,GAAM,OAAO,KAAO,GACzB,UAAWhB,EACT,kGAEA8B,EACI9B,EAAG+B,EAAc,gCAAkC,2BAA2B,EAC9E,aACN,EACF,EACF,EACApC,EAAC,KACC,UAAWK,EACT,kDAEA8B,EAAoB,eAAiB,mBACvC,EAEC,SAAAd,GAAM,KACT,GACF,CAEJ,EAGMgB,EAAqB,CAAC,CAAE,KAAAhB,EAAM,cAAAS,CAAc,IAE9C9B,EAAC,OAAI,UAAU,yBACZ,SAAAqB,GAAM,OAAO,IAAI,CAACiB,EAAML,IACvBjC,EAACgC,EAAA,CAEC,MAAOC,EACP,KAAMK,EACN,cAAeR,EACf,WAAYT,GAAM,YAJbY,CAKP,CACD,EACH,EAIEM,EAAWrC,EAAM,WAA0C,CAACsC,EAAOT,IAAQ,CAC/E,KAAM,CAAE,KAAAV,EAAM,UAAAoB,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAIH,EAEvCI,EAAcvB,GAAM,aAAeA,GAAM,SAAWA,GAAM,YAC1DwB,EAAezB,EAAoBwB,GAAe,CAAC,EAAG,CAAC,EAEvDE,EAAW1C,EAAuB,IAAI,EAC5C,OAAAD,EAAoB4B,EAAK,IAAMe,EAAS,OAAyB,EAG/D7C,EAAC,OAAI,IAAK6C,EAAU,UAAWzC,EAAG,yBAA0BoC,EAAW,CAAE,YAAapB,GAAM,QAAU,MAAO,CAAC,EAC3G,UAAAA,GAAM,OAASrB,EAACQ,EAAA,CAAM,KAAM,CAAE,MAAOa,GAAM,KAAM,EAAG,UAAU,WAAW,EAC1ErB,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACS,EAAA,CACC,GAAI,WAAWiC,CAAG,GAClB,MAAOb,EACP,KAAM,CAAE,KAAMe,EAAa,cAAe,CAAE,MAAOvB,GAAM,MAAO,MAAOsB,EAAO,MAAOtB,GAAM,KAAM,CAAE,EACrG,EACF,EACArB,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACS,EAAA,CACC,GAAI,YAAYiC,CAAG,GACnB,MAAOL,EACP,KAAM,CACJ,KAAMQ,EACN,cAAe,CAAE,MAAOxB,GAAM,MAAO,MAAOsB,EAAO,MAAOtB,GAAM,KAAM,CACxE,EACF,EACF,EACArB,EAAC,OAAI,UAAU,MAAM,GACvB,CAEJ,CAAC,EAED,IAAO+C,EAAQxC,EAAWgC,CAAQ",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "Heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "buildHalfPageSlides", "data", "pageSize", "halfSize", "pages", "slides", "page", "firstHalf", "secondHalf", "CategoryPcItem", "configuration", "ref", "SingleMobileItem", "index", "totalCount", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "props", "className", "key", "event", "currentData", "mobileSlides", "innerRef", "Category_default"]
|
|
7
7
|
}
|