@anker-in/headless-ui 1.3.19 → 1.3.20
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/BuyOneGetOneShelf/PriceAndActions.d.ts +1 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +1 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.d.ts +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.d.ts +2 -5
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.d.ts +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +2 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.d.ts +22 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js +2 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map +7 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts +18 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map +1 -1
- package/dist/cjs/shared/Styles.d.ts +2 -0
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.d.ts +1 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +1 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.d.ts +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.d.ts +2 -5
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.d.ts +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +2 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.d.ts +22 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js +2 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map +7 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/types.d.ts +18 -0
- package/dist/esm/shared/Styles.d.ts +2 -0
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +3 -3
- package/package.json +1 -1
- package/style.css +21 -0
|
@@ -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 { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\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 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n 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 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = 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 cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\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 )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\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 handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\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\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(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={spaceToHyphen(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 title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\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.2,\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={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\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.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\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.2,\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 {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
-
"mappings": "
|
|
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_VideoModal", "import_grid", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\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 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n 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 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = 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 cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\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 )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\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 handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\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 // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n if (data.mode === 'carousel' && items.length > 0) {\n return (\n <MultiLayoutGraphicBlockCarouselImpl\n data={data}\n onPrimaryButtonClick={onPrimaryButtonClick}\n onSecondaryButtonClick={onSecondaryButtonClick}\n className={className}\n ref={ref as React.Ref<HTMLElement>}\n {...rest}\n />\n )\n }\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(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={spaceToHyphen(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 title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\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.2,\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={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\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.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\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.2,\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 {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_MultiLayoutGraphicBlockCarousel", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_grid", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlockCarouselImpl", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MultiLayoutGraphicBlockProps } from './types.js';
|
|
3
|
+
import 'swiper/css';
|
|
4
|
+
import 'swiper/css/navigation';
|
|
5
|
+
import 'swiper/css/pagination';
|
|
6
|
+
interface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {
|
|
7
|
+
data: MultiLayoutGraphicBlockProps['data'];
|
|
8
|
+
onSecondaryButtonClick?: () => void;
|
|
9
|
+
onPrimaryButtonClick?: () => void;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* MultiLayoutGraphicBlockCarousel — full-width banner carousel for MultiLayoutGraphicBlock.
|
|
13
|
+
*
|
|
14
|
+
* Architecture:
|
|
15
|
+
* - slidesPerView=1, loop=true, each Item occupies full-width slide
|
|
16
|
+
* - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)
|
|
17
|
+
* - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2
|
|
18
|
+
* - Video pause/play on slide change
|
|
19
|
+
* - No withLayout wrapper (carousel is inner implementation)
|
|
20
|
+
*/
|
|
21
|
+
declare const MultiLayoutGraphicBlockCarousel: React.ForwardRefExoticComponent<MultiLayoutGraphicBlockCarouselProps & React.RefAttributes<HTMLElement>>;
|
|
22
|
+
export default MultiLayoutGraphicBlockCarousel;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";"use client";var F=Object.create;var x=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(o,i)=>{for(var r in i)x(o,r,{get:i[r],enumerable:!0})},z=(o,i,r,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of K(i))!X.call(o,u)&&u!==r&&x(o,u,{get:()=>i[u],enumerable:!(m=J(i,u))||m.enumerable});return o};var T=(o,i,r)=>(r=o!=null?F(Q(o)):{},z(i||!o||!o.__esModule?x(r,"default",{value:o,enumerable:!0}):r,o)),Z=o=>z(x({},"__esModule",{value:!0}),o);var ae={};Y(ae,{default:()=>oe});module.exports=Z(ae);var t=require("react/jsx-runtime"),a=T(require("react")),N=require("swiper/react"),c=require("swiper/modules"),s=require("../../helpers/index.js"),_=T(require("../Title/index.js")),p=require("../../components/index.js"),j=require("../../components/text.js"),L=require("../../shared/mimeType.js"),I=require("../AiuiProvider/index.js"),re=require("swiper/css"),ne=require("swiper/css/navigation"),se=require("swiper/css/pagination");const ee=()=>(0,t.jsxs)("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,t.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),te=()=>(0,t.jsxs)("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,t.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),E={sm:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]",base:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]",lg:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]"},P=a.default.forwardRef(({data:o,className:i,onSecondaryButtonClick:r,onPrimaryButtonClick:m,...u},U)=>{const h=o.items||[],v=o.carouselConfig,A=(v?.showArrows??!0)&&h.length>1,S=v?.showDots??!0,d=v?.autoplaySeconds,R=v?.size??"base",f=(0,a.useRef)(null),[H,D]=(0,a.useState)(0),[g,G]=(0,a.useState)(null),b=(0,a.useRef)(h.map(()=>a.default.createRef()));(0,a.useEffect)(()=>{const e=f.current;!e||!g||e.pagination&&(e.pagination.el=g,e.pagination.init(),e.pagination.render(),e.pagination.update())},[g]);const B=(h[H]?.theme??"light")==="dark";(0,a.useEffect)(()=>{const e=()=>{const l=f.current;if(l)if(document.visibilityState==="hidden")l.autoplay?.stop();else{l.autoplay?.start();const y=l.realIndex??0;b.current.forEach((n,k)=>{n.current&&n.current.querySelectorAll("video").forEach(w=>{k!==y&&w.pause()})})}};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]);const q=d!=null&&d>0?[c.Navigation,c.Pagination,c.Autoplay]:[c.Navigation,c.Pagination],O=d!=null&&d>0?{delay:Math.max(d*1e3,3e3),disableOnInteraction:!1}:!1,V=(0,a.useCallback)(e=>{const l=e.realIndex;b.current.forEach((n,k)=>{k!==l&&n.current&&n.current.querySelectorAll("video").forEach(w=>{w.pause(),w.currentTime=0})});const y=b.current[l];y?.current&&y.current.querySelectorAll("video").forEach(n=>{n.paused&&n.play()?.catch(()=>{})}),D(l)},[]),{locale:C}=(0,I.useAiuiContext)(),W=E[R]??E.base,{sectionTitle:M,shape:$}=o;return(0,t.jsxs)("section",{ref:U,className:(0,s.cn)("multilayout-graphic-block-carousel group relative w-full","laptop:overflow-hidden","laptop:block flex flex-col",W,{"aiui-dark":B},i),...u,children:[M&&(0,t.jsx)(_.default,{data:{title:M},className:"section-title"}),(0,t.jsxs)("div",{className:"laptop:h-full laptop:pb-0 relative shrink-0 pb-5",children:[(0,t.jsx)(N.Swiper,{className:"laptop:h-full h-[400px]",onSwiper:e=>f.current=e,onSlideChange:V,modules:q,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:O,pagination:S?{clickable:!0,el:g,renderBullet:(e,l)=>`<span class="${l} banner-dot"></span>`}:!1,children:h.map((e,l)=>(0,t.jsx)(N.SwiperSlide,{className:"h-full",children:(0,t.jsxs)("div",{ref:b.current[l],className:(0,s.cn)("item-wrapper text-info-primary relative size-full overflow-hidden",{"aiui-dark":e.theme==="dark","rounded-2xl":$==="rounded"}),children:[(e.blockLink||e.secondaryButton?.link)&&(0,t.jsx)("a",{className:"absolute inset-0 z-10",href:(0,s.getLocalizedPath)(e.blockLink||e.secondaryButton?.link||"",C||"us"),"aria-hidden":"true",tabIndex:-1}),(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,L.isVideo)(e.imageUrl?.mimeType)?(0,t.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:(0,t.jsx)("source",{src:e.imageUrl?.url,type:"video/mp4"})}):(0,t.jsx)(p.Picture,{source:e.imageUrl?.url,alt:e.imageUrl?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full object-cover"}),(0,L.isVideo)(e.imageMobileUrl?.mimeType)?(0,t.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:(0,t.jsx)("source",{src:e.imageMobileUrl?.url,type:"video/mp4"})}):(0,t.jsx)(p.Picture,{source:e.imageMobileUrl?.url||e.imageUrl?.url,alt:e.imageMobileUrl?.alt||e.imageUrl?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full object-cover"})]}),(0,t.jsx)("div",{className:"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end",children:(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,t.jsx)(p.Heading,{size:3,as:"h3",className:"item-title",html:e.title}),(0,t.jsx)(j.Text,{className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e.description})]}),(0,t.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[e.secondaryButton?.text&&(0,t.jsxs)(p.Button,{"aria-label":e.title??e.description,className:"link-left",variant:"secondary",as:"a",href:(0,s.getLocalizedPath)(e.secondaryButton.link||"",C||"us"),onClick:r,children:[e.secondaryButton.text,(0,t.jsx)("span",{className:"sr-only",children:e.title??e.description})]}),e.primaryButton?.text&&(0,t.jsxs)(p.Button,{"aria-label":e.title??e.description,className:"link-right",variant:"primary",as:"a",href:(0,s.getLocalizedPath)(e.primaryButton.link||"",C||"us"),onClick:m,children:[e.primaryButton.text,(0,t.jsx)("span",{className:"sr-only",children:e.title??e.description})]})]})]})})]})},l))}),A&&(0,t.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,t.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>f.current?.slidePrev(),"aria-label":"Previous slide",children:(0,t.jsx)(ee,{})}),(0,t.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>f.current?.slideNext(),"aria-label":"Next slide",children:(0,t.jsx)(te,{})})]}),S&&(0,t.jsx)("div",{ref:G,className:(0,s.cn)("multilayout-carousel-pagination swiper-pagination","[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary","[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8","[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2","[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out","[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100","absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2","laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0",{"aiui-dark":B})})]})]})});P.displayName="MultiLayoutGraphicBlockCarousel";var oe=P;
|
|
2
|
+
//# sourceMappingURL=MultiLayoutGraphicBlockCarousel.js.map
|
package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport Title from '../Title/index.js'\nimport { Button, Heading, Picture } from '../../components/index.js'\nimport { Text } from '../../components/text.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { MultiLayoutGraphicBlockProps } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 Size \u2192 aspect-ratio mapping (aligned with grid full-width) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u53C2\u8003 MultiLayoutGraphicBlock.tsx handleAspect() \u4E2D spanType='full' \u7684\u6BD4\u4F8B\n// mobile: h-400px \u56FA\u5B9A\u9AD8\u5EA6\uFF0Ctablet+: aspect-ratio \u5BF9\u9F50 grid full-width\n\nconst sizeClasses: Record<string, string> = {\n sm: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n base: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n lg: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n}\n\n// \u2500\u2500 Props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {\n data: MultiLayoutGraphicBlockProps['data']\n onSecondaryButtonClick?: () => void\n onPrimaryButtonClick?: () => void\n}\n\n/**\n * MultiLayoutGraphicBlockCarousel \u2014 full-width banner carousel for MultiLayoutGraphicBlock.\n *\n * Architecture:\n * - slidesPerView=1, loop=true, each Item occupies full-width slide\n * - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)\n * - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2\n * - Video pause/play on slide change\n * - No withLayout wrapper (carousel is inner implementation)\n */\nconst MultiLayoutGraphicBlockCarousel = React.forwardRef<HTMLElement, MultiLayoutGraphicBlockCarouselProps>(\n ({ data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest }, ref) => {\n const items = data.items || []\n const carousel = data.carouselConfig\n\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n const showDots = carousel?.showDots ?? true\n const autoplaySeconds = carousel?.autoplaySeconds\n const size = carousel?.size ?? 'base'\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [activeIndex, setActiveIndex] = useState(0)\n const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n // Slide container refs for imperative video pause via querySelectorAll\n const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n items.map(() => React.createRef<HTMLDivElement>())\n )\n\n // paginationEl \u6302\u8F7D\u540E\u91CD\u65B0\u7ED1\u5B9A Swiper pagination\n // \u89E3\u51B3 next/dynamic + ssr:false \u73AF\u5883\u4E0B Swiper \u521D\u59CB\u5316\u65F6 paginationEl \u5C1A\u4E3A null \u7684\u65F6\u5E8F\u95EE\u9898\n useEffect(() => {\n const swiper = swiperRef.current\n if (!swiper || !paginationEl) return\n if (swiper.pagination) {\n swiper.pagination.el = paginationEl\n swiper.pagination.init()\n swiper.pagination.render()\n swiper.pagination.update()\n }\n }, [paginationEl])\n\n const activeTheme = items[activeIndex]?.theme ?? 'light'\n const isDark = activeTheme === 'dark'\n\n useEffect(() => {\n const handleVisibilityChange = () => {\n const swiper = swiperRef.current\n if (!swiper) return\n\n if (document.visibilityState === 'hidden') {\n swiper.autoplay?.stop()\n } else {\n swiper.autoplay?.start()\n const currentIndex = swiper.realIndex ?? 0\n slideContainerRefs.current.forEach((cRef, i) => {\n if (!cRef.current) return\n cRef.current.querySelectorAll('video').forEach(v => {\n if (i !== currentIndex) v.pause()\n })\n })\n }\n }\n document.addEventListener('visibilitychange', handleVisibilityChange)\n return () => document.removeEventListener('visibilitychange', handleVisibilityChange)\n }, [])\n\n const swiperModules =\n autoplaySeconds != null && autoplaySeconds > 0 ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds != null && autoplaySeconds > 0\n ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n : false\n\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n slideContainerRefs.current.forEach((cRef, i) => {\n if (i !== newIndex && cRef.current) {\n cRef.current.querySelectorAll('video').forEach(v => {\n v.pause()\n v.currentTime = 0\n })\n }\n })\n const activeContainer = slideContainerRefs.current[newIndex]\n if (activeContainer?.current) {\n activeContainer.current.querySelectorAll('video').forEach(v => {\n if (v.paused) {\n const p = v.play()\n p?.catch(() => {})\n }\n })\n }\n setActiveIndex(newIndex)\n }, [])\n\n const { locale } = useAiuiContext()\n const currentSizeClasses = sizeClasses[size] ?? sizeClasses.base\n const { sectionTitle, shape } = data\n\n return (\n <section\n ref={ref}\n className={cn(\n 'multilayout-graphic-block-carousel group relative w-full',\n 'laptop:overflow-hidden',\n 'laptop:block flex flex-col',\n currentSizeClasses,\n { 'aiui-dark': isDark },\n className\n )}\n {...rest}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n <div className=\"laptop:h-full laptop:pb-0 relative shrink-0 pb-5\">\n <Swiper\n className=\"laptop:h-full h-[400px]\"\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: paginationEl,\n renderBullet: (_index: number, className: string) =>\n `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((item, index) => (\n <SwiperSlide key={index} className=\"h-full\">\n <div\n ref={slideContainerRefs.current[index]}\n className={cn('item-wrapper text-info-primary relative size-full overflow-hidden', {\n 'aiui-dark': item.theme === 'dark',\n 'rounded-2xl': shape === 'rounded',\n })}\n >\n {/* Block link overlay */}\n {(item.blockLink || item.secondaryButton?.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={getLocalizedPath(item.blockLink || item.secondaryButton?.link || '', locale || 'us')}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n\n {/* Background media */}\n <div className=\"absolute inset-0\">\n {isVideo(item.imageUrl?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"tablet:block hidden size-full overflow-hidden object-cover\"\n >\n <source src={item.imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={item.imageUrl?.url}\n alt={item.imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full object-cover\"\n />\n )}\n {isVideo(item.imageMobileUrl?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"tablet:hidden block size-full overflow-hidden object-cover\"\n >\n <source src={item.imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={item.imageMobileUrl?.url || item.imageUrl?.url}\n alt={item.imageMobileUrl?.alt || item.imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full object-cover\"\n />\n )}\n </div>\n\n {/* Text content */}\n <div className=\"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end\">\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={item.title} />\n <Text\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={item.description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {item.secondaryButton?.text && (\n <Button\n aria-label={item.title ?? item.description}\n className=\"link-left\"\n variant=\"secondary\"\n as=\"a\"\n href={getLocalizedPath(item.secondaryButton.link || '', locale || 'us')}\n onClick={onSecondaryButtonClick}\n >\n {item.secondaryButton.text}\n <span className=\"sr-only\">{item.title ?? item.description}</span>\n </Button>\n )}\n {item.primaryButton?.text && (\n <Button\n aria-label={item.title ?? item.description}\n className=\"link-right\"\n variant=\"primary\"\n as=\"a\"\n href={getLocalizedPath(item.primaryButton.link || '', locale || 'us')}\n onClick={onPrimaryButtonClick}\n >\n {item.primaryButton.text}\n <span className=\"sr-only\">{item.title ?? item.description}</span>\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots */}\n {showDots && (\n <div\n ref={setPaginationEl}\n className={cn(\n 'multilayout-carousel-pagination swiper-pagination',\n '[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary',\n '[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8',\n '[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2',\n '[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out',\n '[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100',\n 'absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2',\n 'laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0',\n { 'aiui-dark': isDark }\n )}\n />\n )}\n </div>\n </section>\n )\n }\n)\n\nMultiLayoutGraphicBlockCarousel.displayName = 'MultiLayoutGraphicBlockCarousel'\n\nexport default MultiLayoutGraphicBlockCarousel\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MultiLayoutGraphicBlockCarousel_exports", "__export", "MultiLayoutGraphicBlockCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_helpers", "import_Title", "import_components", "import_text", "import_mimeType", "import_AiuiProvider", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "React", "data", "className", "onSecondaryButtonClick", "onPrimaryButtonClick", "rest", "ref", "items", "carousel", "showArrowControls", "showDots", "autoplaySeconds", "size", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "slideContainerRefs", "swiper", "isDark", "handleVisibilityChange", "currentIndex", "cRef", "i", "v", "swiperModules", "autoplayConfig", "handleSlideChange", "newIndex", "activeContainer", "locale", "currentSizeClasses", "sectionTitle", "shape", "Title", "s", "_index", "item", "index"]
|
|
7
|
+
}
|
|
@@ -23,13 +23,31 @@ export type Item = {
|
|
|
23
23
|
isYouTube?: boolean;
|
|
24
24
|
id?: string;
|
|
25
25
|
};
|
|
26
|
+
export interface MultiLayoutCarouselConfig {
|
|
27
|
+
/** 是否显示 prev/next arrow 导航，items ≥ 2 时有效。默认 true */
|
|
28
|
+
showArrows?: boolean;
|
|
29
|
+
/** 是否显示 dots 分页指示器。默认 true */
|
|
30
|
+
showDots?: boolean;
|
|
31
|
+
/** 循环播放（Swiper loop）。默认 true */
|
|
32
|
+
loop?: boolean;
|
|
33
|
+
/** 自动轮播间隔秒数。未设置或 ≤ 0 时不自动轮播 */
|
|
34
|
+
autoplaySeconds?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Slide 宽高比尺寸，控制 carousel wrapper 高度。
|
|
37
|
+
* sm — 短横幅；base — 标准高度（默认）；lg — 大尺寸
|
|
38
|
+
* @default 'base'
|
|
39
|
+
*/
|
|
40
|
+
size?: 'sm' | 'base' | 'lg';
|
|
41
|
+
}
|
|
26
42
|
export type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {
|
|
27
43
|
onSecondaryButtonClick?: () => void;
|
|
28
44
|
onPrimaryButtonClick?: () => void;
|
|
29
45
|
data: {
|
|
30
46
|
shape?: Shape;
|
|
31
47
|
sectionTitle?: string;
|
|
48
|
+
mode?: 'grid' | 'carousel';
|
|
32
49
|
groupByTab?: boolean;
|
|
50
|
+
carouselConfig?: MultiLayoutCarouselConfig;
|
|
33
51
|
items: ({
|
|
34
52
|
width?: 'full' | 'half' | 'one-third';
|
|
35
53
|
} & Item)[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var u=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of s(t))!l.call(e,o)&&o!==n&&r(e,o,{get:()=>t[o],enumerable:!(i=a(t,o))||i.enumerable});return e};var g=e=>u(r({},"__esModule",{value:!0}),e);var p={};module.exports=g(p);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/types.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n theme?: Theme\n title: string\n description: string\n imageUrl: Media\n imageMobileUrl?: Media\n tabName?: string\n width?: 'full' | 'half' | 'one-third'\n blockLink?: string\n primaryButton: {\n text: string\n link: string\n }\n secondaryButton: {\n text: string\n link: string\n }\n video?: {\n url: string\n }\n youtubeId?: string\n isYouTube?: boolean\n id?: string\n}\n\nexport type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {\n onSecondaryButtonClick?: () => void\n onPrimaryButtonClick?: () => void\n data: {\n shape?: Shape\n sectionTitle?: string\n groupByTab?: boolean\n items: ({\n width?: 'full' | 'half' | 'one-third'\n } & Item)[]\n carousel?: {\n items: Item[]\n }\n }\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n theme?: Theme\n title: string\n description: string\n imageUrl: Media\n imageMobileUrl?: Media\n tabName?: string\n width?: 'full' | 'half' | 'one-third'\n blockLink?: string\n primaryButton: {\n text: string\n link: string\n }\n secondaryButton: {\n text: string\n link: string\n }\n video?: {\n url: string\n }\n youtubeId?: string\n isYouTube?: boolean\n id?: string\n}\n\nexport interface MultiLayoutCarouselConfig {\n /** \u662F\u5426\u663E\u793A prev/next arrow \u5BFC\u822A\uFF0Citems \u2265 2 \u65F6\u6709\u6548\u3002\u9ED8\u8BA4 true */\n showArrows?: boolean\n /** \u662F\u5426\u663E\u793A dots \u5206\u9875\u6307\u793A\u5668\u3002\u9ED8\u8BA4 true */\n showDots?: boolean\n /** \u5FAA\u73AF\u64AD\u653E\uFF08Swiper loop\uFF09\u3002\u9ED8\u8BA4 true */\n loop?: boolean\n /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u79D2\u6570\u3002\u672A\u8BBE\u7F6E\u6216 \u2264 0 \u65F6\u4E0D\u81EA\u52A8\u8F6E\u64AD */\n autoplaySeconds?: number\n /**\n * Slide \u5BBD\u9AD8\u6BD4\u5C3A\u5BF8\uFF0C\u63A7\u5236 carousel wrapper \u9AD8\u5EA6\u3002\n * sm \u2014 \u77ED\u6A2A\u5E45\uFF1Bbase \u2014 \u6807\u51C6\u9AD8\u5EA6\uFF08\u9ED8\u8BA4\uFF09\uFF1Blg \u2014 \u5927\u5C3A\u5BF8\n * @default 'base'\n */\n size?: 'sm' | 'base' | 'lg'\n}\n\nexport type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {\n onSecondaryButtonClick?: () => void\n onPrimaryButtonClick?: () => void\n data: {\n shape?: Shape\n sectionTitle?: string\n mode?: 'grid' | 'carousel'\n groupByTab?: boolean\n carouselConfig?: MultiLayoutCarouselConfig\n items: ({\n width?: 'full' | 'half' | 'one-third'\n } & Item)[]\n carousel?: {\n items: Item[]\n }\n }\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -10,6 +10,7 @@ export interface StylesProps {
|
|
|
10
10
|
uid?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
containerClassName?: string;
|
|
13
|
+
idx?: string;
|
|
13
14
|
}
|
|
14
15
|
type LayoutProps<P> = Omit<P, keyof StylesProps | keyof ContainerProps> & StylesProps & ContainerProps;
|
|
15
16
|
type StaticComponentProperties<T> = Omit<T, keyof React.ComponentType<any> | 'displayName' | 'prototype'>;
|
|
@@ -18,6 +19,7 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
|
|
|
18
19
|
readonly className: `block-${string} `;
|
|
19
20
|
readonly StyleComponent: import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
readonly uid: string;
|
|
22
|
+
readonly idx: string | undefined;
|
|
21
23
|
};
|
|
22
24
|
export declare function withLayout<T extends React.ComponentType<any>>(WrappedComponent: T, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>> & StaticComponentProperties<T>;
|
|
23
25
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var h=Object.create;var m=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var n in e)m(t,n,{get:e[n],enumerable:!0})},C=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of $(e))!L.call(t,o)&&o!==n&&m(t,o,{get:()=>e[o],enumerable:!(r=x(e,o))||r.enumerable});return t};var d=(t,e,n)=>(n=t!=null?h(j(t)):{},C(e||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),_=t=>C(m({},"__esModule",{value:!0}),t);var U={};E(U,{getStylesProps:()=>T,useStyles:()=>N,withLayout:()=>D});module.exports=_(U);var s=require("react/jsx-runtime"),i=d(require("react")),S=require("./simpleHash.js"),g=d(require("./getKeyPropsString.js")),y=require("../components/grid.js"),b=require("../components/container.js"),w=d(require("./ErrorBoundary.js"));const B={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},O={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},R=t=>{const e=(0,g.default)(t);return`style_${(0,S.simpleHash)(e)}`},T=t=>{const{style:e,uid:n,disabled:r,containerClassName:o,idx:a}=t;return{style:e,uid:n,disabled:r,containerClassName:o,idx:a}},G=({style:t,uid:e=R({}),disabled:n=!1})=>!t||n?null:(0,s.jsx)("style",{suppressHydrationWarning:!0,"data-style-id":e,dangerouslySetInnerHTML:{__html:`.block-${e} { ${t} }`}}),N=(t,e)=>{const n=(0,i.useMemo)(()=>t?.uid||R({...t,...e??{}}),[e,t]),r=(0,i.useMemo)(()=>(0,s.jsx)(G,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:r,uid:n,idx:t?.idx}},A=t=>{const{desktopSpan:e,mobileSpan:n}=t||{},r=n?B[n]:"",o=e?O[e]:"";return`${r} ${o}`.trim()},F=t=>t?typeof t=="string"?t:typeof t=="object"&&Object.entries(t).length<=0?"":Object.entries(t).map(([e,n])=>`${e.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${n}`).join("; ")+";":"",K=(t,e)=>[t,e].map(F).filter(n=>!!n).map(n=>n.trim().endsWith(";")?n:`${n};`).join(" ");function v(t,e){const n=i.default.forwardRef((r,o)=>{const{container:a,containerClassName:c,className:l,...p}=r;if(!a||Reflect.ownKeys(a).length===0)return(0,s.jsx)(t,{...p,className:l,ref:o});const u=[e,c,l].filter(Boolean).join(" ").trim();return(0,s.jsx)(b.Container,{className:u,children:(0,s.jsx)(y.Grid,{className:"container_grid",children:(0,s.jsx)(y.GridItem,{className:A(a),children:(0,s.jsx)(t,{...p,ref:o})})})})});return n.displayName=`WithContainerLayout(${t.displayName||t.name||"Component"})`,n}function H(t,e){const n=i.default.forwardRef((r,o)=>{const a=T(r),c=K(e?.style,a.style),l={...e,...a,...c&&{style:c}},{className:p,StyleComponent:u,idx:P}=N(l,r.data),{style:Z,uid:q,disabled:z,idx:J,className:I,...k}=r;return(0,s.jsxs)(s.Fragment,{children:[u,(0,s.jsx)(t,{...k,...P?{id:P}:{},className:[p,I].filter(Boolean).join(" ").trim(),ref:o})]})});return n.displayName=`WithStyleInjection(${t.displayName||t.name||"Component"})`,n}function M(t){const e=i.default.forwardRef((n,r)=>(0,s.jsx)(w.default,{children:(0,s.jsx)(t,{...n,ref:r})}));return e.displayName=`WithErrorBoundary(${t.displayName||t.name||"Component"})`,e}const f=new WeakMap;function D(t,e){if(f.has(t))return t;const n=M(H(v(t,e?.containerClassName),e));n.displayName=`WithLayout(${t.displayName||t.name||"Component"})`,f.set(t,!0);const r=n;return Object.getOwnPropertyNames(t).forEach(o=>{!(o in r)&&o!=="arguments"&&o!=="caller"&&o!=="length"&&o!=="name"&&(r[o]=t[o])}),r}
|
|
2
2
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/shared/Styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n desktopSpan: number\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n style?: string | React.CSSProperties\n uid?: string\n disabled?: boolean\n containerClassName?: string\n}\n\ntype LayoutProps<P> = Omit<P, keyof StylesProps | keyof ContainerProps> & StylesProps & ContainerProps\n\ntype StaticComponentProperties<T> = Omit<T, keyof React.ComponentType<any> | 'displayName' | 'prototype'>\n\nconst generateUID = (props: Record<string, unknown>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\nexport const getStylesProps = <T extends StylesProps>(props: T): StylesProps => {\n const { style, uid, disabled, containerClassName } = props\n return { style, uid, disabled, containerClassName }\n}\n\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return (\n <style\n suppressHydrationWarning\n data-style-id={uid}\n dangerouslySetInnerHTML={{ __html: `.block-${uid} { ${style} }` }}\n />\n )\n}\n\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, unknown>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, ...(data ?? {}) }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getGridItemClassName = (container?: ContainerProps['container']) => {\n const { desktopSpan, mobileSpan } = container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\nconst styleToString = (style?: string | React.CSSProperties): string => {\n if (!style) return ''\n if (typeof style === 'string') return style\n if (typeof style === 'object' && Object.entries(style).length <= 0) return ''\n return (\n Object.entries(style)\n .map(([key, value]) => {\n const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()\n return `${cssKey}: ${value}`\n })\n .join('; ') + ';'\n )\n}\n\nconst mergeStyles = (a?: string | React.CSSProperties, b?: string | React.CSSProperties): string =>\n [a, b]\n .map(styleToString)\n .filter((s): s is string => Boolean(s))\n .map(s => (s.trim().endsWith(';') ? s : `${s};`))\n .join(' ')\n\ntype InternalProps = StylesProps &\n ContainerProps & { className?: string; data?: Record<string, unknown> } & Record<string, unknown>\n\nfunction withContainerLayout(\n WrappedComponent: React.ComponentType<InternalProps>,\n defaultContainerClassName?: string\n): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => {\n // eslint-disable-next-line no-unused-vars\n const { container, containerClassName, className, ...componentProps } = props\n\n if (!container || Reflect.ownKeys(container).length === 0) {\n return <WrappedComponent {...componentProps} className={className as string | undefined} ref={ref} />\n }\n\n const mergedContainerClassName = [defaultContainerClassName, containerClassName, className]\n .filter(Boolean)\n .join(' ')\n .trim()\n\n return (\n <Container className={mergedContainerClassName}>\n <Grid className=\"container_grid\">\n <GridItem className={getGridItemClassName(container as ContainerProps['container'])}>\n <WrappedComponent {...componentProps} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n })\n\n Wrapped.displayName = `WithContainerLayout(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n return Wrapped as React.ComponentType<InternalProps>\n}\n\nfunction withStyleInjection(\n WrappedComponent: React.ComponentType<InternalProps>,\n defaultStyleProps?: Partial<StylesProps>\n): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => {\n const propsStyleProps = getStylesProps(props)\n const mergedStyle = mergeStyles(defaultStyleProps?.style, propsStyleProps.style)\n\n const finalStyleProps: StylesProps = {\n ...defaultStyleProps,\n ...propsStyleProps,\n ...(mergedStyle && { style: mergedStyle }),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,cAAAC,EAAA,eAAAC,IAAA,eAAAC,EAAAL,
|
|
6
|
-
"names": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withLayout", "__toCommonJS", "import_jsx_runtime", "import_react", "import_simpleHash", "import_getKeyPropsString", "import_grid", "import_container", "import_ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getKeyPropsString", "style", "uid", "disabled", "containerClassName", "Styles", "styleProps", "data", "StyleComponent", "getGridItemClassName", "container", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "styleToString", "key", "value", "mergeStyles", "a", "b", "s", "withContainerLayout", "WrappedComponent", "defaultContainerClassName", "Wrapped", "React", "ref", "className", "componentProps", "mergedContainerClassName", "withStyleInjection", "defaultStyleProps", "propsStyleProps", "mergedStyle", "finalStyleProps", "_s", "_u", "_d", "ownClassName", "rest", "withErrorBoundary", "ErrorBoundary", "wrappedComponents", "defaultLayoutProps", "composed", "result"]
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n desktopSpan: number\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n style?: string | React.CSSProperties\n uid?: string\n disabled?: boolean\n containerClassName?: string\n idx?: string\n}\n\ntype LayoutProps<P> = Omit<P, keyof StylesProps | keyof ContainerProps> & StylesProps & ContainerProps\n\ntype StaticComponentProperties<T> = Omit<T, keyof React.ComponentType<any> | 'displayName' | 'prototype'>\n\nconst generateUID = (props: Record<string, unknown>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\nexport const getStylesProps = <T extends StylesProps>(props: T): StylesProps => {\n const { style, uid, disabled, containerClassName, idx } = props\n return { style, uid, disabled, containerClassName, idx }\n}\n\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return (\n <style\n suppressHydrationWarning\n data-style-id={uid}\n dangerouslySetInnerHTML={{ __html: `.block-${uid} { ${style} }` }}\n />\n )\n}\n\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, unknown>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, ...(data ?? {}) }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n idx: styleProps?.idx,\n } as const\n}\n\nconst getGridItemClassName = (container?: ContainerProps['container']) => {\n const { desktopSpan, mobileSpan } = container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\nconst styleToString = (style?: string | React.CSSProperties): string => {\n if (!style) return ''\n if (typeof style === 'string') return style\n if (typeof style === 'object' && Object.entries(style).length <= 0) return ''\n return (\n Object.entries(style)\n .map(([key, value]) => {\n const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()\n return `${cssKey}: ${value}`\n })\n .join('; ') + ';'\n )\n}\n\nconst mergeStyles = (a?: string | React.CSSProperties, b?: string | React.CSSProperties): string =>\n [a, b]\n .map(styleToString)\n .filter((s): s is string => Boolean(s))\n .map(s => (s.trim().endsWith(';') ? s : `${s};`))\n .join(' ')\n\ntype InternalProps = StylesProps &\n ContainerProps & { className?: string; data?: Record<string, unknown> } & Record<string, unknown>\n\nfunction withContainerLayout(\n WrappedComponent: React.ComponentType<InternalProps>,\n defaultContainerClassName?: string\n): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => {\n // eslint-disable-next-line no-unused-vars\n const { container, containerClassName, className, ...componentProps } = props\n\n if (!container || Reflect.ownKeys(container).length === 0) {\n return <WrappedComponent {...componentProps} className={className as string | undefined} ref={ref} />\n }\n\n const mergedContainerClassName = [defaultContainerClassName, containerClassName, className]\n .filter(Boolean)\n .join(' ')\n .trim()\n\n return (\n <Container className={mergedContainerClassName}>\n <Grid className=\"container_grid\">\n <GridItem className={getGridItemClassName(container as ContainerProps['container'])}>\n <WrappedComponent {...componentProps} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n })\n\n Wrapped.displayName = `WithContainerLayout(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n return Wrapped as React.ComponentType<InternalProps>\n}\n\nfunction withStyleInjection(\n WrappedComponent: React.ComponentType<InternalProps>,\n defaultStyleProps?: Partial<StylesProps>\n): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => {\n const propsStyleProps = getStylesProps(props)\n const mergedStyle = mergeStyles(defaultStyleProps?.style, propsStyleProps.style)\n\n const finalStyleProps: StylesProps = {\n ...defaultStyleProps,\n ...propsStyleProps,\n ...(mergedStyle && { style: mergedStyle }),\n }\n\n const { className, StyleComponent, idx } = useStyles(\n finalStyleProps,\n props.data as Record<string, unknown> | undefined\n )\n\n // eslint-disable-next-line no-unused-vars\n const { style: _s, uid: _u, disabled: _d, idx: _idx, className: ownClassName, ...rest } = props\n\n return (\n <>\n {StyleComponent}\n <WrappedComponent\n {...rest}\n {...(idx ? { id: idx } : {})}\n className={[className, ownClassName].filter(Boolean).join(' ').trim()}\n ref={ref}\n />\n </>\n )\n })\n\n Wrapped.displayName = `WithStyleInjection(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n return Wrapped as React.ComponentType<InternalProps>\n}\n\nfunction withErrorBoundary(WrappedComponent: React.ComponentType<InternalProps>): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => (\n <ErrorBoundary>\n <WrappedComponent {...props} ref={ref} />\n </ErrorBoundary>\n ))\n\n Wrapped.displayName = `WithErrorBoundary(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n return Wrapped as React.ComponentType<InternalProps>\n}\n\nconst wrappedComponents = new WeakMap<React.ComponentType<never>, true>()\n\nexport function withLayout<T extends React.ComponentType<any>>(\n WrappedComponent: T,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n): React.ForwardRefExoticComponent<LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>> &\n StaticComponentProperties<T> {\n if (wrappedComponents.has(WrappedComponent as React.ComponentType<never>)) {\n return WrappedComponent as unknown as React.ForwardRefExoticComponent<\n LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>\n > &\n StaticComponentProperties<T>\n }\n\n const composed = withErrorBoundary(\n withStyleInjection(\n withContainerLayout(\n WrappedComponent as unknown as React.ComponentType<InternalProps>,\n defaultLayoutProps?.containerClassName\n ),\n defaultLayoutProps\n )\n )\n\n composed.displayName = `WithLayout(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n\n wrappedComponents.set(WrappedComponent as React.ComponentType<never>, true)\n\n const result = composed as unknown as React.ForwardRefExoticComponent<\n LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>\n > &\n StaticComponentProperties<T>\n\n Object.getOwnPropertyNames(WrappedComponent).forEach(key => {\n if (!(key in result) && key !== 'arguments' && key !== 'caller' && key !== 'length' && key !== 'name') {\n ;(result as any)[key] = (WrappedComponent as any)[key]\n }\n })\n\n return result\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withLayout", "__toCommonJS", "import_jsx_runtime", "import_react", "import_simpleHash", "import_getKeyPropsString", "import_grid", "import_container", "import_ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getKeyPropsString", "style", "uid", "disabled", "containerClassName", "idx", "Styles", "styleProps", "data", "StyleComponent", "getGridItemClassName", "container", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "styleToString", "key", "value", "mergeStyles", "a", "b", "s", "withContainerLayout", "WrappedComponent", "defaultContainerClassName", "Wrapped", "React", "ref", "className", "componentProps", "mergedContainerClassName", "withStyleInjection", "defaultStyleProps", "propsStyleProps", "mergedStyle", "finalStyleProps", "_s", "_u", "_d", "_idx", "ownClassName", "rest", "withErrorBoundary", "ErrorBoundary", "wrappedComponents", "defaultLayoutProps", "composed", "result"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as A,jsx as e,jsxs as a}from"react/jsx-runtime";import*as k from"react";import{cn as t}from"../../helpers/index.js";import m from"../../components/button.js";import{Text as g}from"../../components/text.js";import{Heading as u}from"../../components/index.js";const f=k.forwardRef(({currentPrice:x,originalPrice:i,priceLabel:r,learnMoreText:n="Learn More",shopNowText:o="Shop Now",
|
|
1
|
+
"use client";import{Fragment as A,jsx as e,jsxs as a}from"react/jsx-runtime";import*as k from"react";import{cn as t}from"../../helpers/index.js";import m from"../../components/button.js";import{Text as g}from"../../components/text.js";import{Heading as u}from"../../components/index.js";const f=k.forwardRef(({currentPrice:x,originalPrice:i,priceLabel:r,learnMoreText:n="Learn More",shopNowText:o="Shop Now",soldOutText:h="Sold out",onLearnMore:y,onShopNow:P,availableForSale:s,learnMoreLoading:N,shopNowLoading:v,className:b,trackingTitle:l,trackingDescription:d,trackingSku:c,classNames:p},O)=>a("div",{ref:O,className:t("flex w-full flex-col justify-center gap-2",b),children:[e("div",{className:"flex w-full items-center gap-2",children:s?a(A,{children:[e(u,{size:2,className:t("text-info-primary"),children:x}),i&&e(u,{size:2,className:t("text-info-tertiary line-through",p?.productCardOriginalPrice),children:i})]}):e(g,{size:4,className:t("text-info-primary text-2xl leading-[1.2] tracking-[-0.48px]","tablet:text-xl tablet:tracking-[-0.4px]"),children:h})}),r&&e(g,{size:4,className:t("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",p?.productCardPriceLabel),children:r}),a("div",{className:t("flex w-full items-center gap-3","tablet:gap-2"),children:[e(m,{variant:"secondary",size:"lg",onClick:y,loading:N,"data-headless-type-name":"BuyOneGetOneShelf#ProductCard","data-headless-title-desc-button":`${l||""}#${d||""}#${n}`,"data-headless-sku":c,children:n}),e(m,{variant:"primary",size:"lg",onClick:P,disabled:!s,loading:v,"data-headless-type-name":"BuyOneGetOneShelf#ProductCard","data-headless-title-desc-button":`${l||""}#${d||""}#${o}`,"data-headless-sku":c,children:o})]})]}));f.displayName="PriceAndActions";var B=f;export{B as default};
|
|
2
2
|
//# sourceMappingURL=PriceAndActions.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BuyOneGetOneShelf/PriceAndActions.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Button from '../../components/button.js'\nimport { Text } from '../../components/text.js'\nimport { Heading } from '../../components/index.js'\nimport type { BuyOneGetOneShelfProductCardSemanticName } from './types.js'\n\nexport interface PriceAndActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n currentPrice: string\n originalPrice?: string\n priceLabel?: string\n learnMoreText?: string\n shopNowText?: string\n onLearnMore?: () => void\n onShopNow?: () => void\n availableForSale: boolean\n learnMoreLoading?: boolean\n shopNowLoading?: boolean\n trackingTitle?: string\n trackingDescription?: string\n trackingSku?: string\n classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n}\n\nconst PriceAndActions = React.forwardRef<HTMLDivElement, PriceAndActionsProps>(\n (\n {\n currentPrice,\n originalPrice,\n priceLabel,\n learnMoreText = 'Learn More',\n shopNowText = 'Shop Now',\n onLearnMore,\n onShopNow,\n availableForSale,\n learnMoreLoading,\n shopNowLoading,\n className,\n trackingTitle,\n trackingDescription,\n trackingSku,\n classNames,\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('flex w-full flex-col justify-center gap-2', className)}>\n <div className=\"flex w-full items-center gap-2\">\n {availableForSale ? (\n <>\n <Heading size={2} className={cn('text-info-primary')}>\n {currentPrice}\n </Heading>\n {originalPrice && (\n <Heading\n size={2}\n className={cn('text-info-tertiary line-through', classNames?.productCardOriginalPrice)}\n >\n {originalPrice}\n </Heading>\n )}\n </>\n ) : (\n <Text\n size={4}\n className={cn(\n 'text-info-primary text-2xl leading-[1.2] tracking-[-0.48px]',\n 'tablet:text-xl tablet:tracking-[-0.4px]'\n )}\n >\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "cn", "Button", "Text", "Heading", "PriceAndActions", "currentPrice", "originalPrice", "priceLabel", "learnMoreText", "shopNowText", "onLearnMore", "onShopNow", "availableForSale", "learnMoreLoading", "shopNowLoading", "className", "trackingTitle", "trackingDescription", "trackingSku", "classNames", "ref", "PriceAndActions_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Button from '../../components/button.js'\nimport { Text } from '../../components/text.js'\nimport { Heading } from '../../components/index.js'\nimport type { BuyOneGetOneShelfProductCardSemanticName } from './types.js'\n\nexport interface PriceAndActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n currentPrice: string\n originalPrice?: string\n priceLabel?: string\n learnMoreText?: string\n shopNowText?: string\n soldOutText?: string\n onLearnMore?: () => void\n onShopNow?: () => void\n availableForSale: boolean\n learnMoreLoading?: boolean\n shopNowLoading?: boolean\n trackingTitle?: string\n trackingDescription?: string\n trackingSku?: string\n classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n}\n\nconst PriceAndActions = React.forwardRef<HTMLDivElement, PriceAndActionsProps>(\n (\n {\n currentPrice,\n originalPrice,\n priceLabel,\n learnMoreText = 'Learn More',\n shopNowText = 'Shop Now',\n soldOutText = 'Sold out',\n onLearnMore,\n onShopNow,\n availableForSale,\n learnMoreLoading,\n shopNowLoading,\n className,\n trackingTitle,\n trackingDescription,\n trackingSku,\n classNames,\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('flex w-full flex-col justify-center gap-2', className)}>\n <div className=\"flex w-full items-center gap-2\">\n {availableForSale ? (\n <>\n <Heading size={2} className={cn('text-info-primary')}>\n {currentPrice}\n </Heading>\n {originalPrice && (\n <Heading\n size={2}\n className={cn('text-info-tertiary line-through', classNames?.productCardOriginalPrice)}\n >\n {originalPrice}\n </Heading>\n )}\n </>\n ) : (\n <Text\n size={4}\n className={cn(\n 'text-info-primary text-2xl leading-[1.2] tracking-[-0.48px]',\n 'tablet:text-xl tablet:tracking-[-0.4px]'\n )}\n >\n {soldOutText}\n </Text>\n )}\n </div>\n\n {priceLabel && (\n <Text\n size={4}\n className={cn(\n 'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n classNames?.productCardPriceLabel\n )}\n >\n {priceLabel}\n </Text>\n )}\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex w-full items-center gap-3', 'tablet:gap-2')}>\n <Button\n variant=\"secondary\"\n size=\"lg\"\n onClick={onLearnMore}\n loading={learnMoreLoading}\n data-headless-type-name=\"BuyOneGetOneShelf#ProductCard\"\n data-headless-title-desc-button={`${trackingTitle || ''}#${trackingDescription || ''}#${learnMoreText}`}\n data-headless-sku={trackingSku}\n >\n {learnMoreText}\n </Button>\n <Button\n variant=\"primary\"\n size=\"lg\"\n onClick={onShopNow}\n disabled={!availableForSale}\n loading={shopNowLoading}\n data-headless-type-name=\"BuyOneGetOneShelf#ProductCard\"\n data-headless-title-desc-button={`${trackingTitle || ''}#${trackingDescription || ''}#${shopNowText}`}\n data-headless-sku={trackingSku}\n >\n {shopNowText}\n </Button>\n </div>\n </div>\n )\n }\n)\n\nPriceAndActions.displayName = 'PriceAndActions'\n\nexport default PriceAndActions\n"],
|
|
5
|
+
"mappings": "aAqDY,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAnDZ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAY,6BACnB,OAAS,QAAAC,MAAY,2BACrB,OAAS,WAAAC,MAAe,4BAqBxB,MAAMC,EAAkBL,EAAM,WAC5B,CACE,CACE,aAAAM,EACA,cAAAC,EACA,WAAAC,EACA,cAAAC,EAAgB,aAChB,YAAAC,EAAc,WACd,YAAAC,EAAc,WACd,YAAAC,EACA,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,cAAAC,EACA,oBAAAC,EACA,YAAAC,EACA,WAAAC,CACF,EACAC,IAGEvB,EAAC,OAAI,IAAKuB,EAAK,UAAWrB,EAAG,4CAA6CgB,CAAS,EACjF,UAAAnB,EAAC,OAAI,UAAU,iCACZ,SAAAgB,EACCf,EAAAF,EAAA,CACE,UAAAC,EAACM,EAAA,CAAQ,KAAM,EAAG,UAAWH,EAAG,mBAAmB,EAChD,SAAAK,EACH,EACCC,GACCT,EAACM,EAAA,CACC,KAAM,EACN,UAAWH,EAAG,kCAAmCoB,GAAY,wBAAwB,EAEpF,SAAAd,EACH,GAEJ,EAEAT,EAACK,EAAA,CACC,KAAM,EACN,UAAWF,EACT,8DACA,yCACF,EAEC,SAAAU,EACH,EAEJ,EAECH,GACCV,EAACK,EAAA,CACC,KAAM,EACN,UAAWF,EACT,0EACAoB,GAAY,qBACd,EAEC,SAAAb,EACH,EAIFT,EAAC,OAAI,UAAWE,EAAG,iCAAkC,cAAc,EACjE,UAAAH,EAACI,EAAA,CACC,QAAQ,YACR,KAAK,KACL,QAASU,EACT,QAASG,EACT,0BAAwB,gCACxB,kCAAiC,GAAGG,GAAiB,EAAE,IAAIC,GAAuB,EAAE,IAAIV,CAAa,GACrG,oBAAmBW,EAElB,SAAAX,EACH,EACAX,EAACI,EAAA,CACC,QAAQ,UACR,KAAK,KACL,QAASW,EACT,SAAU,CAACC,EACX,QAASE,EACT,0BAAwB,gCACxB,kCAAiC,GAAGE,GAAiB,EAAE,IAAIC,GAAuB,EAAE,IAAIT,CAAW,GACnG,oBAAmBU,EAElB,SAAAV,EACH,GACF,GACF,CAGN,EAEAL,EAAgB,YAAc,kBAE9B,IAAOkB,EAAQlB",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "cn", "Button", "Text", "Heading", "PriceAndActions", "currentPrice", "originalPrice", "priceLabel", "learnMoreText", "shopNowText", "soldOutText", "onLearnMore", "onShopNow", "availableForSale", "learnMoreLoading", "shopNowLoading", "className", "trackingTitle", "trackingDescription", "trackingSku", "classNames", "ref", "PriceAndActions_default"]
|
|
7
7
|
}
|
|
@@ -16,6 +16,7 @@ export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
16
16
|
/** 布局模式 */
|
|
17
17
|
layout?: 'horizontal' | 'vertical';
|
|
18
18
|
classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>;
|
|
19
|
+
soldOutText?: string;
|
|
19
20
|
/** @deprecated Use `onProductImageClick` instead. */
|
|
20
21
|
onProductClick?: (product: ProductCardData) => void;
|
|
21
22
|
/** 产品图片点击回调 */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as a,jsxs as
|
|
1
|
+
"use client";import{jsx as a,jsxs as g}from"react/jsx-runtime";import*as i from"react";import{cn as w}from"../../helpers/index.js";import W from"./ProductImage.js";import V from"./ProductInfo.js";import _ from"./GiftSelection.js";import $ from"./PriceAndActions.js";const v=i.forwardRef(({productData:e,gifts:r=[],giftType:n=1,selectedGiftSku:F,sceneImages:L,tags:N,layout:u="horizontal",className:y,onProductClick:p,onProductImageClick:G,onLearnMore:M,onShopNow:I,onGiftClick:h,onGiftSelectionChange:O,classNames:S,soldOutText:T,...H},z)=>{const[R,P]=i.useState(!1),[j,b]=i.useState(!1),[x,d]=i.useState(()=>!r||r.length===0?[]:n===2?r.map(t=>t.id):[r[0].id]),c=i.useMemo(()=>r?r.map(t=>({...t,selected:x.includes(t.id)})):[],[r,x]);i.useEffect(()=>{if(!r||r.length===0){d([]);return}d(n===2?r.map(t=>t.id):t=>{const o=t[0];return o&&r.some(m=>m.id===o)?[o]:[r[0].id]})},[r,n]);const s=i.useMemo(()=>({...e,gifts:r,gift_type:n}),[e,r,n]),A=t=>{if(n===2){const o=c.filter(l=>l.selected);h?.(t,o);return}d(()=>{const o=[t.id],l=r?.filter(m=>o.includes(m.id))||[];return h?.(t,l),O?.(l,s),o})},f=!!(G??p),k=`/products/${e.handle}`,C=()=>{(G??p)?.(s)},B=async()=>{const t=c.filter(o=>o.selected);P(!0);try{await M?.(s,t)}finally{P(!1)}},E=async()=>{const t=c.filter(o=>o.selected);b(!0);try{await I?.(s,t)}finally{b(!1)}};return g("div",{ref:z,className:w("bg-container-primary rounded-box flex items-stretch overflow-hidden",u==="horizontal"?["laptop:flex-row lg-desktop:min-h-[560px] desktop:min-h-[448px] tablet:min-h-[526px] min-h-[610px] flex-col","laptop:col-span-2"]:["flex-col justify-between"],y),...H,children:[a(W,{images:L,name:e.name,layout:u,tags:e.tags||N,onClick:f?C:void 0,href:f?void 0:k}),a("div",{className:w("bg-container-primary desktop:p-6 flex flex-col justify-between p-4",u==="horizontal"?["rounded-r-box laptop:rounded-r-box tablet:rounded-b-box tablet:rounded-l-none","laptop:basis-[39.1%]","desktop:basis-[42.1%]","lg-desktop:basis-[42.1%]","shrink-0"]:["rounded-b-box","w-full","grow"]),children:g("div",{className:"flex flex-1 flex-col justify-between gap-6",children:[a(V,{name:e.name,onClick:f?C:void 0,href:f?void 0:k,description:e.description,classNames:S}),a(_,{freeGiftLabel:e.freeGiftLabel,freeGifts:c,onGiftClick:A,giftType:n,selectedGiftSku:F}),a($,{currentPrice:e.currentPrice??"",originalPrice:e.originalPrice,priceLabel:e.priceLabel,learnMoreText:e.learnMoreText,shopNowText:e.shopNowText,soldOutText:T,onLearnMore:B,onShopNow:E,availableForSale:e.availableForSale,learnMoreLoading:R,shopNowLoading:j,trackingTitle:e.name,trackingDescription:e.description,trackingSku:e.sku,classNames:S})]})})]})});v.displayName="BuyOneGetOneShelf.ProductCard";var X=v;export{X as default};
|
|
2
2
|
//# sourceMappingURL=ProductCard.js.map
|