@anker-in/headless-ui 1.1.9-alpha.1764590742027 → 1.1.9-alpha.1764672257595
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/Listing/components/PaidShipping/LearnMore.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.d.ts +2 -0
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +4 -4
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +3 -3
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.d.ts +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.js +1 -1
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.js.map +1 -1
- package/dist/cjs/biz-components/ProductCompare/index.js +1 -1
- package/dist/cjs/biz-components/ProductCompare/index.js.map +2 -2
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.d.ts +2 -0
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +2 -0
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +4 -4
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +3 -3
- package/dist/esm/biz-components/MediaSceneSwitcher/types.d.ts +2 -0
- package/dist/esm/biz-components/ProductCompare/index.js +1 -1
- package/dist/esm/biz-components/ProductCompare/index.js.map +2 -2
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/package.json +1 -1
- package/tailwind.config.js +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var s=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(o,e)=>{for(var i in e)s(o,i,{get:e[i],enumerable:!0})},f=(o,e,i,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of c(e))!d.call(o,a)&&a!==i&&s(o,a,{get:()=>e[a],enumerable:!(p=x(e,a))||p.enumerable});return o};var g=o=>f(s({},"__esModule",{value:!0}),o);var N={};m(N,{default:()=>v});module.exports=g(N);var t=require("react/jsx-runtime"),l=require("../../../../components/index.js"),n=require("../../../AiuiProvider/index.js"),r=require("../../../../helpers/index.js");const u=o=>{const{className:e,setOpenShippingPolicyModal:i,metafields:p}=o,{copyWriting:a}=(0,n.useAiuiContext)();return(0,t.jsxs)("div",{tabIndex:-1,className:(0,r.cn)("from-4.29% to-101.05% laptop:rounded-2xl laptop:py-5 relative items-start gap-[16px] overflow-hidden rounded-xl bg-gradient-to-r from-[rgba(215,245,254,0.24)] to-[rgba(215,245,254,0.80)] p-4 text-[#1F2021] md:py-[16px]","flex flex-col",e),children:[(0,t.jsx)(l.Picture,{source:p?.shippingPolicyIcon,className:"absolute -bottom-10 -right-10 z-[1] size-[150px]"}),(0,t.jsxs)("div",{className:"relative z-10 flex w-full items-start justify-between",children:[(0,t.jsxs)("div",{className:"laptop:gap-2 lg-desktop:gap-4 flex flex-col gap-3",children:[(0,t.jsx)(l.Text,{size:2,className:"laptop:text-[16px] lg-desktop:text-[18px] text-[14px]",children:p?.shippingPolicyTitle}),(0,t.jsx)(l.Text,{size:1,as:"p",className:"laptop:text-[14px] text-[12px] text-[#6D6D6F]",children:p?.loginBeforeCheckoutNote})]}),(0,t.jsx)(l.Button,{variant:"link",className:"laptop:inline-flex hidden whitespace-nowrap !p-0",onClick:()=>{i(!0)},children:a?.learnMore})]}),(0,t.jsx)(l.Button,{variant:"link",className:"laptop:hidden inline-flex p-0",onClick:()=>{i(!0)},children:a?.learnMore})]})};var v=u;
|
|
2
2
|
//# sourceMappingURL=LearnMore.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/LearnMore.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Picture, Text } from '../../../../components/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { cn } from '../../../../helpers/index.js'\n\nconst LearnMore = (props: any) => {\n const { className, setOpenShippingPolicyModal, metafields } = props\n const {
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["LearnMore_exports", "__export", "LearnMore_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_helpers", "LearnMore", "props", "className", "setOpenShippingPolicyModal", "metafields", "
|
|
4
|
+
"sourcesContent": ["import { Button, Picture, Text } from '../../../../components/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { cn } from '../../../../helpers/index.js'\n\nconst LearnMore = (props: any) => {\n const { className, setOpenShippingPolicyModal, metafields } = props\n const { copyWriting } = useAiuiContext()\n\n return (\n <div\n tabIndex={-1}\n className={cn(\n 'from-4.29% to-101.05% laptop:rounded-2xl laptop:py-5 relative items-start gap-[16px] overflow-hidden rounded-xl bg-gradient-to-r from-[rgba(215,245,254,0.24)] to-[rgba(215,245,254,0.80)] p-4 text-[#1F2021] md:py-[16px]',\n 'flex flex-col',\n className\n )}\n >\n <Picture source={metafields?.shippingPolicyIcon} className=\"absolute -bottom-10 -right-10 z-[1] size-[150px]\" />\n <div className=\"relative z-10 flex w-full items-start justify-between\">\n <div className=\"laptop:gap-2 lg-desktop:gap-4 flex flex-col gap-3\">\n <Text size={2} className=\"laptop:text-[16px] lg-desktop:text-[18px] text-[14px]\">\n {metafields?.shippingPolicyTitle}\n </Text>\n <Text size={1} as=\"p\" className=\"laptop:text-[14px] text-[12px] text-[#6D6D6F]\">\n {metafields?.loginBeforeCheckoutNote}\n </Text>\n </div>\n <Button\n variant=\"link\"\n className=\"laptop:inline-flex hidden whitespace-nowrap !p-0\"\n onClick={() => {\n setOpenShippingPolicyModal(true)\n }}\n >\n {copyWriting?.learnMore}\n </Button>\n </div>\n\n <Button\n variant=\"link\"\n className=\"laptop:hidden inline-flex p-0\"\n onClick={() => {\n setOpenShippingPolicyModal(true)\n }}\n >\n {copyWriting?.learnMore}\n </Button>\n </div>\n )\n}\n\nexport default LearnMore\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiBM,IAAAI,EAAA,6BAjBNC,EAAsC,2CACtCC,EAA+B,0CAC/BC,EAAmB,wCAEnB,MAAMC,EAAaC,GAAe,CAChC,KAAM,CAAE,UAAAC,EAAW,2BAAAC,EAA4B,WAAAC,CAAW,EAAIH,EACxD,CAAE,YAAAI,CAAY,KAAI,kBAAe,EAEvC,SACE,QAAC,OACC,SAAU,GACV,aAAW,MACT,6NACA,gBACAH,CACF,EAEA,oBAAC,WAAQ,OAAQE,GAAY,mBAAoB,UAAU,mDAAmD,KAC9G,QAAC,OAAI,UAAU,wDACb,qBAAC,OAAI,UAAU,oDACb,oBAAC,QAAK,KAAM,EAAG,UAAU,wDACtB,SAAAA,GAAY,oBACf,KACA,OAAC,QAAK,KAAM,EAAG,GAAG,IAAI,UAAU,gDAC7B,SAAAA,GAAY,wBACf,GACF,KACA,OAAC,UACC,QAAQ,OACR,UAAU,mDACV,QAAS,IAAM,CACbD,EAA2B,EAAI,CACjC,EAEC,SAAAE,GAAa,UAChB,GACF,KAEA,OAAC,UACC,QAAQ,OACR,UAAU,gCACV,QAAS,IAAM,CACbF,EAA2B,EAAI,CACjC,EAEC,SAAAE,GAAa,UAChB,GACF,CAEJ,EAEA,IAAOX,EAAQM",
|
|
6
|
+
"names": ["LearnMore_exports", "__export", "LearnMore_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_helpers", "LearnMore", "props", "className", "setOpenShippingPolicyModal", "metafields", "copyWriting"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var p in t)d(e,p,{get:t[p],enumerable:!0})},N=(e,t,p,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of g(t))!v.call(e,r)&&r!==p&&d(e,r,{get:()=>t[r],enumerable:!(l=y(t,r))||l.enumerable});return e};var E=e=>N(d({},"__esModule",{value:!0}),e);var C={};h(C,{default:()=>k});module.exports=E(C);var o=require("react/jsx-runtime"),x=require("../../utils/index.js"),s=require("../../../AiuiProvider/index.js"),n=require("../../../../components/index.js"),a=require("../../../../helpers/index.js"),m=require("./type.js");const w=({item:e,index:t,active:p,toggleShipping:l,currencyCode:r,metafields:b,className:c=""})=>{const{copyWriting:u,locale:f="us"}=(0,s.useAiuiContext)();return(0,o.jsxs)("div",{role:"button",tabIndex:0,onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&l(e,t)},className:(0,a.cn)("laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]",{"cursor-not-allowed opacity-60":e.disabled,"border-brand":p},c),onClick:()=>l(e,t),children:[(0,o.jsxs)("div",{className:"relative",children:[(0,o.jsx)(n.Text,{className:(0,a.cn)("laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]",{}),as:"p",html:e.title}),(0,o.jsx)(n.Text,{className:(0,a.cn)("laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]",{}),as:"p",html:e.subtitle})]}),(0,o.jsx)(n.Text,{className:(0,a.cn)("relative my-auto h-fit text-xl font-bold",{}),as:"p",html:e.price?(0,x.formatPrice)({amount:e.price,currencyCode:r,locale:f,removeTrailingZeros:!0}):u?.free}),e.mode!==m.ShippingMethodMode.FREE&&(0,o.jsx)("div",{className:(0,a.cn)("bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white"),children:b?.memberOnly})]})};var k=w;
|
|
2
2
|
//# sourceMappingURL=ShippingMethod.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingMethod.tsx"],
|
|
4
|
-
"sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n item,\n index,\n active,\n toggleShipping,\n currencyCode,\n metafields,\n className = '',\n}: {\n item: any\n index: number\n active: boolean\n toggleShipping: (item: any, index: number) => void\n currencyCode: string\n metafields: any\n className?: string\n}) => {\n const {
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ShippingMethod_exports", "__export", "ShippingMethod_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_AiuiProvider", "import_components", "import_helpers", "import_type", "ShippingMethod", "item", "index", "active", "toggleShipping", "currencyCode", "metafields", "className", "
|
|
4
|
+
"sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n item,\n index,\n active,\n toggleShipping,\n currencyCode,\n metafields,\n className = '',\n}: {\n item: any\n index: number\n active: boolean\n toggleShipping: (item: any, index: number) => void\n currencyCode: string\n metafields: any\n className?: string\n}) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n toggleShipping(item, index)\n }\n }}\n className={cn(\n 'laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]',\n {\n 'cursor-not-allowed opacity-60': item.disabled,\n 'border-brand': active,\n },\n className\n )}\n onClick={() => toggleShipping(item, index)}\n >\n <div className=\"relative\">\n <Text\n className={cn('laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]', {})}\n as=\"p\"\n html={item.title}\n />\n <Text\n className={cn('laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]', {})}\n as=\"p\"\n html={item.subtitle}\n />\n </div>\n\n <Text\n className={cn('relative my-auto h-fit text-xl font-bold', {})}\n as=\"p\"\n html={\n item.price\n ? formatPrice({\n amount: item.price,\n currencyCode,\n locale,\n removeTrailingZeros: true,\n })\n : copyWriting?.free\n }\n />\n {item.mode !== ShippingMethodMode.FREE && (\n <div\n className={cn(\n 'bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white'\n )}\n >\n {metafields?.memberOnly}\n </div>\n )}\n </div>\n )\n}\n\nexport default ShippingMethod\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4CM,IAAAI,EAAA,6BA5CNC,EAA4B,gCAC5BC,EAA+B,0CAC/BC,EAAqB,2CACrBC,EAAmB,wCACnBC,EAAmC,qBAEnC,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,EACd,IAQM,CACJ,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAEtD,SACE,QAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWC,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCN,EAAeH,EAAMC,CAAK,CAE9B,EACA,aAAW,MACT,kKACA,CACE,gCAAiCD,EAAK,SACtC,eAAgBE,CAClB,EACAI,CACF,EACA,QAAS,IAAMH,EAAeH,EAAMC,CAAK,EAEzC,qBAAC,OAAI,UAAU,WACb,oBAAC,QACC,aAAW,MAAG,gFAAiF,CAAC,CAAC,EACjG,GAAG,IACH,KAAMD,EAAK,MACb,KACA,OAAC,QACC,aAAW,MAAG,iFAAkF,CAAC,CAAC,EAClG,GAAG,IACH,KAAMA,EAAK,SACb,GACF,KAEA,OAAC,QACC,aAAW,MAAG,2CAA4C,CAAC,CAAC,EAC5D,GAAG,IACH,KACEA,EAAK,SACD,eAAY,CACV,OAAQA,EAAK,MACb,aAAAI,EACA,OAAAI,EACA,oBAAqB,EACvB,CAAC,EACDD,GAAa,KAErB,EACCP,EAAK,OAAS,qBAAmB,SAChC,OAAC,OACC,aAAW,MACT,wIACF,EAEC,SAAAK,GAAY,WACf,GAEJ,CAEJ,EAEA,IAAOd,EAAQQ",
|
|
6
|
+
"names": ["ShippingMethod_exports", "__export", "ShippingMethod_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_AiuiProvider", "import_components", "import_helpers", "import_type", "ShippingMethod", "item", "index", "active", "toggleShipping", "currencyCode", "metafields", "className", "copyWriting", "locale", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var h=Object.create;var
|
|
1
|
+
"use strict";var h=Object.create;var x=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var k=(a,r)=>{for(var o in r)x(a,o,{get:r[o],enumerable:!0})},b=(a,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of G(r))!I.call(a,s)&&s!==o&&x(a,s,{get:()=>r[s],enumerable:!(d=E(r,s))||d.enumerable});return a};var z=(a,r,o)=>(o=a!=null?h(w(a)):{},b(r||!a||!a.__esModule?x(o,"default",{value:a,enumerable:!0}):o,a)),P=a=>b(x({},"__esModule",{value:!0}),a);var F={};k(F,{default:()=>_});module.exports=P(F);var e=require("react/jsx-runtime"),u=require("react"),t=require("../../../../../../components/index.js"),v=require("../../../../BizProductProvider.js"),N=z(require("./Select.js")),y=require("../../../../../AiuiProvider/index.js"),f=require("../../../../utils/index.js"),D=require("./ShopifyColorOption.js");const T=()=>{const{locale:a="us",copyWriting:r}=(0,y.useAiuiContext)(),{compareData:o,product:d}=(0,v.useBizProductContext)(),[s,g]=(0,u.useState)();(0,u.useEffect)(()=>{g(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(l=>l.handle===s)?.product].filter(Boolean);return o?.specificationKeys?(0,e.jsxs)(t.Dialog,{children:[(0,e.jsx)(t.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:r?.compare}),(0,e.jsxs)(t.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(t.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:(0,e.jsx)(t.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:r?.compare})}),(0,e.jsxs)("div",{className:"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4",children:[(0,e.jsxs)(t.Grid,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4",children:[(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:r?.product||"Product"})}),(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)(t.Text,{as:"div",className:"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold",html:o.currentProductCompareData?.shortName||d.title})}),s&&(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)(N.default,{className:"rounded-btn h-[48px] px-4",value:s,onChange:l=>{g(l)},list:o.options})})]}),(0,e.jsxs)(t.Grid,{className:"laptop:gap-8 laptop:py-3 grid-cols-3 py-4",children:[(0,e.jsx)(t.GridItem,{span:1}),m.map((l,i)=>(0,e.jsx)(t.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:l.images[0].url,alt:l.title,className:"size-[100px]",role:"presentation"})},i))]}),(0,e.jsxs)(t.Grid,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(t.GridItem,{span:1}),m.map((l,i)=>{const p=l.variants[0];return(0,e.jsx)(t.GridItem,{span:1,className:"flex h-full",children:(0,e.jsx)("div",{className:"flex flex-col gap-[8px]",children:p.price.amount<9999999&&(0,e.jsx)("div",{className:"flex items-center gap-[8px]",children:(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)("span",{className:"text-[18px] font-bold",children:(0,f.formatPrice)({locale:a,amount:p?.coupons?.[0]?.variant_price4wscode||p.price.amount,currencyCode:p.price.currencyCode})}),Number(p?.coupons?.[0]?.variant_price4wscode)>0&&(0,e.jsx)("span",{className:"text-[18px] font-bold text-[#6D6D6F] line-through",children:(0,f.formatPrice)({locale:a,amount:p.price.amount,currencyCode:p.price.currencyCode})})]})})})},i)})]}),(0,e.jsxs)(t.Grid,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:r?.color||"Color"})}),m.map((l,i)=>{const p=l.options?.find(c=>["color","colour","couleur"].find(n=>c.name.toLowerCase().includes(n)))?.values.map(c=>c.label);return(0,e.jsx)(t.GridItem,{span:1,className:"flex h-full",children:p?.length&&(0,e.jsx)("div",{className:"flex items-center gap-4",children:p.map(c=>(0,e.jsx)(D.ShopifyColorOption,{label:c,className:"size-6"},c))})},i)})]}),(0,e.jsx)(t.Grid,{className:"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]",children:o.specificationKeys?.map(l=>(0,e.jsxs)(t.GridItem,{span:12,className:"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:l}),m.map((i,p)=>{let n=i.metafields?.global?.specifications?.find(C=>C?.key===l)?.value||"";switch(n.trim().toLowerCase()){case"true":n="\u2714\uFE0F";break;case"false":n="\u274C";break;default:break}return(0,e.jsx)("div",{className:"flex items-center",children:(0,e.jsx)(t.Text,{className:"text-[16px] font-bold text-[#1D1D1F]",html:n})},p)})]},l))})]})]})]}):null};var _=T;
|
|
2
2
|
//# sourceMappingURL=CompareModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { compareData, product } = useBizProductContext()\n const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n useEffect(() => {\n setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n }, [compareData?.availableCompareList])\n\n const products = [\n compareData?.currentProductCompareData!?.product,\n compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n ].filter(Boolean) as CompareItem['product'][]\n\n if (!compareData?.specificationKeys) return null\n\n return (\n <Dialog>\n <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n {copyWriting?.compare}\n </DialogTitle>\n </DialogHeader>\n <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"rounded-btn h-[48px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n const variant = product.variants[0]\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {/* Price with original price */}\n <div className=\"flex flex-col gap-[8px]\">\n {variant.price.amount < 9999999 && (\n <div className=\"flex items-center gap-[8px]\">\n {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n <div className=\"flex items-center gap-[6px]\">\n <span className=\"text-[18px] font-bold\">\n {formatPrice({\n locale,\n amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n {formatPrice({\n locale,\n amount: variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n )}\n </div>\n </div>\n )}\n {/* <Button variant=\"primary\" size=\"lg\">\n {copyWriting?.shopNow || 'Shop Now'}\n </Button> */}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n </GridItem>\n {products.map((product, productIndex) => {\n const colors = product.options\n ?.find(option =>\n ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n )\n ?.values.map(value => value.label)\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {colors?.length && (\n <div className=\"flex items-center gap-4\">\n {colors.map(label => (\n <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n ))}\n </div>\n )}\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n {compareData.specificationKeys?.map((key: string) => {\n return (\n <GridItem\n span={12}\n className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n key={key}\n >\n {/* Detail value */}\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n {/* Product Values */}\n {products.map((product, productIndex) => {\n const value =\n product.metafields?.global?.specifications?.find(\n (specification: { key: string }) => specification?.key === key\n )?.value || ''\n let text = value\n switch (text.trim().toLowerCase()) {\n case 'true':\n text = '\u2714\uFE0F'\n break\n case 'false':\n text = '\u274C'\n break\n default:\n break\n }\n return (\n <div key={productIndex} className=\"flex items-center\">\n {/* Other details */}\n <
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { compareData, product } = useBizProductContext()\n const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n useEffect(() => {\n setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n }, [compareData?.availableCompareList])\n\n const products = [\n compareData?.currentProductCompareData!?.product,\n compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n ].filter(Boolean) as CompareItem['product'][]\n\n if (!compareData?.specificationKeys) return null\n\n return (\n <Dialog>\n <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n {copyWriting?.compare}\n </DialogTitle>\n </DialogHeader>\n <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"rounded-btn h-[48px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n const variant = product.variants[0]\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {/* Price with original price */}\n <div className=\"flex flex-col gap-[8px]\">\n {variant.price.amount < 9999999 && (\n <div className=\"flex items-center gap-[8px]\">\n {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n <div className=\"flex items-center gap-[6px]\">\n <span className=\"text-[18px] font-bold\">\n {formatPrice({\n locale,\n amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n {formatPrice({\n locale,\n amount: variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n )}\n </div>\n </div>\n )}\n {/* <Button variant=\"primary\" size=\"lg\">\n {copyWriting?.shopNow || 'Shop Now'}\n </Button> */}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n </GridItem>\n {products.map((product, productIndex) => {\n const colors = product.options\n ?.find(option =>\n ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n )\n ?.values.map(value => value.label)\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {colors?.length && (\n <div className=\"flex items-center gap-4\">\n {colors.map(label => (\n <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n ))}\n </div>\n )}\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n {compareData.specificationKeys?.map((key: string) => {\n return (\n <GridItem\n span={12}\n className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n key={key}\n >\n {/* Detail value */}\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n {/* Product Values */}\n {products.map((product, productIndex) => {\n const value =\n product.metafields?.global?.specifications?.find(\n (specification: { key: string }) => specification?.key === key\n )?.value || ''\n let text = value\n switch (text.trim().toLowerCase()) {\n case 'true':\n text = '\u2714\uFE0F'\n break\n case 'false':\n text = '\u274C'\n break\n default:\n break\n }\n return (\n <div key={productIndex} className=\"flex items-center\">\n {/* Other details */}\n <Text className=\"text-[16px] font-bold text-[#1D1D1F]\" html={text}></Text>\n </div>\n )\n })}\n </GridItem>\n )\n })}\n </Grid>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport default CompareModal\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "Select", "value", "productIndex", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var v=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var H=(n,o)=>{for(var s in o)v(n,s,{get:o[s],enumerable:!0})},L=(n,o,s,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of k(o))!E.call(n,i)&&i!==s&&v(n,i,{get:()=>o[i],enumerable:!(c=T(o,i))||c.enumerable});return n};var M=n=>L(v({},"__esModule",{value:!0}),n);var I={};H(I,{default:()=>P});module.exports=M(I);var r=require("react/jsx-runtime"),d=require("../../../../../helpers/index.js"),t=require("react"),w=require("./useScrollSpy.js"),g=require("es-toolkit");const z=({tabs:n,onSpyNavItemClick:o,className:s,renderRating:c})=>{const[i,S]=(0,t.useState)(0),p=(0,t.useMemo)(()=>c?[...n,{label:"Reviews",id:"ipc-review",href:""}]:n,[n,c]),y=(0,t.useMemo)(()=>p.map(e=>e.id),[p]),u=(0,g.debounce)(()=>{const e=document.querySelector("#purchase-bar");e&&S(e.getBoundingClientRect().height)},500);(0,t.useEffect)(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]);const a=(0,w.useScrollSpy)(y,i),f=(0,t.useRef)(null),m=(0,t.useRef)(new Map),x=(0,t.useCallback)(e=>{o?.(e)},[o]);(0,t.useEffect)(()=>{if(!a||!f.current)return;const e=m.current.get(a);if(!e)return;const l=f.current,h=e.getBoundingClientRect(),b=l.getBoundingClientRect(),R=h.left+h.width/2-b.left,B=b.width/2,C=R-B;l.scrollTo({left:l.scrollLeft+C,behavior:"smooth"})},[a]);const N=(0,t.useCallback)((e,l)=>{l?m.current.set(e,l):m.current.delete(e)},[]);return(0,r.jsx)("div",{ref:f,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,d.cn)("overflow-x-auto",s),children:(0,r.jsx)("div",{className:"tablet:gap-8 flex gap-6",children:p?.map(e=>(0,r.jsx)("button",{ref:l=>N(e.id,l),children:e.id==="ipc-review"?(0,r.jsxs)("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[c,(0,r.jsx)("div",{className:(0,d.cn)("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]}):(0,r.jsxs)("div",{className:(0,d.cn)("laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":a===e.id}),onClick:()=>x(e),children:[e.label,(0,r.jsx)("div",{className:(0,d.cn)("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]})},e.id))})})};var P=z;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\n\n// \u81EA\u5B9A\u4E49 hook\uFF1A\u76D1\u542C\u9875\u9762\u6EDA\u52A8\uFF0C\u81EA\u52A8\u66F4\u65B0\u5F53\u524D\u6FC0\u6D3B\u7684 tab\nconst useScrollSpy = (tabs: ScrollSpyNavItem[], onActiveChange?: (tab: ScrollSpyNavItem) => void) => {\n const [activeTab, setActiveTab] = useState<ScrollSpyNavItem | null>(null)\n const observerRef = useRef<IntersectionObserver | null>(null)\n const sectionsRef = useRef<Map<string, ScrollSpyNavItem>>(new Map())\n const isManualScrollRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u4E3A\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\n const activeTabRef = useRef<ScrollSpyNavItem | null>(null) // \u7528 ref \u5B58\u50A8\u5F53\u524D\u6FC0\u6D3B\u7684 tab\uFF0C\u907F\u514D\u95ED\u5305\u95EE\u9898\n\n // \u540C\u6B65 activeTab \u5230 ref\n useEffect(() => {\n activeTabRef.current = activeTab\n }, [activeTab])\n\n useEffect(() => {\n if (!tabs || tabs.length === 0) return\n\n // \u6E05\u7406\u4E4B\u524D\u7684 observer\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u521B\u5EFA Map \u5B58\u50A8 section \u4FE1\u606F\n sectionsRef.current.clear()\n const elements: Element[] = []\n\n tabs.forEach(tab => {\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n if (element) {\n sectionsRef.current.set(id, tab)\n elements.push(element)\n }\n })\n\n if (elements.length === 0) {\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5143\u7D20\uFF0C\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab \u4E3A\u6FC0\u6D3B\u72B6\u6001\n setActiveTab(tabs[0])\n return\n }\n\n // \u4F7F\u7528 IntersectionObserver \u76D1\u542C\u5143\u7D20\u8FDB\u5165\u89C6\u53E3\n const observerOptions: IntersectionObserverInit = {\n root: null,\n rootMargin: `-${navHeight}px 0px -50% 0px`, // \u4E0A\u65B9\u504F\u79FB\u5BFC\u822A\u680F\u9AD8\u5EA6\uFF0C\u4E0B\u65B9\u504F\u79FB50%\u89C6\u53E3\u9AD8\u5EA6\n threshold: [0, 0.25, 0.5, 0.75, 1],\n }\n\n const observerCallback: IntersectionObserverCallback = entries => {\n // \u5982\u679C\u662F\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\uFF0C\u4E0D\u8981\u66F4\u65B0\u72B6\u6001\n if (isManualScrollRef.current) {\n return\n }\n\n // \u68C0\u67E5\u662F\u5426\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8\uFF08\u7279\u6B8A\u5904\u7406\u7B2C\u4E00\u4E2A\u5143\u7D20\uFF09\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n if (scrollTop < navHeight + 50) {\n // \u5728\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n const firstTab = tabs[0]\n if (firstTab && activeTabRef.current?.id !== firstTab.id) {\n console.log('\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:', firstTab.label)\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n return\n }\n\n // \u627E\u51FA\u6240\u6709\u6B63\u5728\u4EA4\u53C9\u7684 entries\n const intersectingEntries = entries\n .filter(entry => entry.isIntersecting)\n .sort((a, b) => {\n // \u6309\u7167\u5143\u7D20\u5728\u9875\u9762\u4E0A\u7684\u4F4D\u7F6E\u6392\u5E8F\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09\n return a.boundingClientRect.top - b.boundingClientRect.top\n })\n\n if (intersectingEntries.length > 0) {\n // \u9009\u62E9\u6700\u4E0A\u9762\u7684\u6B63\u5728\u4EA4\u53C9\u7684\u5143\u7D20\n const topEntry = intersectingEntries[0]\n const id = topEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n } else {\n // \u5982\u679C\u6CA1\u6709\u5143\u7D20\u6B63\u5728\u4EA4\u53C9\uFF0C\u627E\u51FA\u6700\u63A5\u8FD1\u89C6\u53E3\u9876\u90E8\u7684\u5143\u7D20\n const sortedEntries = [...entries].sort((a, b) => {\n return Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)\n })\n\n if (sortedEntries.length > 0) {\n const closestEntry = sortedEntries[0]\n const id = closestEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n }\n }\n }\n\n observerRef.current = new IntersectionObserver(observerCallback, observerOptions)\n\n // \u89C2\u5BDF\u6240\u6709 section \u5143\u7D20\n elements.forEach(element => {\n observerRef.current?.observe(element)\n })\n\n // \u6DFB\u52A0\u6EDA\u52A8\u4E8B\u4EF6\u76D1\u542C\uFF0C\u5904\u7406\u9875\u9762\u9876\u90E8\u7684\u60C5\u51B5\n const handleScroll = () => {\n if (isManualScrollRef.current) {\n return\n }\n\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n // \u5982\u679C\u6EDA\u52A8\u5230\u63A5\u8FD1\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n if (scrollTop < navHeight + 50) {\n const firstTab = tabs[0]\n if (firstTab) {\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n }\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n window.removeEventListener('scroll', handleScroll)\n }\n }, [tabs, onActiveChange])\n\n // \u521D\u59CB\u5316\u65F6\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab\n useEffect(() => {\n if (!activeTab && tabs && tabs.length > 0) {\n setActiveTab(tabs[0])\n }\n }, [tabs, activeTab])\n\n // \u624B\u52A8\u8BBE\u7F6E\u6FC0\u6D3B tab \u5E76\u6EDA\u52A8\u5230\u5BF9\u5E94\u4F4D\u7F6E\n const handleSetActiveTab = useCallback((tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n\n // \u6EDA\u52A8\u5230\u5BF9\u5E94\u7684\u951A\u70B9\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n\n if (element) {\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u8BBE\u7F6E\u624B\u52A8\u6EDA\u52A8\u6807\u5FD7\n isManualScrollRef.current = true\n\n // \u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF08\u5143\u7D20\u9876\u90E8 - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u95F4\u8DDD\uFF09\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n const scrollToPosition = elementTop - navHeight - 10\n\n window.scrollTo({\n top: scrollToPosition,\n behavior: 'smooth',\n })\n\n // \u6EDA\u52A8\u7ED3\u675F\u540E\u91CD\u7F6E\u6807\u5FD7\n setTimeout(() => {\n isManualScrollRef.current = false\n }, 1000) // 1\u79D2\u540E\u91CD\u7F6E\uFF0C\u786E\u4FDD\u6EDA\u52A8\u52A8\u753B\u5B8C\u6210\n }\n }, [])\n\n return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const { activeTab, setActiveTab } = useScrollSpy(combinedTabs)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick, setActiveTab]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeTab || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeTab.id)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeTab?.id])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n // \u684C\u9762\u7AEF\u6E32\u67D3\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeTab?.id === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react", "
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../../../../helpers/index.js'\nimport { useCallback, useRef, useMemo, useEffect, useState } from 'react'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { useScrollSpy } from './useScrollSpy.js'\nimport { debounce } from 'es-toolkit'\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'ipc-review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const sectionIds = useMemo(() => {\n return combinedTabs.map(tab => tab.id)\n }, [combinedTabs])\n\n const debouncedHandleResize = debounce(() => {\n const purchaseBar = document.querySelector('#purchase-bar')\n if (purchaseBar) {\n setPurchaseBarHeight(purchaseBar.getBoundingClientRect().height)\n }\n }, 500)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [debouncedHandleResize])\n\n const activeId = useScrollSpy(sectionIds, purchaseBarHeight)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeId || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeId)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeId])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'ipc-review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeId === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeId === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeId === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFc,IAAAI,EAAA,6BAzFdC,EAAmB,2CACnBC,EAAkE,iBAElEC,EAA6B,6BAC7BC,EAAyB,sBAEzB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,UAAAC,EAAW,aAAAC,CAAa,IAAyB,CAEhG,KAAM,CAACC,EAAmBC,CAAoB,KAAI,YAAS,CAAC,EACtDC,KAAe,WAAQ,IACvBH,EACK,CAAC,GAAGH,EAAM,CAAE,MAAO,UAAW,GAAI,aAAc,KAAM,EAAG,CAAC,EAE5DA,EACN,CAACA,EAAMG,CAAY,CAAC,EAEjBI,KAAa,WAAQ,IAClBD,EAAa,IAAIE,GAAOA,EAAI,EAAE,EACpC,CAACF,CAAY,CAAC,EAEXG,KAAwB,YAAS,IAAM,CAC3C,MAAMC,EAAc,SAAS,cAAc,eAAe,EACtDA,GACFL,EAAqBK,EAAY,sBAAsB,EAAE,MAAM,CAEnE,EAAG,GAAG,KAEN,aAAU,KACRD,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1B,MAAME,KAAW,gBAAaJ,EAAYH,CAAiB,EAGrDQ,KAAqB,UAAuB,IAAI,EAChDC,KAAU,UAAuC,IAAI,GAAK,EAE1DC,KAAa,eAChBN,GAA0B,CACzBP,IAAoBO,CAAG,CACzB,EACA,CAACP,CAAiB,CACpB,KAGA,aAAU,IAAM,CACd,GAAI,CAACU,GAAY,CAACC,EAAmB,QAAS,OAE9C,MAAMG,EAAmBF,EAAQ,QAAQ,IAAIF,CAAQ,EACrD,GAAI,CAACI,EAAkB,OAEvB,MAAMC,EAAYJ,EAAmB,QAC/BK,EAAUF,EAAiB,sBAAsB,EACjDG,EAAgBF,EAAU,sBAAsB,EAGhDG,EAAYF,EAAQ,KAAOA,EAAQ,MAAQ,EAAIC,EAAc,KAC7DE,EAAkBF,EAAc,MAAQ,EACxCG,EAAeF,EAAYC,EAEjCJ,EAAU,SAAS,CACjB,KAAMA,EAAU,WAAaK,EAC7B,SAAU,QACZ,CAAC,CACH,EAAG,CAACV,CAAQ,CAAC,EAGb,MAAMW,KAAY,eAAY,CAACC,EAAeC,IAAsC,CAC9EA,EACFX,EAAQ,QAAQ,IAAIU,EAAOC,CAAO,EAElCX,EAAQ,QAAQ,OAAOU,CAAK,CAEhC,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OACC,IAAKX,EACL,MAAO,CAAE,eAAgB,OAAQ,gBAAiB,MAAO,EACzD,aAAW,MAAG,kBAAmBV,CAAS,EAE1C,mBAAC,OAAI,UAAU,0BACZ,SAAAI,GAAc,IAAIE,MACjB,OAAC,UAAoB,IAAKiB,GAAMH,EAAUd,EAAI,GAAIiB,CAAE,EACjD,SAAAjB,EAAI,KAAO,gBACV,QAAC,OAAI,UAAU,gDACZ,UAAAL,KACD,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUQ,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,KAEA,QAAC,OACC,aAAW,MACT,0GACA,CACE,iBAAkBG,IAAaH,EAAI,EACrC,CACF,EACA,QAAS,IAAMM,EAAWN,CAAG,EAE5B,UAAAA,EAAI,SACL,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUG,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,GAhCSA,EAAI,EAkCjB,CACD,EACH,EACF,CAEJ,EAEA,IAAOhB,EAAQO",
|
|
6
|
+
"names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react", "import_useScrollSpy", "import_es_toolkit", "ScrollSpyNav", "tabs", "onSpyNavItemClick", "className", "renderRating", "purchaseBarHeight", "setPurchaseBarHeight", "combinedTabs", "sectionIds", "tab", "debouncedHandleResize", "purchaseBar", "activeId", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "element", "el"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},v=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of m(t))!p.call(e,o)&&o!==n&&i(e,o,{get:()=>t[o],enumerable:!(r=f(t,o))||r.enumerable});return e};var h=e=>v(i({},"__esModule",{value:!0}),e);var E={};g(E,{useScrollSpy:()=>u});module.exports=h(E);var c=require("react"),s=require("es-toolkit");const u=(e,t=100)=>{const[n,r]=(0,c.useState)("");return(0,c.useEffect)(()=>{const o=()=>{const w=Math.ceil(window.scrollY+t);for(let l=e.length-1;l>=0;l--){const d=document.getElementById(e[l]);if(d){const a=Math.ceil(d.getBoundingClientRect().top+window.scrollY);if(w>=a){r(e[l]);break}}}};return o(),window.addEventListener("scroll",(0,s.debounce)(o,50)),()=>{window.removeEventListener("scroll",(0,s.debounce)(o,50))}},[e,t]),n};
|
|
2
|
+
//# sourceMappingURL=useScrollSpy.js.map
|
package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useState, useEffect } from 'react'\nimport { debounce } from 'es-toolkit'\n\nconst useScrollSpy = (sectionIds: string[], offset = 100) => {\n const [activeId, setActiveId] = useState('')\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = Math.ceil(window.scrollY + offset)\n\n // \u904D\u5386\u6240\u6709section\uFF0C\u627E\u5230\u5F53\u524D\u53EF\u89C6\u533A\u57DF\u5185\u7684section\n for (let i = sectionIds.length - 1; i >= 0; i--) {\n const section = document.getElementById(sectionIds[i])\n if (section) {\n const offsetTop = Math.ceil(section.getBoundingClientRect().top + window.scrollY)\n if (scrollPosition >= offsetTop) {\n setActiveId(sectionIds[i])\n break\n }\n }\n }\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n // \u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\n window.addEventListener('scroll', debounce(handleScroll, 50))\n\n return () => {\n window.removeEventListener('scroll', debounce(handleScroll, 50))\n }\n }, [sectionIds, offset])\n\n return activeId\n}\n\nexport { useScrollSpy }\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoC,iBACpCC,EAAyB,sBAEzB,MAAMH,EAAe,CAACI,EAAsBC,EAAS,MAAQ,CAC3D,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAE,EAE3C,sBAAU,IAAM,CACd,MAAMC,EAAe,IAAM,CACzB,MAAMC,EAAiB,KAAK,KAAK,OAAO,QAAUJ,CAAM,EAGxD,QAASK,EAAIN,EAAW,OAAS,EAAGM,GAAK,EAAGA,IAAK,CAC/C,MAAMC,EAAU,SAAS,eAAeP,EAAWM,CAAC,CAAC,EACrD,GAAIC,EAAS,CACX,MAAMC,EAAY,KAAK,KAAKD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,OAAO,EAChF,GAAIF,GAAkBG,EAAW,CAC/BL,EAAYH,EAAWM,CAAC,CAAC,EACzB,KACF,CACF,CACF,CACF,EAGA,OAAAF,EAAa,EAGb,OAAO,iBAAiB,YAAU,YAASA,EAAc,EAAE,CAAC,EAErD,IAAM,CACX,OAAO,oBAAoB,YAAU,YAASA,EAAc,EAAE,CAAC,CACjE,CACF,EAAG,CAACJ,EAAYC,CAAM,CAAC,EAEhBC,CACT",
|
|
6
|
+
"names": ["useScrollSpy_exports", "__export", "useScrollSpy", "__toCommonJS", "import_react", "import_es_toolkit", "sectionIds", "offset", "activeId", "setActiveId", "handleScroll", "scrollPosition", "i", "section", "offsetTop"]
|
|
7
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var U=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var V=(t,s)=>{for(var r in s)U(t,r,{get:s[r],enumerable:!0})},_=(t,s,r,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of R(s))!H.call(t,i)&&i!==r&&U(t,i,{get:()=>s[i],enumerable:!(m=j(s,i))||m.enumerable});return t};var q=t=>_(U({},"__esModule",{value:!0}),t);var G={};V(G,{default:()=>Q});module.exports=q(G);var e=require("react/jsx-runtime"),o=require("react"),A=require("react-responsive"),d=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),a=require("../../components/index.js"),v=require("../../hooks/useExposure.js"),f=require("swiper/react"),T=require("swiper/modules"),Y=require("swiper/css");const S="media",D="media_scene_switcher",h=3e3,$=({data:t,configuration:s,theme:r})=>{const m=(0,o.useRef)(null),i=s?.isActive||!1;return(0,v.useExposure)(m,{componentType:S,componentName:D,componentTitle:t?.title,position:(s?.index??0)+1}),(0,e.jsxs)("div",{ref:m,className:(0,d.cn)("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","relative text-[#6D6D6F]",i?"opacity-100":"opacity-60",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&r==="light"}),onClick:()=>s?.onItemClick?.(s?.index??0),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[(0,e.jsx)("div",{className:"media-scene-switcher-item-title flex-1",children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.title})}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",r==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":r==="dark"&&i}),children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${h}ms ease-out`:"none"}})]})},O=({data:t,configuration:s,theme:r})=>{const m=(0,o.useRef)(null),i=s?.isActive||!1,p=(0,A.useMediaQuery)({query:"(max-width: 768px)"});(0,v.useExposure)(m,{componentType:S,componentName:D,componentTitle:t?.title,position:(s?.index??0)+1});const n=p&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,u=p&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,w=u||t?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("div",{ref:m,className:(0,d.cn)("media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden",{"aiui-dark":r==="dark"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:n?(0,e.jsx)("video",{src:n,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:w,className:"size-full object-cover"}):u?(0,e.jsx)(a.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:u,alt:t?.title||""}):null}),(0,e.jsxs)("div",{className:(0,d.cn)("media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&r==="light"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.title})}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",r==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":r==="dark"&&i}),children:(0,e.jsx)(a.Heading,{as:"h6",size:1,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${h}ms ease-out`:"none"}})]})},z=(0,o.forwardRef)(({className:t="",data:s,id:r},m)=>{const{title:i,subtitle:p,items:n=[],theme:u="light",layout:w,titleIcon:b}=s||{},[g,N]=(0,o.useState)(0),[F,P]=(0,o.useState)(0),k=(0,o.useRef)(null),x=(0,o.useRef)(0),E=(0,A.useMediaQuery)({query:"(max-width: 1023px)"});(0,o.useImperativeHandle)(m,()=>k.current),(0,v.useExposure)(k,{componentType:S,componentName:D,componentTitle:i}),(0,o.useEffect)(()=>{if(!(E||n.length===0))return x.current=window.setInterval(()=>{N(l=>(l+1)%n.length)},h),()=>{x.current&&window.clearInterval(x.current)}},[E,n.length]);const B=l=>{N(l),x.current&&window.clearInterval(x.current),x.current=window.setInterval(()=>{N(c=>(c+1)%n.length)},h)},y=n[g],J=y?.videoUrl?.url,W=y?.imageUrl?.url||y?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:`
|
|
2
2
|
@keyframes progress-bar {
|
|
3
3
|
from {
|
|
4
|
-
transform: translate3d(-100%,
|
|
4
|
+
transform: translate3d(-100%, 0, 0);
|
|
5
5
|
}
|
|
6
6
|
to {
|
|
7
|
-
transform: translate3d(0,
|
|
7
|
+
transform: translate3d(0, 0, 0);
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
`}),(0,e.jsxs)("section",{id:
|
|
10
|
+
`}),(0,e.jsxs)("section",{id:r,ref:k,className:(0,d.cn)("media-scene-switcher text-info-primary w-full overflow-hidden",{"aiui-dark":u==="dark"},t),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":w==="right"}),children:n.map((l,c)=>{const M=l?.videoUrl?.url,I=l?.imageUrl?.url,L=I||l?.videoUrl?.thumbnailURL||"";return(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":c===g}),children:M?(0,e.jsx)("video",{src:M,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:L,className:"size-full object-cover"}):I?(0,e.jsx)(a.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:l?.title||""}):null},l.id||c)})}),(0,e.jsxs)("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-header flex flex-col",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&(0,e.jsx)(a.Heading,{as:"h3",html:i,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),b&&(0,e.jsx)(a.Picture,{source:b.url,alt:b.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),p&&(0,e.jsx)(a.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:n.map((l,c)=>(0,e.jsx)($,{data:l,configuration:{index:c,isActive:c===g,onItemClick:B},theme:u},l.id||c))})]})]}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-header",children:[i&&(0,e.jsx)(a.Heading,{as:"h2",html:i,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight"}),p&&(0,e.jsx)(a.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:(0,e.jsx)(f.Swiper,{onSlideChange:l=>P(l.realIndex),initialSlide:0,modules:[T.Autoplay],loop:n.length>1,autoplay:n.length>1?{delay:h,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:n.map((l,c)=>(0,e.jsx)(f.SwiperSlide,{className:"!h-auto !w-[296px]",children:(0,e.jsx)(O,{data:l,configuration:{index:c,isActive:c===F},theme:u})},l.id||c))})})]})]})]})});z.displayName="MediaSceneSwitcher";var Q=(0,C.withLayout)(z);
|
|
11
11
|
//# sourceMappingURL=MediaSceneSwitcher.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]\">\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className={cn('media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n })}\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n >\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]\">\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n ({ className = '', data, id, style }, ref) => {\n const { title, subtitle, items = [], theme = 'light' } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, -2px, 0);\n }\n to {\n transform: translate3d(0, -2px, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn(\n 'media-scene-switcher text-info-primary w-full overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n <div className=\"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden\">\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n theme={theme}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n <div className=\"media-scene-switcher-mobile-header\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n theme={theme}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDM,IAAAI,EAAA,6BAnDNC,EAA6E,iBAC7EC,EAA8B,4BAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAuC,qCACvCC,
|
|
6
|
-
"names": ["MediaSceneSwitcher_exports", "__export", "MediaSceneSwitcher_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_utils", "import_Styles", "import_components", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n 'relative text-[#6D6D6F]',\n isActive ? 'opacity-100' : 'opacity-60',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div\n className={cn(\n 'media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]',\n theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n {\n '!border-[#F5F6F7]': theme === 'dark' && isActive,\n }\n )}\n >\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, 0, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className={cn('media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n })}\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n >\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]',\n theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n {\n '!border-[#F5F6F7]': theme === 'dark' && isActive,\n }\n )}\n >\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, 0, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(({ className = '', data, id }, ref) => {\n const { title, subtitle, items = [], theme = 'light', layout, titleIcon } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, 0, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn(\n 'media-scene-switcher text-info-primary w-full overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n <div\n className={cn(\n 'media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden',\n {\n 'order-1': layout === 'right',\n }\n )}\n >\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n <div className=\"desktop:gap-2 flex items-center gap-1\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n />\n )}\n {titleIcon && (\n <Picture\n source={titleIcon.url}\n alt={titleIcon.alt || 'title icon'}\n className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n imgClassName=\"!w-auto h-full\"\n />\n )}\n </div>\n\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n theme={theme}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n <div className=\"media-scene-switcher-mobile-header\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n />\n )}\n {subtitle && (\n <Text as=\"span\" size={4} html={subtitle} className=\"media-scene-switcher-subtitle text-[14px]\" />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n theme={theme}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n})\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaSceneSwitcher_exports", "__export", "MediaSceneSwitcher_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_utils", "import_Styles", "import_components", "import_useExposure", "import_modules", "import_css", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "title", "subtitle", "items", "layout", "titleIcon", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper"]
|
|
7
7
|
}
|
|
@@ -10,10 +10,12 @@ export interface MediaSceneSwitcherItem {
|
|
|
10
10
|
}
|
|
11
11
|
export interface MediaSceneSwitcherProps extends ComponentCommonProps {
|
|
12
12
|
data: {
|
|
13
|
+
titleIcon?: Media;
|
|
13
14
|
title?: string;
|
|
14
15
|
subtitle?: string;
|
|
15
16
|
items?: MediaSceneSwitcherItem[];
|
|
16
17
|
/** 主题，默认 light */
|
|
17
18
|
theme?: Theme;
|
|
19
|
+
layout?: 'left' | 'right';
|
|
18
20
|
};
|
|
19
21
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var d=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of m(e))!a.call(t,i)&&i!==o&&n(t,i,{get:()=>e[i],enumerable:!(r=l(e,i))||r.enumerable});return t};var s=t=>d(n({},"__esModule",{value:!0}),t);var p={};module.exports=s(p);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaSceneSwitcher/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Media, Theme } from '../../types/props.js'\n\nexport interface MediaSceneSwitcherItem {\n id: string\n title: string\n tag?: string\n videoUrl?: Media | null\n imageUrl?: Media | null\n mobVideoUrl?: Media | null\n mobImageUrl?: Media | null\n}\n\nexport interface MediaSceneSwitcherProps extends ComponentCommonProps {\n data: {\n title?: string\n subtitle?: string\n items?: MediaSceneSwitcherItem[]\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n }\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Media, Theme } from '../../types/props.js'\n\nexport interface MediaSceneSwitcherItem {\n id: string\n title: string\n tag?: string\n videoUrl?: Media | null\n imageUrl?: Media | null\n mobVideoUrl?: Media | null\n mobImageUrl?: Media | null\n}\n\nexport interface MediaSceneSwitcherProps extends ComponentCommonProps {\n data: {\n titleIcon?: Media\n title?: string\n subtitle?: string\n items?: MediaSceneSwitcherItem[]\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n layout?: 'left' | 'right'\n }\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";var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},z=(e,t,r,
|
|
1
|
+
"use strict";var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},z=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of P(t))!R.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(i=M(t,o))||i.enumerable});return e};var C=e=>z(f({},"__esModule",{value:!0}),e);var D={};k(D,{default:()=>j});module.exports=C(D);var a=require("react/jsx-runtime"),c=require("react"),n=require("../../components/index.js"),s=require("../../helpers/index.js"),b=require("../../shared/Styles.js");function L({children:e,offset:t=800}){const[r,i]=(0,c.useState)(!1),o=(0,c.useRef)(null);return(0,c.useEffect)(()=>{const p=new IntersectionObserver(([x])=>x.isIntersecting&&i(!0),{rootMargin:`${t}px`});return o.current&&p.observe(o.current),()=>p.disconnect()},[t]),(0,a.jsx)("div",{ref:o,className:"size-full",children:r&&e})}function h({media:e,poster:t,className:r}){return e?.url?e.mimeType?.startsWith("video/")?(0,a.jsx)("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:t?.url||"",preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,"webkit-playsinline":"true","x5-video-player-type":"h5","x5-video-player-fullscreen":"false","x5-playsinline":"true",className:r,width:e.width,height:e.height}):(0,a.jsx)("img",{src:e.url,alt:e.alt||"",className:r,width:e.width,height:e.height}):null}function A(e,t,r){return t===2?r==="1:1"?"laptop:flex-[1]":e===0?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]"}function E(e){const{title:t,titleType:r="primary",titleIcon:i,subtitle:o,subtitleImage:p,textAlign:x="left",products:m=[],twoImageRatio:y="2:3",threeImageRatio:H="1:1:1",theme:v="light"}=e.data,u=x==="center"?"text-center":"text-left laptop:text-left",g=()=>r==="secondary"?3:4,w=()=>t?r==="selling-point"&&i?(0,a.jsxs)("div",{className:(0,s.cn)("product-compare-title-wrapper flex items-center gap-[8px]",u==="text-center"?"justify-center":""),children:[(0,a.jsx)("img",{src:i.url,alt:i.alt||"",className:"product-compare-title-icon laptop:size-[32px] size-[24px]"}),(0,a.jsx)(n.Heading,{as:"h2",size:g(),html:t,className:"product-compare-title",style:{color:"#00BEFA"}})]}):(0,a.jsx)(n.Heading,{as:"h2",size:g(),html:t,className:(0,s.cn)("product-compare-title",u)}):null;return(0,a.jsxs)("section",{className:(0,s.cn)("product-compare text-info-primary",e.className,{"aiui-dark":v==="dark"}),children:[w(),o&&(0,a.jsx)(n.Text,{as:"p",size:2,html:o,className:(0,s.cn)("product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",u)}),p&&(0,a.jsx)("div",{className:(0,s.cn)("product-compare-subtitle-image laptop:mt-[24px] mt-[16px]",u==="text-center"?"flex justify-center":""),children:(0,a.jsx)("img",{src:p.url,alt:p.alt||"",className:"max-w-full",width:p.width,height:p.height})}),(0,a.jsx)("div",{className:"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]",children:m.map((l,d)=>{const N=d===m.length-1,T=A(d,m.length,y),I=N?"bg-brand-0":"bg-[rgba(0,0,0,0.2)]";return(0,a.jsxs)("div",{className:(0,s.cn)("product-compare-item rounded-box relative shrink overflow-hidden",T,{"order-2 tablet:order-1":d===0&&m.length===2,"order-1 tablet:order-2":d===1&&m.length===2}),children:[l.text&&(0,a.jsx)("div",{className:(0,s.cn)("product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white",I),children:(0,a.jsx)(n.Heading,{as:"h6",className:"font-bold",size:1,children:l.text})}),(0,a.jsxs)(L,{offset:1500,children:[(0,a.jsx)(h,{media:l.media,poster:l.poster,className:"product-compare-media laptop:block hidden size-full object-cover"}),(0,a.jsx)(h,{media:l.mobMedia?.id?l.mobMedia:l.media,poster:l.mobPoster?.id?l.mobPoster:l.poster,className:"product-compare-media-mobile laptop:hidden block w-full"})]})]},d)})})]})}var j=(0,b.withLayout)(E);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|