@anker-in/headless-ui 1.3.19 → 1.3.21
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/EventSchedule/index.d.ts +2 -2
- package/dist/cjs/biz-components/EventSchedule/index.js +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- 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/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +3 -3
- 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/EventSchedule/index.d.ts +2 -2
- package/dist/esm/biz-components/EventSchedule/index.js +1 -1
- package/dist/esm/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- 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/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +3 -3
- 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": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "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", "MultiLayoutGraphicBlock", "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", "MultiLayoutGraphicBlock_default"]
|
|
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": "AAoHQ,OAuOM,YAAAA,EAvON,OAAAC,EAaF,QAAAC,MAbE,oBApHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAOC,MAAyC,uCAChD,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,EAAI,iBAAAC,EAAe,oBAAAC,MAAwB,yBACpD,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,QAAAC,GAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,2BACzD,OAAS,eAAAC,OAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,kBAAAC,OAAsB,2BAC/B,OAAS,WAAAC,OAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAOC,EACP,uBAAAC,EACA,qBAAAC,CACF,IAQM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIrC,EAAkB,EAAK,EACjDsC,EAAanC,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DoC,EAAMrC,EAAuB,IAAI,EAEjCsC,EAAe,IAAM,CACzB,GAAIR,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,IAAK,YACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,EAEAR,GAAYiB,EAAK,CACf,cAAeb,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAED7B,EAAU,IAAM,CACdoC,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAAC,CACF,EAAIvB,EACEwB,EAAe,mFAErB,OACEvD,EAAC,OACC,UAAWe,EACT,8BACA,qEACA2B,EAAa,EACb,CACE,cAAeV,GAAe,QAAU,UACxC,YAAaW,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEH,WAAAS,GAAaF,EAAgB,OAC7BjD,EAAC,KACC,UAAU,wBACV,KAAM0B,EACJR,EAAiBiC,GAAaF,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EACvF,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,GACxD,6BAA4B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GACjE,cAAY,OACZ,SAAU,GACZ,EAEFjC,EAAC,OAAI,UAAU,mBACZ,UAAAmB,EAAQ2B,GAAU,QAAQ,EACzB/C,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAK+C,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEA/C,EAACS,EAAA,CACC,OAAQsC,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAED3B,EAAQ8B,GAAgB,QAAQ,EAC/BlD,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAKkD,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEAlD,EAACS,EAAA,CACC,OAAQyC,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,GAEJ,EACA9C,EAAC,OACC,UAAWe,EACT,0DACAmB,IAAa,OAAS,oCAAsC,aAC9D,EAEA,UAAAlC,EAAC,OAAI,UAAU,2GACb,UAAAA,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACW,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMkC,EAAO,EAC9D7C,EAACW,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMmC,EACR,GACF,EACA7C,EAAC,OAAI,UAAU,8BACZ,UAAAgD,GAAmBA,EAAgB,MAClChD,EAACS,EAAA,CACC,aAAYmC,GAASC,EACrB,UAAW9B,EAAGwC,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,aAAY,GAAGD,CAAE,aACjB,QAAS,IAAM,CACblB,IAAyBL,CAAI,CAC/B,EACA,KAAMN,EACJR,EAAiB+B,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EAC1E,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIG,EAAgB,IAAI,GAChF,6BAA4B,GAAGhB,GAAe,SAAS,IAAIC,CAAM,GAEhE,UAAAe,EAAgB,KACjBjD,EAAC,QAAK,UAAU,UAAW,SAAA6C,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9BhD,EAACU,EAAA,CACC,aAAYmC,GAASC,EACrB,UAAW9B,EAAGwC,EAAc,YAAY,EACxC,QAAQ,UACR,aAAY,GAAGD,CAAE,cACjB,GAAG,IACH,QAAS,IAAM,CACbjB,IAAuBN,CAAI,CAC7B,EACA,KAAMN,EACJR,EAAiB8B,EAAc,MAAQ,GAAIf,GAAe,QAAU,IAAI,EACxE,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,6BAA4B,GAAGf,GAAe,SAAS,IAAIC,CAAM,GAEhE,SAAAc,EAAc,KACjB,GAEJ,GACF,GACEI,GAAO,KAAOC,IACdrD,EAAC,OAAI,UAAU,+EACb,SAAAA,EAAC,UACC,QAAS,IAAM,CACbiC,GAAe,sBACbqB,GAAaD,EAAYA,EAAYD,GAAO,KAAOC,EACnDC,CACF,CACF,EACA,UAAU,+GAEV,SAAAtD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EACF,GAEJ,GACF,CAEJ,EAEMyD,EAA0BvD,EAAM,WAAyD,CAACwD,EAAOhB,IAAQ,CAC7G,KAAM,CAAE,KAAAiB,EAAM,UAAAC,EAAW,uBAAAvB,EAAwB,qBAAAC,EAAsB,GAAGuB,CAAK,EAAIH,EAC7E,CAAE,MAAAI,EAAO,aAAAC,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIP,EACpE,CAACQ,EAASC,CAAU,EAAIjE,EAAkB,EAAK,EAC/C,CAACkE,EAAUC,CAAW,EAAInE,EAAiB,EAAE,EAC7C,CAACoE,EAAWC,CAAY,EAAIrE,EAAiB,EAAE,EAC/C,CAAE,OAAAsE,EAAS,IAAK,EAAI9C,GAAe,EAEnC+C,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWX,EACd,IAAIjC,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAM6C,EAAOC,IAAQA,EAAI,QAAQ9C,CAAI,IAAM6C,CAAK,EAErDE,EAA0B,CAACC,EAAa1B,IAAuB,CACnEc,EAAW,EAAI,EACXd,EACFkB,IAAeQ,GAAO,EAAE,EAExBV,IAAcU,GAAO,EAAE,CAE3B,EACMC,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeR,EAClB,IAAIS,IAAY,CACf,QAAAA,EACA,MAAOpB,EAAM,OAAOjC,GAAQA,EAAK,UAAYqD,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAGF,OAAI3B,EAAK,OAAS,YAAcM,EAAM,OAAS,EAE3CjE,EAACO,EAAA,CACC,KAAMoD,EACN,qBAAsBrB,EACtB,uBAAwBD,EACxB,UAAWuB,EACX,IAAKlB,EACJ,GAAGmB,EACN,EAKF5D,EAAC,WACC,uBAAqB,0BACrB,IAAKyC,EACJ,GAAGmB,EACJ,UAAW7C,EAAG,0BAA2B,oBAAqB4C,CAAS,EAEtE,UAAAG,GAAgB/D,EAACe,EAAA,CAAM,KAAM,CAAE,MAAOgD,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,EACC/D,EAACoB,GAAA,CAAK,MAAOyC,EAAO,MAAM,OAAO,aAAc7C,EAAc2D,EAAS,CAAC,CAAE,EACvE,UAAA5E,EAACsB,GAAA,CACE,SAAAsD,EAAS,IAAI,CAACS,EAASR,IACtB7E,EAACuB,GAAA,CAEC,MAAON,EAAcoE,CAAQ,EAC7B,QAAS,IAAM,CACbzD,GAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,gBAAiBiC,EACjB,mBAAoB,EACpB,WAAYsB,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIR,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACS,EAASR,IACtB7E,EAACwB,GAAA,CAAwB,MAAOP,EAAcoE,CAAQ,EAAG,UAAU,qCACjE,SAAApF,EAAAF,EAAA,CACE,UAAAC,EAACmB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMiE,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOvB,EACP,MAAOE,EACP,UAAWqB,EACX,MAAOtB,EACP,IAAKqB,IAAeC,CAAO,GAAG,QAAU,EACxC,OAAAZ,EACA,oBAAqBM,EACrB,uBAAA1C,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAekD,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACCnB,GAAYA,GAAU,MAAM,OAAS,EACpClE,EAACmB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM+C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,MAAOE,EACP,OAAAS,EACA,oBAAqBM,EACrB,MAAOhB,EACP,uBAAA1B,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAzFgB8C,CA0FlB,CACD,GACH,EAEA5E,EAAAF,EAAA,CACE,UAAAE,EAACY,EAAA,CAAK,UAAU,SACb,UAAAoD,EAAM,IAAI,CAACjC,EAAM6C,IAEd7E,EAACc,EAAA,CAEC,KAAM4D,EAAQ1C,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,SAAAhC,EAAC+B,EAAA,CACC,KAAMC,EACN,cAAe,CACb,MAAO8B,EACP,OAAAW,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU7C,EAAK,MACf,uBAAwBK,EACxB,qBAAsBC,EACxB,GAhBK,GAAGN,GAAM,OAAS,EAAE,GAAG6C,CAAK,EAiBnC,CAEH,EACAZ,EAAM,IAAI,CAACjC,EAAM6C,IAChB7E,EAACc,EAAA,CAA8C,KAAM4D,EAAQ,MAAM,EAAG,UAAU,sBAC9E,SAAA1E,EAAC+B,EAAA,CACC,KAAMC,EACN,cAAe,CACb,MAAO8B,EACP,OAAAW,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU,OACZ,GAXa,GAAG7C,GAAM,OAAS,EAAE,GAAG6C,CAAK,EAY3C,CACD,GACH,EACCX,GAAYA,GAAU,MAAM,OAAS,EACpClE,EAACmB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM+C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,OAAAW,EACA,oBAAqBM,EACrB,MAAOhB,EACP,uBAAA1B,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,EAEDoC,GACCnE,EAACY,EAAA,CACC,QAASuD,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDX,EAAwB,YAAc,0BAEtC,IAAO+B,GAAQhF,EAAWiD,EAAyB,CACjD,UAAW,CAAE,YAAa,GAAI,WAAY,EAAG,CAC/C,CAAC",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "MultiLayoutGraphicBlockCarouselImpl", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "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", "MultiLayoutGraphicBlock", "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", "MultiLayoutGraphicBlock_default"]
|
|
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 client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import w,{useRef as x,useCallback as F,useState as N,useEffect as C}from"react";import{Swiper as J,SwiperSlide as K}from"swiper/react";import{Navigation as L,Pagination as S,Autoplay as Q}from"swiper/modules";import{cn as v,getLocalizedPath as g}from"../../helpers/index.js";import X from"../Title/index.js";import{Button as B,Heading as Y,Picture as M}from"../../components/index.js";import{Text as Z}from"../../components/text.js";import{isVideo as z}from"../../shared/mimeType.js";import{useAiuiContext as ee}from"../AiuiProvider/index.js";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";const te=()=>a("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:[t("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),oe=()=>a("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:[t("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),T={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]"},E=w.forwardRef(({data:m,className:P,onSecondaryButtonClick:_,onPrimaryButtonClick:j,...I},U)=>{const n=m.items||[],s=m.carouselConfig,A=(s?.showArrows??!0)&&n.length>1,b=s?.showDots??!0,l=s?.autoplaySeconds,R=s?.size??"base",r=x(null),[H,D]=N(0),[c,G]=N(null),p=x(n.map(()=>w.createRef()));C(()=>{const e=r.current;!e||!c||e.pagination&&(e.pagination.el=c,e.pagination.init(),e.pagination.render(),e.pagination.update())},[c]);const y=(n[H]?.theme??"light")==="dark";C(()=>{const e=()=>{const o=r.current;if(o)if(document.visibilityState==="hidden")o.autoplay?.stop();else{o.autoplay?.start();const u=o.realIndex??0;p.current.forEach((i,d)=>{i.current&&i.current.querySelectorAll("video").forEach(f=>{d!==u&&f.pause()})})}};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]);const q=l!=null&&l>0?[L,S,Q]:[L,S],O=l!=null&&l>0?{delay:Math.max(l*1e3,3e3),disableOnInteraction:!1}:!1,V=F(e=>{const o=e.realIndex;p.current.forEach((i,d)=>{d!==o&&i.current&&i.current.querySelectorAll("video").forEach(f=>{f.pause(),f.currentTime=0})});const u=p.current[o];u?.current&&u.current.querySelectorAll("video").forEach(i=>{i.paused&&i.play()?.catch(()=>{})}),D(o)},[]),{locale:h}=ee(),W=T[R]??T.base,{sectionTitle:k,shape:$}=m;return a("section",{ref:U,className:v("multilayout-graphic-block-carousel group relative w-full","laptop:overflow-hidden","laptop:block flex flex-col",W,{"aiui-dark":y},P),...I,children:[k&&t(X,{data:{title:k},className:"section-title"}),a("div",{className:"laptop:h-full laptop:pb-0 relative shrink-0 pb-5",children:[t(J,{className:"laptop:h-full h-[400px]",onSwiper:e=>r.current=e,onSlideChange:V,modules:q,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:O,pagination:b?{clickable:!0,el:c,renderBullet:(e,o)=>`<span class="${o} banner-dot"></span>`}:!1,children:n.map((e,o)=>t(K,{className:"h-full",children:a("div",{ref:p.current[o],className:v("item-wrapper text-info-primary relative size-full overflow-hidden",{"aiui-dark":e.theme==="dark","rounded-2xl":$==="rounded"}),children:[(e.blockLink||e.secondaryButton?.link)&&t("a",{className:"absolute inset-0 z-10",href:g(e.blockLink||e.secondaryButton?.link||"",h||"us"),"aria-hidden":"true",tabIndex:-1}),a("div",{className:"absolute inset-0",children:[z(e.imageUrl?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:e.imageUrl?.url,type:"video/mp4"})}):t(M,{source:e.imageUrl?.url,alt:e.imageUrl?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full object-cover"}),z(e.imageMobileUrl?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:e.imageMobileUrl?.url,type:"video/mp4"})}):t(M,{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"})]}),t("div",{className:"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end",children:a("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:[a("div",{className:"flex flex-col gap-1",children:[t(Y,{size:3,as:"h3",className:"item-title",html:e.title}),t(Z,{className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e.description})]}),a("div",{className:"lg-desktop:gap-3 flex gap-2",children:[e.secondaryButton?.text&&a(B,{"aria-label":e.title??e.description,className:"link-left",variant:"secondary",as:"a",href:g(e.secondaryButton.link||"",h||"us"),onClick:_,children:[e.secondaryButton.text,t("span",{className:"sr-only",children:e.title??e.description})]}),e.primaryButton?.text&&a(B,{"aria-label":e.title??e.description,className:"link-right",variant:"primary",as:"a",href:g(e.primaryButton.link||"",h||"us"),onClick:j,children:[e.primaryButton.text,t("span",{className:"sr-only",children:e.title??e.description})]})]})]})})]})},o))}),A&&a("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[t("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:()=>r.current?.slidePrev(),"aria-label":"Previous slide",children:t(te,{})}),t("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:()=>r.current?.slideNext(),"aria-label":"Next slide",children:t(oe,{})})]}),b&&t("div",{ref:G,className:v("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":y})})]})]})});E.displayName="MultiLayoutGraphicBlockCarousel";var ve=E;export{ve as default};
|
|
2
|
+
//# sourceMappingURL=MultiLayoutGraphicBlockCarousel.js.map
|
package/dist/esm/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": ["jsx", "jsxs", "React", "useRef", "useCallback", "useState", "useEffect", "Swiper", "SwiperSlide", "Navigation", "Pagination", "Autoplay", "cn", "getLocalizedPath", "Title", "Button", "Heading", "Picture", "Text", "isVideo", "useAiuiContext", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "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", "s", "_index", "item", "index", "MultiLayoutGraphicBlockCarousel_default"]
|
|
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 client";import{Fragment as T,jsx as t,jsxs as c}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{Fragment as T,jsx as t,jsxs as c}from"react/jsx-runtime";import q from"./dropdown.js";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import{useMediaQuery as W}from"react-responsive";import{useMemo as G,useState as x,useEffect as C}from"react";import{withLayout as J}from"../../shared/Styles.js";import{formatVariantPrice as K}from"../ShelfDisplay/shelfDisplay.js";import{Picture as v,Text as X,Button as Y,Heading as h}from"../../components/index.js";import{cn as Z}from"../../helpers/index.js";import ee,{useImperativeHandle as te,useRef as se}from"react";const E=ee.forwardRef(({data:k,buildData:d,onChange:A,onSecondaryChange:ne,className:F,...j},H)=>{const u=W({query:"(max-width: 768px)"}),[r,f]=x({}),[b,P]=x([]),[w,y]=x(!1),[g,N]=x({}),S=se(null),{locale:R="us",currencyDisplay:I,trackingData:_}=Q(),$=_?.showComparePrice??!0,{LeftMenu:L,RightMenu:M,DefaultSelectMenu:m}=G(()=>k?.data||{},[k?.data]),O=e=>{try{const n=new URL(e).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(n)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(e)}},U=(e,s)=>{const n=e?.variants?.find?.(p=>p?.sku===e?.sku),o=n?.coupons?.[0],{price:i,basePrice:a}=K({locale:R||"us",amount:o?o?.variant_price4wscode:n?.price,baseAmount:o?n?.price:0,currencyDisplay:I,currencyCode:e?.price?.currencyCode||"USD"}),l=typeof m?.buttonText=="string"?m?.buttonText:m?.buttonText?.[String(s)]||"";return c("div",{className:"specs-sku-node-wrap box-border",children:[c(X,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(b?.length<=1)return null;N({...g,[s]:!g?.[s]})},children:[c("div",{className:"flex items-center justify-between overflow-hidden",children:[t("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:r?.[s]?.name||"",children:r?.[s]?.name||""}),b?.length>1?t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:t("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):null]}),t(q,{index:s,list:b,active:r,setActive:f,visible:g,setVisible:N})]}),t("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:t(v,{source:n?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),t("div",{className:"lg-desktop:text-2xl mb-2 mt-6 text-xl font-bold",children:t("div",{className:"lg-desktop:min-h-[32px] flex min-h-[28px] items-center",children:n?.availableForSale?c(T,{children:[t("div",{className:"specs-sku-node-price text-[#080A0F]",children:i||""}),$&&a&&t("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:a})]}):null})}),l?t(Y,{onClick:()=>{A?.(e,s)},className:"specs-sku-node-button",children:l}):null]})},V=e=>e&&typeof e!="string"?c("div",{className:"size-full",children:[t("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:e?.text||""}}),t(v,{source:e?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):t("div",{className:"break-all",children:O(e)?t(v,{source:e,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):t("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:e||""}})}),D=e=>e.map((s,n)=>{const o=n===0;return c("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] specs-product-node-wrap",children:[t(h,{as:"h3",html:s||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),t("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${w?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(r)?.map?.(i=>{const a=r?.[i],l=M?.menus?.find?.(p=>p?.handle===a?.handle)?.subTitle;return V(l?.[s])})})]},s)}),B=e=>{if(!r)return;const{subTitle:s,isProduct:n}=e;return n?c(T,{children:[c("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[e?.title&&t(h,{as:"h3",html:e?.title||"",className:"l:hidden specs-item-product-title"}),t("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${w?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(r)?.map((o,i)=>{const a=r?.[o],l=d?.products?.find?.(p=>p?.handle===a?.handle);return t("div",{children:U({...l,item:o,sku:a?.sku},i)},o)})})]}),e?.categoryLabel&&t(h,{size:2,as:"h4",html:e?.categoryLabel||"",className:"desktop:p-6 specs-item-product-category py-6"}),s?.length?D(s):null]}):D(s)};return te(H,()=>S.current),C(()=>{if(!d?.products?.length)return;const e=m?.sku?.split?.(",")||[],s=u&&e?.length>2?e?.slice(0,2):e;let n={};s?.forEach?.((i,a)=>{const l=d?.products?.find?.(p=>{if(p?.variants?.find?.(z=>z?.sku===i))return!0});l&&(n={...n,[a]:{sku:i,name:l?.name||l?.title,handle:l?.handle}})});const o=d?.products?.filter(i=>M?.menus?.find(a=>a?.handle===i?.handle));f(n),P(o),y(e?.length>2&&!u)},[d,u]),C(()=>{if(u){const e=Object.keys(r||{});if(e?.length>2){const s=e?.slice?.(0,2);let n={};s?.forEach?.(o=>{n={...n,[o]:r?.[o]}}),y(!1),f(n)}}},[u]),t("div",{...j,className:Z("specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",F),ref:S,children:L?.data?t("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:L?.data?.map?.((e,s)=>t("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:B(e)},s))}):null})});E.displayName="Specs";var xe=J(E);export{xe as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Specs/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nexport interface SpecsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n data?: any\n buildData?: any\n onChange?: (product: any, index: number) => void\n onSecondaryChange?: (data: any) => void\n}\n\nconst Specs = React.forwardRef<HTMLDivElement, SpecsProps>(\n ({ data, buildData, onChange, onSecondaryChange, className, ...rest }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [menuList, setMenuList] = useState<any[]>([])\n const [isShowMax, setIsShowMax] = useState<boolean>(false)\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us', currencyDisplay } = useAiuiContext()\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyDisplay,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n const buttonTextValue =\n typeof DefaultSelectMenu?.buttonText === 'string'\n ? DefaultSelectMenu?.buttonText\n : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n return (\n <div className=\"specs-sku-node-wrap box-border\">\n <Text\n className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n onClick={() => {\n if (menuList?.length <= 1) return null\n\n setVisibleActive({\n ...visibleActive,\n [index]: !visibleActive?.[index],\n })\n }}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n title={active?.[index]?.name || ''}\n >\n {active?.[index]?.name || ''}\n </div>\n {menuList?.length > 1 ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n ) : null}\n </div>\n <DropDown\n index={index}\n list={menuList}\n active={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n />\n </div>\n <div className=\"lg-desktop:text-2xl mb-2 mt-6 text-xl font-bold\">\n <div className=\"lg-desktop:min-h-[32px] flex min-h-[28px] items-center\">\n {findSku?.availableForSale ? (\n <>\n <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n {basePrice && (\n <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n {basePrice}\n </div>\n )}\n </>\n ) : null}\n </div>\n </div>\n {buttonTextValue ? (\n <Button\n onClick={() => {\n onChange?.(product, index)\n }}\n className=\"specs-sku-node-button\"\n >\n {buttonTextValue}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n />\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n >\n {node?.title && (\n <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />\n )}\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )\n return (\n <div key={item}>{skuNode({ ...currentProduct, item: item, sku: currentData?.sku }, index)}</div>\n )\n })}\n </div>\n </div>\n {node?.categoryLabel && (\n <Heading\n size={2}\n as=\"h4\"\n html={node?.categoryLabel || ''}\n className=\"desktop:p-6 specs-item-product-category py-6\"\n />\n )}\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n const limitedSkus = isMobile && skus?.length > 2 ? skus?.slice(0, 2) : skus\n let currentActive = {}\n limitedSkus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name || findData?.title,\n handle: findData?.handle,\n },\n }\n }\n })\n const currentMenu = buildData?.products?.filter((item: any) => {\n return RightMenu?.menus?.find((params: any) => params?.handle === item?.handle)\n })\n setActive(currentActive)\n setMenuList(currentMenu)\n setIsShowMax(skus?.length > 2 && !isMobile)\n }, [buildData, isMobile])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setIsShowMax(false)\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div {...rest} className={cn('specs-wrapper w-full overflow-hidden bg-[#F5F5F7]', className)} ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\"\n >\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n }\n)\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "DropDown", "useAiuiContext", "useMediaQuery", "useMemo", "useState", "useEffect", "withLayout", "formatVariantPrice", "Picture", "Text", "Button", "Heading", "cn", "React", "useImperativeHandle", "useRef", "Specs", "data", "buildData", "onChange", "onSecondaryChange", "className", "rest", "ref", "isMobile", "active", "setActive", "menuList", "setMenuList", "isShowMax", "setIsShowMax", "visibleActive", "setVisibleActive", "innerRef", "locale", "currencyDisplay", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findSku", "item", "coupon", "price", "basePrice", "buttonTextValue", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "limitedSkus", "currentActive", "sku", "findData", "currentMenu", "params", "newActive", "newShowActive", "Specs_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nexport interface SpecsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n data?: any\n buildData?: any\n onChange?: (product: any, index: number) => void\n onSecondaryChange?: (data: any) => void\n}\n\nconst Specs = React.forwardRef<HTMLDivElement, SpecsProps>(\n ({ data, buildData, onChange, onSecondaryChange, className, ...rest }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [menuList, setMenuList] = useState<any[]>([])\n const [isShowMax, setIsShowMax] = useState<boolean>(false)\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us', currencyDisplay, trackingData } = useAiuiContext()\n\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09\uFF0C\u9ED8\u8BA4\u663E\u793A */\n const showComparePrice = trackingData?.showComparePrice ?? true\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyDisplay,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n const buttonTextValue =\n typeof DefaultSelectMenu?.buttonText === 'string'\n ? DefaultSelectMenu?.buttonText\n : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n return (\n <div className=\"specs-sku-node-wrap box-border\">\n <Text\n className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n onClick={() => {\n if (menuList?.length <= 1) return null\n\n setVisibleActive({\n ...visibleActive,\n [index]: !visibleActive?.[index],\n })\n }}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n title={active?.[index]?.name || ''}\n >\n {active?.[index]?.name || ''}\n </div>\n {menuList?.length > 1 ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n ) : null}\n </div>\n <DropDown\n index={index}\n list={menuList}\n active={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n />\n </div>\n <div className=\"lg-desktop:text-2xl mb-2 mt-6 text-xl font-bold\">\n <div className=\"lg-desktop:min-h-[32px] flex min-h-[28px] items-center\">\n {findSku?.availableForSale ? (\n <>\n <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n {showComparePrice && basePrice && (\n <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n {basePrice}\n </div>\n )}\n </>\n ) : null}\n </div>\n </div>\n {buttonTextValue ? (\n <Button\n onClick={() => {\n onChange?.(product, index)\n }}\n className=\"specs-sku-node-button\"\n >\n {buttonTextValue}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n />\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n >\n {node?.title && (\n <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />\n )}\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )\n return (\n <div key={item}>{skuNode({ ...currentProduct, item: item, sku: currentData?.sku }, index)}</div>\n )\n })}\n </div>\n </div>\n {node?.categoryLabel && (\n <Heading\n size={2}\n as=\"h4\"\n html={node?.categoryLabel || ''}\n className=\"desktop:p-6 specs-item-product-category py-6\"\n />\n )}\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n const limitedSkus = isMobile && skus?.length > 2 ? skus?.slice(0, 2) : skus\n let currentActive = {}\n limitedSkus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name || findData?.title,\n handle: findData?.handle,\n },\n }\n }\n })\n const currentMenu = buildData?.products?.filter((item: any) => {\n return RightMenu?.menus?.find((params: any) => params?.handle === item?.handle)\n })\n setActive(currentActive)\n setMenuList(currentMenu)\n setIsShowMax(skus?.length > 2 && !isMobile)\n }, [buildData, isMobile])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setIsShowMax(false)\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div {...rest} className={cn('specs-wrapper w-full overflow-hidden bg-[#F5F5F7]', className)} ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\"\n >\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n }\n)\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "DropDown", "useAiuiContext", "useMediaQuery", "useMemo", "useState", "useEffect", "withLayout", "formatVariantPrice", "Picture", "Text", "Button", "Heading", "cn", "React", "useImperativeHandle", "useRef", "Specs", "data", "buildData", "onChange", "onSecondaryChange", "className", "rest", "ref", "isMobile", "active", "setActive", "menuList", "setMenuList", "isShowMax", "setIsShowMax", "visibleActive", "setVisibleActive", "innerRef", "locale", "currencyDisplay", "trackingData", "showComparePrice", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findSku", "item", "coupon", "price", "basePrice", "buttonTextValue", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "limitedSkus", "currentActive", "sku", "findData", "currentMenu", "params", "newActive", "newShowActive", "Specs_default"]
|
|
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
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as O,jsx as s,jsxs as G}from"react/jsx-runtime";import m,{useMemo as u}from"react";import{simpleHash as f}from"./simpleHash.js";import S from"./getKeyPropsString.js";import{Grid as g,GridItem as b}from"../components/grid.js";import{Container as w}from"../components/container.js";import T from"./ErrorBoundary.js";const N={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"},I={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"},d=t=>{const n=S(t);return`style_${f(n)}`},k=t=>{const{style:n,uid:e,disabled:o,containerClassName:r,idx:a}=t;return{style:n,uid:e,disabled:o,containerClassName:r,idx:a}},h=({style:t,uid:n=d({}),disabled:e=!1})=>!t||e?null:s("style",{suppressHydrationWarning:!0,"data-style-id":n,dangerouslySetInnerHTML:{__html:`.block-${n} { ${t} }`}}),x=(t,n)=>{const e=u(()=>t?.uid||d({...t,...n??{}}),[n,t]),o=u(()=>s(h,{...t,uid:e}),[t,e]);return{className:`block-${e} `,StyleComponent:o,uid:e,idx:t?.idx}},$=t=>{const{desktopSpan:n,mobileSpan:e}=t||{},o=e?N[e]:"",r=n?I[n]:"";return`${o} ${r}`.trim()},j=t=>t?typeof t=="string"?t:typeof t=="object"&&Object.entries(t).length<=0?"":Object.entries(t).map(([n,e])=>`${n.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${e}`).join("; ")+";":"",L=(t,n)=>[t,n].map(j).filter(e=>!!e).map(e=>e.trim().endsWith(";")?e:`${e};`).join(" ");function E(t,n){const e=m.forwardRef((o,r)=>{const{container:a,containerClassName:i,className:c,...l}=o;if(!a||Reflect.ownKeys(a).length===0)return s(t,{...l,className:c,ref:r});const p=[n,i,c].filter(Boolean).join(" ").trim();return s(w,{className:p,children:s(g,{className:"container_grid",children:s(b,{className:$(a),children:s(t,{...l,ref:r})})})})});return e.displayName=`WithContainerLayout(${t.displayName||t.name||"Component"})`,e}function _(t,n){const e=m.forwardRef((o,r)=>{const a=k(o),i=L(n?.style,a.style),c={...n,...a,...i&&{style:i}},{className:l,StyleComponent:p,idx:y}=x(c,o.data),{style:A,uid:F,disabled:K,idx:v,className:C,...R}=o;return G(O,{children:[p,s(t,{...R,...y?{id:y}:{},className:[l,C].filter(Boolean).join(" ").trim(),ref:r})]})});return e.displayName=`WithStyleInjection(${t.displayName||t.name||"Component"})`,e}function B(t){const n=m.forwardRef((e,o)=>s(T,{children:s(t,{...e,ref:o})}));return n.displayName=`WithErrorBoundary(${t.displayName||t.name||"Component"})`,n}const P=new WeakMap;function z(t,n){if(P.has(t))return t;const e=B(_(E(t,n?.containerClassName),n));e.displayName=`WithLayout(${t.displayName||t.name||"Component"})`,P.set(t,!0);const o=e;return Object.getOwnPropertyNames(t).forEach(r=>{!(r in o)&&r!=="arguments"&&r!=="caller"&&r!=="length"&&r!=="name"&&(o[r]=t[r])}),o}export{k as getStylesProps,x as useStyles,z as withLayout};
|
|
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": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "containerClassName", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getGridItemClassName", "container", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "styleToString", "key", "value", "mergeStyles", "a", "b", "s", "withContainerLayout", "WrappedComponent", "defaultContainerClassName", "Wrapped", "ref", "className", "componentProps", "mergedContainerClassName", "withStyleInjection", "defaultStyleProps", "propsStyleProps", "mergedStyle", "finalStyleProps", "_s", "_u", "_d", "ownClassName", "rest", "withErrorBoundary", "wrappedComponents", "withLayout", "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": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "containerClassName", "idx", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getGridItemClassName", "container", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "styleToString", "key", "value", "mergeStyles", "a", "b", "s", "withContainerLayout", "WrappedComponent", "defaultContainerClassName", "Wrapped", "ref", "className", "componentProps", "mergedContainerClassName", "withStyleInjection", "defaultStyleProps", "propsStyleProps", "mergedStyle", "finalStyleProps", "_s", "_u", "_d", "_idx", "ownClassName", "rest", "withErrorBoundary", "wrappedComponents", "withLayout", "defaultLayoutProps", "composed", "result"]
|
|
7
7
|
}
|