@anker-in/headless-ui 0.0.27-alpha.145 → 0.0.27-alpha.147
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/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/tabSwitch.d.ts +9 -0
- package/dist/cjs/biz-components/ShelfDisplay/tabSwitch.js +2 -0
- package/dist/cjs/biz-components/ShelfDisplay/tabSwitch.js.map +7 -0
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/tabSwitch.d.ts +9 -0
- package/dist/esm/biz-components/ShelfDisplay/tabSwitch.js +2 -0
- package/dist/esm/biz-components/ShelfDisplay/tabSwitch.js.map +7 -0
- package/dist/tokens/base.css +6 -0
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <Tabs\n shape={tabShape}\n align={align}\n value={tabId}\n onValueChange={v => {\n setTabId(v)\n const findData = productsTab?.find((item: any) => item?.tab === v)\n handleCurrentTab(findData?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v,\n },\n })\n }}\n className=\"mb-8\"\n >\n <TabsList>\n {productsTab?.map((item: any, index: number) => {\n return (\n <TabsTrigger key={index} value={item?.tab || ''}>\n {item?.tab}\n </TabsTrigger>\n )\n })}\n </TabsList>\n </Tabs>\n </div>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,EAAAH,IAuGQ,IAAAI,EAAA,6BAtGRC,EAAwE,oBACxEC,EAAmB,kCACnBC,EAAoB,0CACpBC,
|
|
6
|
-
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_AiuiProvider", "import_useExposure", "import_track", "componentType", "componentName", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "index", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "Picture", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "trackingData", "profileActivated", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";"use client";var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var m=(e,t)=>{for(var n in t)d(e,n,{get:t[n],enumerable:!0})},w=(e,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!y.call(e,a)&&a!==n&&d(e,a,{get:()=>t[a],enumerable:!(l=x(t,a))||l.enumerable});return e};var k=e=>w(d({},"__esModule",{value:!0}),e);var R={};m(R,{default:()=>C});module.exports=k(R);var b=require("react/jsx-runtime"),c=require("react"),i=require("../../helpers/utils.js");const T=({tabs:e,value:t,onTabClick:n,tabShape:l="square"})=>{const a=(0,c.useRef)(null),f=o=>{n?.(o);const s=document.getElementById(`tab-${o?.tab}`),r=a.current;if(s&&r){const p=s.offsetLeft,u=s.offsetWidth,h=r.offsetWidth,v=p-h/2+u/2;r.scrollTo({left:v,behavior:"smooth"})}};return e?.length>0?(0,b.jsx)("div",{ref:a,className:(0,i.cn)("tab-switch-wrap bg-tabs-list-bg relative flex w-fit max-w-full overflow-x-auto overflow-y-hidden p-1",l==="rounded"?"rounded-[28px]":""),children:e?.map(o=>(0,b.jsx)("button",{id:`tab-${o?.tab}`,onClick:()=>f(o),className:(0,i.cn)("text-info-primary px-5 py-2.5 text-sm font-bold","relative flex-1 shrink-0 whitespace-nowrap transition-all","lg-desktop:text-base lg-desktop:px-7 lg-desktop:py-3.5",o?.tab===t?"bg-btn-primary-disabled-foreground":"",l==="rounded"?"rounded-[28px]":""),children:o?.tab||""},o?.id||o?.tab))}):null};var C=T;
|
|
2
|
+
//# sourceMappingURL=tabSwitch.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ShelfDisplay/tabSwitch.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\n\ninterface TabsProps {\n tabs: any[]\n value: string\n tabShape?: 'rounded' | 'square'\n onTabClick?: (value: any) => void\n}\n\nconst TabSwitch: React.FC<TabsProps> = ({ tabs, value, onTabClick, tabShape = 'square' }) => {\n const tabRef = useRef<HTMLDivElement>(null)\n\n const handleTabClick = (item: any) => {\n onTabClick?.(item)\n // \u83B7\u53D6\u5F53\u524D\u9009\u4E2D\u7684 tab \u5E76\u8BA1\u7B97\u4E0B\u5212\u7EBF\u4F4D\u7F6E\n const tabElement = document.getElementById(`tab-${item?.tab}`)\n // **\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E**\n const container = tabRef.current\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft // \u9009\u4E2D tab \u7684\u5DE6\u4FA7\u504F\u79FB\u91CF\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n // \u8BA1\u7B97\u76EE\u6807\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u4F7F tab \u5C45\u4E2D\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n\n return tabs?.length > 0 ? (\n <div\n ref={tabRef}\n className={cn(\n 'tab-switch-wrap bg-tabs-list-bg relative flex w-fit max-w-full overflow-x-auto overflow-y-hidden p-1',\n tabShape === 'rounded' ? 'rounded-[28px]' : ''\n )}\n >\n {tabs?.map(item => (\n <button\n key={item?.id || item?.tab}\n id={`tab-${item?.tab}`}\n onClick={() => handleTabClick(item)}\n className={cn(\n 'text-info-primary px-5 py-2.5 text-sm font-bold',\n 'relative flex-1 shrink-0 whitespace-nowrap transition-all',\n 'lg-desktop:text-base lg-desktop:px-7 lg-desktop:py-3.5',\n item?.tab === value ? 'bg-btn-primary-disabled-foreground' : '',\n tabShape === 'rounded' ? 'rounded-[28px]' : ''\n )}\n >\n {item?.tab || ''}\n </button>\n ))}\n </div>\n ) : null\n}\n\nexport default TabSwitch\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0CQ,IAAAI,EAAA,6BAzCRC,EAA8B,iBAC9BC,EAAmB,kCASnB,MAAMC,EAAiC,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,WAAAC,EAAY,SAAAC,EAAW,QAAS,IAAM,CAC3F,MAAMC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAc,CACpCJ,IAAaI,CAAI,EAEjB,MAAMC,EAAa,SAAS,eAAe,OAAOD,GAAM,GAAG,EAAE,EAEvDE,EAAYJ,EAAO,QACzB,GAAIG,GAAcC,EAAW,CAC3B,MAAMC,EAAUF,EAAW,WACrBG,EAAWH,EAAW,YACtBI,EAAiBH,EAAU,YAE3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAEA,OAAOZ,GAAM,OAAS,KACpB,OAAC,OACC,IAAKI,EACL,aAAW,MACT,uGACAD,IAAa,UAAY,iBAAmB,EAC9C,EAEC,SAAAH,GAAM,IAAIM,MACT,OAAC,UAEC,GAAI,OAAOA,GAAM,GAAG,GACpB,QAAS,IAAMD,EAAeC,CAAI,EAClC,aAAW,MACT,kDACA,4DACA,yDACAA,GAAM,MAAQL,EAAQ,qCAAuC,GAC7DE,IAAa,UAAY,iBAAmB,EAC9C,EAEC,SAAAG,GAAM,KAAO,IAXTA,GAAM,IAAMA,GAAM,GAYzB,CACD,EACH,EACE,IACN,EAEA,IAAOZ,EAAQK",
|
|
6
|
+
"names": ["tabSwitch_exports", "__export", "tabSwitch_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "TabSwitch", "tabs", "value", "onTabClick", "tabShape", "tabRef", "handleTabClick", "item", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as I,jsx as e,jsxs as s}from"react/jsx-runtime";import w,{useImperativeHandle as b,useRef as g}from"react";import h from"../Title/index.js";import{cn as a}from"../../helpers/utils.js";import k from"../../components/picture.js";import N from"../SwiperBox/index.js";import{useMediaQuery as y}from"react-responsive";import{withStyles as C}from"../../shared/Styles.js";import{Avatar as L,AvatarImage as E,AvatarFallback as P}from"../../components/avatar.js";import{Container as A}from"../../components/container.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{useExposure as T}from"../../hooks/useExposure.js";import{trackUrlRef as B}from"../../shared/trackUrlRef.js";const d="copy",c="product_review",z=({data:t,configuration:r})=>{const o=y({query:"(max-width: 768px)"}),p=i=>i?Array.from(new Array(Number(i)))||[]:[];return s("div",{className:a("bg-container-secondary-1 tablet:hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] aspect-[296/360]",{"h-[360px]":o}),children:[s("div",{className:a("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[s("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-bold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:p(t?.rating)?.map?.((i,l)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},l))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e(L,{className:"size-full",isAdaptation:!t?.avatar?.url,children:t?.avatar?.url?s(I,{children:[e(E,{src:t?.avatar?.url}),e(P,{children:t?.title})]}):t?.title})})]}),e("div",{className:"flex-1",children:e("p",{className:a("desktop:max-h-[151px] tablet:max-h-[140px]","desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold"),children:t?.description||""})}),e("a",{href:B(t?.link,`${d}_${c}`),onClick:()=>{r?.event?.primaryButton(t,r?.index)},children:s("div",{className:a("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(k,{className:"w-full object-cover",source:t?.img?.url})}),e("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:t?.subTitle||""})]})})]})},F=w.forwardRef(({className:t="",data:r,key:o,...p},i)=>{const{products:l,title:n,theme:v,...f}=r,m=g(null);b(i,()=>m.current);const{trackingData:u}=M(),{profileActivated:x}=u;return T(m,{componentType:d,componentName:c,memberActiveStatus:x?"active":"not active",componentTitle:n}),e("div",{className:t,ref:m,children:e("div",{className:"evaluate-box",children:e(A,{...r?.containerProps||{},className:"overflow-hidden",children:s("div",{ref:i,className:a("w-full",t,{"aiui-dark":v==="dark"}),children:[n&&e(h,{data:{title:n}}),e(N,{className:"!overflow-visible",id:"Evaluate"+o,data:{list:l,configuration:{...f}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var G=C(F);export{G as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "Container", "useAiuiContext", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "innerRef", "trackingData", "profileActivated", "Evaluate_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] aspect-[296/360]',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <div className=\"flex-1\">\n <p\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold'\n )}\n >\n {data?.description || ''}\n </p>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index)\n }}\n >\n <div\n className={cn(\n 'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </a>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"evaluate-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withStyles(Evaluate)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "useMediaQuery", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "Container", "useAiuiContext", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "isMobile", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "innerRef", "trackingData", "profileActivated", "Evaluate_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import u,{useImperativeHandle as h,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import v from"../SwiperBox/index.js";import{Heading as w}from"../../components/index.js";import{Picture as k,Text as b}from"../../components/index.js";import{Container as y}from"../../components/container.js";import N from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const n="image",c="graphic",G=({data:e,configuration:s})=>{const p=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":p,"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:r("a",{href:M(e?.link,`${n}_${c}`),className:"relative cursor-pointer",children:[t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),r("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(b,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(w,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},m=u.forwardRef(({data:e,className:s,...p},l)=>{const o=e?.items?.length>2,i=x(null);h(l,()=>i.current);const{trackingData:d}=T(),{profileActivated:f}=d;return C(i,{componentType:n,componentName:c,memberActiveStatus:f?"active":"not active",componentTitle:e?.title}),t("div",{className:s,ref:i,children:t("div",{className:"graphic-box",children:r(y,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(N,{data:{title:e?.title}}),t(v,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})})})});m.displayName="Graphic";var $=g(m);export{$ as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "Graphic", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Graphic_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={trackUrlRef(data?.link, `${componentType}_${componentName}`)} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as x,useRef as h,useEffect as L,forwardRef as D,useImperativeHandle as F}from"react";import{debounce as Y}from"lodash";import{cn as d}from"../../helpers/utils.js";import{withStyles as j}from"../../shared/Styles.js";import"../../components/picture.js";import q from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as O}from"react-intersection-observer";const T=({defaultConverters:m})=>({...m,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),A=D(({className:m="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:u,img:J,video:N,theme:P,shape:E,...R}},z)=>{const{sticky:r}=R,[a,l]=x(!1),[y,B]=x(0),[$,I]=x(0),n=h(null),_=h(null),o=h(null),{ref:C,inView:w}=O();F(z,()=>o.current);const H=typeof t=="string"?t:t&&M({data:t,converters:T}),b=typeof i=="string"?i:i&&M({data:i,converters:T});L(()=>{w&&!u?(n.current?.play(),l(!0)):(n.current?.pause(),l(!1))},[w]);const f=Y(()=>{if(o.current){const v=o.current.getBoundingClientRect(),c=window.innerHeight,S=window.scrollY||window.pageYOffset,V=v.bottom+S,k=document.documentElement.scrollHeight-V;B(k>c?c:k)}if(o.current){const v=o.current.clientHeight,c=window.innerHeight;I(v+c)}},600);L(()=>(f(),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}),[]);const g="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(G,{children:[r&&e("div",{ref:o,className:d("relative z-10 ",g),children:e("div",{children:p("div",{ref:C,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4",children:[H&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),b&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),!a&&u&&e(q,{variant:"link",className:d("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(n.current&&n.current.pause(),l(!1)):(n.current&&n.current.play(),l(!0)),s&&s?.()},children:u})]})})}),p("div",{style:r?{marginBottom:`-${y}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:d("relative overflow-hidden",r?"h-screen w-screen":g,m,{"aiui-dark":P==="dark","rounded-box":E==="rounded"}),children:e("div",{children:p("div",{ref:_,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:n,className:"size-full object-cover",src:N?.url,muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})})}),e("div",{className:d(r&&"relative box-content block",g),style:r?{height:`${y}px`}:{}})]})]})});var se=j(A);export{se as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-screen' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as p,forwardRef as w}from"react";import{cn as x}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import{Picture as b}from"../../components/index.js";import{Dialog as y,DialogContent as M}from"../../components/dialog.js";import k from"../Title/index.js";import N from"../SwiperBox/index.js";import{Container as P}from"../../components/container.js";import{convertLexicalToHTML as C}from"@payloadcms/richtext-lexical/html";const B=({data:t,configuration:l})=>o("div",{className:x("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(b,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t
|
|
1
|
+
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as p,forwardRef as w}from"react";import{cn as x}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import{Picture as b}from"../../components/index.js";import{Dialog as y,DialogContent as M}from"../../components/dialog.js";import k from"../Title/index.js";import N from"../SwiperBox/index.js";import{Container as P}from"../../components/container.js";import{convertLexicalToHTML as C}from"@payloadcms/richtext-lexical/html";const B=({data:t,configuration:l})=>o("div",{className:x("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(b,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&e("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),V=w(({data:{items:t=[],shape:l="square",title:i,containerProps:d},className:r="",key:m,onVideoPlayBtnClick:f},c)=>{const[n,a]=p(!1),[u,s]=p(""),v=typeof i=="string"?i:i&&C({data:i});return o("div",{className:r,children:[e("div",{className:"mediaplayermulti-box",children:e(P,{...d||{},className:"overflow-hidden",children:o("div",{className:r,ref:c,children:[i&&e(k,{data:{title:v||""}}),e(N,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+m,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:f,setVisible:a,setVideoUrl:s}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:1.55},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(y,{open:n,onOpenChange:h=>{a(h),s("")},children:o(M,{className:"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[n?e("video",{className:"size-full object-cover",src:u,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{a(!1),s("")},className:"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var U=g(V);export{U as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 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 )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1.55,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useState", "forwardRef", "cn", "withStyles", "Picture", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "flag", "MediaPlayerMulti_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as V,jsx as a,jsxs as s}from"react/jsx-runtime";import _,{useState as I,useEffect as L,useRef as $}from"react";import{useMediaQuery as S}from"react-responsive";import{withStyles as C}from"../../shared/Styles.js";import B from"../../components/picture.js";import M from"../../components/button.js";import{Heading as R}from"../../components/heading.js";import{Text as A}from"../../components/text.js";import{Grid as D,GridItem as T}from"../../components/gird.js";import E from"../Title/index.js";import{cn as j}from"../../helpers/utils.js";import x from"../SwiperBox/index.js";import{Tabs as H,TabsList as z,TabsTrigger as U,TabsContent as Q}from"../../components/tabs.js";import{useExposure as q}from"../../hooks/useExposure.js";import{useAiuiContext as N}from"../AiuiProvider/index.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";import{gaTrack as O}from"../../shared/track.js";const k="image",g="p1_banner",u=({data:m,configuration:o,jIndex:i})=>{const[p,f]=I(!1),r=S({query:"(max-width: 768px)"}),{trackingData:l}=N(),{profileActivated:v}=l,h=$(null),w=()=>{switch(o?.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]";default:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]"}};q(h,{componentType:k,componentName:g,position:i,componentTitle:m.title,componentDescription:m.description,memberActiveStatus:v?"active":"not active",navigation:o?.activeTab}),L(()=>{f(r)},[r]);const{theme:n="light",title:b,description:c,imageUrl:e,primaryButton:t,secondaryButton:d,imageMobileUrl:G}=m,y="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return s("div",{className:j("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?w():"tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":n==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:h,children:[a(B,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),a(B,{source:G?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),s("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[s("div",{children:[a(R,{size:3,className:"item-title",html:b}),a(A,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:c})]}),s("div",{className:"flex gap-[16px]",children:[d&&d.text&&a("a",{href:P(d.link,`${k}_${g}`),children:a(M,{className:y,variant:"secondary",children:d.text})}),t&&t.text&&a("a",{href:P(t.link,`${k}_${g}`),children:a(M,{className:y,variant:"primary",children:t.text})})]})]})]})},F=_.forwardRef((m,o)=>{const{shape:i,sectionTitle:p,groupByTab:f=!1,items:r=[],carousel:l}=m.data,{trackingData:v}=N(),{profileActivated:h}=v,w=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=r.map(e=>e.tabName).filter(Boolean).filter((e,t,d)=>d.indexOf(e)===t),b=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},c=n.map(e=>({tabName:e,items:r.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&a(E,{data:{title:p},className:"section-title"}),f?s(H,{shape:i,align:"left",defaultValue:n[0],children:[a(z,{children:n.map((e,t)=>a(U,{value:e,onClick:()=>{O({event:"ga4Event",event_name:"component_click",member_active_status:h?"active":"not active",event_parameters:{page_group:"Home Page",component_type:k,component_name:g,component_title:p,component_position:1,navigation:e}})},children:e},t))}),n.map((e,t)=>a(Q,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(V,{children:[a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:c?.[e]||[],configuration:{shape:i,isTab:f,activeTab:e,num:c?.[e]?.length||0}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(c?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(c?.[e]?.length||0)}}}),l&&l?.items.length>0?a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:l?.items||[],configuration:{shape:i,isTab:f}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},t))]}):s(V,{children:[s(D,{className:"w-full",children:[r.map((e,t)=>a(T,{span:w(e.width??"full"),className:"laptop:block hidden",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`)),r.map((e,t)=>a(T,{span:w("full"),className:"laptop:hidden block",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`))]}),l&&l?.items.length>0?a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:l?.items||[],configuration:{shape:i}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var ce=C(F);export{ce as default};
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|