@anker-in/headless-ui 0.0.29-alpha.7 → 0.0.30-alpha.1
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/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -5
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +2 -2
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +2 -4
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +2 -2
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +2 -2
- package/package.json +1 -1
- package/style.css +6 -3
|
@@ -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] 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 size={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuEQ,IAAAI,EAAA,6BAvERC,EAAmD,oBACnDC,EAA8B,4BAE9BC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAA+B,oCAC/BC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAsB,oCACtBC,EAAyD,oCACzDC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAAwB,iCAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CAAE,KAAMC,EAAM,cAAAC,EAAe,OAAAC,CAAO,IAA4D,CACjH,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAK,EACxCC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DC,KAAM,UAAuB,IAAI,EAEjCC,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,KAEA,eAAYK,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,KAED,aAAU,IAAM,CACdG,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CAAE,MAAAG,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,EAAiB,eAAAC,CAAe,EAAId,EACpGe,EAAe,mFAErB,SACE,OAAC,OACC,aAAW,MACT,kFACAd,GAAe,MACXM,EAAa,EACb,4LACJ,CACE,cAAeN,GAAe,QAAU,UACxC,YAAaO,IAAU,OACvB,YAAaL,GAAY,CAACF,GAAe,MACzC,YAAaE,GAAYF,GAAe,KAC1C,EACA,mBACF,EACA,IAAKK,EAEL,oBAAC,OAAI,UAAU,mBACb,oBAAC,EAAAU,QAAA,CACC,OAAQL,GAAU,IAClB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KACA,OAAC,EAAAK,QAAA,CACC,OAAQF,GAAgB,KAAOH,GAAU,IACzC,UAAU,6CACV,aAAa,kDACf,KACA,QAAC,OAAI,UAAU,
|
|
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 size={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\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
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"]
|
|
7
7
|
}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
"use strict";"use client";var Q=Object.create;var
|
|
2
|
-
laptop:text-sm desktop:text-base text-xs
|
|
1
|
+
"use strict";"use client";var Q=Object.create;var y=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,i)=>{for(var n in i)y(e,n,{get:i[n],enumerable:!0})},N=(e,i,n,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of G(i))!K.call(e,s)&&s!==n&&y(e,s,{get:()=>i[s],enumerable:!(m=W(i,s))||m.enumerable});return e};var p=(e,i,n)=>(n=e!=null?Q(J(e)):{},N(i||!e||!e.__esModule?y(n,"default",{value:e,enumerable:!0}):n,e)),Y=e=>N(y({},"__esModule",{value:!0}),e);var re={};X(re,{default:()=>ie});module.exports=Y(re);var t=require("react/jsx-runtime"),a=p(require("react")),d=require("../../helpers/utils.js"),I=p(require("../../components/picture.js")),C=p(require("./tabSwitch.js")),w=p(require("../../components/button.js")),_=p(require("../Title/index.js")),M=p(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),z=p(require("../../components/badge.js")),A=require("../../components/heading.js"),L=require("../../components/text.js");const D="image",P="product_shelf",Z=999999999e-2,ee=({data:e,configuration:i})=>{const{locale:n="us",copyWriting:m}=(0,$.useAiuiContext)(),s=(r,o)=>i?.event?.primaryButton?.(r,o+1),h=(r,o)=>i?.event?.secondaryButton?.(r,o+1),l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===Z,{price:b,basePrice:x}=(0,H.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const r=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",i?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.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:g(),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?.((r,o)=>(0,t.jsx)(z.default,{children:r},o))}),(0,t.jsx)(A.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)(L.Text,{size:2,className:"shelf-display-product-description line-clamp-1 h-[20px]",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:u?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.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:x||""})]})}),(0,t.jsxs)("div",{className:(0,d.cn)("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(w.default,{variant:"primary",onClick:()=>s(e,i?.index),className:`
|
|
3
2
|
${i.direction==="vertical"?"w-full":""}
|
|
4
|
-
`,children:i?.primaryButton||""}),(0,t.jsx)(w.default,{variant:"secondary",onClick:()=>
|
|
5
|
-
laptop:text-sm desktop:text-base text-xs
|
|
3
|
+
`,children:i?.primaryButton||""}),(0,t.jsx)(w.default,{variant:"secondary",onClick:()=>h(e,i?.index),className:`
|
|
6
4
|
${i.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:i?.secondaryButton||""})]})]},e?.id||e?.handle)},te=a.default.forwardRef(({data:e,buildData:i,className:n="",key:m,event:s},
|
|
5
|
+
`,children:i?.secondaryButton||""})]})]},e?.id||e?.handle)},te=a.default.forwardRef(({data:e,buildData:i,className:n="",key:m,event:s},h)=>{const[l,u]=(0,a.useState)(""),[b,x]=(0,a.useState)([]),g=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,a.useRef)(null);(0,a.useImperativeHandle)(h,()=>r.current),(0,q.useExposure)(r,{componentType:D,componentName:P,componentTitle:e?.title,navigation:l});const{productsTab:o=[],productsCard:S=[],title:f,align:ne="left",isShowTab:T=!0,tabShape:O="square",...U}=e,k=c=>{const j=c?.map(v=>{const B=i?.products?.find(F=>F?.handle===v?.handle);if(B)return{sku:v.sku,...B}})?.filter(v=>v);x(j)};return(0,a.useEffect)(()=>{if(T){u(o?.[0]?.tab||""),k(o?.[0]?.data||[]);return}k(S)},[]),(0,t.jsxs)("div",{ref:r,className:(0,d.cn)("w-full",n,{"aiui-dark":e?.theme==="dark"}),children:[f&&(0,t.jsx)(_.default,{data:{title:f}}),T&&(0,t.jsx)("div",{className:`${g?"w-full overflow-hidden":""}`,children:(0,t.jsx)(C.default,{value:l,tabs:o,tabShape:O,onTabClick:c=>{u(c?.tab),k(c?.data||[]),(0,R.gaTrack)({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:c?.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)(M.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${m}${l}`,data:{list:b,configuration:{...U,event:s}},Slide:ee,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 ie=(0,E.withStyles)(te);
|
|
8
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, 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 { 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'\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 }\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\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 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <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 size={2} className=\"shelf-display-product-description line-clamp-1 h-[20px]\">\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=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,EAAAH,IAkHQ,IAAAI,EAAA,6BAjHRC,EAAwE,oBACxEC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,6BACtBC,EAAmB,yCACnBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAmC,6BACnCC,EAA8B,4BAC9BC,EAA4B,sCAC5BC,EAAwB,iCACxBC,EAA+B,oCAC/BC,EAAkB,wCAClBC,EAAwB,uCACxBC,EAAqB,oCAErB,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAiB,aAyDjBC,GAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAEhDC,EAAkB,CAACC,EAA0BC,IACjDL,GAAe,OAAO,gBAAgBI,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDL,GAAe,OAAO,kBAAkBI,EAAQC,EAAQ,CAAC,EAErDE,EAAUR,GAAM,UAAU,KAAMS,GAAcA,GAAM,MAAQT,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGU,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWV,EAErE,CAAE,MAAAa,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQV,EACR,OAAQM,GAAS,OAAO,QAAU,EAClC,WAAYR,GAAM,gBAAgB,QAAUA,GAAM,OAAO,QAAU,EACnE,aAAcA,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKa,EAAY,IAAM,CACtB,MAAMC,EAAMd,GAAM,IACZe,EAAWf,GAAM,SAEvB,OADgBe,GAAU,KAAMN,GAAcA,GAAM,MAAQK,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,SACE,QAAC,OAEC,aAAW,MACT,2JACAd,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,oBAAC,OAAI,aAAW,MAAG,2FAA2F,EAC5G,mBAAC,EAAAe,QAAA,CAAQ,OAAQH,EAAU,EAAG,UAAU,yDAAyD,EACnG,KACA,OAAC,OAAI,UAAU,2DACZ,SAAAb,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACS,EAAWH,OACnC,OAAC,EAAAW,QAAA,CAAmB,SAAAR,GAARH,CAAa,CACjC,EACH,KACA,OAAC,WACC,MAAON,GAAM,OAAS,GACtB,KAAM,EACN,UAAU,6EAET,SAAAA,GAAM,OAAS,GAClB,KACA,OAAC,QAAK,KAAM,EAAG,UAAU,0DACtB,SAAAA,GAAM,aAAe,GACxB,KACA,OAAC,OAAI,UAAU,mCACZ,SAAAU,KACC,OAAC,OAAI,UAAU,sDAAuD,SAAAP,GAAa,YAAY,KAE/F,oBACE,oBAAC,OAAI,UAAU,sDAAuD,SAAAQ,GAAS,GAAG,KAClF,OAAC,OAAI,UAAU,6DAA8D,SAAAC,GAAa,GAAG,GAC/F,EAEJ,KAEA,QAAC,OACC,aAAW,MACT,2CACAX,EAAc,YAAc,WAAa,WAAa,EACxD,EAEA,oBAAC,EAAAiB,QAAA,CACC,QAAQ,UACR,QAAS,IAAMd,EAAgBJ,EAAMC,GAAe,KAAK,EACzD,UAAW;AAAA
|
|
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 { 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'\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 }\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\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 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <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 size={2} className=\"shelf-display-product-description line-clamp-1 h-[20px]\">\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=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const 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 <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 )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "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", "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", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var p in t)n(e,p,{get:t[p],enumerable:!0})},f=(e,t,p,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!l.call(e,o)&&o!==p&&n(e,o,{get:()=>t[o],enumerable:!(a=s(t,o))||a.enumerable});return e};var u=e=>f(n({},"__esModule",{value:!0}),e);var k={};g(k,{default:()=>m});module.exports=u(k);var x=require("react/jsx-runtime"),V=require("react"),r=require("class-variance-authority"),i=require("../helpers/index.js");const b=(0,r.cva)("text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight"}},defaultVariants:{size:"lg"}});function c({className:e,size:t,...p}){return(0,x.jsx)("div",{className:(0,i.cn)(b({size:t}),e),...p})}var m=c;
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBS,IAAAI,EAAA,6BAvBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBS,IAAAI,EAAA,6BAvBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,gEACJ,GAAI,sKACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIA,SAASC,EAAM,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAe,CACxD,SAAO,OAAC,OAAI,aAAW,MAAGJ,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC5E,CAEA,IAAOV,EAAQO",
|
|
6
6
|
"names": ["badge_exports", "__export", "badge_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_helpers", "badgeVariants", "Badge", "className", "size", "props"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var g=Object.create;var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var P=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},x=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of S(o))!N.call(e,p)&&p!==t&&c(e,p,{get:()=>o[p],enumerable:!(a=k(o,p))||a.enumerable});return e};var v=(e,o,t)=>(t=e!=null?g(h(e)):{},x(o||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),T=e=>x(c({},"__esModule",{value:!0}),e);var M={};P(M,{Container:()=>l});module.exports=T(M);var n=require("react/jsx-runtime"),r=v(require("react")),m=require("../helpers/utils.js"),f=require("@radix-ui/react-slot");const w=({children:e})=>(0,n.jsx)(n.Fragment,{children:e}),B=r.default.forwardRef(({...e},o)=>{const{asChild:t,children:a,className:p,spaceY:s="none",spaceTop:i="none",spaceBottom:d="none",...C}=e,y=t?f.Slot:"div",R={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},b={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},u={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return(0,n.jsx)(y,{...C,ref:o,className:(0,m.cn)(p,"ipc_container","relative z-10 w-full"),children:(0,n.jsx)("div",{className:(0,m.cn)(p,"lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",R?.[s]||s,b?.[i]||i,u?.[d]||d),children:a})})}),l=r.default.forwardRef(({...e},o)=>{const{children:t,mode:a="section"}=e,s={section:B,fragment:w}[a];return(0,n.jsx)(s,{...e,ref:o,children:t})});l.displayName="Container";
|
|
2
2
|
//# sourceMappingURL=container.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/container.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'none',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n <div\n className={cn(\n className,\n '
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAiBS,IAAAI,EAAA,6BAjBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAcrB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAU,OAAO,MAExBO,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,CAAM,GAAGD,EAAgB,IAAKN,EAAc,aAAW,MAAGE,EAAW,gBAAiB,sBAAsB,EAC3G,mBAAC,OACC,aAAW,MACTA,EACA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'none',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n <div\n className={cn(\n className,\n 'lg-desktop:max-w-full mx-auto w-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n spaceY_map?.[spaceY] || spaceY,\n spaceTop_map?.[spaceTop] || spaceTop,\n spaceBottom_map?.[spaceBottom] || spaceBottom\n )}\n >\n {children}\n </div>\n </Comp>\n )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { children, mode = 'section' } = props\n\n const componentsMap: {\n [P in Mode]: React.ComponentType<any> | string\n } = {\n section: Section,\n fragment: Fragment,\n }\n\n const Component = componentsMap![mode!]\n\n return (\n <Component {...props} ref={forwardedRef}>\n {children}\n </Component>\n )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAiBS,IAAAI,EAAA,6BAjBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAcrB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAU,OAAO,MAExBO,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,CAAM,GAAGD,EAAgB,IAAKN,EAAc,aAAW,MAAGE,EAAW,gBAAiB,sBAAsB,EAC3G,mBAAC,OACC,aAAW,MACTA,EACA,uCACA,8EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAT,EACH,EACF,CAEJ,CAAC,EAEKP,EAAY,EAAAS,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAJ,EAAU,KAAAe,EAAO,SAAU,EAAIZ,EASjCa,EALF,CACF,QAASf,EACT,SAAUF,CACZ,EAEiCgB,CAAK,EAEtC,SACE,OAACC,EAAA,CAAW,GAAGb,EAAO,IAAKC,EACxB,SAAAJ,EACH,CAEJ,CAAC,EAEDP,EAAU,YAAc",
|
|
6
6
|
"names": ["container_exports", "__export", "Container", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_react_slot", "Fragment", "children", "Section", "React", "props", "forwardedRef", "asChild", "className", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "mode", "Component"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as z,jsx as o,jsxs as s}from"react/jsx-runtime";import L from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import k from"../../components/picture.js";import g from"../../components/button.js";import I from"../SwiperBox/index.js";import{withStyles as R}from"../../shared/Styles.js";import A,{useState as w,useEffect as D,useRef as a,useCallback as P,useImperativeHandle as j}from"react";import{useExposure as V}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{gaTrack as $}from"../../shared/track.js";const m="image",c="scene_banner",q=A.forwardRef(({data:r,className:d="",event:f},N)=>{const[p,E]=w(0),[B,_]=w({0:!0}),v=a([]),b=a({0:!0}),l=a(!1),u=a(null);j(N,()=>u.current),V(u,{componentType:m,componentName:c,componentTitle:r?.title});const M=(e,t)=>{t&&(v.current[e]=t)},h=e=>{b.current?.[e]&&(l.current=!1,_({[e]:!0}))};D(()=>{const e=v.current;return e?.forEach((t,i)=>{i?(t.style.flex="1 1 0%",t.style.transition="all 0.6s"):(t.style.flex="8 1 0%",t.style.transition="all 0.6s"),t.addEventListener("transitionend",()=>{h(i)})}),()=>{e?.forEach((t,i)=>{t.removeEventListener("transitionend",()=>h(i))})}},[]);const C=({data:e,configuration:t})=>s("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[o(k,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.img?.url}),s("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[s("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[o("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),o("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:T(e.link,`${m}_${c}`),onClick:()=>t?.event?.primaryButton(e,t),children:o(g,{variant:"secondary",className:n("text-info-primary text-sm font-bold"),children:t?.primaryButton})})]})]}),y=P(e=>{p===e||l.current||(l.current=!0,b.current={[e]:!0},E(e),$({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:m,component_name:c,component_title:r?.products[e]?.title,component_description:r?.products[e]?.subTitle,position:e+1}}))},[p,l]);return s(z,{children:[r?.title&&o(L,{data:{title:r?.title}}),o("div",{ref:u,className:n("laptop:block hidden",{"aiui-dark":r?.theme==="dark"}),children:o("div",{className:n("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:r?.products?.map((e,t)=>{const i=p===t,S=i?8:1,H=B?.[t]&&i;return s("div",{style:{flex:S},ref:x=>{x&&M(t,x)},className:n("relative cursor-pointer overflow-hidden",r?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>y(t),onMouseLeave:()=>{l.current=!1},onClick:()=>y(t),children:[o(k,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),s("div",{className:n("absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",H?"translate-x-0 opacity-100 transition-transform ease-out":"opacity-0"),children:[s("div",{className:"mr-16 flex-1 overflow-hidden",children:[o("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),o("h3",{className:"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:T(e?.link,`${m}_${c}`),onClick:()=>f?.primaryButton?.(r,t),children:o(g,{
|
|
1
|
+
"use client";import{Fragment as z,jsx as o,jsxs as s}from"react/jsx-runtime";import L from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import k from"../../components/picture.js";import g from"../../components/button.js";import I from"../SwiperBox/index.js";import{withStyles as R}from"../../shared/Styles.js";import A,{useState as w,useEffect as D,useRef as a,useCallback as P,useImperativeHandle as j}from"react";import{useExposure as V}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{gaTrack as $}from"../../shared/track.js";const m="image",c="scene_banner",q=A.forwardRef(({data:r,className:d="",event:f},N)=>{const[p,E]=w(0),[B,_]=w({0:!0}),v=a([]),b=a({0:!0}),l=a(!1),u=a(null);j(N,()=>u.current),V(u,{componentType:m,componentName:c,componentTitle:r?.title});const M=(e,t)=>{t&&(v.current[e]=t)},h=e=>{b.current?.[e]&&(l.current=!1,_({[e]:!0}))};D(()=>{const e=v.current;return e?.forEach((t,i)=>{i?(t.style.flex="1 1 0%",t.style.transition="all 0.6s"):(t.style.flex="8 1 0%",t.style.transition="all 0.6s"),t.addEventListener("transitionend",()=>{h(i)})}),()=>{e?.forEach((t,i)=>{t.removeEventListener("transitionend",()=>h(i))})}},[]);const C=({data:e,configuration:t})=>s("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[o(k,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.img?.url}),s("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[s("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[o("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),o("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:T(e.link,`${m}_${c}`),onClick:()=>t?.event?.primaryButton(e,t),children:o(g,{variant:"secondary",className:n("text-info-primary text-sm font-bold"),children:t?.primaryButton})})]})]}),y=P(e=>{p===e||l.current||(l.current=!0,b.current={[e]:!0},E(e),$({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:m,component_name:c,component_title:r?.products[e]?.title,component_description:r?.products[e]?.subTitle,position:e+1}}))},[p,l]);return s(z,{children:[r?.title&&o(L,{data:{title:r?.title}}),o("div",{ref:u,className:n("laptop:block hidden",{"aiui-dark":r?.theme==="dark"}),children:o("div",{className:n("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:r?.products?.map((e,t)=>{const i=p===t,S=i?8:1,H=B?.[t]&&i;return s("div",{style:{flex:S},ref:x=>{x&&M(t,x)},className:n("relative cursor-pointer overflow-hidden",r?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>y(t),onMouseLeave:()=>{l.current=!1},onClick:()=>y(t),children:[o(k,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),s("div",{className:n("absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",H?"translate-x-0 opacity-100 transition-transform ease-out":"opacity-0"),children:[s("div",{className:"mr-16 flex-1 overflow-hidden",children:[o("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),o("h3",{className:"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:T(e?.link,`${m}_${c}`),onClick:()=>f?.primaryButton?.(r,t),children:o(g,{className:n("desktop:text-base mb-1.5 text-sm font-bold"),children:r?.primaryButton})})]})]},t)})})}),o("div",{className:n("laptop:hidden block",{"aiui-dark":r?.theme==="dark"}),children:o(I,{className:n("h-[400px] !overflow-visible",d),id:"AccordionCards"+r?.key,data:{list:r?.products,configuration:{shape:r?.shape,itemShape:r?.itemShape,primaryButton:r?.primaryButton,event:f}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var Z=R(q);export{Z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n const isAnimation = useRef<boolean>(false)\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 const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n isAnimation.current = false\n setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style.flex = '8 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0 ref \u72B6\u6001\n enterRef.current = { [idx]: true }\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\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?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [hoverIndex, isAnimation]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n isShowContent ? 'translate-x-0 opacity-100 transition-transform ease-out' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold\">\n {item?.subTitle}\n </h3>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n const isAnimation = useRef<boolean>(false)\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 const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n isAnimation.current = false\n setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style.flex = '8 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0 ref \u72B6\u6001\n enterRef.current = { [idx]: true }\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\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?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [hoverIndex, isAnimation]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n isShowContent ? 'translate-x-0 opacity-100 transition-transform ease-out' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold\">\n {item?.subTitle}\n </h3>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button className={cn('desktop:text-base mb-1.5 text-sm font-bold')}>{data?.primaryButton}</Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\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 }}\n />\n </div>\n </>\n )\n})\nexport default withStyles(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useEffect", "useRef", "useCallback", "useImperativeHandle", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "innerRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "isExpanded", "flexValue", "isShowContent", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{forwardRef as
|
|
1
|
+
"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{forwardRef as h,useEffect as k,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withStyles as E}from"../../shared/Styles.js";import{useMediaQuery as S}from"react-responsive";import{useExposure as q}from"../../hooks/useExposure.js";import{Swiper as M,SwiperSlide as B}from"swiper/react";import{Pagination as D,FreeMode as I,Mousewheel as j}from"swiper/modules";const P="copy",T="store_benefits",A=(e,o)=>{const a=[];for(let r=0;r<e.length;r+=o)a.push(e.slice(r,r+o));return a},H=h(({data:{items:e=[],itemShape:o},className:a},r)=>{const[s,v]=w(!1),c=S({query:"(max-width: 768px)"}),m=f(null),n=f(null);N(r,()=>n.current),q(n,{componentType:P,componentName:T}),k(()=>{v(c)},[c]);const g=s?A(e,3):e;return t("div",{ref:n,className:i("brand-equity-wrapper w-full",a),children:s?d(M,{className:i(a),modules:[I,j,D],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:m.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,p)=>t(B,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((b,u)=>t(y,{data:b,itemShape:o,index:u},u))},"SwiperSlide"+p)),t("div",{ref:m,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,p)=>t(y,{data:l,itemShape:o,index:p},p))})})}),y=({data:e,itemShape:o,index:a})=>d("div",{className:i("brand-equity-item","flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(a)},o==="round"?"rounded-2xl":"rounded-none"),children:[d("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,s)=>t("div",{className:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar.url,alt:r.avatar?.alt,className:"size-full object-cover"})},s))}):t(x,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var J=E(H);export{J as default};
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], 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 BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'flex w-full flex-col bg-white p-4',\n 'desktop:p-6
|
|
5
|
-
"mappings": "aA8CU,OAqBU,OAAAA,EArBV,QAAAC,MAAA,oBA7CV,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,EAAU,uBAAAC,MAA2B,QAE7E,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAI3B,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,eAAAC,MAAmB,6BAE5B,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBAEjD,MAAMC,EAAgB,OAChBC,EAAgB,iBAEhBC,EAAa,CAACC,EAA6BC,IAAiB,CAChE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAI,OAAQG,GAAKF,EACnCC,EAAO,KAAKF,EAAI,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEpC,OAAOC,CACT,EAEME,EAActB,EAClB,CAAC,CAAE,KAAM,CAAE,MAAAuB,EAAQ,CAAC,EAAG,UAAAC,CAAU,EAAG,UAAAC,CAAU,EAAGC,IAAQ,CACvD,KAAM,CAACC,EAAUC,CAAW,EAAIzB,EAAS,EAAK,EACxC0B,EAAarB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC1DsB,EAAgB5B,EAAuB,IAAI,EAC3C6B,EAAW7B,EAAuB,IAAI,EAC5CE,EAAoBsB,EAAK,IAAMK,EAAS,OAAyB,EACjEtB,EAAYsB,EAAU,CACpB,cAAAhB,EACA,cAAAC,CACF,CAAC,EAEDf,EAAU,IAAM,CACd2B,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,MAAMG,EAAaL,EAAWV,EAAWM,EAAO,CAAC,EAAIA,EACrD,OACEzB,EAAC,OAAI,IAAKiC,EAAU,UAAW1B,EAAG,8BAA+BoB,CAAS,EACvE,SAAAE,EACC5B,EAACW,EAAA,CACC,UAAWL,EAAGoB,CAAS,EACvB,QAAS,CAACZ,EAAUC,EAAYF,CAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,GAAIkB,EAAc,OACpB,EACA,YAAa,CACX,EAAG,CACD,aAAc,EAChB,CACF,EAEC,UAAAE,GAAY,IAAI,CAACC,EAAMC,IACtBpC,EAACa,EAAA,CAAyC,UAAU,uBACjD,eAAM,QAAQsB,CAAI,GACjBA,GAAM,IAAI,CAACA,EAAME,IACfrC,EAACsC,EAAA,CAA4B,KAAMH,EAAM,UAAWT,EAAW,MAAOW,GAAhDA,CAAuD,CAC9E,GAJa,cAAgBD,CAKlC,CACD,EACDpC,EAAC,OAAI,IAAKgC,EAAe,UAAU,2BAA2B,GAChE,EAEAhC,EAAC,OAAI,UAAWO,EAAG,yBAA0B,qBAAsB,kCAAkC,EAClG,SAAAkB,EAAM,IAAI,CAACU,EAAME,IAChBrC,EAACsC,EAAA,CAA4B,KAAMH,EAAM,UAAWT,EAAW,MAAOW,GAAhDA,CAAuD,CAC9E,EACH,EAEJ,CAEJ,CACF,EAEMC,EAAkB,CAAC,CACvB,KAAAC,EACA,UAAAb,EACA,MAAAW,CACF,IAMIpC,EAAC,OACC,UAAWM,EACT,oBACA,oCACA,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], 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 BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'flex w-full flex-col bg-white p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withStyles", "useMediaQuery", "useExposure", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as l}from"react/jsx-runtime";import d,{useImperativeHandle as h,useRef as f}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as w}from"../../shared/Styles.js";import u from"../SwiperBox/index.js";import{Heading as x}from"../../components/index.js";import{Picture as g,Text as k}from"../../components/index.js";import{Container as b}from"../../components/container.js";import v from"../Title/index.js";import{useMediaQuery as y}from"react-responsive";import{useExposure as N}from"../../hooks/useExposure.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";const c="image",n="graphic",C=({data:e,configuration:s})=>{const i=y({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.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"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346] tablet:aspect-h-[360]";case 3: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]";default:return"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] tablet:aspect-w-[296] tablet:aspect-h-[360]"}})(),{"h-[360px]":i},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:a("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:l("a",{href:P(e?.link,`${c}_${n}`),className:"relative block size-full cursor-pointer",children:[t(g,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),l("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(k,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-bold leading-[1.2]"}),e?.description&&t(x,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},m=d.forwardRef(({data:e,className:s,...i},r)=>{const p=e?.items?.length>2,o=f(null);return h(r,()=>o.current),N(o,{componentType:c,componentName:n,componentTitle:e?.title}),t("div",{className:s,ref:o,children:t("div",{className:"graphic-box",children:l(b,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(v,{data:{title:e?.title}}),t(u,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:p?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:p?3:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:p?4:2}}})]})})})});m.displayName="Graphic";var L=w(m);export{L as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\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 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346] tablet:aspect-h-[360]'\n case 3:\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 default:\n return '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] tablet:aspect-w-[296] tablet:aspect-h-[360]'\n }\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n {\n 'h-[360px]': isMobile,\n },\n 'flex-1 shrink-0 md:basis-[296px]'\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-
|
|
5
|
-
"mappings": "aAqEU,cAAAA,EAKA,QAAAC,MALA,oBApEV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAW,oBAClB,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,EAAWR,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,OACEb,EAAC,OACC,UAAWK,GAfM,IAAM,CACzB,OAAQe,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,6LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,GAKmB,EACb,CACE,YAAaC,CACf,EACA,kCACF,EAEA,SAAArB,EAAC,OACC,UAAWK,EAAG,mBAAoB,CAC/B,gDAAkDe,GAAe,YAAc,OAClF,CAAC,EAED,SAAAnB,EAAC,KACC,KAAMc,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,0CAEV,UAAAjB,EAACS,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACxB,EACAlB,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACU,EAAA,CACC,MAAO,CACL,MAAOS,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\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 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346] tablet:aspect-h-[360]'\n case 3:\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 default:\n return '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] tablet:aspect-w-[296] tablet:aspect-h-[360]'\n }\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n {\n 'h-[360px]': isMobile,\n },\n 'flex-1 shrink-0 md:basis-[296px]'\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "isShow", "innerRef", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:P},z)=>{const{title:m,subtitle:u,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:g=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:u}),$(z,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:r=>{const p=r.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(r=>r.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:a(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",P),children:[e("div",{ref:o,className:a("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:a("hero-banner-title"),html:m}),u&&e(H,{as:"p",size:3,className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),n("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:N(i.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&e("a",{href:N(l.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),g.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:g.map((x,d)=>n(v.Fragment,{children:[e(H,{size:2,className:a("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1"),html:x.title}),d<g.length-1&&e("div",{className:a("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var K=M(w);export{K as default};
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:P},z)=>{const{title:m,subtitle:u,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:g=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:u}),$(z,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:r=>{const p=r.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(r=>r.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:a(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",P),children:[e("div",{ref:o,className:a("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:a("hero-banner-title"),html:m}),u&&e(H,{as:"p",size:3,className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),n("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:N(i.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&e("a",{href:N(l.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),g.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:g.map((x,d)=>n(v.Fragment,{children:[e(H,{size:2,className:a("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] lg-desktop:text-[14px] flex-1 text-[12px]"),html:x.title}),d<g.length-1&&e("div",{className:a("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var K=M(w);export{K as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|