@anker-in/headless-ui 1.0.16 → 1.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/AiuiProvider/index.js +1 -1
- package/dist/cjs/biz-components/AiuiProvider/index.js.map +2 -2
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +2 -2
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/biz-components/TextModal/index.js +1 -1
- package/dist/cjs/biz-components/TextModal/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/types.d.ts +1 -0
- package/dist/cjs/biz-components/Title/types.js +1 -1
- package/dist/cjs/biz-components/Title/types.js.map +1 -1
- package/dist/cjs/components/board.d.ts +3 -1
- package/dist/cjs/components/board.js +1 -1
- package/dist/cjs/components/board.js.map +3 -3
- package/dist/cjs/components/dialog.js +1 -1
- package/dist/cjs/components/dialog.js.map +2 -2
- package/dist/cjs/components/picture.js +1 -1
- package/dist/cjs/components/picture.js.map +3 -3
- package/dist/cjs/hooks/useIntersectionObserver.js +1 -1
- package/dist/cjs/hooks/useIntersectionObserver.js.map +3 -3
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/AiuiProvider/index.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.js.map +2 -2
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +2 -2
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +9 -9
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/TextModal/index.js +1 -1
- package/dist/esm/biz-components/TextModal/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/Title/types.d.ts +1 -0
- package/dist/esm/components/board.d.ts +3 -1
- package/dist/esm/components/board.js +1 -1
- package/dist/esm/components/board.js.map +3 -3
- package/dist/esm/components/dialog.js +1 -1
- package/dist/esm/components/dialog.js.map +2 -2
- package/dist/esm/components/picture.js +1 -1
- package/dist/esm/components/picture.js.map +3 -3
- package/dist/esm/hooks/useIntersectionObserver.js +1 -1
- package/dist/esm/hooks/useIntersectionObserver.js.map +3 -3
- package/package.json +1 -1
- package/style.css +3 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var f=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var f=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})},h=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!w.call(e,i)&&i!==n&&f(e,i,{get:()=>t[i],enumerable:!(s=p(t,i))||s.enumerable});return e};var g=e=>h(f({},"__esModule",{value:!0}),e);var C={};y(C,{useIntersectionObserverDelay:()=>T});module.exports=g(C);var l=require("react");const c=new WeakMap,O=500,E=e=>{const t=Date.now(),n=c.get(e);if(n&&t-n.timestamp<O)return n.visible;const s=e;if(!s)return c.set(e,{visible:!1,timestamp:t}),!1;if(!document.contains(s))return c.set(e,{visible:!1,timestamp:t}),!1;const i=s.getBoundingClientRect();if(i.width===0||i.height===0)return c.set(e,{visible:!1,timestamp:t}),!1;const r=s.style;if(r.display==="none"||r.visibility==="hidden"||r.opacity==="0")return c.set(e,{visible:!1,timestamp:t}),!1;if(i.width>0&&i.height>0){const u=window.getComputedStyle(s);if(u.display==="none"||u.visibility==="hidden"||u.opacity==="0")return c.set(e,{visible:!1,timestamp:t}),!1}const o=!0;return c.set(e,{visible:o,timestamp:t}),o},T=(e,{callback:t,once:n,threshold:s=.8,delay:i=0})=>{const r=(0,l.useRef)(0),o=(0,l.useRef)(!1);(0,l.useEffect)(()=>{if(!e?.current||typeof IntersectionObserver>"u")return;const u=e.current,b={root:null,rootMargin:"0px",threshold:s},a=new IntersectionObserver(d=>{d.forEach(m=>{if(m.isIntersecting&&E(m.target)){if(i){if(window.clearTimeout(r.current),o.current)return;r.current=window.setTimeout(()=>{t(),o.current=!0},i)}else t(),o.current=!0;n&&o.current&&a.disconnect()}else r.current&&window.clearTimeout(r.current)})},b);return u&&a.observe(u),()=>{a.disconnect(),window.clearTimeout(r.current)}},[n,s,i,e?.current])};
|
|
2
2
|
//# sourceMappingURL=useIntersectionObserver.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useIntersectionObserver.ts"],
|
|
4
|
-
"sourcesContent": ["import { type RefObject, useRef, useEffect } from 'react'\n\ntype DelayOptions = {\n callback: () => void\n once?: boolean\n threshold?: number\n delay?: number\n}\n/**\n * \u53EA\u6709\u63D0\u7559\u8D85\u8FC7delay\u8BBE\u7F6E\u7684\u65F6\u95F4\u624D\u4F1A\u89E6\u53D1callback\n * @param targetRef\n * @param callback\n * @param once\n * @param threshold\n * @param delay\n */\nexport const useIntersectionObserverDelay = (\n targetRef: RefObject<any> | undefined,\n { callback, once, threshold = 0.8, delay = 0 }: DelayOptions\n) => {\n const timeoutRef = useRef<number>(0)\n const triggeredRef = useRef(false)\n\n useEffect(() => {\n if (!targetRef?.current) {\n return\n }\n\n if (typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const current = targetRef.current\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: threshold,\n }\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n if (delay) {\n window.clearTimeout(timeoutRef.current)\n if (triggeredRef.current) return\n timeoutRef.current = window.setTimeout(() => {\n callback()\n triggeredRef.current = true\n }, delay)\n } else {\n callback()\n triggeredRef.current = true\n }\n\n if (once && triggeredRef.current) {\n observer.disconnect()\n }\n } else {\n if (timeoutRef.current) {\n window.clearTimeout(timeoutRef.current)\n }\n }\n })\n }, options)\n if (current) {\n observer.observe(current)\n }\n return () => {\n observer.disconnect()\n window.clearTimeout(timeoutRef.current)\n }\n }, [once, threshold, delay, targetRef?.current])\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kCAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkD,
|
|
6
|
-
"names": ["useIntersectionObserver_exports", "__export", "useIntersectionObserverDelay", "__toCommonJS", "import_react", "targetRef", "callback", "once", "threshold", "delay", "timeoutRef", "triggeredRef", "current", "options", "observer", "entries", "entry"]
|
|
4
|
+
"sourcesContent": ["import { type RefObject, useRef, useEffect } from 'react'\n\ntype DelayOptions = {\n callback: () => void\n once?: boolean\n threshold?: number\n delay?: number\n}\n\n// \u7F13\u5B58\u53EF\u89C1\u6027\u68C0\u67E5\u7ED3\u679C\uFF0C\u907F\u514D\u91CD\u590D\u8BA1\u7B97\nconst visibilityCache = new WeakMap<Element, { visible: boolean; timestamp: number }>()\nconst CACHE_DURATION = 500 // \u7F13\u5B58500ms\uFF0C\u5E73\u8861\u6027\u80FD\u548C\u51C6\u786E\u6027\n\n/**\n * \u68C0\u67E5\u5143\u7D20\u662F\u5426\u771F\u6B63\u53EF\u89C1\uFF08\u4F18\u5316\u7248\u672C\uFF0C\u5E26\u7F13\u5B58\uFF09\n * @param element \u8981\u68C0\u67E5\u7684\u5143\u7D20\n * @returns \u5143\u7D20\u662F\u5426\u53EF\u89C1\n */\nconst isElementVisible = (element: Element): boolean => {\n const now = Date.now()\n \n // \u68C0\u67E5\u7F13\u5B58\n const cached = visibilityCache.get(element)\n if (cached && (now - cached.timestamp) < CACHE_DURATION) {\n return cached.visible\n }\n \n const el = element as HTMLElement\n \n // \u5FEB\u901F\u68C0\u67E5\uFF1A\u5143\u7D20\u662F\u5426\u5B58\u5728\n if (!el) {\n visibilityCache.set(element, { visible: false, timestamp: now })\n return false\n }\n \n // \u5FEB\u901F\u68C0\u67E5\uFF1A\u5143\u7D20\u662F\u5426\u5728DOM\u4E2D\n if (!document.contains(el)) {\n visibilityCache.set(element, { visible: false, timestamp: now })\n return false\n }\n \n // \u4F7F\u7528 getBoundingClientRect \u8FDB\u884C\u5FEB\u901F\u68C0\u67E5\uFF08\u6BD4 getComputedStyle \u66F4\u5FEB\uFF09\n const rect = el.getBoundingClientRect()\n \n // \u5982\u679C\u5143\u7D20\u6CA1\u6709\u5C3A\u5BF8\uFF0C\u76F4\u63A5\u8FD4\u56DE false\uFF08\u8FD9\u6BD4\u68C0\u67E5 CSS \u6837\u5F0F\u66F4\u5FEB\uFF09\n if (rect.width === 0 || rect.height === 0) {\n visibilityCache.set(element, { visible: false, timestamp: now })\n return false\n }\n \n // \u53EA\u6709\u5728\u5FC5\u8981\u65F6\u624D\u68C0\u67E5 CSS \u6837\u5F0F\uFF08\u5EF6\u8FDF\u68C0\u67E5\uFF09\n // \u5148\u68C0\u67E5\u6700\u5E38\u89C1\u7684\u9690\u85CF\u60C5\u51B5\n const style = el.style\n if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {\n visibilityCache.set(element, { visible: false, timestamp: now })\n return false\n }\n \n // \u5982\u679C\u5185\u8054\u6837\u5F0F\u6CA1\u6709\u9690\u85CF\uFF0C\u518D\u68C0\u67E5\u8BA1\u7B97\u6837\u5F0F\uFF08\u66F4\u6602\u8D35\u7684\u64CD\u4F5C\uFF09\n // \u4F46\u53EA\u5728\u5143\u7D20\u786E\u5B9E\u6709\u5C3A\u5BF8\u4E14\u5728\u89C6\u53E3\u5185\u65F6\u624D\u68C0\u67E5\n if (rect.width > 0 && rect.height > 0) {\n const computedStyle = window.getComputedStyle(el)\n if (computedStyle.display === 'none' || \n computedStyle.visibility === 'hidden' || \n computedStyle.opacity === '0') {\n visibilityCache.set(element, { visible: false, timestamp: now })\n return false\n }\n }\n \n const visible = true\n visibilityCache.set(element, { visible, timestamp: now })\n return visible\n}\n/**\n * \u53EA\u6709\u63D0\u7559\u8D85\u8FC7delay\u8BBE\u7F6E\u7684\u65F6\u95F4\u624D\u4F1A\u89E6\u53D1callback\n * @param targetRef\n * @param callback\n * @param once\n * @param threshold\n * @param delay\n */\nexport const useIntersectionObserverDelay = (\n targetRef: RefObject<any> | undefined,\n { callback, once, threshold = 0.8, delay = 0 }: DelayOptions\n) => {\n const timeoutRef = useRef<number>(0)\n const triggeredRef = useRef(false)\n\n useEffect(() => {\n if (!targetRef?.current) {\n return\n }\n\n if (typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const current = targetRef.current\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: threshold,\n }\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting && isElementVisible(entry.target)) {\n if (delay) {\n window.clearTimeout(timeoutRef.current)\n if (triggeredRef.current) return\n timeoutRef.current = window.setTimeout(() => {\n callback()\n triggeredRef.current = true\n }, delay)\n } else {\n callback()\n triggeredRef.current = true\n }\n\n if (once && triggeredRef.current) {\n observer.disconnect()\n }\n } else {\n if (timeoutRef.current) {\n window.clearTimeout(timeoutRef.current)\n }\n }\n })\n }, options)\n if (current) {\n observer.observe(current)\n }\n return () => {\n observer.disconnect()\n window.clearTimeout(timeoutRef.current)\n }\n }, [once, threshold, delay, targetRef?.current])\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kCAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkD,iBAUlD,MAAMC,EAAkB,IAAI,QACtBC,EAAiB,IAOjBC,EAAoBC,GAA8B,CACtD,MAAMC,EAAM,KAAK,IAAI,EAGfC,EAASL,EAAgB,IAAIG,CAAO,EAC1C,GAAIE,GAAWD,EAAMC,EAAO,UAAaJ,EACvC,OAAOI,EAAO,QAGhB,MAAMC,EAAKH,EAGX,GAAI,CAACG,EACH,OAAAN,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAIT,GAAI,CAAC,SAAS,SAASE,CAAE,EACvB,OAAAN,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAIT,MAAMG,EAAOD,EAAG,sBAAsB,EAGtC,GAAIC,EAAK,QAAU,GAAKA,EAAK,SAAW,EACtC,OAAAP,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAKT,MAAMI,EAAQF,EAAG,MACjB,GAAIE,EAAM,UAAY,QAAUA,EAAM,aAAe,UAAYA,EAAM,UAAY,IACjF,OAAAR,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAKT,GAAIG,EAAK,MAAQ,GAAKA,EAAK,OAAS,EAAG,CACrC,MAAME,EAAgB,OAAO,iBAAiBH,CAAE,EAChD,GAAIG,EAAc,UAAY,QAC1BA,EAAc,aAAe,UAC7BA,EAAc,UAAY,IAC5B,OAAAT,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,EAEX,CAEA,MAAMM,EAAU,GAChB,OAAAV,EAAgB,IAAIG,EAAS,CAAE,QAAAO,EAAS,UAAWN,CAAI,CAAC,EACjDM,CACT,EASab,EAA+B,CAC1Cc,EACA,CAAE,SAAAC,EAAU,KAAAC,EAAM,UAAAC,EAAY,GAAK,MAAAC,EAAQ,CAAE,IAC1C,CACH,MAAMC,KAAa,UAAe,CAAC,EAC7BC,KAAe,UAAO,EAAK,KAEjC,aAAU,IAAM,CAKd,GAJI,CAACN,GAAW,SAIZ,OAAO,qBAAyB,IAClC,OAGF,MAAMO,EAAUP,EAAU,QACpBQ,EAAU,CACd,KAAM,KACN,WAAY,MACZ,UAAWL,CACb,EACMM,EAAW,IAAI,qBAAqBC,GAAW,CACnDA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAAkBpB,EAAiBoB,EAAM,MAAM,EAAG,CAC1D,GAAIP,EAAO,CAET,GADA,OAAO,aAAaC,EAAW,OAAO,EAClCC,EAAa,QAAS,OAC1BD,EAAW,QAAU,OAAO,WAAW,IAAM,CAC3CJ,EAAS,EACTK,EAAa,QAAU,EACzB,EAAGF,CAAK,CACV,MACEH,EAAS,EACTK,EAAa,QAAU,GAGrBJ,GAAQI,EAAa,SACvBG,EAAS,WAAW,CAExB,MACMJ,EAAW,SACb,OAAO,aAAaA,EAAW,OAAO,CAG5C,CAAC,CACH,EAAGG,CAAO,EACV,OAAID,GACFE,EAAS,QAAQF,CAAO,EAEnB,IAAM,CACXE,EAAS,WAAW,EACpB,OAAO,aAAaJ,EAAW,OAAO,CACxC,CACF,EAAG,CAACH,EAAMC,EAAWC,EAAOJ,GAAW,OAAO,CAAC,CACjD",
|
|
6
|
+
"names": ["useIntersectionObserver_exports", "__export", "useIntersectionObserverDelay", "__toCommonJS", "import_react", "visibilityCache", "CACHE_DURATION", "isElementVisible", "element", "now", "cached", "el", "rect", "style", "computedStyle", "visible", "targetRef", "callback", "once", "threshold", "delay", "timeoutRef", "triggeredRef", "current", "options", "observer", "entries", "entry"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as z,jsx as i,jsxs as a}from"react/jsx-runtime";import L from"../Title/index.js";import{cn as o}from"../../helpers/utils.js";import k from"../../components/picture.js";import $ from"../../components/button.js";import M from"../SwiperBox/index.js";import{withLayout as B}from"../../shared/Styles.js";import E,{useState as I,useRef as f,useCallback as H,useImperativeHandle as _,useEffect as C}from"react";import{useExposure as N}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import D from"../../shared/throttle.js";import{Heading as R}from"../../components/heading.js";const r="image",s="scene_banner",S=({item:e,idx:t,itemShape:m,hoverIndex:x,getRef:p,handleSwiperItemClick:b,isAnimation:u,contentWidth:c,primaryButton:d,event:g,data:w,accordionRef:v})=>{const h=x===t,T=h?8:1;return N({current:v.current[t]},{componentType:r,componentName:s,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),a("div",{style:{flex:`${T} 1 0%`,transition:"all 0.6s"},ref:n=>{n&&p(t,n)},className:o("relative cursor-pointer overflow-hidden",m==="round"?"rounded-2xl":""),onMouseEnter:()=>b(t),onMouseLeave:()=>{u.current=!1},onClick:()=>{b(t)},children:[i("a",{href:y(e?.imgLink,`${r}_${s}`),"data-headless-type-name":`${r}#${s}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:i(k,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}),a("div",{style:{width:c},className:o("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",h&&c?"opacity-100":"opacity-0"),children:[a("div",{className:"mr-16 flex-1 overflow-hidden",children:[i(R,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),i(R,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),a($,{className:o("mb-1.5 font-bold"),as:"a",href:y(e?.link,`${r}_${s}`),"data-headless-type-name":`${r}#${s}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${d}`,onClick:()=>g?.primaryButton?.(w,t),children:[d,i("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},A=({data:e,configuration:t})=>{const m=f(null);return N(m,{componentType:r,componentName:s,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),a("div",{ref:m,className:o("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[i("a",{href:y(e?.imgLink,`${r}_${s}`),"data-headless-type-name":`${r}#${s}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-postion":`''#${t?.index+1}`,children:i(k,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}),a("div",{className:o("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[a("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[i("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),i("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),i($,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:o("text-info-primary text-sm font-bold"),href:y(e.link,`${r}_${s}`),"data-headless-type-name":`${r}#${s}`,"data-headless-nav-postion":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},j=E.forwardRef(({data:e,className:t="",event:m},x)=>{const[p,b]=I(0),u=f(0),c=f([]),d=f(!1),[g,w]=I(0),v=f(null);_(x,()=>v.current);const h=(n,l)=>{l&&(c.current[n]=l)};C(()=>{const n=()=>{c.current[u.current]&&w(c.current[u.current].offsetWidth)};n();const l=D(n,300);return window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)},[]);const T=H(n=>{p===n||d.current||(d.current=!0,b(n),u.current=n)},[e?.products,p]);return a(z,{children:[e?.title&&i(L,{data:{title:e?.title}}),i("div",{ref:v,className:o("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:i("div",{className:o("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",t),children:e?.products?.map((n,l)=>i(S,{item:n,idx:l,itemShape:e?.itemShape,hoverIndex:p,getRef:h,handleSwiperItemClick:T,isAnimation:d,contentWidth:g,primaryButton:e?.primaryButton,event:m,data:e,accordionRef:c},l))})}),i("div",{className:o("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:i(M,{className:o("h-[400px] !overflow-visible",t),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:m,title:e?.title}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var X=B(j);export{X as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a\n href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n </a>\n <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n\n <Button\n as=\"a\"\n variant=\"secondary\"\n aria-label={data?.title ?? data?.subTitle}\n className={cn('text-info-primary text-sm font-bold')}\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <a\n href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n </a>\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${data?.primaryButton}`}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n title: data?.title,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withLayout", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCardsPcItem = ({\n item,\n idx,\n itemShape,\n hoverIndex,\n getRef,\n handleSwiperItemClick,\n isAnimation,\n contentWidth,\n primaryButton,\n event,\n data,\n accordionRef,\n}: {\n item: ItemType\n idx: number\n itemShape: 'round' | 'square' | undefined\n hoverIndex: number | null\n getRef: (idx: number, el: HTMLDivElement) => void\n handleSwiperItemClick: (idx: number) => void\n isAnimation: any\n contentWidth: number\n primaryButton: string | undefined\n event: any\n data: AccordionCardsType['data']\n accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n\n useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n componentTitle: item?.title,\n position: idx + 1,\n componentDescription: item?.subTitle,\n })\n\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <a\n href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n </a>\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n </div>\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.subTitle,\n })\n \n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a\n href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n </a>\n <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n\n <Button\n as=\"a\"\n variant=\"secondary\"\n aria-label={data?.title ?? data?.subTitle}\n className={cn('text-info-primary text-sm font-bold')}\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => (\n <AccordionCardsPcItem\n key={idx}\n item={item}\n idx={idx}\n itemShape={data?.itemShape}\n hoverIndex={hoverIndex}\n getRef={getRef}\n handleSwiperItemClick={handleSwiperItemClick}\n isAnimation={isAnimation}\n contentWidth={contentWidth}\n primaryButton={data?.primaryButton}\n event={event}\n data={data}\n accordionRef={accordionRef}\n />\n ))}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n title: data?.title,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withLayout", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "throttle", "Heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "isAnimation", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "MobileItem", "configuration", "ref", "AccordionCards", "className", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as v}from"react/jsx-runtime";import{gaTrack as b}from"../../shared/track.js";import{createContext as y,useContext as l,useEffect as
|
|
1
|
+
import{jsx as v}from"react/jsx-runtime";import{gaTrack as b}from"../../shared/track.js";import{createContext as y,useContext as l,useEffect as f}from"react";const r=y({trackingData:{},locale:void 0,copyWriting:{}}),C=()=>{if(!l(r))throw new Error("useAiui must be used in <AiuiProvider>");return l(r)},g=({children:i,...s})=>(f(()=>{const c=(t,e)=>{const a={};if(!e||!e.attributes)return a;for(const h of Array.from(e.attributes)){const o=h?.name;o?.startsWith("data-headless-")&&(a[o]=e.getAttribute(o))}const m=a?.["data-headless-sku"],u=a?.["data-headless-type-name"]?.split?.("#"),n=a?.["data-headless-title-desc-button"]?.split?.("#"),p=a?.["data-headless-nav-postion"]?.split?.("#");b({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:s?.trackingData?.pageGroup||"Home Page",component_type:u?.[0]||"",component_name:u?.[1]||"",position:p?.[1]||"",navigation:p?.[0]||"",button_name:n?.[2]||"",SKU:m||"",component_title:n?.[0]||"",component_description:n?.[1]||""}})},d=new MutationObserver(()=>{document.querySelectorAll("[data-headless-type-name]").forEach(t=>{t.hasAttribute("data-headless-track-bound")||(t.addEventListener("click",e=>c(e,t)),t.setAttribute("data-headless-track-bound","true"))})});return d.observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll("[data-headless-type-name]").forEach(t=>{t.hasAttribute("data-headless-track-bound")||(t.addEventListener("click",e=>c(e,t)),t.setAttribute("data-headless-track-bound","true"))}),()=>d.disconnect()},[]),v(r.Provider,{value:s,children:i}));var _=g;export{r as AiuiContext,_ as default,C as useAiuiContext};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AiuiProvider/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n trackingData: Record<string, any>\n locale?: string\n copyWriting?: Record<string, string>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n useEffect(() => {\n const handleTrackClick = (e: any, el: any) => {\n e?.stopPropagation?.()\n const out: any = {}\n if (!el || !el.attributes) return out\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as any)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name)\n }\n }\n const sku = out?.['data-headless-sku']\n const nameType = out?.['data-headless-type-name']?.split?.('#')\n const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: rest?.trackingData?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n },\n })\n }\n const observer = new MutationObserver(() => {\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n }\n })\n })\n observer.observe(document.body, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n return () => observer.disconnect()\n }, [])\n\n return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
-
"mappings": "AA+ES,cAAAA,MAAA,oBA/ET,OAAS,WAAAC,MAAe,wBACxB,OAAgB,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,MAAiB,QAQrD,MAAMC,EAAcH,EAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYI,EAAiB,IAAM,CAElC,GAAI,CADYH,EAAWE,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOF,EAAWE,CAAW,CAC/B,EAEME,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,KAGEL,EAAU,IAAM,CACd,MAAMM,EAAmB,CAACC,EAAQC,IAAY,
|
|
4
|
+
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n trackingData: Record<string, any>\n locale?: string\n copyWriting?: Record<string, string>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n useEffect(() => {\n const handleTrackClick = (e: any, el: any) => {\n // e?.stopPropagation?.()\n const out: any = {}\n if (!el || !el.attributes) return out\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as any)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name)\n }\n }\n const sku = out?.['data-headless-sku']\n const nameType = out?.['data-headless-type-name']?.split?.('#')\n const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: rest?.trackingData?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n },\n })\n }\n const observer = new MutationObserver(() => {\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n }\n })\n })\n observer.observe(document.body, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n return () => observer.disconnect()\n }, [])\n\n return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
+
"mappings": "AA+ES,cAAAA,MAAA,oBA/ET,OAAS,WAAAC,MAAe,wBACxB,OAAgB,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,MAAiB,QAQrD,MAAMC,EAAcH,EAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYI,EAAiB,IAAM,CAElC,GAAI,CADYH,EAAWE,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOF,EAAWE,CAAW,CAC/B,EAEME,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,KAGEL,EAAU,IAAM,CACd,MAAMM,EAAmB,CAACC,EAAQC,IAAY,CAE5C,MAAMC,EAAW,CAAC,EAClB,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAAOC,EAClC,UAAWC,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAc,KACxBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,EAEpC,CACA,MAAMC,EAAMH,IAAM,mBAAmB,EAC/BI,EAAWJ,IAAM,yBAAyB,GAAG,QAAQ,GAAG,EACxDK,EAAYL,IAAM,iCAAiC,GAAG,QAAQ,GAAG,EACjEM,EAAcN,IAAM,2BAA2B,GAAG,QAAQ,GAAG,EACnEZ,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYQ,GAAM,cAAc,WAAa,YAC7C,eAAgBQ,IAAW,CAAC,GAAK,GACjC,eAAgBA,IAAW,CAAC,GAAK,GACjC,SAAUE,IAAc,CAAC,GAAK,GAC9B,WAAYA,IAAc,CAAC,GAAK,GAChC,YAAaD,IAAY,CAAC,GAAK,GAC/B,IAAKF,GAAO,GACZ,gBAAiBE,IAAY,CAAC,GAAK,GACnC,sBAAuBA,IAAY,CAAC,GAAK,EAC3C,CACF,CAAC,CACH,EACME,EAAW,IAAI,iBAAiB,IAAM,CAC1C,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAQ,EAAS,QAAQ,SAAS,KAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAElE,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EACM,IAAMQ,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,EAEEpB,EAACK,EAAY,SAAZ,CAAqB,MAAOI,EAAO,SAAAD,EAAS,GAGtD,IAAOa,EAAQd",
|
|
6
6
|
"names": ["jsx", "gaTrack", "createContext", "useContext", "useEffect", "AiuiContext", "useAiuiContext", "AiuiProvider", "children", "rest", "handleTrackClick", "e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "observer", "AiuiProvider_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const o=n.forwardRef(({data:e,Slide:s,id:a,pagination:w})=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,r)=>i(p,{className:"!h-[unset]",children:i(s,{data:t,configuration:{...e?.configuration,index:r}})},a+"SwiperSlide"+r))}));o.displayName="SwiperBox";var M=o;export{M as default};
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
-
"mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,IACtBb,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMG,EAAM,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{...data?.configuration, index: jIndex}} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,IACtBb,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMG,EAAM,cAAe,CAAC,GAAGJ,GAAM,cAAe,MAAOK,CAAM,EAAG,GAD3DH,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAOO,EAAQP",
|
|
6
6
|
"names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "item", "jIndex", "SwiperCategory_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as a,jsxs as d}from"react/jsx-runtime";import y,{useImperativeHandle as v,useRef as c}from"react";import{cn as n}from"../../helpers/utils.js";import g from"../../components/picture.js";import{withLayout as b}from"../../shared/Styles.js";import k from"../Title/index.js";import x from"./SwiperCategory.js";import{useExposure as f}from"../../hooks/useExposure.js";import{trackUrlRef as h}from"../../shared/trackUrlRef.js";import{Heading as w}from"../../components/heading.js";const l="image",s="category_banner",C=(e,o)=>{const t=[];for(let r=0;r<e.length;r+=o)t.push(e.slice(r,r+o));return t},N=({data:e,configuration:o})=>{const t=c(null);return f(t,{componentType:l,componentName:s,componentTitle:e?.name,position:o?.index+1}),d("div",{ref:t,className:n("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("div",{className:"transition-all duration-300 group-hover:scale-110",children:a("a",{"aria-label":e?.name,href:h(e?.link,`${l}_${s}`),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>o?.event?.primaryButton(e,o?.index),children:a(g,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),a(w,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]})},I=({data:e,configuration:o,index:t,totalCount:r})=>{const m=c(null);f(m,{componentType:l,componentName:s,componentTitle:e?.name,position:o?.index+1});const i=r<6,p=t===0;return d("div",{ref:m,className:n("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",i?n("p-4",p?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("a",{href:h(e?.link,`${l}_${s}`),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${o?.index+1}`,onClick:()=>o?.event?.primaryButton(e,o?.index+1),children:a(g,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:n("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",i?n(p?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),a("p",{className:n("text-info-primary text-center text-sm font-bold",i?"line-clamp-2":"flex-1 truncate"),children:e?.name})]})},$=({data:e,configuration:o})=>a("div",{className:"grid grid-cols-2 gap-3",children:e?.map((t,r)=>a(I,{index:r,data:t,configuration:o,totalCount:e?.length},r))}),D=y.forwardRef((e,o)=>{const{data:t,className:r="",key:m,event:i}=e,p=t?.isShowSelect?t?.products:t?.productData,u=c(null);return v(o,()=>u.current),d("div",{ref:u,className:n("w-full overflow-hidden",r,{"aiui-dark":t?.theme==="dark"}),children:[t?.title&&a(k,{data:{title:t?.title},className:"text-4xl"}),a("div",{className:"tablet:block hidden",children:a(x,{id:`Category${m}`,Slide:N,data:{list:p,configuration:{shape:t?.shape,event:i,title:t?.title}}})}),a("div",{className:"tablet:hidden block",children:a(x,{id:`Category1${m}`,Slide:$,data:{list:C(p,6),configuration:{shape:t?.shape,event:i,title:t?.title}}})}),a("div",{className:"h-7"})]})});var R=b(D);export{R as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "Heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({ \n data, \n configuration, \n index, \n totalCount \n}: { \n data: CategoryItem\n configuration?: any\n index: number\n totalCount: number\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCount < 6\n const isFirstItem = index === 0\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer duration-300',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n isFirstItemLarger \n ? cn(\n 'p-4',\n isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]'\n )\n : 'max-h-[126px] px-3 py-4',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n >\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'm-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n isFirstItemLarger\n ? cn(\n isFirstItem ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )\n : 'size-[72px]'\n )}\n />\n </a>\n <p className={cn(\n 'text-info-primary text-center text-sm font-bold',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n isFirstItemLarger ? 'line-clamp-2' : 'flex-1 truncate'\n )}>\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => (\n <SingleMobileItem \n key={index} \n index={index} \n data={item} \n configuration={configuration}\n totalCount={data?.length}\n />\n ))}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event, title: data?.title } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event, title: data?.title } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withLayout(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "Heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "ref", "SingleMobileItem", "index", "totalCount", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "props", "className", "key", "event", "currentData", "innerRef", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import x,{useImperativeHandle as w,useRef as v}from"react";import h from"../Title/index.js";import{cn as l}from"../../helpers/utils.js";import b from"../../components/picture.js";import g from"../SwiperBox/index.js";import{withLayout as k}from"../../shared/Styles.js";import{Avatar as N,AvatarImage as y,AvatarFallback as C}from"../../components/avatar.js";import{Container as L}from"../../components/container.js";import{Text as T}from"../../components/text.js";import{useExposure as E}from"../../hooks/useExposure.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";const p="copy",d="product_review",M=({data:e,configuration:r})=>{const o=v(null),m=s=>s?Array.from(new Array(Number(s)))||[]:[];return E(o,{componentType:p,componentName:d,componentTitle:e?.title,componentDescription:e?.description,position:r?.index+1}),t("div",{ref:o,className:l("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:i("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[i("div",{className:l("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[i("div",{className:"flex-1",children:[e?.title?t("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,t("div",{className:"mt-1 flex items-center",children:m(e?.rating)?.map?.((s,a)=>t("div",{className:"mr-1",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},a))})]}),t("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?i(N,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[t(y,{src:e?.avatar?.url}),t(C,{children:e?.title})]}):null})]}),t("div",{className:"flex-1",children:t(T,{className:l("desktop:max-h-[151px] tablet:max-h-[140px]","lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:e?.description||""})}),t("a",{href:P(e?.link,`${p}_${d}`),onClick:()=>{r?.event?.primaryButton(e,r?.index+1)},"data-headless-type-name":`${p}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description||e?.subTitle}`,"data-headless-nav-postion":`''#${r?.index+1}`,children:i("div",{className:l("mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[t("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:t(b,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),t("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},B=x.forwardRef(({className:e="",data:r,key:o,...m},s)=>{const{products:a,title:n,theme:f,...u}=r,c=v(null);return w(s,()=>c.current),t("div",{className:e,ref:c,children:t("div",{className:"evaluate-box relative z-10",children:t(L,{...r?.containerProps||{},className:"overflow-hidden",children:i("div",{ref:s,className:l("w-full",e,{"aiui-dark":f==="dark"}),children:[n&&t(h,{data:{title:n}}),t(g,{className:"!overflow-visible",id:"Evaluate"+o,data:{list:a,configuration:{...u,title:n}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var S=k(B);export{S as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: Img\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px]'\n )}\n >\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n {data?.avatar?.url ? (\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n ) : null}\n </div>\n </div>\n <div className=\"flex-1\">\n <Text\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n )}\n >\n {data?.description || ''}\n </Text>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index + 1)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description || data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <div\n className={cn(\n 'mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} alt={data?.img?.alt || ''} />\n </div>\n <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n {data?.subTitle || ''}\n </p>\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "withLayout", "Avatar", "AvatarImage", "AvatarFallback", "Container", "Text", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "rest", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: Img\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px]'\n )}\n >\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n {data?.avatar?.url ? (\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n ) : null}\n </div>\n </div>\n <div className=\"flex-1\">\n <Text\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n )}\n >\n {data?.description || ''}\n </Text>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index + 1)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description || data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <div\n className={cn(\n 'mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} alt={data?.img?.alt || ''} />\n </div>\n <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n {data?.subTitle || ''}\n </p>\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"evaluate-box relative z-10\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter, title: title } }}\n Slide={EvaluateItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withLayout(Evaluate)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "withLayout", "Avatar", "AvatarImage", "AvatarFallback", "Container", "Text", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "ref", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "rest", "products", "title", "theme", "ohter", "innerRef", "Evaluate_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useMediaQuery as G}from"react-responsive";import B,{useEffect as D,useImperativeHandle as E,useRef as w,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as U,Heading as z,Picture as f,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as q}from"../VideoModal/index.js";import{TextModal as Y}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";const n="image",p="graphic",_=({data:e,configuration:o})=>{const d=w(null),u=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return y(d,{componentType:n,componentName:p,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1}),t("div",{ref:d,className:m(u(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:m("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:a("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:k(e?.href||"",`${n}_${p}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):t("div",{className:"block size-full cursor-pointer overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),a("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[a("div",{className:m("flex items-end overflow-hidden","graphic-bottom"),children:[a("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:l=>{l.preventDefault(),l.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:l=>{l.preventDefault(),l.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:k(e?.href,`${n}_${p}`),"data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},T=B.forwardRef(({data:e,className:o},d)=>{const u=G({query:"(max-width: 768px)"}),l=w(null),[N,b]=r(!1),[g,M]=r(""),[I,V]=r(""),[C,P]=r(""),[$,x]=r(null),[S,v]=r(!1),h=i=>{const s=e?.items?.length>3,c=e?.items?.length>2;switch(i){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||c?2.3:2;default:return 1.2}};return E(d,()=>l.current),y(l,{componentType:n,componentName:p,componentTitle:e?.title}),D(()=>{const i=l.current?.querySelectorAll(".graphic-description");if(i&&i.length>0){let s=0;i.forEach(c=>{s=Math.max(s,c.offsetHeight)}),i.forEach(c=>{c.style.height=`${s}px`})}},[]),a("div",{className:m("graphicBlock",o),ref:l,children:[a("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(L,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(i,s)=>{b(!0),s?.isYouTube?V?.(s?.youtubeId||""):(M?.(s?.video?.url||""),P?.(s?.mobileVideo?.url||""))},onIconClick:i=>{v(!0),x(i)},title:e?.title}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h()},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:h(1440)}}})]}),t(q,{visible:N,youTubeId:I,onCloseModal:()=>b(!1),videoUrl:u&&C||g}),t(Y,{textVisible:S,extension:$?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});T.displayName="Graphic";var se=H(T);export{se as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|