@anker-in/headless-ui 0.0.59-alpha.5 → 0.0.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/cjs/biz-components/Graphic/index.d.ts +1 -4
- 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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +0 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- 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/MediaPlayerBase/types.d.ts +0 -2
- package/dist/cjs/biz-components/MediaPlayerBase/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/YouTubePlayer.d.ts +3 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/YouTubePlayer.js +2 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/YouTubePlayer.js.map +7 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerSticky/types.d.ts +0 -3
- package/dist/cjs/biz-components/MediaPlayerSticky/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/types.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/components/picture.js +1 -1
- package/dist/cjs/components/picture.js.map +2 -2
- package/dist/cjs/stories/HeroBanner.stories.d.ts +0 -1
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +3 -3
- package/dist/cjs/stories/graphic.stories.d.ts +0 -3
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.d.ts +1 -4
- 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/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +0 -1
- 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/MediaPlayerBase/types.d.ts +0 -2
- package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.d.ts +3 -0
- package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.js +2 -0
- package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.js.map +7 -0
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerSticky/types.d.ts +0 -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/components/picture.js +1 -1
- package/dist/esm/components/picture.js.map +2 -2
- package/dist/esm/stories/HeroBanner.stories.d.ts +0 -1
- package/dist/esm/stories/HeroBanner.stories.js +2 -2
- package/dist/esm/stories/HeroBanner.stories.js.map +3 -3
- package/dist/esm/stories/graphic.stories.d.ts +0 -3
- package/package.json +1 -1
- package/dist/cjs/biz-components/VideoModal/YouTubePlayer.d.ts +0 -4
- package/dist/cjs/biz-components/VideoModal/YouTubePlayer.js +0 -2
- package/dist/cjs/biz-components/VideoModal/YouTubePlayer.js.map +0 -7
- package/dist/cjs/biz-components/VideoModal/index.d.ts +0 -10
- package/dist/cjs/biz-components/VideoModal/index.js +0 -2
- package/dist/cjs/biz-components/VideoModal/index.js.map +0 -7
- package/dist/esm/biz-components/VideoModal/YouTubePlayer.d.ts +0 -4
- package/dist/esm/biz-components/VideoModal/YouTubePlayer.js +0 -2
- package/dist/esm/biz-components/VideoModal/YouTubePlayer.js.map +0 -7
- package/dist/esm/biz-components/VideoModal/index.d.ts +0 -10
- package/dist/esm/biz-components/VideoModal/index.js +0 -2
- package/dist/esm/biz-components/VideoModal/index.js.map +0 -7
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var S=Object.create;var n=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of R(t))!q.call(e,i)&&i!==o&&n(e,i,{get:()=>t[i],enumerable:!(a=H(t,i))||a.enumerable});return e};var w=(e,t,o)=>(o=e!=null?S(U(e)):{},v(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),Z=e=>v(n({},"__esModule",{value:!0}),e);var A={};E(A,{default:()=>W});module.exports=Z(A);var l=require("react/jsx-runtime"),s=require("react"),N=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),r=require("../../components/index.js"),p=require("../../components/dialog.js"),P=w(require("../Title/index.js")),C=w(require("../SwiperBox/index.js")),T=require("../../components/container.js"),I=require("./YouTubePlayer.js"),B=require("@payloadcms/richtext-lexical/html"),L=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js");const k="video",y="media_player_multi",$=({data:e,configuration:t})=>(0,l.jsxs)("div",{className:(0,N.cn)("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",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.YoutubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.setVisible?.(!0),e?.isYouTube?t?.setYouTubeId?.(e?.YoutubeId):t?.setVideoUrl?.(e?.video?.url),t?.onVideoPlayBtnClick?.(t?.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:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{href:(0,V.trackUrlRef)(e?.href,`${k}_${y}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] 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:e.description})]})]}),O=(0,s.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:i="",key:_,onVideoPlayBtnClick:z},D)=>{const[Y,d]=(0,s.useState)(!1),[m,c]=(0,s.useState)(""),[u,f]=(0,s.useState)(""),h=typeof o=="string"?o:o&&(0,B.convertLexicalToHTML)({data:o}),x=(0,s.useRef)(null),b=()=>{c(""),f("")};(0,L.useExposure)(x,{componentType:k,componentName:y,componentTitle:h});const g=e.length;return(0,l.jsxs)("div",{className:i,ref:x,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(T.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:D,children:[o&&(0,l.jsx)(P.default,{className:"mediaplayermulti-title",data:{title:h||""}}),(0,l.jsx)(C.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+_,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:z,setVisible:d,setVideoUrl:c,setYouTubeId:f}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:g===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),(0,l.jsx)(p.Dialog,{open:Y,onOpenChange:j=>{d(j),b()},children:(0,l.jsxs)(p.DialogContent,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[u?(0,l.jsx)(I.YouTubePlayer,{youTubeId:u}):null,m?(0,l.jsx)("video",{className:"size-full object-cover",src:m,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,l.jsx)("div",{onClick:()=>{d(!1),b()},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,l.jsx)("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:(0,l.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var W=(0,M.withStyles)(O);
|
|
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, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport {
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } 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 { YouTubePlayer } from './YouTubePlayer.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\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=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.YoutubeId) && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n if (data?.isYouTube) {\n configuration?.setYouTubeId?.(data?.YoutubeId)\n } else {\n configuration?.setVideoUrl?.(data?.video?.url)\n }\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 gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] 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 [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const clearContent = () => {\n setVideoUrl('')\n setYouTubeId('')\n }\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\n }}\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.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\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 clearContent()\n }}\n >\n <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n clearContent()\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 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
|
+
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_dialog", "import_Title", "import_SwiperBox", "import_container", "import_YouTubePlayer", "import_html", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "clearContent", "itemsLength", "Title", "SwiperBox", "flag"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n mobileImg?: Img\n video?: Video\n
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n mobileImg?: Img\n video?: Video\n YoutubeId?: string\n isYouTube?: boolean\n quote?: string\n href?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n shape?: 'round' | 'square'\n items: MediaPlayerItemProps[]\n containerProps?: ContainerProps\n }\n onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var D=Object.create;var p=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ae=(r,s)=>{for(var t in s)p(r,t,{get:s[t],enumerable:!0})},P=(r,s,t,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of te(s))!se.call(r,o)&&o!==t&&p(r,o,{get:()=>s[o],enumerable:!(l=ee(s,o))||l.enumerable});return r};var n=(r,s,t)=>(t=r!=null?D(re(r)):{},P(s||!r||!r.__esModule?p(t,"default",{value:r,enumerable:!0}):t,r)),oe=r=>P(p({},"__esModule",{value:!0}),r);var ce={};ae(ce,{default:()=>ie});module.exports=oe(ce);var e=require("react/jsx-runtime"),a=n(require("react")),L=require("es-toolkit"),T=require("react-intersection-observer"),m=require("../../helpers/utils.js"),z=require("../../shared/Styles.js"),B=n(require("../Slogan/index.js")),i=require("../../components/gird.js"),$=require("../../components/container.js"),Y=n(require("../BrandEquity/index.js")),q=n(require("../MemberEquity/index.js")),j=n(require("../Spacer/index.js")),G=n(require("gsap")),g=require("@payloadcms/richtext-lexical/html"),h=require("react-responsive"),I=n(require("../../helpers/ScrollLoadVideo.js"));const C=({defaultConverters:r})=>({...r,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),w=({children:r,spaceY:s})=>{const t=(0,h.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)($.Container,{spaceY:s,className:"!bg-transparent",children:(0,e.jsxs)(i.Grid,{children:[!t&&(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:t?12:10,children:r}),!t&&(0,e.jsx)(i.GridItem,{span:1})]})})},le=a.default.forwardRef(({children:r,id:s,components:t})=>{const l=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:l,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map(o=>{switch(o.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(w,{spaceY:"none",children:(0,e.jsx)(Y.default,{data:o,style:o?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(w,{spaceY:"none",children:(0,e.jsx)(q.default,{data:o,className:"w-full",style:o?.style})})});case"ipc-spacer":return(0,e.jsx)(j.default,{data:o,style:o?.style,className:"!bg-transparent"});default:return null}})})]})}),ne=(0,a.forwardRef)(({className:r="",id:s,data:{title:t,videoTitle:l,mobVideo:o,mobImg:c,img:d,video:u,theme:x,shape:V,components:F}})=>{const N=(0,a.useRef)(null),f=(0,a.useRef)(null),{ref:Q,inView:M}=(0,T.useInView)(),[R,O]=(0,a.useState)(!1),[_,A]=(0,a.useState)(!1),J=(0,a.useRef)(null),K=typeof t=="string"?t:t&&(0,g.convertLexicalToHTML)({data:t,converters:C});typeof l=="string"||l&&(0,g.convertLexicalToHTML)({data:l,converters:C});const[k,U]=(0,a.useState)(0),[y,W]=(0,a.useState)(!1),E=(0,h.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{W(E)},[E]);const v=(0,L.debounce)(()=>{if(f.current){const b=f.current.getBoundingClientRect(),H=window.innerHeight,X=window.scrollY||window.pageYOffset,Z=b.bottom+X,S=document.documentElement.scrollHeight-Z;U(S>H?H:S)}},2e3);return(0,a.useEffect)(()=>{M&&!R&&(N.current?.play(),O(!0))},[M,R]),(0,a.useEffect)(()=>(v(),window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)}),[]),(0,a.useEffect)(()=>{const b=window.screen.height;G.default.timeline({scrollTrigger:{trigger:`#${s}`,start:"top top",end:`top+=${b*1.8}px bottom`,scrub:0}}).to(`#${s} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[k]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:s,className:(0,m.cn)("relative z-20 h-screen w-full",r,{"aiui-dark":x==="dark","rounded-box":V==="rounded"}),ref:J,children:(0,e.jsx)("div",{ref:Q,className:"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(w,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(B.default,{className:"sticky-title",data:{title:K||"",theme:x}})})})}),(0,e.jsxs)("div",{ref:f,style:{marginBottom:`-${k}px`},className:(0,m.cn)(s,"relative mt-[-200vh]"),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("media-cover","relative h-screen w-full"),children:[u?.url&&(0,e.jsx)(I.default,{videoRef:N,poster:y&&c?.url?c?.url:d?.url,src:y&&o?.url?o?.url:u?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{A(!0)}}),d?.url&&(!u?.url||_)&&(0,e.jsx)("img",{src:y&&c?.url?c?.url:d?.url,alt:d?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover opacity-1 absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(le,{components:F}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var ie=(0,z.withStyles)(ne);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport {
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\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 SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className=\"!bg-transparent\">\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, mobVideo, mobImg, img, video, theme, shape, components } }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.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 }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n const height = window.screen.height\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n // .to(`.${id} .sticky-cover`, {\n // opacity: 1,\n // duration: 0.4,\n // })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [btb])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {/* {video?.url && (\n <video\n ref={videoRef}\n className=\"size-full object-cover object-[82%]\"\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n muted\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )} */}\n {video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover opacity-1 absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "React", "id", "components", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "gsap", "Slogan", "ScrollLoadVideo"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var r=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var a=(o,e,m,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of n(e))!s.call(o,t)&&t!==m&&r(o,t,{get:()=>e[t],enumerable:!(p=i(e,t))||p.enumerable});return o};var y=o=>a(r({},"__esModule",{value:!0}),o);var d={};module.exports=y(d);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\nimport type { BrandEquityProps } from '../BrandEquity/types.js'\nimport type { MemberEquityProps } from '../MemberEquity/types.js'\n\nexport type MediaPlayerComponent = BrandEquityProps | MemberEquityProps\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n data: {\n shape?: Shape\n theme?: Theme\n title?: string\n videoTitle?: string\n btnText?: string\n img?: Img\n mobImg?: Img\n video?: Video\n mobVideo?: Video\n
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\nimport type { BrandEquityProps } from '../BrandEquity/types.js'\nimport type { MemberEquityProps } from '../MemberEquity/types.js'\n\nexport type MediaPlayerComponent = BrandEquityProps | MemberEquityProps\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n data: {\n shape?: Shape\n theme?: Theme\n title?: string\n videoTitle?: string\n btnText?: string\n img?: Img\n mobImg?: Img\n video?: Video\n mobVideo?: Video\n components?: MediaPlayerComponent[]\n }\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var J=Object.create;var x=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,t)=>{for(var i in t)x(e,i,{get:t[i],enumerable:!0})},C=(e,t,i,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of X(t))!Z.call(e,a)&&a!==i&&x(e,a,{get:()=>t[a],enumerable:!(p=K(t,a))||p.enumerable});return e};var l=(e,t,i)=>(i=e!=null?J(Y(e)):{},C(t||!e||!e.__esModule?x(i,"default",{value:e,enumerable:!0}):i,e)),te=e=>C(x({},"__esModule",{value:!0}),e);var ne={};ee(ne,{default:()=>se});module.exports=te(ne);var r=require("react/jsx-runtime"),n=l(require("react")),h=require("../../helpers/utils.js"),I=l(require("../../components/picture.js")),_=l(require("./tabSwitch.js")),N=l(require("../../components/button.js")),M=l(require("../Title/index.js")),$=l(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),le=require("../../components/container.js"),D=require("react-responsive"),q=require("../../hooks/useExposure.js"),L=require("../../shared/track.js"),R=require("../AiuiProvider/index.js"),V=l(require("../../components/badge.js")),A=require("../../components/heading.js"),O=require("../../components/text.js"),U=require("../../shared/trackUrlRef.js");const T="image",B="product_shelf",re=999999999e-2,ie=({data:e,configuration:t})=>{const{locale:i="us",copyWriting:p}=(0,R.useAiuiContext)(),a=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),b=(o,s)=>t?.event?.primaryButton?.(o,s+1),m=(o,s)=>t?.event?.secondaryButton?.(o,s+1),c=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},g=!c?.availableForSale&&c?.price?.amount===re,w=t?.isShowTag,{price:k,basePrice:d}=(0,H.formatVariantPrice)({locale:i,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const o=e?.sku,s=e?.variants;return s?.find(v=>v?.sku===o)?.image?.url||s?.[0]?.image?.url||""};return(0,r.jsx)("div",{className:(0,h.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":a}),children:(0,r.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,r.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,r.jsx)("a",{href:(0,U.trackUrlRef)(`${i==="us"||!i?"":`/${i}`}/products/${e?.handle}`,`${T}_${B}`),children:(0,r.jsx)(I.default,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),w?(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((o,s)=>(0,r.jsx)(V.default,{children:o},s))}):null,e?.title?(0,r.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?(0,r.jsx)(O.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,(0,r.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:g?(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k||""}),(0,r.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:d||""})]})}),(0,r.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,r.jsx)(N.default,{variant:"secondary",onClick:()=>m(e,t?.index),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,r.jsx)(
|
|
3
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,r.jsx)(N.default,{variant:"primary",onClick:()=>b(e,t?.index),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},oe=n.default.forwardRef(({data:e,buildData:t,className:i="",key:p,event:a},b)=>{const[m,c]=(0,n.useState)(""),[g,w]=(0,n.useState)([]),k=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),d=(0,n.useRef)(null);(0,n.useImperativeHandle)(b,()=>d.current),(0,q.useExposure)(d,{componentType:T,componentName:B,componentTitle:e?.title,navigation:m});const{productsTab:u=[],productsCard:o=[],title:s,align:j="left",isShowTab:v=!0,tabShape:z="square",isShowTag:W=!1,...F}=e,S=f=>{const Q=f?.map(y=>{const P=t?.products?.find(G=>G?.handle===y?.handle);if(P)return{sku:y.sku,...P}})?.filter(y=>y);w(Q)};return(0,n.useEffect)(()=>{if(v){c(u?.[0]?.tab||""),S(u?.[0]?.data||[]);return}S(o)},[]),(0,r.jsxs)("div",{ref:d,className:(0,h.cn)("w-full",i,{"aiui-dark":e?.theme==="dark"}),children:[s&&(0,r.jsx)(M.default,{data:{title:s}}),v&&(0,r.jsx)("div",{className:`${k?"w-full overflow-hidden":""}`,children:(0,r.jsx)(_.default,{value:m,tabs:u,tabShape:z,onTabClick:f=>{c(f?.tab),S(f?.data||[]),(0,L.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:T,component_name:B,component_title:e?.title,component_position:1,navigation:f?.tab}})}})}),(0,r.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,r.jsx)($.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${m}`,data:{list:g,configuration:{...F,event:a,isShowTag:W}},Slide:ie,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var se=(0,E.withStyles)(oe);
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: 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 containerProps?: ContainerProps\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 getVariantPrice = (price: any) => {\n if (typeof price === 'object') {\n return price?.amount\n } else if (typeof price === 'number') {\n return price\n } else {\n return 0\n }\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: getVariantPrice(variant?.price),\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 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={data?.title || ''}\n />\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n html={data?.description || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\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.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,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "
|
|
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 { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: 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 containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\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.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,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var _=Object.create;var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of S(t))!A.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(l=x(t,o))||l.enumerable});return e};var y=(e,t,r)=>(r=e!=null?_($(e)):{},M(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),k=e=>M(f({},"__esModule",{value:!0}),e);var v={};L(v,{default:()=>X});module.exports=k(v);var g=require("react/jsx-runtime"),a=y(require("react"));const F=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],N=3960,D=3980,H=e=>F.some(t=>e==t),R=(e="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(e),T=a.default.forwardRef(({imgClassName:e="",source:t="",quality:r=2,deviceSizes:l=[375,767,1023,
|
|
1
|
+
"use strict";"use client";var _=Object.create;var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of S(t))!A.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(l=x(t,o))||l.enumerable});return e};var y=(e,t,r)=>(r=e!=null?_($(e)):{},M(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),k=e=>M(f({},"__esModule",{value:!0}),e);var v={};L(v,{default:()=>X});module.exports=k(v);var g=require("react/jsx-runtime"),a=y(require("react"));const F=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],N=3960,D=3980,H=e=>F.some(t=>e==t),R=(e="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(e),T=a.default.forwardRef(({imgClassName:e="",source:t="",quality:r=2,deviceSizes:l=[375,767,1023,1279,1439,1539,1919],className:o,loading:P="lazy",...d},b)=>{const m=(0,a.useCallback)(({src:n,width:c})=>{const i=c;try{const s=new URL(n);if(!H(s.hostname))return n;const p=s.pathname.split("/").pop()||"";if(R(p)&&!/_[0-9]{2,4}x/.test(n)){const[w,u]=p.split(".");return`${s.origin}${s.pathname.replace(p,`${w}_${i<N?i:D}x.${u}`)}`}}catch{return n}},[]),h=(0,a.useCallback)(({srcArr:n,width:c})=>{const i=c*r,s=m({src:n[0][0],width:i});let p;return n.forEach(u=>{var I=u[0];u.length>1&&parseInt(u[1],10)>=c&&(p=m({src:I,width:i}))}),(0,g.jsx)("source",{srcSet:p||s,media:`(max-width: ${c}px)`},c)},[m,r]),E=(0,a.useMemo)(()=>{if(typeof t!="string"||!t)return[];let n;try{n=t.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(s=>s.split(" ").filter(Boolean))}catch(s){return console.log(s),[]}const c=l.map(s=>h({srcArr:n,width:s})),i=m({src:n[0][0],width:1920*r});return c.push((0,g.jsx)("img",{src:i,className:`w-full ${e}`,loading:P,...d},"default")),c},[l,e,m,r,t,h]);return(0,g.jsxs)("picture",{ref:b,className:`block overflow-hidden ${o}`,children:[E,d.children]})});var X=T;
|
|
2
2
|
//# sourceMappingURL=picture.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/picture.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023,
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqEe,IAAAI,EAAA,6BApEfC,EAA4C,oBAE5C,MAAMC,EAAkC,CAAC,kBAAmB,qBAAsB,kBAAkB,EAE9FC,EAAW,KACXC,EAAiB,KAajBC,EAAiBC,GACdJ,EAAgC,KAAKK,GAAUD,GAAaC,CAAM,EAErEC,EAAwB,CAACC,EAAmB,KAAO,yCAAyC,KAAKA,CAAQ,EAEzGC,EAAU,EAAAC,QAAM,WACpB,CACE,CACE,aAAAC,EAAe,GACf,OAAAC,EAAS,GACT,QAAAC,EAAU,EACV,YAAAC,EAAc,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n className,\n loading = 'lazy',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(src)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return src\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n const [name, extension] = fileName.split('.')\n return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n fileName,\n `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n )}`\n }\n } catch (error) {\n return src\n }\n }, [])\n\n const sourceSrcSet = useCallback(\n ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n const computedWidth = width * quality\n const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n let result\n srcArr.forEach(ele => {\n var img = ele[0]\n if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n result = imgSrcSetsize({ src: img, width: computedWidth })\n }\n })\n const srcset = result || def\n return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n },\n [imgSrcSetsize, quality]\n )\n\n const sourceList = useMemo(() => {\n if (typeof source !== 'string' || !source) return []\n let srcArr\n try {\n srcArr = source\n .replace(/[\\r\\n]/g, '')\n .replace(/\\s\\s+/g, ' ')\n .split(',')\n .map(item => item.split(' ').filter(Boolean))\n } catch (error) {\n console.log(error)\n return []\n }\n const sourceList = deviceSizes.map(width => {\n return sourceSrcSet({ srcArr, width })\n })\n\n const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} loading={loading} {...rest} />)\n return sourceList\n }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet])\n\n return (\n <picture ref={ref} className={`block overflow-hidden ${className}`}>\n {sourceList}\n {rest.children}\n </picture>\n )\n }\n)\nexport default Picture\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "rest", "ref", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var c=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var c=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},p=(e,t,r,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of d(t))!f.call(e,a)&&a!==r&&n(e,a,{get:()=>t[a],enumerable:!(m=h(t,a))||m.enumerable});return e};var b=(e,t,r)=>(r=e!=null?c(k(e)):{},p(t||!e||!e.__esModule?n(r,"default",{value:e,enumerable:!0}):r,e)),P=e=>p(n({},"__esModule",{value:!0}),e);var L={};y(L,{DarkTheme:()=>u,LightTheme:()=>g,MultiBanner:()=>w,WithoutSecondaryButton:()=>x,default:()=>A});module.exports=P(L);var i=require("react/jsx-runtime"),s=b(require("../biz-components/HeroBanner/HeroBanner.js"));const B={title:"Biz-Components/HeroBanner",component:s.default,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
|
|
3
3
|
|
|
4
4
|
### \u7279\u70B9
|
|
@@ -7,5 +7,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
|
|
|
7
7
|
- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
|
|
8
8
|
- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5
|
|
9
9
|
- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868
|
|
10
|
-
`}}},tags:["autodocs"]};var B
|
|
10
|
+
`}}},tags:["autodocs"]};var A=B;const o="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",l="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",g={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:o,alt:"default background",thumbnailURL:o,mimeType:"image/jpeg"},mobileImage:{url:o,alt:"default background",thumbnailURL:o,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},u={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},mobileImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},w=()=>(0,i.jsxs)("div",{className:"flex flex-col",children:[(0,i.jsx)(s.default,{data:{...g.args.data,size:"sm"}}),(0,i.jsx)(s.default,{data:{...u.args.data,size:"sm"}})]}),x={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:o,alt:"default background",thumbnailURL:o,mimeType:"image/jpeg"},mobileImage:{url:o,alt:"default background",thumbnailURL:o,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};
|
|
11
11
|
//# sourceMappingURL=HeroBanner.stories.js.map
|