@anker-in/headless-ui 1.0.16-alpha.13 → 1.0.16-alpha.14
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/AiuiProvider/index.js +1 -1
- package/dist/cjs/biz-components/AiuiProvider/index.js.map +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/AiuiProvider/index.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.js.map +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var k=(a,e)=>{for(var o in e)p(a,o,{get:e[o],enumerable:!0})},x=(a,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!A.call(a,t)&&t!==o&&p(a,t,{get:()=>e[t],enumerable:!(s=g(e,t))||s.enumerable});return a};var C=a=>x(p({},"__esModule",{value:!0}),a);var T={};k(T,{AiuiContext:()=>c,default:()=>P,useAiuiContext:()=>_});module.exports=C(T);var b=require("react/jsx-runtime"),h=require("../../shared/track.js"),r=require("react");const c=(0,r.createContext)({trackingData:{},locale:void 0,copyWriting:{}}),_=()=>{if(!(0,r.useContext)(c))throw new Error("useAiui must be used in <AiuiProvider>");return(0,r.useContext)(c)},E=({children:a,...e})=>((0,r.useEffect)(()=>{const o=(t,n)=>{const i={};if(!n||!n.attributes)return i;for(const f of Array.from(n.attributes)){const u=f?.name;u?.startsWith("data-headless-")&&(i[u]=n.getAttribute(u))}const y=i?.["data-headless-sku"],l=i?.["data-headless-type-name"]?.split?.("#"),d=i?.["data-headless-title-desc-button"]?.split?.("#"),m=i?.["data-headless-nav-postion"]?.split?.("#");(0,h.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:e?.trackingData?.pageGroup||"Home Page",component_type:l?.[0]||"",component_name:l?.[1]||"",position:m?.[1]||"",navigation:m?.[0]||"",button_name:d?.[2]||"",SKU:y||"",component_title:d?.[0]||"",component_description:d?.[1]||""}})},s=new MutationObserver(()=>{document.querySelectorAll("[data-headless-type-name]").forEach(t=>{t.hasAttribute("data-headless-track-bound")||(t.addEventListener("click",n=>o(n,t)),t.setAttribute("data-headless-track-bound","true"))})});return s.observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll("[data-headless-type-name]").forEach(t=>{t.hasAttribute("data-headless-track-bound")||(t.addEventListener("click",n=>o(n,t)),t.setAttribute("data-headless-track-bound","true"))}),()=>s.disconnect()},[]),(0,b.jsx)(c.Provider,{value:e,children:a}));var P=E;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AiuiProvider/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n trackingData: Record<string, any>\n locale?: string\n copyWriting?: Record<string, string>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n useEffect(() => {\n const handleTrackClick = (e: any, el: any) => {\n e?.stopPropagation?.()\n const out: any = {}\n if (!el || !el.attributes) return out\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as any)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name)\n }\n }\n const sku = out?.['data-headless-sku']\n const nameType = out?.['data-headless-type-name']?.split?.('#')\n const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: rest?.trackingData?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n },\n })\n }\n const observer = new MutationObserver(() => {\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n }\n })\n })\n observer.observe(document.body, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n return () => observer.disconnect()\n }, [])\n\n return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,EAAA,mBAAAC,IAAA,eAAAC,EAAAL,GA+ES,IAAAM,EAAA,6BA/ETC,EAAwB,iCACxBC,EAA4D,iBAQrD,MAAMN,KAAc,iBAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYE,EAAiB,IAAM,CAElC,GAAI,IADY,cAAWF,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,SAAO,cAAWA,CAAW,CAC/B,EAEMO,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,QAGE,aAAU,IAAM,CACd,MAAMC,EAAmB,CAACC,EAAQC,IAAY,
|
|
4
|
+
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n trackingData: Record<string, any>\n locale?: string\n copyWriting?: Record<string, string>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n useEffect(() => {\n const handleTrackClick = (e: any, el: any) => {\n // e?.stopPropagation?.()\n const out: any = {}\n if (!el || !el.attributes) return out\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as any)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name)\n }\n }\n const sku = out?.['data-headless-sku']\n const nameType = out?.['data-headless-type-name']?.split?.('#')\n const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: rest?.trackingData?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n },\n })\n }\n const observer = new MutationObserver(() => {\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n }\n })\n })\n observer.observe(document.body, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n return () => observer.disconnect()\n }, [])\n\n return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,EAAA,mBAAAC,IAAA,eAAAC,EAAAL,GA+ES,IAAAM,EAAA,6BA/ETC,EAAwB,iCACxBC,EAA4D,iBAQrD,MAAMN,KAAc,iBAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYE,EAAiB,IAAM,CAElC,GAAI,IADY,cAAWF,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,SAAO,cAAWA,CAAW,CAC/B,EAEMO,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,QAGE,aAAU,IAAM,CACd,MAAMC,EAAmB,CAACC,EAAQC,IAAY,CAE5C,MAAMC,EAAW,CAAC,EAClB,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAAOC,EAClC,UAAWC,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAc,KACxBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,EAEpC,CACA,MAAMC,EAAMH,IAAM,mBAAmB,EAC/BI,EAAWJ,IAAM,yBAAyB,GAAG,QAAQ,GAAG,EACxDK,EAAYL,IAAM,iCAAiC,GAAG,QAAQ,GAAG,EACjEM,EAAcN,IAAM,2BAA2B,GAAG,QAAQ,GAAG,KACnE,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYJ,GAAM,cAAc,WAAa,YAC7C,eAAgBQ,IAAW,CAAC,GAAK,GACjC,eAAgBA,IAAW,CAAC,GAAK,GACjC,SAAUE,IAAc,CAAC,GAAK,GAC9B,WAAYA,IAAc,CAAC,GAAK,GAChC,YAAaD,IAAY,CAAC,GAAK,GAC/B,IAAKF,GAAO,GACZ,gBAAiBE,IAAY,CAAC,GAAK,GACnC,sBAAuBA,IAAY,CAAC,GAAK,EAC3C,CACF,CAAC,CACH,EACME,EAAW,IAAI,iBAAiB,IAAM,CAC1C,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAASD,GAAKD,EAAiBC,EAAGC,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAQ,EAAS,QAAQ,SAAS,KAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAElE,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAASD,GAAKD,EAAiBC,EAAGC,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EACM,IAAMQ,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,KAEE,OAACpB,EAAY,SAAZ,CAAqB,MAAOS,EAAO,SAAAD,EAAS,GAGtD,IAAOP,EAAQM",
|
|
6
6
|
"names": ["AiuiProvider_exports", "__export", "AiuiContext", "AiuiProvider_default", "useAiuiContext", "__toCommonJS", "import_jsx_runtime", "import_track", "import_react", "AiuiProvider", "children", "rest", "handleTrackClick", "e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "observer"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var z=Object.create;var c=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var C=(t,o)=>{for(var l in o)c(t,l,{get:o[l],enumerable:!0})},v=(t,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of j(o))!_.call(t,a)&&a!==l&&c(t,a,{get:()=>o[a],enumerable:!(p=P(o,a))||p.enumerable});return t};var I=(t,o,l)=>(l=t!=null?z(R(t)):{},v(o||!t||!t.__esModule?c(l,"default",{value:t,enumerable:!0}):l,t)),D=t=>v(c({},"__esModule",{value:!0}),t);var F={};C(F,{default:()=>S});module.exports=D(F);var e=require("react/jsx-runtime"),i=I(require("react")),h=require("react-responsive"),s=require("../../components/index.js"),N=require("../../shared/Styles.js"),y=require("../../helpers/utils.js"),f=require("../../shared/mimeType.js"),B=require("../../hooks/useExposure.js"),$=require("../../shared/trackUrlRef.js");const u="image",x="member_area",L=i.default.forwardRef(({data:t,className:o=""},l)=>{const{title:p,description:a,backgroundImage:n,mobileBackgroundImage:m,primaryButton:d,secondaryButton:r,theme:q,shape:M,primaryButtonHandler:g,secondaryButtonHandler:w}=t,E=(0,h.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,i.useRef)(null);(0,i.useImperativeHandle)(l,()=>b.current),(0,B.useExposure)(b,{componentType:u,componentName:x,componentTitle:p,componentDescription:a});const H=()=>{console.log("primaryButtonHandler",g),g?.()},T=()=>{w?.()},k="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,y.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":q==="dark","rounded-box":M==="rounded","h-[480px]":E}),ref:b,children:[(0,f.isVideo)(n?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:n?.url,type:"video/mp4"})}):(0,e.jsx)(s.Picture,{source:n?.url,alt:n?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,f.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(s.Picture,{source:m?.url,alt:m?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
|
|
2
2
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
|
|
3
3
|
laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
|
|
4
|
-
`,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(
|
|
4
|
+
`,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(s.Heading,{as:"h2",size:3,className:"member-equity-title ",html:p}),(0,e.jsx)(s.Text,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:a})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[r&&r.text&&(0,e.jsxs)(s.Button,{"aria-label":p??a,variant:"secondary",onClick:T,className:(0,y.cn)("member-equity-button-secondary ",k),as:"a",href:(0,$.trackUrlRef)(r.link,`${u}_${x}`),"data-headless-type-name":`${u}#${x}`,"data-headless-title-desc-button":`${p}#${a}#${r.text}`,children:[r.text,(0,e.jsx)("span",{className:"sr-only",children:p??a})]}),d&&d.text&&(0,e.jsx)(s.Button,{variant:"primary",onClick:H,className:(0,y.cn)("member-equity-button-primary ",k),"data-headless-type-name":`${u}#${x}`,"data-headless-title-desc-button":`${p}#${a}#${d.text}`,children:d.text})]})]})})]})});var S=(0,N.withLayout)(L);
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text\n size={2}\n className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n html={description}\n />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n as=\"a\"\n href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n }\n)\n\nexport default withLayout(MemberEquity)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n console.log('primaryButtonHandler', primaryButtonHandler)\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text\n size={2}\n className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n html={description}\n />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n as=\"a\"\n href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n }\n)\n\nexport default withLayout(MemberEquity)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_Styles", "import_utils", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MemberEquity", "React", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as v}from"react/jsx-runtime";import{gaTrack as b}from"../../shared/track.js";import{createContext as y,useContext as l,useEffect as
|
|
1
|
+
import{jsx as v}from"react/jsx-runtime";import{gaTrack as b}from"../../shared/track.js";import{createContext as y,useContext as l,useEffect as f}from"react";const r=y({trackingData:{},locale:void 0,copyWriting:{}}),C=()=>{if(!l(r))throw new Error("useAiui must be used in <AiuiProvider>");return l(r)},g=({children:i,...s})=>(f(()=>{const c=(t,e)=>{const a={};if(!e||!e.attributes)return a;for(const h of Array.from(e.attributes)){const o=h?.name;o?.startsWith("data-headless-")&&(a[o]=e.getAttribute(o))}const m=a?.["data-headless-sku"],u=a?.["data-headless-type-name"]?.split?.("#"),n=a?.["data-headless-title-desc-button"]?.split?.("#"),p=a?.["data-headless-nav-postion"]?.split?.("#");b({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:s?.trackingData?.pageGroup||"Home Page",component_type:u?.[0]||"",component_name:u?.[1]||"",position:p?.[1]||"",navigation:p?.[0]||"",button_name:n?.[2]||"",SKU:m||"",component_title:n?.[0]||"",component_description:n?.[1]||""}})},d=new MutationObserver(()=>{document.querySelectorAll("[data-headless-type-name]").forEach(t=>{t.hasAttribute("data-headless-track-bound")||(t.addEventListener("click",e=>c(e,t)),t.setAttribute("data-headless-track-bound","true"))})});return d.observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll("[data-headless-type-name]").forEach(t=>{t.hasAttribute("data-headless-track-bound")||(t.addEventListener("click",e=>c(e,t)),t.setAttribute("data-headless-track-bound","true"))}),()=>d.disconnect()},[]),v(r.Provider,{value:s,children:i}));var _=g;export{r as AiuiContext,_ as default,C as useAiuiContext};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AiuiProvider/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n trackingData: Record<string, any>\n locale?: string\n copyWriting?: Record<string, string>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n useEffect(() => {\n const handleTrackClick = (e: any, el: any) => {\n e?.stopPropagation?.()\n const out: any = {}\n if (!el || !el.attributes) return out\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as any)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name)\n }\n }\n const sku = out?.['data-headless-sku']\n const nameType = out?.['data-headless-type-name']?.split?.('#')\n const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: rest?.trackingData?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n },\n })\n }\n const observer = new MutationObserver(() => {\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n }\n })\n })\n observer.observe(document.body, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n return () => observer.disconnect()\n }, [])\n\n return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
-
"mappings": "AA+ES,cAAAA,MAAA,oBA/ET,OAAS,WAAAC,MAAe,wBACxB,OAAgB,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,MAAiB,QAQrD,MAAMC,EAAcH,EAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYI,EAAiB,IAAM,CAElC,GAAI,CADYH,EAAWE,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOF,EAAWE,CAAW,CAC/B,EAEME,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,KAGEL,EAAU,IAAM,CACd,MAAMM,EAAmB,CAACC,EAAQC,IAAY,
|
|
4
|
+
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n trackingData: Record<string, any>\n locale?: string\n copyWriting?: Record<string, string>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n useEffect(() => {\n const handleTrackClick = (e: any, el: any) => {\n // e?.stopPropagation?.()\n const out: any = {}\n if (!el || !el.attributes) return out\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as any)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name)\n }\n }\n const sku = out?.['data-headless-sku']\n const nameType = out?.['data-headless-type-name']?.split?.('#')\n const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: rest?.trackingData?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n },\n })\n }\n const observer = new MutationObserver(() => {\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n }\n })\n })\n observer.observe(document.body, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n return () => observer.disconnect()\n }, [])\n\n return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
+
"mappings": "AA+ES,cAAAA,MAAA,oBA/ET,OAAS,WAAAC,MAAe,wBACxB,OAAgB,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,MAAiB,QAQrD,MAAMC,EAAcH,EAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYI,EAAiB,IAAM,CAElC,GAAI,CADYH,EAAWE,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOF,EAAWE,CAAW,CAC/B,EAEME,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,KAGEL,EAAU,IAAM,CACd,MAAMM,EAAmB,CAACC,EAAQC,IAAY,CAE5C,MAAMC,EAAW,CAAC,EAClB,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAAOC,EAClC,UAAWC,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAc,KACxBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,EAEpC,CACA,MAAMC,EAAMH,IAAM,mBAAmB,EAC/BI,EAAWJ,IAAM,yBAAyB,GAAG,QAAQ,GAAG,EACxDK,EAAYL,IAAM,iCAAiC,GAAG,QAAQ,GAAG,EACjEM,EAAcN,IAAM,2BAA2B,GAAG,QAAQ,GAAG,EACnEZ,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYQ,GAAM,cAAc,WAAa,YAC7C,eAAgBQ,IAAW,CAAC,GAAK,GACjC,eAAgBA,IAAW,CAAC,GAAK,GACjC,SAAUE,IAAc,CAAC,GAAK,GAC9B,WAAYA,IAAc,CAAC,GAAK,GAChC,YAAaD,IAAY,CAAC,GAAK,GAC/B,IAAKF,GAAO,GACZ,gBAAiBE,IAAY,CAAC,GAAK,GACnC,sBAAuBA,IAAY,CAAC,GAAK,EAC3C,CACF,CAAC,CACH,EACME,EAAW,IAAI,iBAAiB,IAAM,CAC1C,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAQ,EAAS,QAAQ,SAAS,KAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAElE,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EACM,IAAMQ,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,EAEEpB,EAACK,EAAY,SAAZ,CAAqB,MAAOI,EAAO,SAAAD,EAAS,GAGtD,IAAOa,EAAQd",
|
|
6
6
|
"names": ["jsx", "gaTrack", "createContext", "useContext", "useEffect", "AiuiContext", "useAiuiContext", "AiuiProvider", "children", "rest", "handleTrackClick", "e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "observer", "AiuiProvider_default"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import M,{useImperativeHandle as w,useRef as E}from"react";import{useMediaQuery as H}from"react-responsive";import{Button as x,Heading as T,Picture as y,Text as z}from"../../components/index.js";import{withLayout as P}from"../../shared/Styles.js";import{cn as d}from"../../helpers/utils.js";import{isVideo as b}from"../../shared/mimeType.js";import{useExposure as j}from"../../hooks/useExposure.js";import{trackUrlRef as R}from"../../shared/trackUrlRef.js";const r="image",n="member_area",_=M.forwardRef(({data:f,className:g=""},k)=>{const{title:t,description:o,backgroundImage:s,mobileBackgroundImage:p,primaryButton:i,secondaryButton:a,theme:v,shape:h,primaryButtonHandler:c,secondaryButtonHandler:N}=f,B=H({query:"(max-width: 768px)"}),m=E(null);w(k,()=>m.current),j(m,{componentType:r,componentName:n,componentTitle:t,componentDescription:o});const $=()=>{console.log("primaryButtonHandler",c),c?.()},q=()=>{N?.()},u="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("section",{"data-ui-component-id":"MemberEquity",className:d("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",g,{"aiui-dark":v==="dark","rounded-box":h==="rounded","h-[480px]":B}),ref:m,children:[b(s?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:s?.url,type:"video/mp4"})}):e(y,{source:s?.url,alt:s?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),b(p?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:p?.url,type:"video/mp4"})}):e(y,{source:p?.url,alt:p?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:l("div",{className:`
|
|
2
2
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
|
|
3
3
|
laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
|
|
4
|
-
`,children:[
|
|
4
|
+
`,children:[l("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(T,{as:"h2",size:3,className:"member-equity-title ",html:t}),e(z,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:o})]}),l("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a&&a.text&&l(x,{"aria-label":t??o,variant:"secondary",onClick:q,className:d("member-equity-button-secondary ",u),as:"a",href:R(a.link,`${r}_${n}`),"data-headless-type-name":`${r}#${n}`,"data-headless-title-desc-button":`${t}#${o}#${a.text}`,children:[a.text,e("span",{className:"sr-only",children:t??o})]}),i&&i.text&&e(x,{variant:"primary",onClick:$,className:d("member-equity-button-primary ",u),"data-headless-type-name":`${r}#${n}`,"data-headless-title-desc-button":`${t}#${o}#${i.text}`,children:i.text})]})]})})]})});var V=P(_);export{V as default};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text\n size={2}\n className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n html={description}\n />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n as=\"a\"\n href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n }\n)\n\nexport default withLayout(MemberEquity)\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n console.log('primaryButtonHandler', primaryButtonHandler)\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text\n size={2}\n className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n html={description}\n />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n as=\"a\"\n href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n }\n)\n\nexport default withLayout(MemberEquity)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withLayout", "cn", "isVideo", "useExposure", "trackUrlRef", "componentType", "componentName", "MemberEquity", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
|
|
7
7
|
}
|